/* Tablero 3D de cómic: lienzo, fondo de trama, onomatopeyas, cartelas, destellos, coronación y duelo. */
.t3d {
  position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .10) 0, rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle, rgba(255, 255, 255, .07) 1.5px, transparent 1.7px) 0 0 / 11px 11px,
    repeating-conic-gradient(from 0deg at 50% 52%, rgba(255, 255, 255, .035) 0deg 7deg, transparent 7deg 14deg),
    linear-gradient(180deg, #24306a 0%, #1a1f45 60%, #141633 100%);
  transition: background .25s;
}
.t3d-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.t3d-lienzo:active { cursor: grabbing; }
.t3d-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }

/* Durante una pelea el fondo se vuelve una explosión de cómic */
.t3d.t3d-accion {
  background:
    radial-gradient(circle, rgba(140, 30, 10, .30) 2.2px, transparent 2.5px) 0 0 / 12px 12px,
    repeating-conic-gradient(from 0deg at 50% 50%, #ffcc33 0deg 6deg, #ff9f1c 6deg 12deg),
    #ffb627;
}
.t3d.t3d-accion::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border: 10px solid #15110e; box-shadow: inset 0 0 0 4px #fff8e8; animation: t3d-vineta .25s ease-out;
}
@keyframes t3d-vineta { from { transform: scale(1.06) rotate(-1.2deg); opacity: 0; } to { transform: none; opacity: 1; } }

.t3d-onoma {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--giro)) scale(var(--tam)); width: 0; height: 0;
  animation: t3d-onoma 1.25s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.t3d-onoma svg { position: absolute; left: -125px; top: -125px; width: 250px; height: 250px; overflow: visible; }
