@font-face{font-family:"Big Shoulders";src:url(fonts/BigShoulders-Bold.woff) format("woff");font-weight:500 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/JetBrainsMono-Regular.woff) format("woff");font-weight:100 500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/JetBrainsMono-Bold.woff) format("woff");font-weight:600 900;font-display:swap}
:root{--fd:"Big Shoulders","Arial Narrow",Impact,sans-serif;--fm:"JetBrains Mono","Courier New",monospace}
:root{--red:#e02424;--red-d:#8f1414;--bg:#070707;--g1:#101010;--g2:#181818;--g3:#2a2a2a;--tx:#e8e8e8;--mut:#8a8a8a}
*{box-sizing:border-box}
body.soft .fx::before,body.soft h1,body.soft .glitch::before,body.soft .glitch::after{animation:none}
#cdown{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;font:900 clamp(60px,18cqw,160px) var(--fd);color:#fff;text-shadow:3px 0 var(--red);background:rgba(0,0,0,.45)}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--fm);font-variant-numeric:tabular-nums;display:flex;justify-content:center;min-height:100vh}
.wrap{width:min(1000px,100%);padding:18px}
header{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.kicker{font-size:12px;letter-spacing:.22em;color:var(--mut)}
h1{margin:4px 0 0;font-family:var(--fd);font-weight:900;font-size:clamp(25px,5vw,48px);letter-spacing:.05em;text-shadow:2px 0 rgba(224,36,36,.75),-2px 0 rgba(160,160,160,.45);animation:hjit 6s infinite steps(1)}
h1 span{color:var(--red)}
@keyframes hjit{0%,92%,100%{text-shadow:2px 0 rgba(224,36,36,.75),-2px 0 rgba(160,160,160,.45)}93%{text-shadow:7px 0 rgba(224,36,36,.9),-5px 0 rgba(160,160,160,.6);transform:translateX(2px)}95%{text-shadow:-6px 0 rgba(224,36,36,.9),4px 0 rgba(160,160,160,.6);transform:translateX(-2px)}97%{transform:none}}
.meta{text-align:right;color:#aaa;font-size:13px;font-family:var(--fm)}
.panel{border:1px solid var(--g3);background:var(--g1);border-radius:16px;overflow:hidden}
.hud{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--g3);flex-wrap:wrap}
.stat{background:var(--g2);border:1px solid var(--g3);padding:8px 11px;border-radius:10px;font-size:12px;font-family:var(--fm);letter-spacing:.04em}
.stat b{color:#fff}
.stage{padding:12px}
.screenwrap{position:relative;border-radius:10px;overflow:hidden;container-type:inline-size;background:#000}
canvas{width:100%;height:auto;aspect-ratio:var(--gar,960/500);display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}

/* VHS: scanlines + viñeta (también sobre las pantallas DOM) */
.fx{position:absolute;inset:0;pointer-events:none;z-index:5}
.fx::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 4px);animation:flick 5s infinite steps(1)}
.fx::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 66%,rgba(0,0,0,.42) 100%)}
@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.6}98%{opacity:1}99%{opacity:.75}}

