/* duelo-fin-v2.css — Fin de partida del Duelo de Titanes como ESCENA (5-sep-2026; aprobado por Nico sobre
   games/dev-duelo-fin-v2.html). Se carga DESPUÉS del CSS del juego y solo cambia la capa visual: la lógica
   (duelo-titanes.js, duelo/endgame.js), el bookkeeping y los botones reales (#finB1-#finB4) siguen iguales.
   La escena es la arena vacía (assets/duelo/fin-v2/arena-{victoria,derrota}.webp) con el rival recortado
   apoyado en la plataforma; el rótulo (VICTORIA/DERROTA) es un objeto 3D; el marcador son las dos ruletas con
   sus porciones; cifras, textos y botones en DOM. Posiciones y escala las fija games/duelo/escena-fin.js
   por fracciones de la imagen (1080×1906). Capa de game feel: js/escena-fx.js. */

#dfin { display: none; --void: #060608; --gold: #d4a843; --gold-2: #f3d27a; --gold-deep: #8a5f10; --blue: #3B82F6; --blue-2: #7cc4ff; --red: #e2574a; --red-2: #ff8a7a;
  --green: #2D8B4E; --green-2: #4ade80; --bone: #f2f0ea; --muted: #b7b2c2; --fd: 'Syne', system-ui, sans-serif; --fb: 'DM Sans', system-ui, sans-serif;
  --out: cubic-bezier(.2,.8,.2,1); --back: cubic-bezier(.34,1.56,.64,1); --drop: cubic-bezier(.22,1.4,.36,1); }
/* la raíz no crea contexto de apilamiento: sus capas (fijas) conviven con los canvas de escena-fx.js a nivel de body */
body.dfin-on #dfin { display: contents; }
body.dfin-on { overflow: hidden; }
body.dfin-on .duel-shell { visibility: hidden; }
/* el póster antiguo (imagen con los botones dibujados) queda fuera en cuanto la escena está lista; los .fin-hit siguen recibiendo los clics delegados */
body.dfin-ready #endBoard.fin .fin-stage { visibility: hidden; position: absolute; }
/* canvas y viñeta de escena-fx.js: solo con la escena abierta, y solo el juego de partículas del estado actual */
.fx-canvas, .fx-vignette { display: none; }
body.dfin-on .fx-vignette { display: block; }
body.dfin-on[data-dfin="victoria"] .fx-canvas[data-fxtheme="victoria"], body.dfin-on[data-dfin="derrota"] .fx-canvas[data-fxtheme="derrota"] { display: block; }
#dfin *, #dfin *::before, #dfin *::after { box-sizing: border-box; }

/* ═══ ESCENA ═══ */
#dfin .escena { position: fixed; inset: 0; z-index: 0; background: #0a0a10 center bottom / auto 118% no-repeat; transform: scale(1.06); animation: dfCamIn 1.1s var(--out) forwards; }
#dfin[data-estado="victoria"] .escena { background-image: url(../assets/duelo/fin-v2/arena-victoria.webp); }
#dfin[data-estado="derrota"] .escena { background-image: url(../assets/duelo/fin-v2/arena-derrota.webp); }
#dfin .rival-capa { position: fixed; left: 50%; bottom: 400px; z-index: 1; width: 200px; transform: translateX(-50%) scale(1.12); transform-origin: 50% 100%; opacity: 0;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.7)); animation: dfRivalIn .7s .55s var(--out) forwards; pointer-events: none; }
#dfin[data-big="3"] .titulo { height: 150px; } #dfin[data-big="3"] .titulo img { width: min(84%, 340px); }
#dfin[data-big="3"] .rival-capa { -webkit-mask: linear-gradient(180deg, #000 58%, transparent 90%); mask: linear-gradient(180deg, #000 58%, transparent 90%); }
@keyframes dfRivalIn { to { opacity: 1; transform: translateX(-50%) scale(1); } }
#dfin .rival-sombra { position: fixed; left: 50%; bottom: 346px; z-index: 1; width: 190px; height: 26px; margin-left: -95px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.7), transparent 70%); opacity: 0; animation: dfIn .6s .7s forwards; pointer-events: none; }
@keyframes dfCamIn { to { transform: scale(1); } }
#dfin .velo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,6,8,.30) 0%, rgba(6,6,8,0) 22%, rgba(6,6,8,0) 52%, rgba(6,6,8,.55) 68%, rgba(6,6,8,.92) 100%); }
#dfin .flash { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: #fff; opacity: 0; animation: dfFlash .5s ease-out forwards; }
@keyframes dfFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
#dfin .tinte { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; animation: dfIn .8s .2s forwards; }
#dfin[data-estado="victoria"] .tinte { background: radial-gradient(70% 45% at 50% 20%, rgba(212,168,67,.22), transparent 70%); }
#dfin[data-estado="derrota"] .tinte { background: radial-gradient(70% 45% at 50% 20%, rgba(226,87,74,.30), transparent 70%); }

