/* Estilo de los menús: limpio y deportivo, como los grandes juegos de lucha de plataformas — portada clara con franja roja,
   barras rojas arriba, rejilla compacta de retratos, paneles de jugador inclinados abajo y nombres en cursiva gruesa. */
:root {
  --ui: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --red: #e8141c;
  --red-d: #9e0d12;
  --black: #111114;
  --panel: #1b1b20;
  --grey: #a9a9ae;
  --yellow: #ffd83a;
}
.ui-name { font: italic 900 1em var(--ui); color: #fff; letter-spacing: .01em; text-transform: uppercase;
  -webkit-text-stroke: .09em #111; paint-order: stroke fill; }

/* ---------------------------------------------------------------- portada */
#scr-title { display: none; padding: 0; background: #ececec; color: #111; flex-direction: column; align-items: stretch; justify-content: flex-start; }
#scr-title.active { display: flex; }
#scr-title .t-top { height: 5vh; background: #050506; }
#scr-title .t-ver { position: absolute; right: 2.6vw; top: 8vh; font: 600 clamp(14px, 1.5vw, 22px) var(--ui); color: #8c8c90; }
#scr-title .t-logo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-top: -2vh; animation: tLogo .8s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes tLogo { from { opacity: 0; transform: scale(.92); } }
#scr-title .t-logo small { font: 900 clamp(26px, 4.6vw, 76px) var(--ui); line-height: .8; letter-spacing: .02em; }
#scr-title .t-logo b { font: 900 clamp(64px, 12.5vw, 210px) var(--ui); line-height: .82; letter-spacing: -.01em; transform: scaleY(1.08); }
#scr-title .t-arc { width: min(78vw, 1150px); height: auto; margin-top: .4vh; display: block; }
#scr-title .t-logo span { font: 800 clamp(18px, 2.6vw, 42px) var(--ui); letter-spacing: .62em; margin-top: .6vh; padding-left: .62em; }
#scr-title .t-band { height: 7vh; min-height: 34px; background: var(--red); display: flex; align-items: center; justify-content: flex-end; padding: 0 2.4vw; cursor: pointer;
  border: 0; border-radius: 0; box-shadow: none; transform: none; animation: none; margin: 0; outline: none; }
#scr-title .t-band span { font: 800 clamp(18px, 2.6vw, 40px) var(--ui); color: #fff; letter-spacing: .22em; animation: tBlink 1.6s ease-in-out infinite; }
@keyframes tBlink { 50% { opacity: .35; } }
#scr-title .t-foot { height: 21vh; background: repeating-linear-gradient(0deg, #0b0b0d 0 3px, #111114 3px 6px); color: #8f8f95; font: 500 clamp(11px, 1.15vw, 17px) var(--text);
  padding: 2.4vh 8vw; line-height: 1.55; }

/* ---------------------------------------------------------------- menú principal: mosaico de losetas grandes */
#scr-main { flex-direction: column; justify-content: center; align-items: stretch; gap: 0; padding: 0;
  background: linear-gradient(90deg, rgba(10,10,12,.92) 0 46%, rgba(10,10,12,.35) 70%, rgba(10,10,12,0)); }
#scr-main .mini-logo { position: absolute; left: 0; right: 0; top: 0; height: 9vh; display: flex; align-items: center; padding-left: 3vw; margin: 0;
  background: var(--red); color: #fff; font: italic 900 clamp(24px, 3vw, 46px) var(--ui); text-shadow: none; transform: none; letter-spacing: .02em; }
#scr-main .mosaic { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 1.2vh 1vw; width: min(62vw, 980px); height: 70vh; margin: 9vh 0 0 3vw; }
#scr-main .tile { width: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0; padding: 1.6vh 1.6vw;
  border: 0; border-radius: 6px; transform: skewX(-8deg); box-shadow: 0 .8vh 0 rgba(0,0,0,.55); background: var(--c); overflow: hidden; position: relative; animation: tileIn .45s cubic-bezier(.2,1.3,.4,1) both; }
#scr-main .tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%, rgba(0,0,0,.18)); }
#scr-main .tile > * { transform: skewX(8deg); position: relative; }
#scr-main .mosaic { grid-template-rows: repeat(4, 1fr); }
#scr-main .tile[data-go="fight"] { grid-row: 1 / 5; }

