:root{--bg:#07080c;--fg:#f4f1ea;--dim:#a39f97;--red:#ff2d3a;--gold:#ffd23f;--ac:#ffd23f;
  --disp:"Anton","Bebas Neue",Impact,"Arial Narrow Bold",sans-serif;--body:"Barlow Condensed","Roboto Condensed","Arial Narrow",Arial,sans-serif;--num:"Teko","Anton",Impact,sans-serif;
  --sl:max(16px,env(safe-area-inset-left,0px));--sr:max(16px,env(safe-area-inset-right,0px));}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden;font-family:var(--body);user-select:none;-webkit-user-select:none;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;pointer-events:none}
.screen{position:absolute;inset:0;display:none;pointer-events:auto;padding:max(14px,env(safe-area-inset-top,0px)) var(--sr) max(14px,env(safe-area-inset-bottom,0px)) var(--sl)}
.screen.on{display:flex;flex-direction:column;animation:fadeIn .35s ease}
#hud.screen{pointer-events:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- logo ---------- */
.logo{display:flex;flex-direction:column;align-items:center;line-height:.82;font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;filter:drop-shadow(0 6px 0 rgba(0,0,0,.5))}
.logo span{font-size:clamp(48px,11vw,150px);background:linear-gradient(180deg,#fff 0%,#ffe9a8 45%,#ffb020 52%,#ff3b2e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px rgba(0,0,0,.35);transform:skewX(-8deg)}
.logo em{font-style:normal;font-size:clamp(18px,3vw,38px);color:#fff;background:var(--red);padding:2px 14px;margin:6px 0;transform:skewX(-8deg) rotate(-2deg);letter-spacing:.2em}
.logo.small{flex-direction:row;gap:10px;align-items:center;justify-content:flex-start}
.logo.small span{font-size:clamp(30px,5vw,56px)} .logo.small em{font-size:16px;margin:0}

#boot,#title{align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(7,8,12,.25),rgba(7,8,12,.92) 75%)}
#boot{background:#07080c}
.bootload{width:min(420px,70vw);height:6px;background:rgba(255,255,255,.1);margin-top:34px;overflow:hidden;transform:skewX(-20deg)}
.bootload u{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .3s}
#bootMsg{color:var(--dim);letter-spacing:.2em;text-transform:uppercase;font-size:14px}
#title .tag{font-family:var(--disp);font-size:clamp(16px,2.4vw,28px);letter-spacing:.3em;color:#fff;margin:28px 0 0;text-transform:uppercase;opacity:.9}
#title .press{margin-top:6vh;font-weight:800;letter-spacing:.35em;font-size:clamp(12px,1.6vw,17px);animation:blink 1.4s infinite;text-align:center}
#title .foot{position:absolute;bottom:14px;color:var(--dim);font-size:12px;letter-spacing:.2em}
@keyframes blink{50%{opacity:.25}}

/* ---------- menú ---------- */
#menu{justify-content:center;background:linear-gradient(90deg,rgba(7,8,12,.95) 0%,rgba(7,8,12,.75) 38%,rgba(7,8,12,0) 70%)}
#menu .logo{position:absolute;top:max(18px,env(safe-area-inset-top,0px));left:var(--sl)}
.menu{display:flex;flex-direction:column;gap:10px;margin-top:40px;width:min(460px,100%)}
.menu button{position:relative;text-align:left;padding:12px 22px 12px 26px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-left:4px solid rgba(255,255,255,.25);transform:skewX(-10deg);transition:transform .15s,background .15s,border-color .15s}
.menu button>*{display:block;transform:skewX(10deg)}
.menu button b{font-family:var(--disp);font-size:clamp(24px,3.2vw,38px);font-weight:400;letter-spacing:.04em;line-height:1}
.menu button span{color:var(--dim);font-size:15px;letter-spacing:.06em;margin-top:2px}
.menu button:hover,.menu button:focus-visible{background:linear-gradient(90deg,var(--red),rgba(255,45,58,.15));border-color:var(--gold);transform:skewX(-10deg) translateX(10px);outline:none}
.menu button:hover span{color:#fff}
.menu.small button b{font-size:26px}
.menu.row{flex-direction:row;flex-wrap:wrap;justify-content:center;width:auto}

/* ---------- barras de cabecera ---------- */
header.bar{display:flex;align-items:center;gap:16px;min-height:52px}
header.bar h1{font-family:var(--disp);font-weight:400;font-size:clamp(22px,3vw,36px);margin:0;letter-spacing:.06em}
.back{font-family:var(--disp);font-size:18px;letter-spacing:.08em;padding:8px 16px;background:rgba(255,255,255,.08);transform:skewX(-10deg)}
.back:hover{background:var(--red)}

/* ---------- selección ---------- */
#select{background:linear-gradient(180deg,rgba(7,8,12,.85),rgba(7,8,12,.55) 50%,rgba(7,8,12,.9))}
.selwrap{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1.1fr);gap:14px;min-height:0;align-items:stretch}
#grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-content:center}
.card{position:relative;aspect-ratio:1/1.12;background:#111;overflow:hidden;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);transition:transform .12s;outline:2px solid transparent}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.9);transition:filter .15s,transform .2s}
.card span{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 4px;background:linear-gradient(transparent,rgba(0,0,0,.9));font-family:var(--disp);font-size:clamp(11px,1.25vw,17px);letter-spacing:.04em;text-align:center}
.card:hover img,.card.hv1 img,.card.hv2 img{filter:none;transform:scale(1.08)}
.card.hv1{box-shadow:inset 0 0 0 3px #3fa9ff;background:#3fa9ff}
.card.hv2{box-shadow:inset 0 0 0 3px var(--red)}
.card.hv1::after,.card.hv2::after{content:"";position:absolute;inset:0;border:3px solid #3fa9ff;clip-path:inherit}
.card.hv2::after{border-color:var(--red)}
.card.rnd .q,.stage.rnd .q{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:48px;color:var(--gold);background:repeating-linear-gradient(45deg,#14151b 0 10px,#1b1c24 10px 20px)}
.side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;overflow:hidden}
.side .full{position:absolute;left:50%;bottom:28%;height:78%;transform:translateX(-50%);filter:drop-shadow(0 0 30px color-mix(in srgb,var(--ac) 45%,transparent));animation:slideIn .3s ease}
.side.right .full{transform:translateX(-50%) scaleX(-1)}
@keyframes slideIn{from{opacity:0;margin-left:-30px}to{opacity:1;margin-left:0}}
.side .info{position:relative;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 30%);padding:30px 10px 4px}
.side h2{font-family:var(--disp);font-weight:400;font-size:clamp(28px,3.6vw,52px);margin:0;line-height:1;color:var(--ac);text-shadow:0 3px 0 rgba(0,0,0,.6)}
.side p{margin:2px 0 8px;color:#ddd;font-size:15px}
.stat{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;color:var(--dim)} .stat i{font-style:normal;width:84px}
.stat b{flex:1;height:6px;background:rgba(255,255,255,.12);transform:skewX(-20deg)} .stat u{display:block;height:100%;background:var(--ac)}
.sp{font-size:14px;margin-top:4px} .sp i{font-style:normal;font-size:11px;letter-spacing:.14em;color:#000;background:var(--ac);padding:1px 6px;margin-right:6px}
.side .wait{flex:1;display:grid;place-items:center;font-family:var(--disp);font-size:120px;color:rgba(255,255,255,.08)}
.side.locked h2::after{content:" ✔";font-size:.5em;color:#fff}

/* ---------- escenarios ---------- */
#stagesel{background:rgba(7,8,12,.88)}
#stages{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0;padding-bottom:20px}
#grid,.scroll,.side{touch-action:pan-y}
#grid{overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
.selok{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom,0px));transform:translateX(-50%) skewX(-10deg);font-family:var(--disp);font-size:clamp(18px,2.4vw,28px);letter-spacing:.08em;padding:10px 34px;background:var(--ac,#ffd23f);color:#000;border:none;box-shadow:0 4px 0 rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .15s;z-index:5}
.selok.on{opacity:1;pointer-events:auto;animation:okPulse 1s ease-in-out infinite}
@keyframes okPulse{50%{filter:brightness(1.25)}}
.fsbtn{position:fixed;top:max(8px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));z-index:50;width:42px;height:42px;border-radius:8px;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.5);color:#fff;font-size:22px;line-height:1;display:grid;place-items:center}
body[data-screen=hud] .fsbtn{top:calc(max(14px,env(safe-area-inset-top,0px)) + 66px);right:auto;left:calc(50% + 28px);width:34px;height:34px;font-size:17px;opacity:.7}
body[data-screen=hud] .pausebtn{margin-left:-22px}
body.isfs .fsbtn{opacity:.35}
.stage{position:relative;aspect-ratio:16/8;overflow:hidden;text-align:left;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);background:#111}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.stage:hover img{transform:scale(1.07)}
.stage div{position:absolute;left:0;right:0;bottom:0;padding:24px 22px 10px;background:linear-gradient(transparent,rgba(0,0,0,.9))}
.stage b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(20px,2.4vw,32px)}
.stage span{color:#ccc;font-size:14px}
.stage:hover{outline:3px solid var(--gold)}

/* ---------- VS ---------- */
#vs{display:none;flex-direction:row;align-items:stretch;padding:0;background:#07080c;overflow:hidden}
#vs.on{display:flex}
#vs .vsL,#vs .vsR{flex:1;position:relative;overflow:hidden;background:linear-gradient(120deg,color-mix(in srgb,var(--ac) 55%,#000),#07080c 70%)}
#vs .vsR{background:linear-gradient(240deg,color-mix(in srgb,var(--ac) 55%,#000),#07080c 70%)}
#vs img{position:absolute;bottom:-6%;height:112%;left:50%;transform:translateX(-50%);animation:vsIn .5s cubic-bezier(.2,1.4,.4,1)}
#vs .vsR img{transform:translateX(-50%) scaleX(-1)}
@keyframes vsIn{from{opacity:0;filter:brightness(4)}to{opacity:1}}
#vs h2{position:absolute;bottom:8%;left:6%;margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(40px,7vw,96px);line-height:.9;color:#fff;text-shadow:0 5px 0 rgba(0,0,0,.6);animation:slideIn .5s .15s both}
#vs .vsR h2{left:auto;right:6%;text-align:right} #vs p{position:absolute;bottom:4%;left:6%;margin:0;color:var(--ac);font-weight:700;letter-spacing:.1em}
#vs .vsR p{left:auto;right:6%}
.vsMid{width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
.vsMid b{font-family:var(--disp);font-weight:400;font-size:clamp(70px,13vw,190px);color:var(--gold);text-shadow:0 0 30px rgba(255,180,0,.6),0 8px 0 #000;animation:slam .5s .2s both}
@keyframes slam{from{transform:scale(3);opacity:0}to{transform:scale(1);opacity:1}}
.vsMid span{white-space:nowrap;font-family:var(--disp);letter-spacing:.2em;font-size:18px}
.vsMid .load{width:180px;height:4px;background:rgba(255,255,255,.15);margin-top:12px}
.vsMid .load u{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}

/* ---------- HUD ---------- */
.hudtop{display:flex;align-items:flex-start;gap:12px}
.hp-wrap{flex:1;display:flex;gap:8px;align-items:flex-start;position:relative}
.hp-wrap.r{flex-direction:row-reverse;text-align:right}
.hp-wrap .pt{width:clamp(40px,5vw,64px);aspect-ratio:1;object-fit:cover;border:2px solid var(--ac);clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);background:#111}
.hp-wrap .col{flex:1;min-width:0}
.nm{font-family:var(--disp);font-size:clamp(16px,2vw,26px);letter-spacing:.05em;line-height:1;text-shadow:0 2px 0 #000}
.hp-wrap .bar{position:relative;height:clamp(12px,1.7vw,19px);background:linear-gradient(180deg,#1a0a0a,#2a1010);border:2px solid #e8e2cf;transform:skewX(-10deg);margin-top:4px;overflow:hidden;box-shadow:0 0 0 2px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.6)}
.hp-wrap.r .bar{transform:skewX(10deg)}
.bar i{position:absolute;top:0;bottom:0;left:0;width:100%}
.hp-wrap.r .bar i{left:auto;right:0}
.bar .lag{background:linear-gradient(180deg,#ff6a5a,#e02020 50%,#a01010)}
.bar .hp{background:linear-gradient(180deg,#f6ffc8 0%,#d8f03c 30%,#9bd82a 65%,#5f9a16 100%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.hp-wrap.low .bar .hp{animation:lowflash .35s infinite alternate}
@keyframes lowflash{to{filter:brightness(1.7) saturate(.6)}}
@keyframes pulse{to{filter:brightness(1.5)}}
.hp-wrap.hit .bar{animation:hitb .25s}
@keyframes hitb{30%{transform:skewX(-10deg) translateX(4px)}60%{transform:skewX(-10deg) translateX(-3px)}}
.pips{display:flex;gap:5px;margin-top:5px} .hp-wrap.r .pips{justify-content:flex-end}
.pip{width:16px;height:7px;background:rgba(255,255,255,.2);transform:skewX(-20deg)} .pip.on{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.meter{position:absolute;top:calc(100% + 6px);left:clamp(48px,6vw,72px);width:42%;height:9px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.4);transform:skewX(-18deg)}
.hp-wrap.r .meter{left:auto;right:clamp(48px,6vw,72px)}
.meter u{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fa9ff,#7ff3ff);transition:width .15s}
.hp-wrap.r .meter u{margin-left:auto}
.meter.half u{background:linear-gradient(90deg,#ff9a3c,#ffd23f)} .meter.full u{background:linear-gradient(90deg,#ff2d3a,#ffd23f,#fff);animation:pulse .3s infinite alternate}
.meter span{position:absolute;top:10px;left:0;font-size:10px;letter-spacing:.2em;color:var(--dim);transform:skewX(18deg)} .hp-wrap.r .meter span{left:auto;right:0}
.meter.full span{color:#fff}
#timer{font-family:var(--num);font-size:clamp(34px,4.4vw,56px);font-weight:700;line-height:1;min-width:2.3ch;text-align:center;text-shadow:0 3px 0 #000;padding:2px 8px 4px;background:linear-gradient(180deg,rgba(20,20,26,.85),rgba(0,0,0,.85));border:2px solid #e8e2cf;box-shadow:0 0 0 2px rgba(0,0,0,.7)}
#timer.low{color:var(--red);animation:pulse .5s infinite alternate}
.combo{position:absolute;left:var(--sl);top:28%;font-family:var(--disp);opacity:0;transform:translateX(-30px);transition:.15s;text-shadow:0 3px 0 #000}
.combo.r{left:auto;right:var(--sr);text-align:right;transform:translateX(30px)}
.combo.on{opacity:1;transform:none}
.combo b{display:block;font-size:clamp(46px,6vw,80px);line-height:.9;color:var(--gold)} .combo small{display:block;font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.15em;color:#fff}
.toast{position:absolute;left:var(--sl);top:44%;font-family:var(--disp);font-size:clamp(18px,2.4vw,30px);color:#fff;opacity:0;background:linear-gradient(90deg,var(--red),transparent);padding:2px 30px 2px 10px}
.toast.r{left:auto;right:var(--sr);background:linear-gradient(270deg,var(--red),transparent);padding:2px 10px 2px 30px}
.toast.on{animation:toast 1.4s}
@keyframes toast{0%{opacity:0;transform:translateX(-20px)}10%,75%{opacity:1;transform:none}100%{opacity:0}}
#banner{position:absolute;left:0;right:0;top:36%;text-align:center;font-family:var(--disp);font-size:clamp(46px,9vw,120px);letter-spacing:.04em;opacity:0;pointer-events:none;text-shadow:0 6px 0 rgba(0,0,0,.65),0 0 40px rgba(0,0,0,.6);-webkit-text-stroke:2px rgba(0,0,0,.4)}
#banner.on{animation:ban .35s cubic-bezier(.2,1.6,.4,1) forwards}
#banner.big{font-size:clamp(70px,15vw,210px);top:30%}
@keyframes ban{from{opacity:0;transform:scale(2.2)}to{opacity:1;transform:scale(1)}}
#cutin{position:absolute;left:0;right:0;top:30%;height:26%;display:flex;align-items:center;gap:20px;padding-left:12%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 70%,#000) 20%,color-mix(in srgb,var(--ac) 70%,#000) 80%,transparent);opacity:0;pointer-events:none;transform:skewY(-4deg)}
#cutin.on{animation:cut 1.1s ease forwards}
#cutin img{height:120%;aspect-ratio:1;object-fit:cover;border:4px solid #fff}
#cutin small{display:block;letter-spacing:.4em;font-weight:800} #cutin b{font-family:var(--disp);font-weight:400;font-size:clamp(40px,7vw,96px);line-height:1}
@keyframes cut{0%{opacity:0;transform:skewY(-4deg) translateX(-60%)}15%,80%{opacity:1;transform:skewY(-4deg)}100%{opacity:0;transform:skewY(-4deg) translateX(40%)}}
#introNames{position:absolute;inset:auto 0 12% 0;opacity:0;pointer-events:none}
#introNames.on{opacity:1}
#introNames>div{position:absolute;bottom:0;font-family:var(--disp);opacity:0}
#introNames b{display:block;font-weight:400;font-size:clamp(50px,9vw,120px);line-height:.9;color:#fff;text-shadow:0 5px 0 rgba(0,0,0,.6)} #introNames span{color:var(--ac);font-family:var(--body);font-weight:800;letter-spacing:.15em;font-size:18px}
#introNames .iL{left:var(--sl);animation:in1 3.2s ease} #introNames .iR{right:var(--sr);text-align:right;animation:in1 3.2s 3.2s ease}
@keyframes in1{0%{opacity:0;transform:translateX(-40px)}12%,85%{opacity:1;transform:none}100%{opacity:0}}
.pausebtn{position:absolute;top:calc(max(14px,env(safe-area-inset-top,0px)) + 68px);left:50%;transform:translateX(-50%);pointer-events:auto;width:40px;height:30px;background:rgba(0,0,0,.4);font-weight:800;letter-spacing:.1em;display:none}
body.touch .pausebtn{display:block}

/* ---------- pausa / resultados ---------- */
#pause{background:rgba(7,8,12,.7);backdrop-filter:blur(6px);align-items:center;justify-content:center}
.panel{background:rgba(15,16,22,.86);border:1px solid rgba(255,255,255,.1);padding:22px 26px;min-width:min(380px,100%)}
.panel h1{font-family:var(--disp);font-weight:400;font-size:44px;margin:0 0 6px}
#results{justify-content:flex-end;background:linear-gradient(90deg,rgba(7,8,12,.92),rgba(7,8,12,.3) 60%,transparent)}
#results .who{flex:1;display:flex;align-items:center;gap:24px}
#results .who img{height:min(78vh,620px);filter:drop-shadow(0 0 40px var(--ac))}
#results small{letter-spacing:.4em;font-weight:800;color:var(--ac)} #results h1{font-family:var(--disp);font-weight:400;font-size:clamp(56px,10vw,130px);margin:0;line-height:.9}
#results .wq{display:block;max-width:34em;margin:10px 0 2px;font-size:clamp(15px,1.7vw,21px);font-style:italic;color:#fff;opacity:0;border-left:3px solid var(--ac);padding:4px 0 4px 12px;animation:wqIn .6s .5s forwards}
#results .wq:before,#results .wq:after{content:none}
@keyframes wqIn{from{opacity:0;transform:translateX(-14px)}to{opacity:.92;transform:none}}
#results .score{font-family:var(--num);font-size:48px;margin:6px 0 0}
#results .menu.row button{min-width:200px}

/* ---------- otros ---------- */
.scroll{overflow:auto;flex:1;padding-right:6px}
#moves{background:rgba(7,8,12,.93)}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:8px 0 14px}
.keys h3,#movelist h3{font-family:var(--disp);font-weight:400;letter-spacing:.06em;margin:0 0 6px;color:var(--gold)}
.keys p{margin:0;line-height:1.8;color:#ddd}
kbd{display:inline-block;min-width:24px;text-align:center;padding:0 6px;border:1px solid rgba(255,255,255,.35);border-bottom-width:3px;border-radius:4px;font-family:var(--body);font-weight:700;margin:0 2px}
#movelist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px 18px}
#movelist h3{grid-column:1/-1;margin-top:12px}
.mv{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07)} .mv b{min-width:110px;font-family:var(--disp);font-weight:400;letter-spacing:.04em} .mv span{color:#ccc}
#settings{background:rgba(7,8,12,.9)}
.settings{display:grid;gap:14px;max-width:560px;margin-top:20px}
.settings label{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:20px;font-weight:700;letter-spacing:.05em;padding:10px 14px;background:rgba(255,255,255,.05)}
.settings select{font:inherit;font-size:17px;background:#15161d;color:#fff;border:1px solid rgba(255,255,255,.2);padding:6px 10px}
.settings input[type=range]{width:50%;accent-color:var(--gold)} .settings input[type=checkbox]{width:24px;height:24px;accent-color:var(--red)}
#online{background:rgba(7,8,12,.9)}
.online{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:center;max-width:900px;margin:0 auto;width:100%}
.online h2{font-family:var(--disp);font-weight:400;font-size:34px;margin:0} .online p{color:#ccc}
.online .status{grid-column:1/-1;text-align:center;color:var(--dim)}
.btn{font-family:var(--disp);letter-spacing:.06em;font-size:20px;padding:10px 20px;background:rgba(255,255,255,.1);transform:skewX(-10deg);margin-top:8px}
.btn.big{background:var(--red);font-size:26px;padding:12px 28px} .btn:hover{background:var(--gold);color:#000}
.code{font-family:var(--num);font-size:72px;letter-spacing:.2em;color:var(--gold);min-height:20px}
#onInput{font-family:var(--num);font-size:56px;letter-spacing:.3em;width:100%;background:#0d0e14;color:#fff;border:2px solid rgba(255,255,255,.2);padding:4px 14px;text-align:center}

/* ---------- táctil ---------- */
#touch{position:fixed;inset:0;pointer-events:none;display:none}
#touch.on{display:block;pointer-events:auto}
body:not([data-screen=hud]) #touch{display:none}
.joy{position:absolute;width:140px;height:140px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05);left:calc(var(--sl) + 20px);bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) + 20px);opacity:.6}
.joy.on{opacity:1}
.knob{position:absolute;left:45px;top:45px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.55)}
.btns{position:absolute;right:calc(var(--sr) + 6px);bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) + 6px);width:250px;height:200px}
.btns button{position:absolute;width:76px;height:76px;border-radius:50%;font-family:var(--disp);font-size:13px;letter-spacing:.04em;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.55);color:#fff}
.btns button.on{background:rgba(255,255,255,.4);transform:scale(.92)}
.b1{right:96px;bottom:20px;border-color:#3fa9ff!important} .b2{right:10px;bottom:62px;border-color:#ff9a3c!important} .b3{right:180px;bottom:0;width:62px!important;height:62px!important}
.b4{right:96px;bottom:104px;width:62px!important;height:62px!important} .b5{right:10px;bottom:150px;border-color:var(--gold)!important;color:var(--gold)!important}

@media (max-aspect-ratio:13/10){
  .selwrap{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr} #grid{grid-column:1/-1;order:-1;grid-template-columns:repeat(6,1fr)}
  #stages{grid-template-columns:1fr 1fr} .online{grid-template-columns:1fr}
}
@media (max-height:500px){
  .menu{margin-top:56px;gap:6px} .menu button{padding:6px 18px} .menu button b{font-size:24px} .menu button span{font-size:13px}
  #grid{grid-template-columns:repeat(6,1fr);gap:5px} .side p{display:none} .stat{display:none}
  .side h2{font-size:30px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}
body.test *{animation:none!important;filter:none!important;backdrop-filter:none!important;transition:none!important}

/* especial: cut-in corto */
#cutin.sp{top:20%;height:17%;padding-left:8%}
#cutin.sp.on{animation:cut .8s ease forwards}
#cutin.sp b{font-size:clamp(30px,5vw,68px)}
.meter.half span{color:#ffd23f;font-weight:800}
.meter.half{box-shadow:0 0 10px rgba(255,180,60,.55)}
.meter.full{box-shadow:0 0 16px rgba(255,60,60,.8)}
#touch .b5.ready{animation:pulse .35s infinite alternate;box-shadow:0 0 18px var(--gold)}

.mvchips{grid-column:1/-1;display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.mvchip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,.05);border:2px solid transparent;border-radius:8px;padding:4px 6px;color:#ddd;font-family:var(--disp);font-size:11px;letter-spacing:.04em;cursor:pointer}
.mvchip img{width:46px;height:46px;border-radius:6px;object-fit:cover}
.mvchip.on{border-color:var(--ac);background:rgba(255,255,255,.12);color:#fff}
.mv.own b{color:var(--gold)} .mv i{font-style:normal;font-size:.8em;color:#ff9a6a;margin-left:6px;letter-spacing:.03em}
.mv small{color:#9aa;font-size:.86em}.mv em{font-style:normal;letter-spacing:1px}.mv.combo b{min-width:150px}
.side .costume{margin-top:8px;background:rgba(255,255,255,.08);border:1px solid var(--ac,#fff);color:#fff;border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer;pointer-events:auto}
.side .costume i{font-style:normal;opacity:.7;margin-right:6px;font-size:11px;letter-spacing:.1em}
.side.locked .costume{opacity:.6}
/* modo historia */
#story{background:radial-gradient(120% 90% at 30% 60%,color-mix(in srgb,var(--ac) 40%,#000),#07080c 70%);justify-content:center}
#story .stwrap{display:flex;align-items:flex-end;gap:3vw;height:100%;width:100%;padding:0 5vw;box-sizing:border-box}
#story img{height:92%;max-width:42vw;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 30px #000);animation:vsIn .5s cubic-bezier(.2,1.4,.4,1)}
#story img.shadow{filter:brightness(.18) saturate(0) drop-shadow(0 0 22px #c02030)}
#story .sttext{flex:1;align-self:center;max-width:640px;color:#fff}
#story .sttext.center{text-align:center;margin:0 auto}
#story small{color:var(--ac);letter-spacing:.14em;font-weight:700}
#story h1{font-family:var(--disp);font-weight:400;font-size:clamp(40px,7vw,92px);line-height:.92;margin:.15em 0 .25em;text-shadow:0 5px 0 rgba(0,0,0,.6)}
#story p{font-size:clamp(15px,1.9vw,21px);line-height:1.45;opacity:.92;margin:0 0 1.2em}
#story .ladder{display:flex;gap:8px;margin:0 0 1.4em}
#story .ladder i{width:28px;height:10px;border-radius:5px;background:rgba(255,255,255,.18)}
#story .ladder i.ok{background:var(--ac)} #story .ladder i.cur{background:#fff;box-shadow:0 0 12px #fff}
#story .ladder i.boss{background:#5a0c14;width:40px} #story .ladder i.boss.cur{background:#ff2a3a;box-shadow:0 0 14px #ff2a3a}
#story .row{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){#story img{height:70%}#story .stwrap{gap:2vw}}
/* ranking */
table.rank{width:min(900px,94vw);margin:10px auto;border-collapse:collapse;color:#fff;font-size:15px}
table.rank th{font-size:11px;letter-spacing:.12em;opacity:.6;text-align:left;padding:6px}
table.rank td{padding:6px;border-top:1px solid rgba(255,255,255,.08)}
table.rank td img{width:38px;height:38px;border-radius:8px;object-fit:cover;border:2px solid var(--ac)}
table.rank tr:nth-child(2) td{background:rgba(255,210,63,.12)} table.rank td b{color:var(--ac)}
.rnote{width:min(900px,94vw);margin:8px auto 30px;opacity:.6;font-size:12px}

.creditos{width:min(720px,92vw);margin:14px auto 30px;color:#fff;opacity:.75;font-size:12px}
.creditos summary{cursor:pointer;font-size:13px;opacity:.9}
.creditos p{margin:4px 0}.creditos a{color:#ffd23f}

.hp-wrap .trait{position:absolute;top:calc(100% + 30px);left:clamp(48px,6vw,72px);font-size:10px;letter-spacing:.14em;color:var(--ac,#fff);opacity:.85;white-space:nowrap;text-shadow:0 1px 3px #000;font-weight:700}
.hp-wrap.r .trait{left:auto;right:clamp(48px,6vw,72px)}
.hp-wrap .trait.beast{color:#ffb03a;opacity:1;animation:pulse .25s infinite alternate}
@media (max-width:760px){.hp-wrap .trait{font-size:8px;top:calc(100% + 24px)}}
.b6{right:100px;bottom:196px;width:50px!important;height:50px!important;font-size:9px!important;opacity:.8}
/* --- móvil: todo se ve y se puede deslizar --- */
.screen:not(#hud):not(#vs):not(#boot):not(#title){overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.screen:not(#hud)::-webkit-scrollbar{width:6px}.screen:not(#hud)::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:3px}
#menu .menu{flex-shrink:0}
@media (max-height:620px){
  #menu{justify-content:flex-start;padding-top:calc(max(14px,env(safe-area-inset-top,0px)) + 58px)}
  #menu .logo{position:absolute}
  #menu .menu{margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;width:min(820px,100%);padding-bottom:20px}
  #menu .menu button{padding:6px 14px 6px 18px}
  #menu .menu button b{font-size:clamp(17px,4.2vh,24px)} #menu .menu button span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu.small{gap:6px} .menu.small button b{font-size:20px}
  #pause .panel{max-height:none}
}
@media (max-height:620px){ #menu{background:linear-gradient(90deg,rgba(7,8,12,.92) 0%,rgba(7,8,12,.8) 60%,rgba(7,8,12,.45) 100%)} }
@media (max-height:420px){ #menu .menu button span{display:none} #menu .menu{width:min(640px,100%);gap:7px 14px} #menu .menu button{padding:8px 16px} #menu .menu button b{font-size:21px} }
@media (max-height:330px){ #menu .menu{grid-template-columns:repeat(3,minmax(0,1fr));width:100%} }
@media (max-width:560px) and (min-height:621px){ #menu .menu{margin-top:90px} }
#story .stwrap{min-height:100%;height:auto}
@media (max-height:620px){ #story .stwrap{align-items:center;padding:10px 4vw} #story img{height:min(80vh,420px)} #story h1{font-size:clamp(30px,9vh,64px)} #story p{font-size:14px;margin-bottom:.7em} }
#results{overflow-y:auto} #results .who{flex-shrink:0}
@media (max-height:620px){ .xpbox{margin-top:6px;padding:6px 10px} #results .menu.row button{min-width:150px;padding:6px 14px} }
#pause,#story{justify-content:safe center}

.rkname{width:min(900px,94vw);margin:12px auto 4px;color:#fff;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rkname input{background:#14161d;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:8px 10px;font:inherit;font-size:15px;width:160px}
.rkh{width:min(900px,94vw);margin:16px auto 0;color:#ffd23f;font-size:13px;letter-spacing:.14em}
#vs .vsMid .tip{width:min(420px,40vw);margin:14px auto 0;color:#fff;font-size:clamp(12px,1.4vw,16px);line-height:1.4;opacity:.9;text-align:center;text-shadow:0 2px 6px #000}
#tuto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;pointer-events:auto;background:rgba(0,0,0,.35)}
#tuto .tb{background:rgba(10,12,18,.92);border:2px solid #ffd23f;border-radius:14px;padding:14px 20px;color:#fff;max-width:min(560px,92vw);max-height:90vh;overflow:auto}
#tuto h3{margin:0 0 8px;color:#ffd23f;letter-spacing:.14em}#tuto p{display:flex;gap:12px;margin:6px 0;font-size:14px}#tuto b{min-width:150px;color:#7fd6ff}#tuto small{display:block;margin-top:8px;opacity:.6}

/* enlace a Sallo Games (portada con todos los juegos) */
.hub{position:absolute;left:var(--sl,16px);bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:5;font-family:var(--disp);font-size:16px;letter-spacing:.14em;color:var(--dim);text-decoration:none;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.35)}
.hub:hover{color:var(--gold)}
/* portátiles de 720-980 px de alto: 10 botones no caben en una columna → dos columnas, debajo del logo */
@media (min-height:621px) and (max-height:1200px) and (min-width:700px){
  #menu{justify-content:flex-start;padding-top:calc(max(18px,env(safe-area-inset-top,0px)) + 92px)}
  #menu .menu{margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;width:min(860px,100%);padding-bottom:24px}
  #menu .menu button{padding:10px 18px 10px 22px}
  #menu .menu button b{font-size:clamp(22px,3.6vh,32px)}
  #menu{background:linear-gradient(90deg,rgba(7,8,12,.95) 0%,rgba(7,8,12,.78) 50%,rgba(7,8,12,0) 82%)}
}

#vs .vsBox .boxes{font-size:clamp(60px,11vw,150px);line-height:1;text-align:center;filter:drop-shadow(0 0 30px rgba(255,210,63,.4));margin-bottom:10px}