/* ═══ CAPA UI (fija, encima de los canvas de partículas de ambiente; el canvas de ráfagas va por encima) ═══ */
#dfin .ui { position: fixed; left: 0; top: 0; width: 100%; height: 100dvh; z-index: 2; zoom: var(--k, 1); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px calc(env(safe-area-inset-bottom, 0px) + 10px); color: var(--bone); font-family: var(--fb); -webkit-tap-highlight-color: transparent; }
#dfin .ui-in { width: 100%; max-width: 460px; margin: 0 auto; flex: 1 0 auto; display: flex; flex-direction: column; min-height: 100%; }
#dfin .cab { display: flex; justify-content: center; opacity: 0; animation: dfIn .5s .1s forwards; }
#dfin .chip-cab { font: 800 10px/1 var(--fb); letter-spacing: .2em; text-transform: uppercase; color: #e9e3d2; padding: 7px 12px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(180deg, rgba(30,28,36,.9), rgba(10,9,14,.9)); border: 1px solid rgba(212,168,67,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.5); }
#dfin .chip-cab b { color: var(--gold-2); }

/* título-objeto */
#dfin .titulo { position: relative; height: clamp(100px, 19vh, 168px); flex: none; display: flex; align-items: center; justify-content: center; margin: 2px 0 0; pointer-events: none; }
#dfin .titulo img { width: min(96%, 400px); max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); opacity: 0; transform: translateY(-140px) scale(.7); animation: dfDrop .7s .35s var(--drop) forwards; }
#dfin[data-estado="derrota"] .titulo img { width: min(92%, 380px); }
#dfin[data-estado="victoria"] .titulo img { width: min(94%, 380px); }
@keyframes dfDrop { 0% { opacity: 0; transform: translateY(-140px) scale(.7); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
#dfin .titulo .rayos { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(243,210,122,.18) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 35%, transparent 62%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 35%, transparent 62%);
  animation: dfIn .8s .6s forwards, dfGira 24s linear infinite; }
#dfin[data-estado="derrota"] .titulo .rayos { background: repeating-conic-gradient(from 0deg, rgba(226,87,74,.16) 0 6deg, transparent 6deg 18deg); }
@keyframes dfGira { to { transform: rotate(360deg); } }
#dfin .sub { text-align: center; font: 700 13px/1.3 var(--fb); color: #efe9d8; text-shadow: 0 2px 8px rgba(0,0,0,.8); margin: -6px 0 0; opacity: 0; animation: dfIn .5s .95s forwards; }
#dfin .sub:empty { display: none; }

/* hueco del rival (la escena) */
#dfin .rival { flex: 1 1 auto; min-height: 120px; }

/* ═══ MARCADOR (losa de cristal con bisel de oro sobre el suelo) ═══ */
#dfin .losa { position: relative; flex: none; padding: 10px 12px 9px; background: linear-gradient(180deg, rgba(28,25,36,.78), rgba(9,8,13,.9));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  opacity: 0; transform: translateY(60px); animation: dfUp .6s 1.0s var(--out) forwards; }
#dfin .losa::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(243,210,122,.95), rgba(212,168,67,.35) 30%, rgba(138,95,16,.6) 60%, rgba(243,210,122,.9));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px,
    0 14px, 1.5px 14.6px, 1.5px calc(100% - 14.6px), 14.6px calc(100% - 1.5px), calc(100% - 14.6px) calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - 14.6px), calc(100% - 1.5px) 14.6px, calc(100% - 14.6px) 1.5px, 14.6px 1.5px, 1.5px 14.6px, 0 14px); }