/* ---------------------------------------------------------------- online */
.online-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; margin-top: 3vh; }
.online-box { display: flex; flex-direction: column; gap: 1.4vh; align-items: flex-start; }
.online-box h3 { margin: 0; font: italic 900 clamp(28px, 3vw, 48px) var(--ui); text-transform: uppercase; }
.online-box p { margin: 0; font: 600 clamp(14px, 1.3vw, 20px) var(--ui); color: #d0d0d6; }
.on-code { font: italic 900 clamp(48px, 6vw, 96px) var(--ui); letter-spacing: .12em; color: var(--yellow); -webkit-text-stroke: .04em #111; paint-order: stroke fill; min-height: 1.1em; user-select: text; }
#on-input { font: italic 900 clamp(30px, 3.4vw, 54px) var(--ui); letter-spacing: .2em; text-transform: uppercase; width: 100%; max-width: 360px; padding: .2em .4em;
  background: #fff; color: #111; border: 4px solid #111; border-radius: 4px; outline: none; }
#on-input:focus { box-shadow: 0 0 0 .4vh var(--red); }
.on-status { margin-top: 2vh; font: italic 800 clamp(18px, 1.8vw, 28px) var(--ui); color: #fff; min-height: 1.4em; }
.on-status.bad { color: #ff6a5a; }
#scr-main .tile .ico { position: absolute; right: 6%; top: 8%; font-size: clamp(56px, 9vw, 150px); opacity: .9; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
#scr-main .tile[data-go="fight"] .ico { font-size: clamp(90px, 15vw, 260px); top: 14%; }
#scr-main .tile b { font: italic 900 clamp(24px, 3.3vw, 60px) var(--ui); color: #fff; text-transform: uppercase; text-shadow: 0 .4vh 0 rgba(0,0,0,.35); letter-spacing: .01em; }
#scr-main .tile[data-go="fight"] b { font-size: clamp(54px, 7vw, 120px); }
#scr-main .tile small { font: 700 clamp(13px, 1.25vw, 20px) var(--ui); color: rgba(255,255,255,.92); letter-spacing: .02em; }
@keyframes tileIn { from { opacity: 0; transform: skewX(-8deg) translateX(-30vw); } }
#scr-main .tile.focus { transform: skewX(-8deg) scale(1.025); box-shadow: 0 0 0 .5vh #fff, 0 0 0 1vh var(--black), 0 1.2vh 0 rgba(0,0,0,.55); z-index: 2; }

/* ---------------------------------------------------------------- barras comunes de arriba (elegir luchador / escenario / opciones) */
.topbar { position: relative; flex-wrap: nowrap; gap: 0; height: 9vh; min-height: 44px; margin: 0 -2vw; padding: 0 2vw;
  background: linear-gradient(180deg, #ff2a2f, var(--red) 55%, var(--red-d)); box-shadow: 0 .5vh 0 rgba(0,0,0,.45); }
.page .topbar { margin: 0 -6vw; padding: 0 6vw; }
#scr-stages .topbar { margin: 0 -3vw; padding: 0 3vw; }
.topbar .back { width: 7vh; height: 7vh; min-width: 38px; min-height: 38px; padding: 0; border-radius: 50%; border: .5vh solid #fff; background: var(--red-d); transform: none;
  box-shadow: 0 .4vh 0 rgba(0,0,0,.4); font-size: 0; position: relative; flex: none; }
.topbar .back::before { content: '⮌'; font: 900 clamp(20px, 3.4vh, 34px) var(--ui); color: #fff; position: absolute; inset: 0; display: grid; place-items: center; }
.topbar .h-title { margin: 0 0 0 2vw; height: 7vh; min-height: 36px; display: flex; align-items: center; padding: 0 4vw 0 2.4vw; color: #111; text-shadow: none; transform: none;
  font: 800 clamp(22px, 3.4vw, 44px) var(--ui); letter-spacing: .01em; background: linear-gradient(180deg, #fff27a, var(--yellow) 55%, #f2b400);
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.topbar .h-title::after { content: ' ▾'; font-size: .6em; margin-left: .6em; opacity: .85; }
.page .topbar .h-title::after, #scr-stages .topbar .h-title::after { content: ''; }
.topbar .rules { background: rgba(0,0,0,.28); border: 0; border-radius: 6px; transform: none; box-shadow: none; padding: .6vh .8vw; gap: .8vw; }
.topbar .rules > * { transform: none; }
.rules .lbl { color: #ffd6d6; font-family: var(--ui); font-size: clamp(11px, 1vw, 15px); }
.chip { font: 800 clamp(13px, 1.1vw, 17px) var(--ui); background: rgba(0,0,0,.35); color: #fff; border: 2px solid rgba(255,255,255,.55); border-radius: 4px; transform: none; box-shadow: none; padding: .4vh .7vw; letter-spacing: .02em; }
.chip.on { background: #fff; color: var(--red-d); border-color: #fff; }
.stepper b { font: italic 900 clamp(20px, 2vw, 30px) var(--ui); }

/* ---------------------------------------------------------------- elegir luchador */
#scr-chars { padding: 0 2vw 0; gap: 0; background: #0b0b0e; }
#scr-chars .grid { gap: 3px; padding: 2.2vh 3.2vw 1.4vh; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); }
#scr-chars .cell { aspect-ratio: 1.32 / 1; border: 2px solid #050506; border-radius: 0; transform: none; box-shadow: none;
  background: linear-gradient(135deg, #26b8f0 0%, #7fd6ff 35%, #c8ee6a 70%, #ffe14a 100%); }
#scr-chars .cell::after { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.25) 1.4px, transparent 1.6px) 0 0 / 7px 7px; pointer-events: none; }
#scr-chars .cell canvas, #scr-chars .cell .q { transform: none; width: 100%; height: 150%; left: 0; top: -6%; object-fit: cover; object-position: 50% 8%; z-index: 1; }
#scr-chars .cell .q { color: rgba(255,255,255,.55); font: 900 clamp(30px, 4vw, 64px) var(--ui); }
#scr-chars .cell.rand { background: linear-gradient(135deg, #ffe14a, #f2a900); }
#scr-chars .cell.rand .q { color: #fff; text-shadow: none; background: none; -webkit-text-stroke: 3px #111; paint-order: stroke fill; }
#scr-chars .cell.locked { opacity: .22; background: #2a2a30; }
#scr-chars .cell .nm { z-index: 2; background: none; transform: none; padding: 0 2px 1px; font: italic 900 clamp(12px, 1.35vw, 22px) var(--ui); color: #fff;
  text-transform: uppercase; letter-spacing: .01em; -webkit-text-stroke: 3px #111; paint-order: stroke fill; line-height: 1.05; }
#scr-chars .cell.hot { border-color: #fff; outline: 3px solid var(--red); outline-offset: -5px; z-index: 3; }
#scr-chars .token { width: clamp(38px, 3.4vw, 56px); height: clamp(38px, 3.4vw, 56px); border: 3px solid #fff; font: italic 900 clamp(15px, 1.4vw, 22px) var(--ui);
  box-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 0 2px #111; z-index: 6; }
#scr-chars .ready { margin: 0 -2vw; border: 0; transform: none; background: linear-gradient(90deg, rgba(158,13,18,0), var(--red) 18%, #ff3b2f 50%, var(--red) 82%, rgba(158,13,18,0));
  font: italic 900 clamp(34px, 5vw, 80px) var(--ui); color: #fff; text-shadow: none; -webkit-text-stroke: 4px #111; paint-order: stroke fill; letter-spacing: .03em; padding: .4vh 0 .2vh; }
#scr-chars .ready small { font: 800 clamp(11px, 1vw, 15px) var(--ui); -webkit-text-stroke: 0; letter-spacing: .2em; color: #fff; }
@keyframes glow { 50% { filter: brightness(1.18); } }
#scr-chars .players { gap: 1.2vw; padding: 0; margin: auto -2vw 0; }
#scr-chars .pcard { height: clamp(150px, 32vh, 320px); border: 0; border-radius: 0; transform: none; box-shadow: none; overflow: hidden;
  background: linear-gradient(115deg, var(--c2) 0 34%, var(--c) 34% 52%, var(--c3) 52% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); border-top: .7vh solid #050506; }
#scr-chars .pcard::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px); }
#scr-chars .pcard > * { transform: none; }
#scr-chars .pcard canvas.render { left: 0; height: 135%; bottom: -6%; filter: drop-shadow(0 0 0 #000); z-index: 1; }
#scr-chars .pcard .info { left: 42%; right: 3%; top: 1.6vh; bottom: 1.6vh; gap: .8vh; align-items: flex-end; text-align: right; z-index: 2; }
#scr-chars .pcard .pname { font: italic 900 clamp(34px, 5vw, 84px) var(--ui); color: #fff; text-shadow: none; -webkit-text-stroke: .08em #111; paint-order: stroke fill; line-height: .9; text-transform: none; }
#scr-chars .pcard .sub { font: 700 clamp(13px, 1.3vw, 20px) var(--ui); }
#scr-chars .pcard .plate { background: color-mix(in srgb, var(--c) 30%, #fff); color: #111; border: 3px solid #111; padding: .2vh 1.6vw; font: 800 clamp(15px, 1.6vw, 26px) var(--ui); min-width: 52%; text-align: center; }
#scr-chars .pcard .ptag { margin-top: auto; min-width: 62%; display: flex; justify-content: flex-end; align-items: center; gap: 1vw; padding: .2vh 1.2vw;
  background: repeating-linear-gradient(115deg, var(--c2) 0 6px, var(--c3) 6px 12px); border: 3px solid #111; }
#scr-chars .pcard .ptag b { font: italic 900 clamp(28px, 3.6vw, 58px) var(--ui); color: #fff; -webkit-text-stroke: .07em #111; paint-order: stroke fill; line-height: 1; }
#scr-chars .pcard .tag { display: none; }
#scr-chars .pcard .state { top: 1.4vh; right: auto; left: 1vw; font: italic 900 clamp(14px, 1.4vw, 22px) var(--ui); border: 2px solid #111; border-radius: 3px; background: var(--yellow); z-index: 3; }
#scr-chars .pcard .state.wait { background: #fff; }
#scr-chars .costume { justify-content: flex-end; }
#scr-chars .costume button { border-radius: 3px; border: 2px solid #111; }
#scr-chars .cpulvl { background: #2a2a2e; color: #d9d9dc; border: 3px solid #111; padding: .2vh 1vw; font: 800 clamp(15px, 1.5vw, 24px) var(--ui); }
#scr-chars .cpulvl b { color: #57e3ff; font: italic 900 clamp(22px, 2.4vw, 36px) var(--ui); }
#scr-chars .cpulvl input { accent-color: #57e3ff; }

/* ---------------------------------------------------------------- elegir escenario */
#scr-stages { padding: 0 3vw 2vh; background: #0b0b0e; }
#scr-stages .stage-wrap { margin-top: 2vh; }
#scr-stages .preview { border: .6vh solid #fff; border-radius: 0; transform: none; box-shadow: 0 0 0 .5vh #111, 0 1.4vh 0 rgba(0,0,0,.5); }
#scr-stages .preview img { transform: scale(1.02); }
#scr-stages .preview .sname { font: italic 900 clamp(30px, 4vw, 64px) var(--ui); text-shadow: none; -webkit-text-stroke: .07em #111; paint-order: stroke fill; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
#scr-stages .stiles { gap: 3px; }
#scr-stages .stile { border: 2px solid #050506; border-radius: 0; transform: none; box-shadow: none; }
#scr-stages .stile img { transform: none; }
#scr-stages .stile span { transform: none; font: italic 900 clamp(13px, 1.3vw, 20px) var(--ui); text-shadow: none; -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-transform: uppercase; }
#scr-stages .stile .q { background: linear-gradient(135deg, #ffe14a, #f2a900); color: #fff; text-shadow: none; -webkit-text-stroke: 3px #111; paint-order: stroke fill; font-family: var(--ui); font-weight: 900; }
#scr-stages .stile.on, #scr-stages .stile.focus { outline: 4px solid var(--red); outline-offset: -4px; border-color: #fff; }

/* ---------------------------------------------------------------- opciones, controles, pausa */
.page { background: #0b0b0e; }
.card { background: #1b1b20; border: 0; border-left: .8vh solid var(--red); border-radius: 0; box-shadow: 0 1vh 0 rgba(0,0,0,.45); }
.opt .lbl, .ctl h3 { font-family: var(--ui); font-weight: 800; }
.ctl h3 { font-style: italic; font-size: clamp(22px, 2.2vw, 32px); }
#scr-pause { background: rgba(0,0,0,.55); }
#scr-pause .h-title { color: #fff; text-shadow: none; transform: none; font: italic 900 clamp(48px, 6vw, 100px) var(--ui); -webkit-text-stroke: .06em #111; paint-order: stroke fill; }
.go { font: italic 900 clamp(20px, 2.2vw, 34px) var(--ui); border: 3px solid #111; border-radius: 4px; transform: skewX(-8deg); background: #fff; color: #111; box-shadow: 0 .6vh 0 rgba(0,0,0,.55); letter-spacing: .02em; text-transform: uppercase; }
.go:first-child, .res-btns .go:first-child, #btn-resume, #btn-rematch { background: var(--red); color: #fff; }
.go.dark { background: #2a2a30; color: #fff; border-color: #111; }
.nav.focus { outline: .5vh solid #fff; outline-offset: .3vh; filter: brightness(1.08); }

/* ---------------------------------------------------------------- resultados: el ganador en grande, el "1" dorado y la carta del segundo */
#scr-results .res-bg { background: var(--stage) center / cover no-repeat; filter: blur(10px) brightness(.85) saturate(1.15); transform: scale(1.08); }
#scr-results .res-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 45%); }
#scr-results .res-win { left: auto; right: 8vw; height: 86vh; bottom: 6vh; }
#scr-results .res-title { display: none; }
#scr-results .res-head { position: absolute; left: 3vw; top: 4vh; width: 56vw; animation: resIn .55s cubic-bezier(.2,1.3,.4,1) .15s both; }
@keyframes resIn { from { opacity: 0; transform: translateX(-12vw); } }
#scr-results .res-flag { display: inline-grid; place-items: center; width: 9vw; height: 8vw; max-width: 140px; max-height: 120px; clip-path: polygon(0 0, 100% 100%, 0 100%); padding: 2vw 4vw 0 0;
  background: var(--c); color: #fff; font: italic 900 clamp(20px, 2.6vw, 40px) var(--ui); -webkit-text-stroke: .05em #111; paint-order: stroke fill; vertical-align: top; transform: rotate(-12deg) translateY(2vh); }
#scr-results .res-one { display: inline-block; position: relative; width: 14vw; max-width: 220px; vertical-align: top; }
#scr-results .res-one svg { width: 100%; height: auto; display: block; }
#scr-results .res-name { font: italic 900 clamp(70px, 13vw, 230px) var(--ui); color: #111; line-height: .82; letter-spacing: .01em; text-transform: uppercase;
  -webkit-text-stroke: .07em #fff; paint-order: stroke fill; filter: drop-shadow(0 .8vh 0 rgba(0,0,0,.35)); margin-top: -1vh; white-space: nowrap; }
#scr-results .res-losers { position: absolute; left: 3vw; bottom: 0; display: flex; gap: 2vw; align-items: flex-end; }
#scr-results .loser { position: relative; width: 30vw; max-width: 460px; height: 26vh; background: linear-gradient(135deg, #d6d6da, #8d8d93); border: .6vh solid #111; border-bottom: 0;
  transform: skewX(-6deg); overflow: hidden; animation: resIn .5s cubic-bezier(.2,1.3,.4,1) .45s both; box-shadow: 0 0 0 .4vh #fff; }
#scr-results .loser canvas { position: absolute; left: 14%; bottom: -30%; height: 160%; transform: skewX(6deg); }
#scr-results .loser .num { position: absolute; left: 3%; top: -2%; font: italic 900 clamp(60px, 10vh, 120px) var(--ui); line-height: 1; color: #eee; -webkit-text-stroke: .08em #111; paint-order: stroke fill;
  background: linear-gradient(180deg, #fff, #9a9aa0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: skewX(6deg); filter: drop-shadow(0 3px 0 #111); }
#scr-results .loser .who { position: absolute; right: 4%; bottom: 4%; font: italic 900 clamp(26px, 5vh, 54px) var(--ui); color: #fff; -webkit-text-stroke: .07em #111; paint-order: stroke fill; transform: skewX(6deg); text-transform: uppercase; }
#scr-results .res-side { display: contents; }
#scr-results .res-stats { position: absolute; left: 3vw; top: 43vh; width: min(38vw, 560px); background: rgba(10,10,12,.82); border-left: .7vh solid var(--red); padding: 1.2vh 1.4vw;
  font: 700 clamp(13px, 1.25vw, 19px) var(--ui); animation: resIn .5s cubic-bezier(.2,1.3,.4,1) .3s both; }
#scr-results .res-btns { position: absolute; right: 3vw; bottom: 3vh; margin: 0; }
#scr-results .res-stats table { width: 100%; border-collapse: collapse; }
#scr-results .res-stats th { font: italic 900 clamp(16px, 1.6vw, 24px) var(--ui); text-align: right; padding-bottom: .4vh; }
#scr-results .res-stats td { padding: .15vh 0; text-align: right; }
#scr-results .res-stats td:first-child, #scr-results .res-stats th:first-child { text-align: left; color: #bdbdc4; }
#scr-results .res-btns { justify-content: flex-end; }

/* ---------------------------------------------------------------- cortinilla: barras rojas y negras */
#wipe i:nth-child(1) { background: #111114; }
#wipe i:nth-child(2) { background: var(--red); }
#wipe i:nth-child(3) { background: #fff; }
#wipe i:nth-child(4) { background: var(--red-d); }