/* Pantallas */
.screen{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,4.5cqw,46px);font-family:var(--fm)}
.screen.menu{background:linear-gradient(90deg,rgba(4,4,4,.9),rgba(4,4,4,.6) 58%,rgba(4,4,4,.15))}
.screen.center{align-items:center;text-align:center;background:rgba(3,3,3,.82)}
.hidden{display:none!important}
#results{padding:clamp(8px,2cqw,18px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));grid-auto-rows:min-content;align-content:safe center;gap:clamp(6px,1.6cqw,16px) clamp(10px,3cqw,32px);overflow:auto}
#results .rcol{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
@keyframes rin{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
#results:not(.hidden) .rcol>*,#results:not(.hidden) .rbar{animation:rin .5s cubic-bezier(.2,.8,.2,1) both}
#results:not(.hidden) .rcol>:nth-child(1){animation-delay:.05s}#results:not(.hidden) .rcol>:nth-child(2){animation-delay:.2s}
#results:not(.hidden) .rcol>:nth-child(3){animation-delay:.35s}#results:not(.hidden) .rcol>:nth-child(4){animation-delay:.5s}
#results:not(.hidden) .rcol>:nth-child(5){animation-delay:.65s}#results:not(.hidden) .rcol>:nth-child(n+6){animation-delay:.8s}
#results:not(.hidden) .rcol+.rcol>*{animation-delay:.45s}#results:not(.hidden) .rbar{animation-delay:1s}
@media (prefers-reduced-motion:reduce){#results .rcol>*,#results .rbar{animation:none!important}}
#results .rbar{grid-column:1/-1;margin:0}
#results .rtitle{font-size:clamp(22px,5.4cqw,52px)}
#results .rsong{margin:.4em 0 .3em}#results .rstats{margin:.5em 0}
#results .rtop,#results .links,#results .albumcta,#results .newrec{margin:.25em 0}
.k2{font-size:clamp(9px,1.5cqw,13px);letter-spacing:.3em;color:var(--mut)}
.logo{font-family:var(--fd);font-weight:900;font-size:clamp(34px,10.5cqw,100px);line-height:.95;letter-spacing:.04em;margin:.12em 0 .06em}
.sub{font-size:clamp(10px,1.7cqw,15px);letter-spacing:.2em;color:#bbb;margin-bottom:clamp(10px,2.4cqw,24px)}
.sub span{color:var(--red)}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none}
.glitch::before{color:var(--red);clip-path:inset(0 0 55% 0);transform:translate(-3px,0);animation:g1 2.6s infinite steps(1)}
.glitch::after{color:#9a9a9a;clip-path:inset(62% 0 0 0);transform:translate(3px,0);animation:g2 3.3s infinite steps(1)}
@keyframes g1{0%,86%,100%{clip-path:inset(0 0 55% 0);transform:translate(-3px,0)}88%{clip-path:inset(18% 0 45% 0);transform:translate(-9px,0)}92%{clip-path:inset(58% 0 8% 0);transform:translate(6px,0)}}
@keyframes g2{0%,80%,100%{clip-path:inset(62% 0 0 0);transform:translate(3px,0)}83%{clip-path:inset(30% 0 40% 0);transform:translate(8px,0)}90%{clip-path:inset(5% 0 75% 0);transform:translate(-6px,0)}}
.tapes{list-style:none;margin:0;padding:0;max-width:560px}
.tape{display:grid;grid-template-columns:auto 1fr auto auto;gap:.8em;align-items:center;width:100%;text-align:left;background:rgba(18,18,18,.7);border:1px solid var(--g3);border-radius:8px;color:var(--tx);padding:clamp(7px,1.3cqw,12px) 12px;margin-bottom:6px;font:700 clamp(11px,1.9cqw,16px) var(--fm);min-height:0}
.tape .tree{color:#666}
.tape:not([disabled]):hover,.tape:not([disabled]):focus-visible{border-color:var(--red);background:rgba(60,12,12,.55)}
.tape[disabled]{color:#555;cursor:not-allowed}
.tape .tb{color:var(--red);font-size:.85em}
.opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.opts button{min-height:0;padding:5px 9px;font:700 clamp(9px,1.5cqw,12px) var(--fm);border-radius:6px;background:rgba(18,18,18,.8)}.opts button.on{border-color:var(--red);color:#fff;background:rgba(80,14,14,.8)}
.ed{padding:12px}.ed select{background:var(--g2);color:var(--tx);border:1px solid #333;border-radius:10px;padding:0 10px;min-height:44px;font-family:inherit}.ed .ractions button{padding:8px 12px;min-height:40px}
.tutk kbd{font-size:1.1em;padding:3px 9px}.tutk kbd.on{background:var(--red);color:#fff;border-color:#f66}
.hint{font-size:clamp(9px,1.45cqw,12px);color:var(--mut);line-height:1.6;margin-top:clamp(6px,1.6cqw,16px);max-width:560px}
.warn{color:var(--red);font-size:clamp(10px,1.5cqw,13px);min-height:1.4em;margin-top:6px}
.rtitle{font-family:var(--fd);font-weight:900;font-size:clamp(26px,7.2cqw,70px);letter-spacing:.05em;line-height:1}
.rsong{color:#bbb;letter-spacing:.2em;font-size:clamp(10px,1.8cqw,16px);margin:.7em 0 .5em}
.racc{font-size:clamp(11px,2cqw,17px);letter-spacing:.16em;color:#ccc}
.racc b{font-size:clamp(28px,7cqw,64px);color:#fff;letter-spacing:.02em;margin-right:.15em;text-shadow:2px 0 var(--red)}
.rank{display:inline-block;margin-left:.6em;border:2px solid var(--red);color:var(--red);padding:0 .45em;font-weight:900;font-size:clamp(16px,3.2cqw,30px)}
.rstats{display:flex;gap:clamp(8px,1.8cqw,18px);flex-wrap:wrap;justify-content:center;margin:.9em 0;font-size:clamp(9px,1.5cqw,13px);color:var(--mut)}
.rstats b{color:#ddd;display:block;font-size:1.25em}
.newrec{color:var(--red);letter-spacing:.2em;font-size:clamp(9px,1.5cqw,13px);min-height:1.2em}
.links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:.5em 0}
.lbtn{color:var(--tx);text-decoration:none;border:1px solid var(--red);padding:clamp(7px,1.3cqw,11px) clamp(10px,2cqw,18px);font-weight:700;letter-spacing:.12em;font-size:clamp(10px,1.7cqw,14px);border-radius:6px;background:rgba(40,8,8,.6)}
.lbtn::before{content:"[ "}.lbtn::after{content:" ]"}
.lbtn:hover,.lbtn:focus-visible{background:var(--red-d);outline:none}
.lbtn.off{opacity:.35;border-style:dashed;cursor:not-allowed}
.ractions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:.6em}

.controls{display:flex;gap:10px;padding:0 12px 12px;flex-wrap:wrap;align-items:center}
button{background:var(--g2);color:var(--tx);border:1px solid #333;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer;min-height:44px;font-family:inherit}
button:hover{border-color:var(--red)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.primary{background:#b51f1f;border-color:#d33}
.vol{margin-left:auto;font:700 12px var(--fm);color:var(--mut);display:flex;gap:8px;align-items:center}
.vol input{accent-color:var(--red)}
.vol+.vol{margin-left:0}
.note{padding:0 14px 14px;color:#888;font-size:12px;line-height:1.6}
kbd{background:#222;border:1px solid #333;border-radius:4px;padding:1px 5px;font-size:11px;color:#ddd}
#message{font-weight:700;color:#eee}
html,body{overscroll-behavior:none}
.controls button,canvas{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.controls #jump,.controls #duck,.controls #mard,.controls #pause{touch-action:none}
@media(pointer:coarse){.controls{padding-bottom:max(12px,env(safe-area-inset-bottom))}.controls #jump,.controls #duck{flex:1 1 42%;min-height:84px;font-size:20px}.controls #mard,.controls #pause{min-height:60px}}
.rrec{width:min(100%,430px);margin:.3em 0;font:700 12px var(--fm)}
.rrec .rr{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:4px;padding:3px 6px;border-bottom:1px solid #222;text-align:right}
.rrec .rr>:first-child{text-align:left;color:#999}
.rrec .rr.h{color:#777;font-size:10px}
.rrec .rr.new{background:rgba(224,36,36,.14)}
.rrec .rr.new>b:nth-child(2){color:#ff6a6a}
.rrec i{font-style:normal}.rrec .up{color:#6dffc4}.rrec .dn{color:#ff6a6a}
@media(max-width:600px){.meta{text-align:left}}
@media(prefers-reduced-motion:reduce){h1,.fx::before,.glitch::before,.glitch::after{animation:none}}

/* ===== v6: menú reorganizado ===== */
.screen.menu{padding:clamp(10px,2.6cqw,28px);justify-content:space-between;gap:clamp(6px,1.2cqw,12px);overflow:auto;
  background:linear-gradient(90deg,rgba(4,4,4,.93),rgba(4,4,4,.8) 60%,rgba(4,4,4,.6))}
.mgrid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(10px,2.2cqw,24px);align-items:center}
.mleft,.mright{background:rgba(6,6,6,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid #222;border-radius:12px;padding:clamp(8px,1.6cqw,16px)}
.screen.menu .logo{font-size:clamp(26px,7.2cqw,70px)}
.screen.menu .sub{margin-bottom:clamp(6px,1.2cqw,12px)}
.screen.menu .tapes{max-width:none}
.screen.menu .tape{padding:clamp(5px,.9cqw,9px) 12px;margin-bottom:5px;position:relative}
.screen.menu .tape:not([disabled]):hover,.screen.menu .tape:not([disabled]):focus-visible{border-color:#888;background:rgba(40,40,40,.7)}
.tape.sel,.screen.menu .tape.sel:hover,.screen.menu .tape.sel:focus-visible{border-color:var(--red);background:rgba(70,14,14,.7);
  box-shadow:0 0 0 1px var(--red),0 0 14px rgba(224,36,36,.45),inset 4px 0 0 var(--red);animation:tsel 4s infinite steps(1)}
.tape.sel .tn{color:#fff;text-shadow:1px 0 rgba(224,36,36,.8),-1px 0 rgba(150,150,150,.4)}
.tape.sel .tree{color:var(--red)}
@keyframes tsel{0%,93%,100%{transform:none}94%{transform:translateX(3px)}96%{transform:translateX(-2px)}98%{transform:none}}
.mright{display:flex;flex-direction:column;gap:clamp(6px,1.2cqw,12px)}
.tinfo{display:flex;gap:clamp(8px,1.6cqw,16px);align-items:center;animation:cin .35s ease-out}
.cas{width:clamp(80px,17cqw,170px);flex:none;animation:cin .35s ease-out}
.cas .reel{transform-box:fill-box;transform-origin:center;animation:spin 6s linear infinite}
@keyframes cin{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.tdata{font-size:clamp(9px,1.5cqw,13px);line-height:1.7;color:var(--mut);letter-spacing:.08em;min-width:0}
.tdata b{color:#ddd;font-weight:700}
.tdata .tt{font:900 clamp(13px,2.4cqw,22px) var(--fd);color:#fff;letter-spacing:.06em;margin-bottom:.2em}
.tdata .rec{color:#fff}
.opts.mods{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.opts button{background:rgba(24,24,24,.9);border-color:#3a3a3a;color:#ddd}
.opts button.on{border-color:#bbb;color:#fff;background:rgba(58,58,58,.9)}
.opts button:hover{border-color:#999}
.mrow{display:flex;gap:8px;align-items:stretch}
.playbtn{flex:1;min-height:0;font:900 clamp(13px,2.4cqw,20px) var(--fd);letter-spacing:.22em;padding:clamp(8px,1.4cqw,13px);
  background:var(--red);border:1px solid #ff6a6a;color:#fff;border-radius:8px;box-shadow:0 0 18px rgba(224,36,36,.45)}
.playbtn:hover,.playbtn:focus-visible{background:#f03030;border-color:#fff}
.gearbtn{min-height:0;padding:0 clamp(8px,1.6cqw,14px);font:700 clamp(10px,1.6cqw,13px) var(--fm);letter-spacing:.08em;border-radius:8px;background:rgba(24,24,24,.9);border-color:#3a3a3a;color:#ddd}
.screen.menu .warn{min-height:0;margin:0}.screen.menu .warn:empty{display:none}
.legend{margin:0;max-width:none;padding:clamp(5px,1cqw,9px) clamp(8px,1.6cqw,14px);color:#d4d4d4;background:rgba(0,0,0,.6);border:1px solid #2a2a2a;border-radius:8px;
  font-size:clamp(10px,1.55cqw,13px);line-height:1.7}
.legend kbd{background:#2c2c2c;border-color:#555;color:#fff}
.legend b{color:#fff}
/* HUD: en el menú solo TAPE y RÉCORD */
.stat.menu-only{display:none}
#gamePanel.inmenu .stat.live{display:none}
#gamePanel.inmenu .stat.menu-only{display:block}
/* Ajustes */
#setScr{background:rgba(3,3,3,.94);overflow:auto}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2cqw,22px);text-align:left;width:min(100%,800px);margin:clamp(8px,1.6cqw,16px) 0}
.sgrid .opts{flex-direction:column;flex-wrap:nowrap;margin-top:6px}
.sgrid .opts button{text-align:left;width:100%;padding:8px 10px}
.sgrid .opts button#oClr{border-style:dashed}
@container (max-width:640px){
  .mgrid{grid-template-columns:1fr}
  .tinfo{display:none}
  .sgrid{grid-template-columns:1fr}
}
body.soft .tape.sel,body.soft .cas,body.soft .cas .reel,body.soft .tinfo{animation:none}
@media(prefers-reduced-motion:reduce){.tape.sel,.cas,.cas .reel,.tinfo{animation:none}}

/* ---- PARTE 1: CTAs musicales ---- */
.plat{display:flex;gap:clamp(5px,1cqw,10px);flex-wrap:wrap;align-items:center;justify-content:center;padding:clamp(5px,1cqw,9px);border:1px solid var(--g3);background:rgba(10,10,10,.8);border-radius:8px}
.plat a{color:var(--tx);text-decoration:none;font-size:clamp(9px,1.5cqw,12px);font-weight:700;letter-spacing:.12em;padding:clamp(4px,.8cqw,7px) clamp(7px,1.4cqw,12px);border:1px solid var(--g3);border-radius:6px;background:var(--g2)}
.plat a:hover,.plat a:focus-visible{border-color:var(--red);background:var(--red-d);outline:none}
.plat .follow{color:var(--mut);font-size:clamp(8px,1.3cqw,11px);letter-spacing:.2em}
.scfloat{position:absolute;top:clamp(6px,1.4cqw,14px);right:clamp(6px,1.4cqw,14px);z-index:4;color:#fff;text-decoration:none;font-size:clamp(8px,1.4cqw,11px);font-weight:700;letter-spacing:.14em;padding:clamp(4px,.8cqw,7px) clamp(7px,1.4cqw,12px);border-radius:999px;background:rgba(255,85,0,.85);opacity:.7;transition:opacity .2s}
.scfloat:hover,.scfloat:focus-visible{opacity:1;outline:none}
.albumcta{display:none;margin:.4em 0;font-size:clamp(9px,1.6cqw,13px);letter-spacing:.14em;color:var(--mut)}
.albumcta a{color:var(--tx);font-weight:700;border-bottom:1px solid var(--red);text-decoration:none}
.albumcta a:hover{color:#fff;background:var(--red-d)}

/* ---- PARTE 2/3 ---- */
#loadScr{background:rgba(3,3,3,.94);z-index:6;gap:clamp(3px,.8cqw,8px);overflow:hidden}
#loadScr img{flex:none;width:clamp(60px,13cqw,120px);aspect-ratio:1;object-fit:cover;border-radius:8px;box-shadow:0 0 40px rgba(224,36,36,.35)}
#loadScr .lt{font:900 clamp(18px,4.4cqw,40px) var(--fd);letter-spacing:.14em;color:#fff}
#loadScr .lbar{width:min(60%,360px);height:3px;background:rgba(255,255,255,.12);margin-top:.6em}
#loadScr .lbar i{display:block;height:100%;width:0;background:var(--red)}
#loadScr .lbar i.go{animation:lbar 3s linear forwards}
@keyframes lbar{to{width:100%}}
#vslot{position:relative;flex:none;width:clamp(140px,30cqw,240px);height:clamp(70px,15cqw,120px);overflow:hidden;margin:.3em 0;background:#0a0a0a;border:2px solid #333;border-radius:6px 6px 3px 3px}
#vslot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;background:#000;box-shadow:0 -1px 0 #666;z-index:1}
#vslot::before{content:'';position:absolute;right:6px;bottom:1px;width:5px;height:5px;border-radius:50%;background:#400;z-index:2}
#vslot.ok::before{background:var(--red);box-shadow:0 0 8px var(--red)}
#vtape{position:absolute;left:4%;right:4%;top:0;transform:translateY(-110%)}
#vtape .cas{width:100%;display:block;animation:none}
#vtape.go{animation:vins 1s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes vins{0%{transform:translateY(-110%)}68%{transform:translateY(24%)}80%{transform:translateY(16%)}100%{transform:translateY(16%)}}
body.soft #vtape,body.soft #vtape.go{animation:none;transform:translateY(16%)}
.rtop{display:flex;flex-wrap:wrap;gap:3px 14px;justify-content:center;font-size:clamp(8px,1.4cqw,12px);color:var(--mut);margin:.3em auto;max-width:92%}
.rtop b{width:100%;font-weight:400;letter-spacing:.2em}.rtop .me{color:var(--red)}
#loadScr .lf{font-size:clamp(9px,1.7cqw,14px);letter-spacing:.3em;color:var(--red);animation:lblink 1s infinite alternate}
@keyframes lblink{from{opacity:.4}to{opacity:1}}
.mcover{width:clamp(80px,19cqw,190px);aspect-ratio:1;object-fit:cover;border-radius:8px;flex:none;box-shadow:0 6px 30px rgba(0,0,0,.6);animation:cin .35s ease-out}
.tdata .plays{color:#bbb}.tdata .tech{font-size:.85em;opacity:.7}
.screen.menu{background:linear-gradient(90deg,rgba(4,4,4,.88),rgba(4,4,4,.55) 60%,rgba(4,4,4,.25))!important}
.screen.menu .k2,.screen.menu .sub,#hint.legend{display:none}
.iconbtn{font-size:1.15em;line-height:1}
#rNew.big{font:900 clamp(16px,4cqw,34px) var(--fd);letter-spacing:.24em;color:#fff;text-shadow:0 0 18px var(--red),3px 0 var(--red);animation:recpop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes recpop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
#recFlash{position:absolute;inset:0;z-index:7;pointer-events:none;background:#fff;opacity:0}
#recFlash.go{animation:rflash .6s ease-out}
@keyframes rflash{from{opacity:.85}to{opacity:0}}
#confetti{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:7;pointer-events:none}

/* ---- MODO MARDITO: bordes del panel/HUD en magenta + chip de logros ---- */
.panel{transition:border-color .3s ease}
.panel.sp{border-color:#ff2e6e}
.panel.sp .hud{border-bottom-color:#ff2e6e}
.panel.sp .stat{border-color:rgba(255,46,110,.7)}
.panel .stat{transition:border-color .3s ease,box-shadow .3s ease}
.achchip{font:inherit;letter-spacing:inherit;font-style:normal;margin-left:1em;padding:1px 8px;color:var(--red);background:transparent;border:1px solid rgba(224,36,36,.5);border-radius:6px;cursor:pointer;min-height:0}
.achchip:hover,.achchip:focus-visible{color:#fff;border-color:#fff;outline:none}
/* ---- Grupo colapsable MÁS OPCIONES ---- */
.mright{--mg:clamp(6px,1.2cqw,12px)}
.morebtn{width:100%;padding:clamp(6px,1cqw,9px) 8px;font-size:clamp(10px,1.6cqw,13px);letter-spacing:.16em}
.morebtn .caret{display:inline-block;transition:transform .35s ease}
.morebtn[aria-expanded="true"]{border-color:#bbb;color:#fff}
.morebtn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.more{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;margin-top:calc(var(--mg) * -1);
  transition:grid-template-rows .38s ease,opacity .3s ease,margin-top .38s ease,visibility 0s linear .38s}
.more.open{grid-template-rows:1fr;opacity:1;visibility:visible;margin-top:0;
  transition:grid-template-rows .38s ease,opacity .3s ease .05s,margin-top .38s ease,visibility 0s}
.moreIn{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:var(--mg)}
@media (prefers-reduced-motion:reduce){.more,.more.open,.morebtn .caret{transition:none}}
/* ---- PARTE 4: modos ESCUCHA / TV ---- */
.mrow.modes .gearbtn{flex:1;padding:clamp(5px,.9cqw,8px) 6px;font-size:clamp(9px,1.5cqw,12px);letter-spacing:.14em}
body.watching .hud,body.watching .controls,body.watching .note{display:none}
body.kiosk #game{cursor:none}
body.embed header,body.embed .controls,body.embed .note,body.embed .hud{display:none}
body.embed .wrap{padding:0;width:100%}
body.embed .panel{border:0;border-radius:0}
body.embed .stage{padding:0}
body.embed .screenwrap{border-radius:0}
#tapScr{background:rgba(3,3,3,.9);z-index:8;cursor:pointer}
#shopScr{background:rgba(3,3,3,.94);overflow:auto;justify-content:flex-start}
.achbar{position:relative;height:18px;border:1px solid #444;border-radius:9px;overflow:hidden;margin:.3em 0 .6em;background:#111}.achbar i{display:block;height:100%;background:linear-gradient(90deg,#7a1c1c,#e02424);transition:width .5s}.achbar span{position:absolute;inset:0;text-align:center;font:700 11px/18px var(--fm);color:#fff}
.achcat{margin-top:.7em;padding-bottom:2px;border-bottom:1px solid #333;color:#e8b4b4;font-weight:700;letter-spacing:.08em}.achcat em{font-style:normal;color:#888;margin-left:.6em}
#shPrev{display:block;margin:4px auto 0;border:1px solid #333;border-radius:8px;background:#0b0b0b;width:min(100%,220px);height:auto}.pvl{font:700 11px var(--fm);color:#aaa;margin-top:2px;min-height:1.2em}
.opts button.poor{opacity:.55}.opts button.bought{animation:bgt .9s}@keyframes bgt{0%{background:#2fd66a;color:#000;transform:scale(1.06)}100%{transform:none}}
#shMsg{min-height:1.6em;font-weight:700;color:#ffd23f;transition:color .3s}#shMsg.err{color:#ff6b6b}
.sgrid .opts button .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
#loadEq{display:flex;gap:3px;align-items:flex-end;height:clamp(16px,3.4cqw,26px);margin-top:.5em}
#loadEq i{width:clamp(2px,.5cqw,4px);height:3px;background:var(--red);opacity:.8;animation:eqb 1.3s ease-in-out infinite}
@keyframes eqb{0%,100%{height:3px}50%{height:var(--h,10px)}}
body.soft #loadEq i{animation:none}
#loadScr .lbar i{transition:width .25s}
.ltip{max-width:80%;font-size:clamp(9px,1.6cqw,13px);color:#bbb;letter-spacing:.08em;margin-top:.6em;line-height:1.5}

/* ===== ACCESIBILIDAD (auditoría WCAG 2.2 AA · oct 2026) ===== */
:root{--red-t:#ff5252;--bd:#6e6e6e}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* bordes de controles visibles (1.4.11: mínimo 3:1) */
button{border-color:var(--bd)}
.opts button,.gearbtn{border-color:var(--bd)}
.tape{border-color:#6a6a6a}
.plat a{border-color:var(--bd)}
/* texto rojo pequeño legible (1.4.3: mínimo 4.5:1) */
.warn,.newrec,.tape .tb,.achchip,#loadScr .lf,.rtop .me,.tape.sel .tree{color:var(--red-t)}
.achchip{border-color:rgba(255,82,82,.7)}
/* botón flotante de SoundCloud: contraste completo */
.scfloat{opacity:1;background:#b83a00}
/* el foco siempre visible, también donde se quitó el outline */
.lbtn:focus-visible,.plat a:focus-visible,.scfloat:focus-visible,.achchip:focus-visible,.tape:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lbtn.off{opacity:.55}

/* ===== v7: menú en móvil + MÁS OPCIONES sin desborde ===== */
/* en el menú, los botones de juego no hacen nada: se ocultan (el volumen queda) */
#gamePanel.inmenu .controls>button{display:none}
#gamePanel.inmenu .controls{padding-top:0}
/* columna derecha: si no cabe (MÁS OPCIONES abierto) hace scroll dentro de su panel */
.mgrid{grid-template-rows:minmax(0,1fr)}
.mright{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent}
.mright::-webkit-scrollbar{width:6px}.mright::-webkit-scrollbar-thumb{background:#555;border-radius:3px}
.mrow.modes .gearbtn{white-space:nowrap;min-height:34px}
/* enlace principal al EP dentro de la barra de plataformas (reemplaza el botón flotante) */
.plat a.hot{background:#b83a00;border-color:#ff7a33;color:#fff}
.plat a.hot:hover,.plat a.hot:focus-visible{background:#d94700}
/* pantallas angostas: el menú, Ajustes y Tienda ocupan casi toda la pantalla en vez de la caja 16:9 */
@media (max-width:700px){
  #gamePanel.inmenu .screenwrap{height:clamp(520px,calc(100svh - 150px),780px)}
  #gamePanel.inmenu #game{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  #gamePanel.inmenu .stage{padding:8px}
}
@container (max-width:640px){
  .mgrid{flex:none;grid-template-rows:auto;align-items:start}
  .mright{max-height:none;overflow:visible}
  .tinfo{display:flex}
  .mcover{width:72px}
  .tdata{font-size:11px}
  .tdata .tt{font-size:18px}
  .screen.menu .logo{font-size:clamp(30px,11cqw,52px)}
  .screen.menu .tape{font-size:13px;padding:8px 10px}
  .playbtn{font-size:18px;padding:12px}
  .mrow .gearbtn{min-width:44px;font-size:16px}
  .opts.mods button{font-size:11px;padding:8px}
  .plat{gap:6px}.plat a{font-size:11px;padding:7px 10px}.plat .follow{width:100%;text-align:center}
}
.mright>*{flex-shrink:0}
.mrow.modes{flex-wrap:wrap}
.mrow.modes .gearbtn{flex:1 1 auto}
@media (max-width:700px){#gamePanel.inmenu .controls{justify-content:center}#gamePanel.inmenu .vol{margin-left:0}}

/* ===== v8: consistencia (iconos, interruptores, monedas, HUD) ===== */
.ic{width:1.15em;height:1.15em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mrow .gearbtn .ic{width:1.45em;height:1.45em;vertical-align:-.3em}
.iconbtn .ic{width:1.25em;height:1.25em}
.morebtn .caret .ic{width:1em;height:1em}
.rtitle .ic{width:.85em;height:.85em;vertical-align:-.08em;stroke-width:2.4}
.tape .ti .ic{width:1em;height:1em;color:#888}
/* interruptores de Ajustes: un LED que dice el estado, igual en todos */
.sgrid .opts button[aria-pressed]{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sgrid .opts button[aria-pressed]::after{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#3a3a3a;box-shadow:inset 0 0 0 1px #777}
.sgrid .opts button[aria-pressed="true"]::after{background:var(--red);box-shadow:0 0 6px var(--red)}
.opts button.on,.opts button[aria-pressed="true"]{border-color:#bbb;color:#fff;background:rgba(58,58,58,.9)}
/* monedas: siempre doradas */
:root{--gold:#ffd23f}
.coin,.coin b,.tape .tb.coin,.stat.coin b{color:var(--gold)}
/* HUD en el menú: la cinta y el récord ya están en la ficha; solo quedan las monedas */
#gamePanel.inmenu .stat.game-only,#gamePanel.inmenu .stat.menu-only:not(.coin){display:none}
#gamePanel.inmenu .hud{justify-content:flex-end}
.opts button.poor{opacity:1;color:#9a9a9a}.opts button.poor .coin{color:#b8973a}

/* ===== v9: ranking, desafío diario ===== */
.rklist{list-style:none;counter-reset:rk;margin:.4em 0;padding:0;width:100%;font:700 clamp(10px,1.6cqw,13px) var(--fm);text-align:left}
.rklist li{display:grid;grid-template-columns:3.2em 1fr auto 6.5em;gap:6px;align-items:center;padding:6px 8px;border-bottom:1px solid #1e1e1e}
.rklist li em{font-style:normal;color:var(--gold,#ffd23f);font-size:1.05em}
.rklist li:nth-child(-n+3){background:linear-gradient(90deg,rgba(255,210,63,.08),transparent)}
.rklist.rec li{grid-template-columns:4em 1fr auto 6.5em}.rklist.rec li em{color:#888;font-size:.85em}.rklist.rec li:nth-child(-n+3){background:none}
.rklist li span small{display:block;color:#888;font-size:.8em;font-weight:400;letter-spacing:.04em}
.rklist li b{color:#fff}.rklist li i{font-style:normal;color:#9a9a9a;text-align:right}
.rklist li.me{background:rgba(224,36,36,.16)}
.ronline{width:min(100%,430px);margin:.3em 0}
.rkform{display:flex;gap:6px;margin:.3em 0}.rkform input{flex:1;min-width:0;background:var(--g2);color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;font:700 13px var(--fm);text-transform:uppercase}
.rkform button{min-height:36px;padding:6px 12px}
#rkTabs{flex-direction:column;align-items:center;gap:8px;width:min(100%,640px)}
.rkseg{display:inline-flex;border:1px solid #3a3a3a;border-radius:999px;overflow:hidden}
.rkseg button{min-height:40px;padding:0 1em;border:0;border-radius:0;background:rgba(10,10,10,.7);color:#aaa;font:700 clamp(10px,1.4cqw,12px) var(--fm);letter-spacing:.1em}
.rkseg button+button{border-left:1px solid #3a3a3a}.rkseg button[aria-selected="true"]{background:var(--red);color:#fff}
.rkchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.rkchips button{min-height:34px;padding:0 .9em;border-radius:999px;font:700 clamp(9px,1.3cqw,11px) var(--fm);letter-spacing:.08em;background:#111;border:1px solid #333;color:#ccc}
.rkchips button.on{background:#fff;color:#000;border-color:#fff}
.rkchips.dif button.on{background:var(--red);color:#fff;border-color:var(--red)}
#rankScr{justify-content:flex-start;overflow-y:auto}
#rkBody{width:min(100%,640px)!important}
.rkmine{margin:.2em 0 .5em;padding:8px 10px;border-radius:8px;background:rgba(77,163,255,.1);border:1px solid rgba(77,163,255,.35);font:700 clamp(10px,1.4cqw,12px) var(--fm);color:#cde}
.rkempty{padding:1.2em;text-align:center;font:700 12px var(--fm);color:#888;letter-spacing:.12em}
.linkbtn{background:none;border:0;padding:0;color:#4da3ff;text-decoration:underline;font:inherit;cursor:pointer;min-height:0}

/* ===== v10: HUD compacto, sonido en Ajustes ===== */
.hud{flex-wrap:nowrap;gap:6px;padding:8px 12px;overflow-x:auto;scrollbar-width:none;align-items:stretch}
.hud::-webkit-scrollbar{display:none}
.stat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:5px 9px;font-size:9px;letter-spacing:.14em;color:var(--mut);white-space:nowrap;background:rgba(24,24,24,.6)}
.stat b{font-size:15px;letter-spacing:.02em;color:#fff;overflow:hidden;text-overflow:ellipsis}
.stat.big b{font-size:19px}
.stat.minor{flex:.7 1 0}.stat.minor b{font-size:12px;color:#ccc}
.stat.route{display:none}#gamePanel:not(.inmenu) .stat.route.on{display:flex}
.stat.sig{position:relative;overflow:hidden}
.stat.sig::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--sig,100%);background:#2fd6a0;transition:width .25s}
.stat.sig.low::after{background:var(--red)}.stat.sig.low b{color:#ff6a6a}
#gamePanel.inmenu .hud{justify-content:flex-end}#gamePanel.inmenu .stat{flex:0 0 auto}
@media(max-width:700px){.stat.minor,.stat.live:has(#pstreak){display:none!important}.stat{padding:4px 7px}.stat b{font-size:13px}.stat.big b{font-size:15px}}
/* controles táctiles solo en pantallas táctiles */
@media(pointer:fine){.controls #jump,.controls #duck,.controls #mard{display:none}}
.controls:empty,#gamePanel.inmenu .controls{display:none}
/* Ajustes: volumen + 2 columnas centradas */
.sgrid{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,620px)}
.sliders{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.sliders .vol{margin:0;display:grid;grid-template-columns:5.5em 1fr;font-size:11px;color:#ddd}
.sliders .vol input{width:100%}
@media(max-width:700px){.stat.game-only{display:none!important}.hud{gap:4px;padding:6px 8px}.stat{letter-spacing:.06em;padding:4px 5px}.stat b{font-size:12px;letter-spacing:0}.stat.big b{font-size:14px}}

/* táctil: se juega tocando la pantalla (30 % izq. agacha · 70 % der. salta); MARDITO automático */
.controls #jump,.controls #duck,.controls #mard,#oMan{display:none!important}

/* ===== v11: resultados por pasos, extras desbloqueables ===== */
#results:not(.det) #rRec,#results:not(.det) #rGraph,#results:not(.det) .rtop{display:none}
.rdet{min-height:30px;padding:4px 12px;font-size:11px;letter-spacing:.14em;margin:.3em 0}
.xcard{border:1px solid var(--gold);border-radius:10px;padding:8px 12px;margin:.4em 0;background:rgba(255,210,63,.07);font-size:clamp(10px,1.6cqw,13px);color:#ddd;text-align:left;width:min(100%,430px)}
.xcard b{color:var(--gold);display:block;letter-spacing:.12em;margin-bottom:2px}.xcard a{color:#fff}
.sgrid>div:has(#shTape:empty){display:none}

/* v12 */
#shopScr .sgrid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));width:min(100%,920px)}
.coinlog{width:min(100%,430px);font:700 clamp(10px,1.5cqw,12px) var(--fm);color:#bbb;margin:.2em 0}
.coinlog div{display:flex;justify-content:space-between;padding:1px 0;border-bottom:1px dashed #2a2a2a}
.secrow{margin-top:.25em;letter-spacing:.2em;color:#555}.secrow span.on{color:var(--gold);text-shadow:0 0 6px rgba(255,210,63,.6)}
/* ===== v14 · tipografía y resultados ===== */
.rtitle,.tdata .tt,.playbtn,#loadScr .lt,#cdown{font-family:var(--fd);letter-spacing:.06em}
.rtitle{font-weight:900;text-transform:uppercase}
button,.lbtn{font-family:var(--fm);font-weight:700}
.stat b,.stat .v,#score,#combo,#acc,#signal{font-variant-numeric:tabular-nums}
#results{background:radial-gradient(120% 90% at 30% 20%,rgba(40,8,8,.55),rgba(4,4,4,.95) 60%),rgba(4,4,4,.9)}
#results .rtitle{font-size:clamp(26px,6cqw,60px);line-height:.92;letter-spacing:.04em}
#results .rsong{font-size:clamp(10px,1.5cqw,13px);letter-spacing:.24em;color:#9a9a9a}
.rscore{display:flex;align-items:baseline;gap:.4em;margin:.15em 0 .1em}
.rscore b{font:900 clamp(40px,9.5cqw,92px)/1 var(--fd);color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:3px 0 var(--red),0 0 28px rgba(224,36,36,.35)}
.rscore span{font:700 clamp(10px,1.5cqw,13px) var(--fm);letter-spacing:.3em;color:var(--mut)}
#results .racc{display:flex;align-items:center;gap:.6em;justify-content:center}
#results .racc b{font:900 clamp(22px,4.4cqw,40px)/1 var(--fd);text-shadow:none;margin:0}
#results .rank{font:900 clamp(22px,4.4cqw,40px)/1 var(--fd);padding:.08em .38em;border:2px solid var(--red);color:#fff;background:rgba(224,36,36,.18)}
#results .rstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#262626;border:1px solid #262626;border-radius:8px;overflow:hidden;width:min(100%,430px);margin:.7em 0 .4em}
#results .rstats>div{background:#0e0e0e;padding:.55em .3em;font-size:clamp(8px,1.2cqw,10px);letter-spacing:.14em;color:var(--mut);text-align:center}
#results .rstats b{font:900 clamp(17px,2.8cqw,24px)/1.1 var(--fd);color:#fff;margin-top:.25em;letter-spacing:.03em}
.newrec{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:0}
#rNew.big{font:inherit;text-shadow:none;animation:none;letter-spacing:inherit}
.newrec .badge{font:700 clamp(9px,1.3cqw,11px) var(--fm);letter-spacing:.16em;padding:.45em .8em;border:1px solid #3a3a3a;border-radius:999px;color:#cfcfcf;background:#111}
.newrec .badge.hot{border-color:var(--red);color:#fff;background:rgba(224,36,36,.2);box-shadow:0 0 14px rgba(224,36,36,.35);animation:recpop .6s cubic-bezier(.2,1.6,.4,1) both}
body.soft .newrec .badge.hot{animation:none}
.rdet{border-radius:999px}
#results.det #rBrk,#results.det #rRec,#results.det #rGraph,#results.det .rtop{animation:none!important;opacity:1;transform:none}
#results:not(.det) #rBrk{display:none}
.rbrk{width:min(100%,430px);margin:.3em 0 .5em;font:500 clamp(10px,1.4cqw,12px) var(--fm)}
.rbrk .bh{display:flex;justify-content:space-between;color:var(--mut);letter-spacing:.18em;font-size:.85em;padding:0 2px 6px;border-bottom:1px solid #2a2a2a}
.rbrk .bh b{color:#fff;font:900 1.5em var(--fd);letter-spacing:.03em}
.rbrk .br{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:6px 2px 8px;border-bottom:1px solid #1d1d1d;text-align:left}
.rbrk .br span{color:#ddd;font-weight:700;letter-spacing:.1em}
.rbrk .br i{display:block;font-style:normal;font-weight:400;color:#777;letter-spacing:.02em;font-size:.86em;margin-top:2px}
.rbrk .br b{color:#fff;font:900 1.45em var(--fd)}
.rbrk .br em{grid-column:1/-1;height:3px;background:#1d1d1d;border-radius:2px;position:relative;overflow:hidden}
.rbrk .br em::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,var(--red),#ff8a5c)}
.coinlog{font-family:var(--fm)}
#results{align-content:start}#results .rcol{justify-content:flex-start}
#shPrev{width:min(100%,420px);height:auto;aspect-ratio:420/220;border-color:#2c2c2c;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.pvl{font:500 clamp(10px,1.5cqw,12px) var(--fm);color:#bbb;max-width:420px;margin:6px auto 0;line-height:1.4}
/* ===== v16 · pantallas estilo GD: INICIO → CINTAS → detalle ===== */
#menu .gdv{display:none}
#menu[data-v=title]>:not(#vTitle),#menu[data-v=levels]>:not(#vLevels){display:none!important}
#menu[data-v=title] #vTitle,#menu[data-v=levels] #vLevels{display:flex}
#menu[data-v=title],#menu[data-v=levels]{background:radial-gradient(120% 90% at 50% 40%,rgba(4,4,4,.35),rgba(4,4,4,.9))!important;justify-content:stretch}
.gdv{flex:1;flex-direction:column;min-height:0;gap:clamp(6px,1.4cqw,14px)}
.gt-top,.lv-top{display:flex;align-items:center;gap:8px}
.gt-fill{flex:1}
.gt-ic{width:clamp(36px,5cqw,46px);height:clamp(36px,5cqw,46px);border-radius:50%;padding:0;display:grid;place-items:center;font:700 22px/1 var(--fm)}
.gt-ic .ic{width:55%;height:55%}
.gdv .coin{font:900 clamp(15px,2.2cqw,20px) var(--fd);padding:.35em .8em;border:1px solid #3a3320;border-radius:999px;background:rgba(0,0,0,.5);color:var(--gold)}
.gt-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.gt-pre{font:700 clamp(9px,1.4cqw,12px) var(--fm);letter-spacing:.4em;color:var(--mut)}
.gt-logo{font:900 clamp(54px,14cqw,150px)/.85 var(--fd);letter-spacing:.02em;color:#fff;text-shadow:4px 0 var(--red),-3px 0 rgba(120,200,255,.35),0 0 40px rgba(224,36,36,.4);margin:.08em 0}
.gt-sub{font:700 clamp(10px,1.6cqw,14px) var(--fm);letter-spacing:.32em;color:#c9c9c9;margin-bottom:clamp(14px,3cqw,30px)}
.gt-row{display:flex;align-items:center;gap:clamp(14px,4cqw,44px)}
.gt-play{width:clamp(96px,17cqw,150px);height:clamp(96px,17cqw,150px);border-radius:50%;padding:0;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#ff5a5a,#c01515 60%,#6e0808);border:4px solid #fff;color:#fff;box-shadow:0 0 0 6px rgba(224,36,36,.25),0 12px 40px rgba(224,36,36,.45);animation:gtpulse 1.3s ease-in-out infinite}
.gt-play svg{width:46%;height:46%;margin-left:8%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.gt-play:hover,.gt-play:focus-visible{transform:scale(1.06)}
@keyframes gtpulse{0%,100%{box-shadow:0 0 0 6px rgba(224,36,36,.25),0 12px 40px rgba(224,36,36,.45)}50%{box-shadow:0 0 0 16px rgba(224,36,36,.06),0 12px 50px rgba(224,36,36,.6)}}
body.soft .gt-play{animation:none}
.gt-side{width:clamp(70px,11cqw,96px);height:clamp(70px,11cqw,96px);border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:4px;font:700 clamp(9px,1.3cqw,11px) var(--fm);letter-spacing:.12em;background:linear-gradient(180deg,#1d1d1d,#0c0c0c)}
.gt-side .ic{width:42%;height:42%}
.gt-bottom{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.gt-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:.6em 1.1em;font:700 clamp(9px,1.3cqw,11px) var(--fm);letter-spacing:.14em;text-decoration:none;color:#ddd;border:1px solid #3a3a3a;background:rgba(10,10,10,.75)}
.gt-pill .ic{width:1.3em;height:1.3em}
.gt-pill.hot{border-color:var(--red);color:#fff;background:rgba(224,36,36,.22)}
.lv-title{font:900 clamp(20px,3.6cqw,34px) var(--fd);letter-spacing:.06em;color:#fff}
.lv-stage{flex:1;display:flex;align-items:center;gap:clamp(4px,1.2cqw,12px);min-height:0}
.lv-view{flex:1;overflow:hidden;border-radius:22px;height:100%;display:flex;align-items:center}
.lv-track{display:flex;width:100%;transition:transform .45s cubic-bezier(.2,.9,.25,1)}
body.soft .lv-track{transition:none}
.lv-card{flex:0 0 100%;box-sizing:border-box;display:flex;gap:clamp(12px,3cqw,30px);align-items:center;padding:clamp(14px,3cqw,30px);border-radius:22px;cursor:pointer;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 34%,#0b0b0b),#0b0b0b 70%);border:2px solid color-mix(in srgb,var(--c) 70%,#000);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.5);outline:none}
.lv-card:focus-visible{box-shadow:0 0 0 3px #fff,0 18px 50px rgba(0,0,0,.5)}
.lv-cov{position:relative;flex:0 0 clamp(110px,26cqw,230px);aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.12)}
.lv-cov img{width:100%;height:100%;object-fit:cover;display:block}
.lv-lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.6)}.lv-lock .ic{width:34%;height:34%}
.lv-card.locked{filter:saturate(.35);cursor:default}
.lv-info{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:clamp(4px,.9cqw,9px)}
.lv-num{font:700 clamp(9px,1.4cqw,12px) var(--fm);letter-spacing:.3em;color:rgba(255,255,255,.7)}.lv-num .fc{color:var(--gold)}
.lv-name{font:900 clamp(30px,7cqw,72px)/.9 var(--fd);color:#fff;letter-spacing:.02em;text-shadow:3px 0 var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-meta{font:500 clamp(9px,1.4cqw,12px) var(--fm);color:#bbb;letter-spacing:.08em}
.lv-stars{color:var(--gold);letter-spacing:.1em}.lv-stars i{color:#444;font-style:normal}
.lv-bar{display:grid;grid-template-columns:clamp(70px,11cqw,96px) 1fr auto;align-items:center;gap:8px;font:700 clamp(8px,1.2cqw,10px) var(--fm);letter-spacing:.16em;color:#aaa}
.lv-bar em{height:clamp(10px,1.6cqw,14px);border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);overflow:hidden}
.lv-bar em i{display:block;height:100%;background:linear-gradient(90deg,var(--c),#fff);border-radius:999px}
.lv-bar.acc em i{background:linear-gradient(90deg,#6dffc4,#2fd6c4)}
.lv-bar b{font:900 clamp(13px,2cqw,17px) var(--fd);color:#fff;letter-spacing:.03em;min-width:5ch;text-align:right}
.lv-sec{display:flex;align-items:center;gap:6px}.lv-sec span{width:14px;height:14px;border-radius:50%;border:2px solid #6b5a20;background:#1a160a}
.lv-sec span.on{background:radial-gradient(circle at 35% 35%,#fff3b0,#ffd23f 50%,#b88a10);border-color:#ffd23f;box-shadow:0 0 8px rgba(255,210,63,.6)}
.lv-sec small{margin-left:8px;font:700 clamp(9px,1.3cqw,11px) var(--fm);color:#999;letter-spacing:.14em}
.lv-locked{font:700 clamp(10px,1.5cqw,13px) var(--fm);color:#ddd;letter-spacing:.1em}.lv-locked b{color:var(--gold)}
.lv-go{font:700 clamp(9px,1.3cqw,11px) var(--fm);letter-spacing:.3em;color:var(--c);opacity:.9}
.lv-arrow{flex:0 0 auto;width:clamp(34px,5cqw,52px);height:clamp(56px,10cqw,96px);border-radius:14px;font:900 clamp(28px,5cqw,44px)/1 var(--fd);padding:0}
.lv-dots{display:flex;justify-content:center;gap:7px}.lv-dots i{width:8px;height:8px;border-radius:50%;background:#3a3a3a}.lv-dots i.on{background:#fff;transform:scale(1.25)}.lv-dots i.lk{opacity:.5}
.lv-foot{display:flex;justify-content:center}
.dback{align-self:flex-start;margin-bottom:6px}
@container (max-width:560px){.lv-card{flex-direction:column;text-align:center}.lv-info{align-items:stretch}.lv-cov{flex-basis:auto;width:42%}.lv-name{font-size:clamp(28px,10cqw,48px)}.gt-bottom .gt-pill{font-size:9px}}
/* ===== modo APP (Android) y MÓVIL WEB (html.tm: pantalla táctil): pantalla completa horizontal ===== */
html.app,html.app body,html.tm,html.tm body,html.fs,html.fs body{height:100%;overflow:hidden;overscroll-behavior:none;background:#000}
html.tm,html.tm body,html.app,html.app body{height:100dvh;height:var(--apph,100dvh)}
html.tm body{position:fixed;inset:0;width:100%}
html.tm,html.app{touch-action:manipulation}html.tm button,html.app button,html.tm a,html.app a{touch-action:manipulation}      /* sin retraso ni zoom por doble toque */      /* iOS: sin rebote ni scroll de la página */
#iosHint{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;gap:10px;align-items:center;max-width:min(92vw,560px);background:rgba(10,10,10,.94);border:1px solid #444;border-radius:12px;padding:8px 10px 8px 14px;color:#eee;font:600 13px/1.35 var(--fm,monospace)}
#iosHint.hidden{display:none}#iosHint button{background:none;border:0;color:#aaa;font-size:18px;padding:4px 6px;cursor:pointer}
html.app body,html.tm body,html.fs body{display:block;min-height:0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html.app header,html.app .note,html.tm header,html.tm .note,html.fs header,html.fs .note{display:none!important}
html.app .wrap,html.tm .wrap,html.fs .wrap{width:100%;height:100%;padding:0}
html.app .panel,html.tm .panel,html.fs .panel{height:100%;border:0;border-radius:0;display:flex;flex-direction:column;background:#000}
html.app .hud,html.tm .hud,html.fs .hud{padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));border-bottom:0;background:#070707}
html.app .stage,html.tm .stage,html.fs .stage{flex:1;min-height:0;padding:0;display:flex;align-items:center;justify-content:center}
html.app .screenwrap,html.tm .screenwrap,html.fs .screenwrap{height:100%;max-width:100%;aspect-ratio:var(--gar,960/500);width:auto;border-radius:0}
html.app #gamePanel.inmenu .screenwrap,html.tm #gamePanel.inmenu .screenwrap,html.fs #gamePanel.inmenu .screenwrap{height:100%!important;width:100%;aspect-ratio:auto}
html.app #gamePanel.inmenu .hud,html.tm #gamePanel.inmenu .hud,html.fs #gamePanel.inmenu .hud{display:none}
html.app .controls,html.tm .controls,html.fs .controls{position:fixed;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));padding:0;z-index:6;gap:6px;opacity:.75}
html.app .controls button,html.tm .controls button,html.fs .controls button{min-height:40px!important;min-width:40px;padding:6px 10px}
html.app #jump,html.app #duck,html.tm #jump,html.tm #duck,html.fs #jump,html.fs #duck{display:none!important}
/* barra de datos compacta en partida (móvil): solo SCORE, COMBO, monedas y SIGNAL, en una línea */
html.app .hud,html.tm .hud,html.fs .hud{gap:14px;justify-content:center;padding-top:max(2px,env(safe-area-inset-top));padding-bottom:2px;min-height:0}
html.app .hud .stat.live:not(.big):not(.cb):not(.coin):not(.sig),html.tm .hud .stat.live:not(.big):not(.cb):not(.coin):not(.sig),html.app .hud .stat.game-only,html.tm .hud .stat.game-only,html.fs .hud .stat.live:not(.big):not(.cb):not(.coin):not(.sig),html.fs .hud .stat.game-only{display:none!important}
html.app .hud .stat,html.tm .hud .stat,html.fs .hud .stat{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;padding:1px 4px;background:transparent;border:0;font-size:9px;letter-spacing:.14em}
html.app .hud .stat b,html.tm .hud .stat b,html.fs .hud .stat b{font-size:15px;margin:0}
html.app .hud .stat.coin .cn,html.tm .hud .stat.coin .cn,html.fs .hud .stat.coin .cn{width:16px;height:16px;vertical-align:-3px}
/* botón EMOTE flotante y redondo, a la derecha (zona del pulgar derecho) */
html.app .controls #emo,html.tm .controls #emo,html.fs .controls #emo{position:fixed;right:max(16px,env(safe-area-inset-right));top:38%;width:78px;height:78px;min-height:0!important;min-width:0;padding:0;border-radius:50%;font-size:12px;letter-spacing:.06em;opacity:.92;z-index:7;box-shadow:0 4px 0 #3a1170;display:flex!important;align-items:center;justify-content:center}
html.app .controls #emo small,html.tm .controls #emo small,html.fs .controls #emo small{display:none}
html.app #gamePanel.inmenu ~ .controls #emo,html.tm #gamePanel.inmenu ~ .controls #emo,html.app #gamePanel.inmenu .controls #emo,html.tm #gamePanel.inmenu .controls #emo,html.fs #gamePanel.inmenu ~ .controls #emo,html.fs #gamePanel.inmenu .controls #emo{display:none!important}
.controls #emo.hot{animation:emoHot .5s ease-in-out infinite alternate;opacity:1}
@keyframes emoHot{from{transform:scale(1)}to{transform:scale(1.14);background:linear-gradient(180deg,#ffd23f,#ff8a1f);border-color:#fff3b0}}
@media (prefers-reduced-motion:reduce){.controls #emo.hot{animation:none;background:linear-gradient(180deg,#ffd23f,#ff8a1f)}}
/* aviso para girar el teléfono */
#rotateHint{display:none}
@media (orientation:portrait){html.tm #rotateHint,html.app #rotateHint{display:flex;position:fixed;inset:0;z-index:50;background:#050505;color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:14px;font:900 22px var(--fd,Arial);letter-spacing:.08em;text-align:center;padding:24px}}
#rotateHint b{font-size:64px;line-height:1;display:block}
#rotX{display:none;margin-top:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #555;background:#151515;color:#ddd;font:700 13px var(--fm,monospace);letter-spacing:.1em}
html.tm #rotX{display:inline-block}html.rotOff #rotateHint{display:none!important}      /* navegador (iPhone sin bloqueo de giro): se puede cerrar */
@media (max-height:480px){
  #menu[data-v]{padding:8px 12px!important}
  .gdv{gap:4px}
  .gt-logo{font-size:min(17vh,14cqw)}.gt-pre{font-size:9px}.gt-sub{font-size:9px;margin-bottom:6px}
  .gt-play{width:min(25vh,150px);height:min(25vh,150px);border-width:3px}
  .gt-side{width:min(17vh,96px);height:min(17vh,96px);border-radius:16px}
  .gt-ic{width:34px;height:34px}.gt-pill{padding:.45em .9em;font-size:9px}
  .lv-card{padding:10px 14px}.lv-cov{flex-basis:min(42vh,230px)}.lv-name{font-size:min(12vh,72px)}
  .lv-arrow{height:min(22vh,96px)}.lv-title{font-size:20px}
  html.app .hud .stat,html.tm .hud .stat{padding:1px 4px}html.app .hud .stat b,html.tm .hud .stat b{font-size:13px}
}
.cn{display:inline-block;width:1.5em;height:1.5em;vertical-align:-.38em;background:url(coin.png) center/contain no-repeat;margin-right:.15em}
.stat.coin .cn{width:20px;height:20px;vertical-align:-6px}
/* emotes */
.controls #emo{background:linear-gradient(180deg,#b65cff,#6f25c4);color:#fff;border-color:#d7a8ff;font-weight:900;letter-spacing:.08em;touch-action:none;user-select:none;-webkit-user-select:none}
.controls #emo small{opacity:.7;font-size:.75em;margin-left:.3em}
@media(pointer:coarse){.controls #emo{min-height:60px;flex:1 1 30%}.controls #emo small{display:none}}
html.app .hud .stat b,html.tm .hud .stat b,html.fs .hud .stat b{display:inline!important}
html.app #gamePanel:not(.inmenu) .hud .stat.menu-only,html.tm #gamePanel:not(.inmenu) .hud .stat.menu-only,html.fs #gamePanel:not(.inmenu) .hud .stat.menu-only{display:none!important}
html.app .hud .stat.sig,html.tm .hud .stat.sig,html.fs .hud .stat.sig{position:relative}
html.app .hud .stat,html.tm .hud .stat,html.fs .hud .stat{flex-direction:row!important;align-items:center!important;gap:6px!important}
html.app .hud,html.tm .hud,html.fs .hud{gap:18px!important;padding-top:max(3px,env(safe-area-inset-top))!important;padding-bottom:3px!important}
/* en móvil horizontal los botones van en las franjas negras a los lados del juego, sin tapar la pista */
html.app .controls,html.tm .controls,html.fs .controls{flex-direction:column!important;align-items:center;left:max(6px,env(safe-area-inset-left))!important;bottom:max(6px,env(safe-area-inset-bottom))!important}
html.app .controls .iconbtn,html.tm .controls .iconbtn,html.fs .controls .iconbtn{width:46px;height:46px;min-width:0;padding:0!important}
html.app .controls #emo,html.tm .controls #emo,html.fs .controls #emo{width:66px;height:66px;right:max(4px,env(safe-area-inset-right));font-size:11px}
html.app .controls,html.tm .controls,html.fs .controls{opacity:.55}
html.app .controls #emo,html.tm .controls #emo,html.fs .controls #emo{opacity:.85}

/* ===== móvil: sin botones a la izquierda; icono de pausa en la esquina; menú de pausa ampliado ===== */
html.app #restart,html.tm #restart,html.app #menuBtn,html.tm #menuBtn,html.fs #restart,html.fs #menuBtn{display:none!important}
html.app .controls #pause,html.tm .controls #pause,html.fs .controls #pause{position:fixed;left:max(10px,env(safe-area-inset-left));top:calc(30px + env(safe-area-inset-top));width:42px!important;height:42px!important;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.35);z-index:7;opacity:.8}
html.app .controls,html.tm .controls,html.fs .controls{opacity:1!important}
html.app #gamePanel.inmenu ~ .controls #pause,html.tm #gamePanel.inmenu ~ .controls #pause,html.app #gamePanel.inmenu .controls #pause,html.tm #gamePanel.inmenu .controls #pause,html.fs #gamePanel.inmenu ~ .controls #pause,html.fs #gamePanel.inmenu .controls #pause{display:none!important}
html.app .fx,html.tm .fx,html.fs .fx{display:none}      /* capa de líneas VHS encima del canvas: en celular cuesta y no se aprecia */
.pextra{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:1.1em;width:min(92%,420px);font-family:var(--fm)}
.pinfo{font-size:11px;letter-spacing:.14em;color:#bbb;text-align:center}
.pextra .vol{display:flex;align-items:center;gap:10px;width:100%;font-size:11px;letter-spacing:.14em;color:#ddd}
.pextra .vol input{flex:1}
.prow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.prow button{font-size:11px;padding:.6em 1em}
@media (max-height:480px){.pextra{gap:6px;margin-top:.6em}#pauseScreen .rtitle{font-size:34px}}html.pz .controls #emo{display:none!important}

/* pantalla completa en PC: el botón de pantalla completa sí se ve; en celular no hace falta */
html.tm #fsBtn,html.app #fsBtn,html.tm #tFull,html.app #tFull,html.tm #pFull,html.app #pFull{display:none!important}
html.fs .controls #fsBtn{position:fixed;left:calc(max(10px,env(safe-area-inset-left)) + 50px);top:calc(30px + env(safe-area-inset-top));width:42px!important;height:42px!important;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.35);z-index:7;opacity:.8;display:flex!important;align-items:center;justify-content:center}
html.fs #gamePanel.inmenu ~ .controls #fsBtn,html.fs #gamePanel.inmenu .controls #fsBtn{display:none!important}
/* X para salir de ESCUCHA / TV */
#watchX{display:none;position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:7;width:46px;height:46px;border-radius:50%;padding:0;
  align-items:center;justify-content:center;color:#fff;background:rgba(8,8,8,.55);border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 0 0 0 rgba(224,36,36,0);transition:background .2s,border-color .2s,box-shadow .2s,transform .2s,opacity .3s;cursor:pointer;touch-action:manipulation}
#watchX .ic{width:20px;height:20px}
#watchX:hover,#watchX:focus-visible{background:rgba(224,36,36,.85);border-color:#fff;box-shadow:0 0 18px rgba(224,36,36,.6);transform:rotate(90deg)}
body.watching:not(.embed) #watchX{display:flex}
body.kiosk #watchX{opacity:.35}body.kiosk #watchX:hover,body.kiosk #watchX:focus-visible{opacity:1}
/* selector de dificultad: 3 botones grandes (antes 1 botón pequeño que rotaba) */
.lv-dif{display:inline-flex;border:1px solid #3a3a3a;border-radius:999px;overflow:hidden;background:rgba(10,10,10,.75)}
.lv-dif button{min-height:40px;min-width:64px;padding:0 .9em;border:0;border-radius:0;background:none;color:#aaa;font:700 clamp(10px,1.3cqw,12px) var(--fm);letter-spacing:.12em;cursor:pointer;touch-action:manipulation}
.lv-dif button+button{border-left:1px solid #3a3a3a}
.lv-dif button[aria-checked="true"]{background:var(--lvc,var(--red));color:#000}
.lv-dif button[data-d="hard"][aria-checked="true"]{background:var(--red);color:#fff}
/* pantalla de carga en pantallas bajas (celular horizontal): todo cabe, el TIP ya no queda cortado abajo */
@media (max-height:560px){
  #loadScr{gap:3px;justify-content:center;padding-top:0;padding-bottom:0}
  #loadScr img{display:none}
  #vslot{height:min(15cqw,19vh);width:min(30cqw,38vh);margin:0}
  #loadScr .lt{font-size:min(4.4cqw,7vh)}
  #loadScr .lbar{margin-top:.2em}
  #loadScr .ltip{margin-top:.15em;max-width:90%;line-height:1.35}
}

/* flechas ◀ ▶ de ESCUCHA / TV (arriba al centro, pequeñas y semitransparentes) */
#watchNav{display:none;position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:7;gap:10px}
body.watching:not(.embed) #watchNav{display:flex}
#watchNav button{width:38px;height:38px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(8,8,8,.4);border:1.5px solid rgba(255,255,255,.28);opacity:.55;cursor:pointer;touch-action:manipulation;transition:opacity .2s,background .2s,transform .15s}
#watchNav button:hover,#watchNav button:focus-visible{opacity:1;background:rgba(224,36,36,.8)}
#watchNav button:active{transform:scale(.9)}
#watchNav .ic{width:18px;height:18px}
#watchPrev .ic{transform:rotate(90deg)}#watchNext .ic{transform:rotate(-90deg)}
/* TU PROGRESO (Ajustes) */
.cloudbox{margin-top:.8em;padding:.8em .9em;border:1px solid #2e2e2e;border-radius:10px;background:linear-gradient(160deg,rgba(77,163,255,.08),rgba(10,10,10,.6));text-align:left}
.cloudbox .cbt{font:900 clamp(13px,1.8cqw,16px) var(--fd);letter-spacing:.1em;color:#fff}
.cloudbox .cbs{font-size:clamp(10px,1.4cqw,12px);color:#aaa;line-height:1.5;margin:.3em 0 .5em}
.cloudbox .cbrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cloudbox input{flex:1 1 120px;min-height:38px;padding:0 .7em;border-radius:8px;border:1px solid #3a3a3a;background:#0b0b0b;color:#fff;font:700 13px var(--fm);letter-spacing:.08em}
.cloudbox input:focus{outline:2px solid #4da3ff;outline-offset:1px}
.cloudbox button{min-height:38px}
.cloudbox .cbmsg{min-height:1.2em;margin-top:6px;font-size:12px;color:#bbb}.cloudbox .cbmsg.ok{color:#45e07a}.cloudbox .cbmsg.bad{color:#ff6a6a}
/* pie del selector de cintas: PRÁCTICA · ESCUCHA · TV */
.lv-foot{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lv-foot .gt-pill{min-height:40px;touch-action:manipulation}
/* cartel flotante de avisos */
#toast{position:absolute;left:50%;bottom:14%;transform:translate(-50%,20px);z-index:8;max-width:86%;padding:.7em 1.1em;border-radius:10px;background:rgba(10,10,10,.92);border:1px solid #444;color:#fff;font:700 clamp(10px,1.5cqw,13px)/1.4 var(--fm);letter-spacing:.06em;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* TUTORIAL VISUAL (1.ª partida) */
#tutV{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s;display:flex}
#tutV.on{opacity:1}
#tutV.touch .tz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;text-shadow:0 2px 8px #000}
#tutV .tz.l{width:30%;background:linear-gradient(90deg,rgba(77,163,255,.28),rgba(77,163,255,.08));border-right:2px dashed rgba(255,255,255,.55)}
#tutV .tz.r{width:70%;background:linear-gradient(90deg,rgba(255,210,63,.06),rgba(255,210,63,.22))}
#tutV .tzh{font-size:clamp(30px,6cqw,56px);animation:tutTap 1s ease-in-out infinite}
#tutV .tz b{font:900 clamp(18px,3.6cqw,34px) var(--fd);letter-spacing:.12em}
#tutV .tz span{font:700 clamp(10px,1.6cqw,14px) var(--fm);letter-spacing:.2em}
#tutV .tz i{font-style:normal;font-size:clamp(20px,3cqw,30px);opacity:.85;animation:tutTap 1s ease-in-out infinite reverse}
#tutV.kb{align-items:flex-start;justify-content:center;padding-top:9%}
#tutV .tk{display:flex;gap:clamp(10px,2.4cqw,26px);background:rgba(5,5,5,.78);border:1px solid #444;border-radius:14px;padding:.8em 1.2em}
#tutV .tk div{display:flex;align-items:center;gap:6px}
#tutV kbd{display:inline-block;min-width:1.9em;padding:.35em .55em;border-radius:6px;border:1px solid #888;border-bottom-width:3px;background:#161616;color:#fff;font:700 clamp(10px,1.5cqw,13px) var(--fm);text-align:center}
#tutV .tk span{font:900 clamp(12px,1.9cqw,17px) var(--fd);letter-spacing:.1em;color:#ffd23f;margin-left:4px}
@keyframes tutTap{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
body.soft #tutV .tzh,body.soft #tutV .tz i{animation:none}
/* ===== LOGROS v45 ===== */
#achScr{justify-content:flex-start;overflow-y:auto;padding-top:clamp(10px,2cqw,22px);background:radial-gradient(120% 80% at 50% 0%,rgba(255,210,63,.12),transparent 55%),#050505!important}
#achList{width:min(100%,900px);text-align:left;margin:.4em 0 .8em}
.ahead{display:flex;gap:clamp(12px,2.4cqw,26px);align-items:center;padding:clamp(10px,1.6cqw,16px);border:1px solid #3a3320;border-radius:14px;background:linear-gradient(135deg,rgba(255,210,63,.10),rgba(10,10,10,.7))}
.aring{--p:0;--rc:#ffd23f;flex:none;width:clamp(78px,13cqw,118px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,#0b0b0b 78%,transparent 79% 100%),conic-gradient(var(--rc) calc(var(--p)*1%),#2a2a2a 0);box-shadow:0 0 30px color-mix(in srgb,var(--rc) 30%,transparent)}
.aring b{font:900 clamp(20px,3.6cqw,32px) var(--fd);color:#fff;line-height:1}.aring span{font:700 11px var(--fm);color:#aaa}
.aprof{flex:1;min-width:0}
.arank{font:900 clamp(14px,2.2cqw,20px) var(--fd);letter-spacing:.14em}
.aname{font:700 clamp(11px,1.6cqw,14px) var(--fm);color:#ddd;letter-spacing:.1em;margin:.15em 0 .5em}
.astats{display:flex;flex-wrap:wrap;gap:6px 16px}.astats span{font:700 10px var(--fm);color:#999;letter-spacing:.08em;display:flex;flex-direction:column}
.astats b{font:900 clamp(14px,2cqw,18px) var(--fd);color:#fff;letter-spacing:.04em}
.aclaimall{margin-top:.6em;animation:aGlow 1.2s ease-in-out infinite alternate}
#achList .achcat{position:relative;margin-top:1.1em;padding-bottom:6px;border:0;color:#fff;font:900 clamp(13px,1.9cqw,17px) var(--fd);letter-spacing:.12em}
#achList .achcat i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#222;border-radius:2px}
#achList .achcat i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,#e02424,#ffd23f);border-radius:2px}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:8px;margin-top:8px}
.acard{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;border:1px solid #262626;background:#0d0d0d;opacity:.6;filter:grayscale(1)}
.acard.ok{opacity:1;filter:none;border-color:#4a3d16;background:linear-gradient(135deg,rgba(255,210,63,.12),#0d0d0d 70%)}
.acard.ready{border-color:#ffd23f;box-shadow:0 0 0 1px rgba(255,210,63,.35),0 0 18px rgba(255,210,63,.18)}
.aic{flex:none;width:42px;height:42px;border-radius:10px;display:grid;place-content:center;font-size:22px;background:#161616;border:1px solid #333}
.acard.ok .aic{background:radial-gradient(circle at 35% 30%,#3d3310,#141005);border-color:#ffd23f;box-shadow:inset 0 0 10px rgba(255,210,63,.3)}
.atx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.atx b{font:900 clamp(13px,1.7cqw,15px) var(--fd);letter-spacing:.05em;color:#fff}
.atx span{font-size:clamp(9px,1.25cqw,11px);color:#aaa}.atx small{font:700 9px var(--fm);color:#7d6a2a;margin-top:2px}
.arw{flex:none;font:700 11px var(--fm);color:#777;display:flex;align-items:center;gap:4px;white-space:nowrap}
.arw.got{color:#45e07a}
.arw.claim{min-height:34px;padding:0 .8em;border-radius:999px;border:0;background:linear-gradient(180deg,#ffe27a,#e0a810);color:#2a1d00;font-weight:900;cursor:pointer;animation:aGlow 1s ease-in-out infinite alternate;touch-action:manipulation}
@keyframes aGlow{from{box-shadow:0 0 0 0 rgba(255,210,63,.0)}to{box-shadow:0 0 16px 2px rgba(255,210,63,.55)}}
.coinfly{position:absolute;z-index:9;width:18px;height:18px;pointer-events:none;animation:coinFly 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes coinFly{0%{transform:translate(-50%,-50%) scale(.6);opacity:1}60%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(360deg);opacity:0}}
/* cartel de logro en Resultados */
#achBan{position:absolute;top:10%;left:50%;z-index:9;transform:translate(-50%,-30px) scale(.9);opacity:0;pointer-events:none;min-width:min(86%,360px);padding:12px 16px;border-radius:14px;
  background:linear-gradient(135deg,#2b2208,#0d0a02);border:2px solid #ffd23f;box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 30px rgba(255,210,63,.35);transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1)}
#achBan.on{opacity:1;transform:translate(-50%,0) scale(1)}
#achBan .abk{font:900 clamp(13px,2cqw,18px) var(--fd);letter-spacing:.16em;color:#ffd23f;text-align:center;margin-bottom:6px}
#achBan .abi{display:flex;align-items:center;gap:10px;padding:4px 0}#achBan .abi span{font-size:22px}#achBan .abi b{flex:1;color:#fff;font:900 clamp(13px,1.8cqw,16px) var(--fd);letter-spacing:.05em}
#achBan .abi em{font:700 12px var(--fm);color:#ffd23f;font-style:normal;display:flex;align-items:center;gap:4px}
#achBan .abh{font:700 10px var(--fm);color:#bba65a;text-align:center;margin-top:4px;letter-spacing:.1em}
body.soft .arw.claim,body.soft .aclaimall{animation:none}
/* ===== TIENDA v46 + PERSONAJES ===== */
#shopScr,#charScr{background:radial-gradient(120% 80% at 30% 0%,rgba(224,36,36,.10),transparent 55%),#060606!important;justify-content:flex-start;overflow-y:auto;padding:clamp(8px,1.6cqw,16px)!important;gap:8px}
.shTop{width:100%;display:flex;align-items:center;gap:10px}
.shTitle{flex:1;font:900 clamp(20px,4cqw,34px) var(--fd);letter-spacing:.1em;color:#fff;display:flex;align-items:center;gap:8px}.shTitle .ic{width:.9em;height:.9em}
.shCoin{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;background:#141414;border:1px solid #333;font:700 14px var(--fm);color:#ffd23f}
.shX{width:42px;height:42px;min-height:0;border-radius:50%;padding:0;font-size:18px;background:#141414;border:1px solid #3a3a3a;color:#fff}
.shBody{width:100%;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(10px,2cqw,20px);align-items:start}
.shLeft{display:flex;flex-direction:column;align-items:stretch;gap:6px;position:sticky;top:0}
#shPrev,#chCv{width:100%!important;height:auto!important;aspect-ratio:420/260;border:1px solid #262626!important;border-radius:16px!important;background:#0b0b0b;box-shadow:0 14px 40px rgba(0,0,0,.55);margin:0!important}
#chCv{aspect-ratio:420/300}
.shName,.chName{font:900 clamp(18px,3cqw,26px) var(--fd);letter-spacing:.08em;color:#fff;text-align:left}
#shopScr .pvl,.chDesc{font:500 clamp(10px,1.4cqw,12px)/1.4 var(--fm);color:#aaa;text-align:left;margin:0;max-width:none;min-height:2.6em}
.shAct{min-height:48px;border-radius:12px;font:900 clamp(13px,1.8cqw,16px) var(--fd);letter-spacing:.12em;display:flex;align-items:center;justify-content:center;gap:6px}
.shAct:disabled{opacity:.7;background:#1c2a1f!important;color:#6dffc4!important;border-color:#2e5a3a!important}
.shAct.poor{filter:grayscale(.6);opacity:.75}
.shTabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:#111;border:1px solid #2a2a2a;margin-bottom:8px}
.shTabs button{flex:1;min-height:38px;border:0;border-radius:999px;background:none;color:#999;font:700 clamp(10px,1.4cqw,12px) var(--fm);letter-spacing:.12em}
.shTabs button[aria-selected="true"]{background:#fff;color:#000}
.shGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(92px,15cqw,120px),1fr));gap:8px}
.shCard{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;min-height:0;border-radius:14px;border:1px solid #262626;background:linear-gradient(180deg,#141414,#0b0b0b);color:#ddd;text-align:center;touch-action:manipulation}
.shCard b{font:700 clamp(9px,1.25cqw,11px) var(--fm);letter-spacing:.06em;line-height:1.2}
.shCard em{font:700 10px var(--fm);font-style:normal;color:#888;display:flex;align-items:center;gap:2px}.shCard em .cn{width:1.3em;height:1.3em}
.shCard em.pr{color:#ffd23f}.shCard em.poor{color:#a07a7a}.shCard em.on{color:#6dffc4}
.shCard.sel{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.shCard.on{background:linear-gradient(180deg,#132219,#0b0b0b)}
.shCard.mat::after{content:"MATERIAL";position:absolute;top:5px;right:6px;font:700 7px var(--fm);letter-spacing:.1em;color:#ffd23f;opacity:.8}
.shSw{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 0 10px rgba(0,0,0,.6)}
.shFx{font-size:32px;line-height:46px;height:46px}
.shCov{width:52px;height:52px;border-radius:8px;object-fit:cover}
.chStage{display:flex;align-items:center;gap:8px;width:min(100%,640px)}
.chStage canvas{flex:1;min-width:0}
.chDots{display:flex;gap:6px;justify-content:center}.chDots i{width:8px;height:8px;border-radius:50%;background:#333}.chDots i.on{background:#fff}.chDots i.eq{box-shadow:0 0 0 2px #6dffc4}
.chName,.chDesc{text-align:center!important}
.chRow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}.chRow .shAct{min-width:220px}
#chMsg,#shMsg{min-height:1.3em;font:700 12px var(--fm);color:#ffd23f}#chMsg.err,#shMsg.err{color:#ff6b6b}
@media (max-height:520px){.shBody{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}#chCv{max-height:44vh;width:auto!important}.chStage{justify-content:center}#charScr{gap:4px}.chDesc{min-height:0}}
@container (max-width:560px){.shBody{grid-template-columns:1fr}.shLeft{position:static}}
/* ===== CUENTA + PREMIO DIARIO (v47) ===== */
.accPill{margin-left:auto;min-height:40px;background:rgba(10,10,10,.8)}
#accScr,#dailyScr{background:rgba(3,3,3,.94)!important;z-index:9}
.accBox,.dlyBox{width:min(94%,440px);max-height:96%;overflow-y:auto;padding:16px 18px;border-radius:18px;border:1px solid #333;background:linear-gradient(160deg,#16131c,#080808);box-shadow:0 20px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px;text-align:left}
.accHead,.dlyT{font:900 clamp(20px,3.4cqw,28px) var(--fd);letter-spacing:.1em;color:#fff;text-align:center}
.accTabs{align-self:center}
.accForm{display:flex;flex-direction:column;gap:8px}
.accForm input{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid #3a3a3a;background:#0b0b0b;color:#fff;font:700 14px var(--fm);letter-spacing:.06em}
.accForm input:focus{outline:2px solid #4da3ff;outline-offset:1px}
.accForm button,.cbrow.col button{min-height:46px}
.accTxt{font:600 13px/1.5 var(--fm);color:#ddd;text-align:center}
.accList{list-style:none;margin:0;padding:0;font:600 11px/1.7 var(--fm);color:#aaa}
.cbrow.col{flex-direction:column}
.accX{align-self:center;min-height:40px}
.dlyBox{align-items:center;text-align:center;border-color:#5a4a16;background:radial-gradient(120% 90% at 50% 0%,rgba(255,210,63,.18),#0a0805 60%)}
.dlyDays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;width:100%}
.dd{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:10px;border:1px solid #333;background:#111}
.dd small{font:700 8px var(--fm);color:#888;letter-spacing:.06em}.dd b{font:900 14px var(--fd);color:#bbb}
.dd.got{background:#1c2a1f;border-color:#2e5a3a}.dd.got b{color:#6dffc4}
.dd.now{background:linear-gradient(180deg,#ffe27a,#e0a810);border-color:#fff}.dd.now b,.dd.now small{color:#2a1d00}
.dlyAmt{font:900 clamp(40px,8cqw,64px) var(--fd);color:#ffd23f;display:flex;align-items:center;gap:6px}.dlyAmt .cn{width:.8em;height:.8em}
.dlyS{font:600 12px var(--fm);color:#bba65a}
.dlyOk{min-height:50px;min-width:200px;font:900 18px var(--fd);letter-spacing:.14em;animation:aGlow 1s ease-in-out infinite alternate}
#accN{text-transform:uppercase}
.gt-side span{letter-spacing:.04em}