#dfin .losa::after { content: ""; position: absolute; inset: 2px; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -10px 24px rgba(0,0,0,.35); }
#dfin .losa-sombra { position: relative; height: 0; flex: none; }
#dfin .losa-sombra::before { content: ""; position: absolute; left: 8%; right: 8%; top: -4px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(212,168,67,.35), rgba(0,0,0,0) 70%); filter: blur(6px); opacity: 0; animation: dfIn .6s 1.2s forwards; }
@keyframes dfUp { to { opacity: 1; transform: none; } }
#dfin .marc { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 4px; align-items: center; }
#dfin .lado { display: flex; align-items: center; gap: 6px; min-width: 0; }
#dfin .lado > div { min-width: 0; }
#dfin .cinta.largo { font-size: 8.5px; letter-spacing: .02em; padding: 6px 6px 5px; }
#dfin .lado.tu { flex-direction: row; }
#dfin .lado.rv { flex-direction: row-reverse; text-align: right; }
#dfin .rul { position: relative; width: 54px; height: 54px; flex: none; border-radius: 50%; background: url(../assets/duelo/ruleta-plato.webp) center / cover; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.6); opacity: 0; transform: scale(.6); animation: dfPop .45s var(--back) forwards; }
#dfin .lado.tu .rul { animation-delay: 1.35s; } #dfin .lado.rv .rul { animation-delay: 1.45s; }
#dfin .rul i { position: absolute; inset: 0; border-radius: 50%; background: rgba(3,3,6,.86); transition: opacity .16s ease-out;
  -webkit-mask: conic-gradient(from calc(var(--a) - 22.5deg), #000 0 45deg, transparent 45deg); mask: conic-gradient(from calc(var(--a) - 22.5deg), #000 0 45deg, transparent 45deg); }
#dfin .rul i.on { opacity: 0; }
#dfin .rul::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 2px transparent; transition: box-shadow .3s; }
#dfin .rul.tu-c::after { box-shadow: 0 0 0 2px rgba(59,130,246,.7), 0 0 14px rgba(59,130,246,.5); }
#dfin .rul.rv-c::after { box-shadow: 0 0 0 2px rgba(226,87,74,.7), 0 0 14px rgba(226,87,74,.5); }
#dfin .rul.full::after { box-shadow: 0 0 0 2px var(--gold-2), 0 0 18px rgba(243,210,122,.8); }
#dfin .cinta { position: relative; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; font: 800 10.5px/1 var(--fd); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px 5px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%); opacity: 0; transform: translateX(-30px); animation: dfCinta .5s var(--out) forwards; }
#dfin .lado.rv .cinta { transform: translateX(30px); }
#dfin .lado.tu .cinta { animation-delay: 1.25s; } #dfin .lado.rv .cinta { animation-delay: 1.35s; }
@keyframes dfCinta { to { opacity: 1; transform: none; } }
#dfin .cinta.az { background: linear-gradient(180deg, #7cc4ff, #3B82F6 55%, #1d4fb0); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.5); }
#dfin .cinta.ro { background: linear-gradient(180deg, #ff8a7a, #e2574a 55%, #9c2a1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.5); }
#dfin .num { display: block; font: 900 32px/1 var(--fd); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 6px; text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 18px rgba(0,0,0,.6); }
#dfin .lado.tu .num { color: var(--blue-2); } #dfin .lado.rv .num { color: var(--red-2); }
#dfin .num small { font: 800 10px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-left: 5px; vertical-align: middle; }
#dfin .vs-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#dfin .vs-col small { font: 800 8px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: 0; animation: dfIn .4s 1.6s forwards; }
#dfin .vs { font: 900 13px/1 var(--fd); color: var(--gold-2); letter-spacing: .1em; padding: 6px 7px; border: 1px solid rgba(212,168,67,.55); background: rgba(0,0,0,.5); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); opacity: 0; animation: dfPop .4s 1.5s var(--back) forwards; }
#dfin .fila-datos { display: flex; gap: 6px; margin-top: 9px; }
#dfin .dato { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); opacity: 0; transform: translateY(12px) scale(.9); animation: dfPop .4s var(--back) forwards; }
#dfin .dato:nth-child(1) { animation-delay: 2.55s; } #dfin .dato:nth-child(2) { animation-delay: 2.7s; } #dfin .dato:nth-child(3) { animation-delay: 2.85s; }
#dfin .dato b { font: 900 17px/1 var(--fd); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#dfin .dato span { font: 700 9px/1.1 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dfin .dato.ok b { color: var(--green-2); } #dfin .dato.str b { color: #ffb050; } #dfin .dato.t b { color: #8fe3ff; }
@keyframes dfPop { to { opacity: 1; transform: none; } }

/* ═══ RECOMPENSA ═══ */
#dfin .premio { position: relative; flex: none; display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; margin-top: 12px; padding: 6px 12px 6px 4px;
  background: linear-gradient(180deg, rgba(60,44,10,.55), rgba(20,14,4,.75)); border: 1px solid rgba(212,168,67,.5); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(30px); animation: dfUp .55s 3.2s var(--out) forwards; }