.t3d-onoma polygon { fill: #ffffff; stroke: #15110e; stroke-width: 4; stroke-linejoin: round; }
.t3d-onoma span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) skew(-6deg); white-space: nowrap;
  font: 400 64px/1 Bangers, Impact, sans-serif; letter-spacing: .03em; color: var(--relleno, #ffd23f);
  -webkit-text-stroke: 3px #15110e; paint-order: stroke fill; text-shadow: 5px 5px 0 #15110e;
}
@keyframes t3d-onoma {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--giro)) scale(calc(var(--tam) * .2)); }
  18% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--giro)) scale(calc(var(--tam) * 1.15)); }
  30% { transform: translate(-50%, -50%) rotate(var(--giro)) scale(var(--tam)); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) rotate(var(--giro)) scale(calc(var(--tam) * 1.05)); }
}
.t3d-cartela {
  position: absolute; left: 50%; top: max(96px, 12%); max-width: min(560px, 80%); z-index: 4; translate: -50% 0;
  background: #ffd23f; color: #15110e; border: 3px solid #15110e; box-shadow: 5px 5px 0 #15110e;
  padding: 8px 14px; font: 700 17px/1.25 'Comic Neue', 'Comic Sans MS', sans-serif; text-transform: uppercase; letter-spacing: .02em;
  transform: rotate(-1.5deg); animation: t3d-cartela .3s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes t3d-cartela { from { transform: translateX(-30px) rotate(-6deg); opacity: 0; } }
.t3d-destello { position: absolute; inset: 0; background: #fff; animation: t3d-destello .16s ease-out forwards; }
@keyframes t3d-destello { from { opacity: .85; } to { opacity: 0; } }

.t3d-coronar { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(20, 16, 30, .45); }
.t3d-coronar-caja {
  background: #fff8e8; border: 4px solid #15110e; box-shadow: 8px 8px 0 #15110e; padding: 14px 18px; text-align: center;
  transform: rotate(-1deg); animation: t3d-cartela .25s cubic-bezier(.2, 1.5, .4, 1);
}
.t3d-coronar-caja b { display: block; font: 400 38px/1 Bangers, Impact, sans-serif; color: #ef4136; -webkit-text-stroke: 1.5px #15110e; margin-bottom: 8px; }
.t3d-coronar-caja div { display: flex; gap: 8px; }
.t3d-coronar-caja button { width: 72px; height: 72px; border: 3px solid #15110e; background: #ffd23f; box-shadow: 4px 4px 0 #15110e; cursor: pointer; padding: 6px; }
.t3d-coronar-caja button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #15110e; }
.t3d-coronar-caja img { width: 100%; height: 100%; }

/* ——— Duelo ——— */
.duelo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle, rgba(20, 16, 30, .25) 2px, transparent 2.3px) 0 0 / 10px 10px, rgba(20, 16, 30, .62);
  animation: duelo-entra .2s ease-out; }
@keyframes duelo-entra { from { opacity: 0; } }
.duelo-panel {
  position: relative; width: min(560px, 100%); background: #fff8e8; color: #15110e; border: 5px solid #15110e; box-shadow: 10px 10px 0 #15110e;
  padding: 18px 20px 20px; transform: rotate(-.8deg); animation: duelo-panel .35s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes duelo-panel { from { transform: scale(.6) rotate(-8deg); } }
.duelo-titulo {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap;
  font: 400 62px/1 Bangers, Impact, sans-serif; color: #ef4136; -webkit-text-stroke: 3px #15110e; paint-order: stroke fill; text-shadow: 5px 5px 0 #15110e; letter-spacing: .04em;
}
.duelo.gana .duelo-titulo { color: #4cc26b; }
.duelo.pierde .duelo-titulo { color: #8f8aa3; }
.duelo-rivales { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 26px; }
.duelo-lado { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font: 800 15px/1.2 Nunito, sans-serif; }
.duelo-lado img { width: 84px; height: 84px; background: #ffd23f; border: 3px solid #15110e; border-radius: 50%; padding: 8px; box-shadow: 4px 4px 0 #15110e; }
.duelo-lado:last-child img { background: #5b9bd5; }
.duelo-vs { font: 400 44px/1 Bangers, Impact, sans-serif; color: #fff; -webkit-text-stroke: 2px #15110e; paint-order: stroke fill; text-shadow: 3px 3px 0 #15110e; }
.duelo-asaltos { display: flex; justify-content: center; gap: 10px; margin: 14px 0 10px; }
.duelo-asaltos i { width: 20px; height: 20px; border: 3px solid #15110e; border-radius: 50%; background: #fff; }
.duelo-asaltos i.si { background: #4cc26b; }
.duelo-asaltos i.no { background: #ef4136; }
.duelo-barra { position: relative; height: 42px; border: 4px solid #15110e; background: repeating-linear-gradient(-45deg, #e9dcc0 0 8px, #f4ead4 8px 16px); box-shadow: 4px 4px 0 #15110e; cursor: pointer; }
.duelo-zona { position: absolute; top: 0; bottom: 0; background: #ffd23f; border-left: 3px solid #15110e; border-right: 3px solid #15110e; transition: left .25s, width .25s; }
.duelo-aguja { position: absolute; top: -10px; bottom: -10px; width: 8px; margin-left: -4px; background: #ef4136; border: 3px solid #15110e; }
.duelo-ayuda { text-align: center; font: 700 14px/1.4 Nunito, sans-serif; margin: 14px 0 0; color: #4a4258; }
.duelo-ayuda kbd { font: 800 12px Nunito, sans-serif; border: 2px solid #15110e; border-radius: 4px; padding: 0 5px; background: #fff; }
.duelo-golpe { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) scale(0); pointer-events: none;
  font: 400 76px/1 Bangers, Impact, sans-serif; -webkit-text-stroke: 3px #15110e; paint-order: stroke fill; text-shadow: 5px 5px 0 #15110e; }
.duelo-golpe.si { color: #ffd23f; animation: duelo-golpe .6s cubic-bezier(.2, 1.8, .4, 1) forwards; }
.duelo-golpe.no { color: #b9b3c9; animation: duelo-golpe .6s cubic-bezier(.2, 1.8, .4, 1) forwards; }
@keyframes duelo-golpe { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-10deg); } 40% { transform: translate(-50%, -50%) scale(1.1) rotate(4deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 0; } }
.t3d-insignia { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; pointer-events: none; z-index: 4; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .45)); }
.t3d-insignia svg { width: 100%; height: 100%; overflow: visible; }