#dfin[data-estado="derrota"] .premio { background: linear-gradient(180deg, rgba(40,30,30,.55), rgba(14,10,10,.78)); border-color: rgba(212,168,67,.3); }
#dfin .cofre { position: relative; width: 64px; height: 64px; margin: -14px 0 -10px; }
#dfin .cofre img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)); opacity: 0; transform: scale(.4) translateY(10px); animation: dfPop .55s 3.35s var(--back) forwards; }
#dfin .xp { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#dfin .xp-linea { display: flex; justify-content: space-between; align-items: baseline; font: 800 11px/1 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#dfin .xp-linea b { font: 900 15px/1 var(--fd); color: var(--gold-2); letter-spacing: 0; font-variant-numeric: tabular-nums; }
#dfin .barra { height: 8px; border-radius: 999px; background: rgba(0,0,0,.6); box-shadow: inset 0 1px 2px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
#dfin .barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c8952c, #f3d27a 60%, #fff3c4); box-shadow: 0 0 10px rgba(243,210,122,.7); transform-origin: left; transform: scaleX(var(--de, 0)); transition: transform 1.1s 3.6s cubic-bezier(.2,.8,.2,1); }
#dfin .barra.va i { transform: scaleX(var(--a)); }
#dfin .mon { text-align: center; padding: 4px 8px; border-left: 1px solid rgba(212,168,67,.25); }
#dfin .mon b { display: block; font: 900 18px/1 var(--fd); color: var(--gold-2); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(243,210,122,.5); }
#dfin .mon span { font: 700 9px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ═══ BOTONES (delegan en los .fin-hit reales del juego) ═══ */
#dfin .btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; flex: none; opacity: 0; transform: translateY(40px); animation: dfUp .5s 4.0s var(--out) forwards; }
#dfin .df-btn { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin: 0; border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
  font: 900 15px/1 var(--fd); letter-spacing: .06em; text-transform: uppercase; color: #1a1005; background: none; box-shadow: none;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); transition: transform 90ms var(--out); }
#dfin .df-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg); }
#dfin .df-btn::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.28); }
#dfin .df-btn > * { position: relative; z-index: 1; }
#dfin .df-btn:active { transform: translateY(3px); }
#dfin .df-btn.oro { --bg: linear-gradient(180deg, #fff0c0, #f3d27a 30%, #d4a843 60%, #a5771c); }
#dfin .df-btn.wa { --bg: linear-gradient(180deg, #8ff7b8, #34e57b 30%, #25D366 60%, #128a43); color: #04210f; }
#dfin .df-btn.gris { --bg: linear-gradient(180deg, #3a3646, #221f2a 45%, #131118); color: var(--bone); min-height: 44px; font-size: 13px; }
#dfin .df-btn.gris::after { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(212,168,67,.25); }
#dfin .df-marco { position: relative; padding: 2px; clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
  background: linear-gradient(135deg, #fff3c4, #8a5f10 40%, #f3d27a 70%, #5a3d08); filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
#dfin .df-marco.wa { background: linear-gradient(135deg, #c9ffe0, #0b5a2a 40%, #7cf2ad 70%, #083d1d); }
#dfin .df-marco.gris { background: linear-gradient(135deg, rgba(212,168,67,.7), rgba(60,52,30,.6) 45%, rgba(212,168,67,.5)); }
#dfin .df-btn svg { width: 18px; height: 18px; flex: none; }
#dfin .df-link { display: block; width: 100%; text-align: center; margin-top: 6px; border: 0; background: none; cursor: pointer; font: 700 12px/1 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: #cfc8b8; text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,.8); padding: 6px; }
#dfin .df-link:hover { color: #fff; }

/* ═══ COMÚN ═══ */
@keyframes dfIn { to { opacity: 1; } }
#dfin.skip * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
#dfin.skip .titulo .rayos { animation: dfGira 24s linear infinite !important; opacity: 1; }
@media (prefers-reduced-motion: reduce) { #dfin * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } #dfin .escena { transform: none; } }
@media (max-height: 760px) { #dfin .num { font-size: 28px; } #dfin .premio { margin-top: 8px; } #dfin .btns { margin-top: 8px; } #dfin .df-btn { min-height: 46px; } }
/* móviles bajos (360×640, iPhone SE en horizontal de contenido): antes el enlace
   "Volver al menú" caía ~20 px por debajo del corte y no había ni un indicio de
   que hubiera scroll. Se aprieta todo lo accesorio hasta que entra entero. */
@media (max-height: 680px) {
  #dfin .rival { min-height: 64px; }
  #dfin .num { font-size: 24px; } #dfin .rul { width: 46px; height: 46px; }
  #dfin .fila-datos { margin-top: 6px; } #dfin .dato b { font-size: 15px; }
  #dfin .premio { margin-top: 6px; } #dfin .cofre { width: 54px; height: 54px; margin: -10px 0 -8px; }
  #dfin .premio { grid-template-columns: 54px 1fr auto; }
  #dfin .btns { margin-top: 6px; gap: 6px; }
  #dfin .df-btn { min-height: 42px; font-size: 13.5px; }
  #dfin .df-btn.gris { min-height: 38px; font-size: 12px; }
  #dfin .df-link { margin-top: 2px; padding: 3px; }
}
/* móviles estrechos (360): cintas y "porciones" más prietas para que el nombre no se corte */
@media (max-width: 370px) { #dfin .dato span { letter-spacing: .03em; font-size: 8.5px; } #dfin .dato b { font-size: 15px; } #dfin .dato { gap: 4px; padding: 6px 3px; } #dfin .fila-datos { gap: 4px; } body.dfin-reto #retoPanel .reto-wa { font-size: 12px; letter-spacing: .02em; } #dfin .cinta { padding: 6px 6px 5px; letter-spacing: .04em; } #dfin .cinta.largo { font-size: 8px; padding: 6px 5px 5px; } #dfin .vs-col small { letter-spacing: .06em; } #dfin .rul { width: 50px; height: 50px; } #dfin .marc { gap: 3px; } }

/* ═══ RETO CON UN AMIGO: la comparación de duelo-titanes.js (#retoOverlay) queda como PIE de la escena ═══
   La cabecera (código, título, marcador, tiempos, frase) la pinta la losa de la escena; aquí quedan el historial,
   el repaso pregunta a pregunta (plegado, se abre tocando la cabecera) y los botones reales del reto. */
body.dfin-reto #retoOverlay.show { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: flex-end; padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 10px); }
body.dfin-reto #retoPanel { zoom: var(--dfin-k, 1); width: 100%; max-width: 460px; max-height: 58dvh; overflow-x: hidden; background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; text-align: center; }
body.dfin-reto #retoPanel .reto-kicker, body.dfin-reto #retoPanel .reto-title, body.dfin-reto #retoPanel .reto-score, body.dfin-reto #retoPanel .reto-cmp, body.dfin-reto #retoPanel .reto-sub { display: none; }
body.dfin-reto #retoPanel .reto-h2h { margin: 0 0 8px; font: 800 10px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #f3d27a; text-shadow: 0 1px 4px #000; }
body.dfin-reto #retoPanel .reto-cmp-head { display: block; margin: 0 auto 8px; padding: 8px 14px; width: max-content; max-width: 100%; cursor: pointer; font: 900 11px/1 'Syne', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #ff8a7a; text-align: center;
  border: 1.5px solid rgba(255,138,122,.6); background: rgba(6,5,8,.7); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
body.dfin-reto #retoPanel .reto-cmp-head span { display: none; }
body.dfin-reto #retoPanel .reto-cmp-head::before { content: "Repaso"; }
body.dfin-reto #retoPanel .reto-cmp-head::after { content: " · toca para verlo"; font: 700 9px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .06em; color: #cdc6b8; }
body.dfin-reto #retoPanel.df-open .reto-cmp-head::after { content: " · toca para plegar"; }
body.dfin-reto #retoPanel:not(.df-open) .reto-cmp-list { display: none; }
/* abierto: el panel se vuelve un cajón oscuro sobre la escena (tapa la losa mientras se lee el repaso) */
body.dfin-reto #retoPanel.df-open { background: rgba(6,5,8,.93); padding: 10px 10px 6px; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.6); }
body.dfin-reto #retoPanel.df-open .reto-cmp-list { max-height: 34dvh; overflow-y: auto; padding-right: 4px; margin-bottom: 8px; }
body.dfin-reto #retoPanel .reto-row { background: rgba(6,5,8,.78); }
body.dfin-reto #retoPanel .reto-wa { position: relative; isolation: isolate; min-height: 52px; padding: 0 14px; margin: 0; border-radius: 0; box-shadow: none; gap: 10px; color: #04210f;
  font: 900 13px/1 'Syne', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6));
  background: linear-gradient(180deg, #8ff7b8, #34e57b 30%, #25D366 60%, #128a43);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
body.dfin-reto #retoPanel .reto-wa::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.28); }
body.dfin-reto #retoPanel .reto-wa.reto-gold { color: #1a1005; background: linear-gradient(180deg, #fff0c0, #f3d27a 30%, #d4a843 60%, #a5771c); }
body.dfin-reto #retoPanel .reto-wa + .reto-wa { margin-top: 8px; }
body.dfin-reto #retoPanel .reto-home { margin-top: 6px; padding: 6px; text-decoration: none; font: 700 12px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #cfc8b8; text-shadow: 0 1px 4px rgba(0,0,0,.8); }


/* ══════════════════════════════════════════════════════════════════════════
   ARTE NUEVO (15-09, aprobado por Nico): victoria, derrota y empate dejan de
   montarse por piezas (arena + robot recortado + rótulo) y pasan a ser UNA
   ilustración entera, con el rótulo y el personaje ya pintados dentro. Encima
   solo va lo que cambia: el marcador de porciones, el cofre y los botones.
   La ilustración se ve ENTERA (contain), que para eso se generó a 1080×2400.
   ══════════════════════════════════════════════════════════════════════════ */
#dfin.arte-nuevo .escena { background-position: center center; background-size: contain; background-color: #060608;
  transform: none; animation: dfArteIn 1s var(--out) forwards; }
@keyframes dfArteIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
/* 30-sep: reparto humano. Victoria, derrota y empate propios de cada rival
   (data-rival la pone escena-fin.js); sin data-rival, los del difícil. */
#dfin.arte-nuevo[data-estado="victoria"] .escena { background-image: url(../assets/duelo/reparto/fin-victoria-dificil.webp); }
#dfin.arte-nuevo[data-estado="derrota"]  .escena { background-image: url(../assets/duelo/reparto/fin-derrota-dificil.webp); }
#dfin.arte-nuevo[data-estado="empate"]   .escena { background-image: url(../assets/duelo/reparto/fin-empate-dificil.webp); }
#dfin.arte-nuevo[data-estado="victoria"][data-rival="rufo"] .escena { background-image: url(../assets/duelo/reparto/fin-victoria-facil.webp); }
#dfin.arte-nuevo[data-estado="victoria"][data-rival="vera"] .escena { background-image: url(../assets/duelo/reparto/fin-victoria-media.webp); }
#dfin.arte-nuevo[data-estado="derrota"][data-rival="rufo"]  .escena { background-image: url(../assets/duelo/reparto/fin-derrota-facil.webp); }
#dfin.arte-nuevo[data-estado="derrota"][data-rival="vera"]  .escena { background-image: url(../assets/duelo/reparto/fin-derrota-media.webp); }
#dfin.arte-nuevo[data-estado="empate"][data-rival="rufo"] .escena { background-image: url(../assets/duelo/reparto/fin-empate-facil.webp); }
#dfin.arte-nuevo[data-estado="empate"][data-rival="vera"] .escena { background-image: url(../assets/duelo/reparto/fin-empate-media.webp); }
#dfin.arte-nuevo[data-estado="empate"] .tinte { background: radial-gradient(70% 45% at 50% 20%, rgba(212,168,67,.18), transparent 70%); }
/* el personaje, el rótulo, la cabecera y el velo ya están en el dibujo */
#dfin.arte-nuevo .rival-capa,
#dfin.arte-nuevo .rival-sombra,
#dfin.arte-nuevo .titulo,
#dfin.arte-nuevo .cab,
#dfin.arte-nuevo .velo { display: none !important; }
/* 5-oct · encuadre a sangre (escena-fin.js encuadrarArte): la ilustración no se
   pinta en .escena sino en dos capas que heredan su imagen. ::after, nítida, con
   la franja de los personajes en el hueco libre entre rótulo y marcador; ::before,
   la misma ampliada y desenfocada, cubre el resto: nunca hay franjas negras. */
#dfin.arte-nuevo .escena { background-size: 0 0; background-repeat: no-repeat; overflow: hidden; }
#dfin.arte-nuevo .escena::before, #dfin.arte-nuevo .escena::after { content: ""; position: absolute; background-image: inherit; background-repeat: no-repeat; pointer-events: none; }
#dfin.arte-nuevo .escena::before { left: var(--bx, -40px); top: var(--by, -40px); width: var(--bw, calc(100% + 80px)); height: var(--bh, calc(100% + 80px)); background-size: 100% 100%; filter: blur(28px) brightness(.8) saturate(1.15); }
#dfin.arte-nuevo .escena::after { left: var(--ax, 0); top: var(--ay, 0); width: var(--aw, 100%); height: var(--ah, 100%); background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
#dfin.arte-nuevo .escena.estrecho::after { /* más estrecha que la pantalla: se funde en óvalo, sin cantos */
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, rgba(0,0,0,.55) 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 42%, rgba(0,0,0,.55) 72%, transparent 100%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html[data-piel="soft"] #dfin.arte-nuevo .escena::before, html[data-piel="soft"] #dfin.arte-nuevo .escena::after { display: none; }
#dfin.arte-nuevo .sub { margin-top: 0; }
#dfin.arte-nuevo .ui-in { justify-content: flex-end; }

/* 5-oct · «NIVEL 5» y «+120 XP» no se pegan en la franja del cofre (360) */
#dfin .xp-linea { gap: 10px; }
#dfin .xp-linea > span { white-space: nowrap; }
@media (max-width: 370px) { #dfin .xp-linea { letter-spacing: .04em; } #dfin .xp-linea b { font-size: 13px; } #dfin .premio { gap: 6px; padding-right: 8px; } }