@font-face{font-family:Rajdhani;font-weight:500;src:url(../assets/fonts/Rajdhani-Medium.woff2) format('woff2');font-display:swap}
@font-face{font-family:Rajdhani;font-weight:600;src:url(../assets/fonts/Rajdhani-SemiBold.woff2) format('woff2');font-display:swap}
@font-face{font-family:Rajdhani;font-weight:700;src:url(../assets/fonts/Rajdhani-Bold.woff2) format('woff2');font-display:swap}
@font-face{font-family:Oxanium;src:url(../assets/fonts/Oxanium.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Spray;src:url(../assets/fonts/RubikSprayPaint-Regular.woff2) format('woff2');font-display:swap}
:root{--accent:#FFD400;--accent2:#FFD400;--bg:#0A0A0A;--ink:#F2F2F2;--g1:#FFD400;--g2:#F2F2F2;--muted:#9a9aa2}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:500 17px/1.35 Rajdhani,system-ui,sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0}
.halftone{background:radial-gradient(circle,rgba(255,255,255,.07) 1.2px,transparent 1.6px) 0 0/9px 9px,linear-gradient(180deg,var(--bg),#000)}
.btn{font:700 18px Oxanium,sans-serif;letter-spacing:.06em;background:var(--accent);color:#0A0A0A;border:0;padding:12px 22px;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);text-decoration:none;display:inline-block;transition:transform .1s,filter .1s}
.btn:hover,.btn:focus-visible{filter:brightness(1.12);transform:translateY(-1px);outline:none}.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.sm{font-size:14px;padding:8px 14px}.btn.big{font-size:26px;padding:16px 30px;width:100%}
.panel{background:rgba(10,10,10,.82);border:2px solid var(--accent);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);padding:20px}
.muted{color:var(--muted)}.kick{font:700 13px Oxanium;letter-spacing:.2em;color:var(--accent)}
h1,h2{font-family:Oxanium;margin:.2em 0;letter-spacing:.02em}
.logo{display:flex;align-items:center;gap:10px;font:800 30px/0.9 Oxanium}.logo b{display:block;color:var(--ink)}.logo .y,.g-logo .y{color:var(--accent)}
.bp-mark{display:grid;place-items:center;width:48px;height:48px;background:var(--accent);color:#0A0A0A;font:900 34px Oxanium;clip-path:polygon(0 0,75% 0,100% 25%,100% 100%,25% 100%,0 75%);transform:skewX(-8deg)}
.g-graffiti{position:absolute;right:3vw;top:30vh;font:44px/0.95 Spray,Oxanium;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);transform:rotate(-8deg);width:5.5em;text-align:center;pointer-events:none;z-index:0}
.g-graffiti.big{font-size:90px;top:auto;bottom:5vh}
/* menú */
.menu{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.menu header{display:flex;align-items:center;gap:18px;padding:18px 26px;border-bottom:2px solid var(--accent);background:rgba(0,0,0,.6);z-index:1}.m-sub{font:600 14px Oxanium;letter-spacing:.22em;color:var(--muted);flex:1}
.m-body{flex:1;display:grid;grid-template-columns:1fr 400px;gap:22px;padding:22px 26px;min-height:0;z-index:1}
.m-list{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-content:start;padding-right:6px}
.song{display:flex;gap:12px;text-align:left;background:rgba(15,15,15,.85);color:var(--ink);border:2px solid #333;padding:0;cursor:pointer;overflow:hidden;height:118px;font:inherit;position:relative}
.song img{width:78px;height:118px;object-fit:cover;object-position:top;background:linear-gradient(180deg,var(--accent),transparent)}
.song .s-meta{padding:10px 10px 8px 0;display:flex;flex-direction:column;min-width:0}.song b{font:700 20px Oxanium;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song span{color:#bbb;font-size:15px}.song small{color:var(--accent);font-weight:700;margin-top:2px}
.s-best{display:flex;gap:6px;margin-top:auto}.s-best i{font-style:normal;font:600 12px Oxanium;border:1px solid #444;padding:1px 6px}
.song.sel,.song:hover,.song:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
.m-side{display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}.m-side>*{position:relative}
.m-port{position:absolute!important;right:-30px;top:-10px;height:115%;opacity:.28;pointer-events:none}
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:auto 0 6px}
.dif{font:700 16px Oxanium;background:transparent;color:var(--ink);border:2px solid #555;padding:10px 4px;cursor:pointer}.dif small{display:block;font:500 12px Rajdhani;color:var(--muted)}
.dif.on{border-color:var(--accent);background:var(--accent);color:#0A0A0A}.dif.on small{color:#222}
.ctrl{font-size:14px;color:var(--muted)}.ctrl b{color:var(--accent);margin-right:6px}
/* bloqueo / carga */
.locked,.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:24px}
.locked p{max-width:560px;font-size:20px}
.glitch{font:800 clamp(38px,8vw,92px) Oxanium;color:var(--accent);position:relative;text-shadow:3px 0 var(--g2),-3px 0 #000;animation:gl 2.4s infinite steps(1)}
@keyframes gl{0%,92%{transform:none}93%{transform:translate(-4px,1px) skewX(8deg)}96%{transform:translate(3px,-1px)}}
.loading .bar{width:min(380px,80vw);height:6px;background:#222;overflow:hidden}.loading .bar i{display:block;height:100%;width:40%;background:var(--accent);animation:ld 1s infinite linear}@keyframes ld{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* juego */
.game{position:absolute;inset:0;overflow:hidden;user-select:none;touch-action:none}.game canvas{position:absolute;inset:0;width:100%;height:100%}
.game>*:not(canvas):not(.g-pause):not(.g-superbtn):not(.g-pausebtn){pointer-events:none}
.g-port{position:absolute;right:2vw;bottom:0;height:78vh;opacity:.32;filter:grayscale(.2) contrast(1.1);mix-blend-mode:screen}
.g-top{position:absolute;left:28px;top:18px;width:min(400px,40vw)}.g-title{font:800 clamp(24px,3.6vw,46px)/1 Oxanium;color:var(--accent);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-artist{font:700 18px Oxanium;letter-spacing:.08em}.g-prog{height:9px;background:#333;margin-top:12px}.g-prog i{display:block;height:100%;background:var(--accent);width:0}
.g-times{display:flex;justify-content:space-between;font:600 15px Oxanium;margin-top:4px}
.g-score{position:absolute;right:28px;top:14px;text-align:right}.g-score>b{font:800 clamp(30px,5vw,66px)/1 Oxanium;color:var(--ink);display:block}
.g-sbar{height:5px;background:#333;width:200px;margin:6px 0 6px auto}.g-sbar i{display:block;height:100%;background:var(--accent);width:0}
.g-combo{font:800 clamp(28px,4vw,52px)/1 Oxanium}.g-score small{color:var(--accent);font:700 15px Oxanium;letter-spacing:.15em}.g-mult{font:700 14px Oxanium;color:var(--muted)}
.g-left{position:absolute;left:28px;top:24vh;width:170px}
.g-judge{font:800 26px Oxanium;color:var(--accent);height:34px;letter-spacing:.04em}.g-judge::after{content:attr(data-dt);display:block;font:600 12px Rajdhani;color:var(--muted)}
.g-judge.j-great{color:var(--ink)}.g-judge.j-good{color:#aaa}.g-judge.j-miss,.g-judge.j-break{color:#ff3b3b}.g-judge.pop{animation:pop .25s;transform-origin:left center}
@keyframes pop{0%{transform:scale(1.4)}100%{transform:none}}
.g-acc b{font:800 30px Oxanium;display:block;margin-top:16px}.g-acc small{color:var(--accent);font:700 14px Oxanium;letter-spacing:.14em}
.g-meter{margin-top:20px;width:34px;height:30vh;border:2px solid #444;position:relative;background:repeating-linear-gradient(0deg,#111 0 7px,#000 7px 9px)}
.g-mfill{position:absolute;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,var(--accent) 0 7px,transparent 7px 9px);height:0}
.g-mlabel{font:700 16px Oxanium;margin-top:6px}.g-mlabel span{color:var(--accent)}.g-mhint{font:600 12px Oxanium;color:var(--muted);letter-spacing:.2em}
.game.ready .g-meter{border-color:var(--accent);box-shadow:0 0 20px var(--accent);animation:rdy .5s infinite alternate}.game.ready .g-mhint{color:var(--accent)}@keyframes rdy{to{box-shadow:0 0 6px var(--accent)}}
.g-mode{position:absolute;left:50%;top:13vh;transform:translateX(-50%);font:900 clamp(30px,5vw,64px) Oxanium;text-align:center;letter-spacing:.08em;color:var(--ink);text-shadow:0 0 18px var(--accent)}
.g-mode b{color:var(--accent)}.g-mode small{display:block;font:700 14px Oxanium;letter-spacing:.2em;color:var(--accent)}
.game[data-mode=super] .g-mode{animation:pulse .5s infinite alternate}
.game[data-mode=encore] .g-mode{color:#FFD400;text-shadow:0 0 30px #FFD400,3px 0 #fff,-3px 0 #000;animation:shake .12s infinite}
.game[data-mode=encore]{box-shadow:inset 0 0 120px rgba(255,200,0,.55)}.game[data-mode=super]{box-shadow:inset 0 0 90px color-mix(in srgb,var(--accent) 40%,transparent)}
.game[data-mode=encore] .g-score>b,.game[data-mode=encore] .g-combo{color:#FFD400}
@keyframes pulse{to{transform:translateX(-50%) scale(1.06)}}@keyframes shake{0%{transform:translate(-50%,0)}50%{transform:translate(calc(-50% + 2px),-2px)}100%{transform:translate(calc(-50% - 2px),1px)}}
.g-who{position:absolute;right:28px;bottom:24px;display:flex;gap:10px;align-items:center;text-align:right;flex-direction:row-reverse}.g-who .emb{font-size:32px;color:var(--accent)}.g-who b{font:800 20px Oxanium;color:var(--accent);display:block}.g-who small{color:var(--muted)}
.g-logo{position:absolute;left:28px;bottom:22px;display:flex;align-items:center;gap:10px;font:800 24px/.9 Oxanium}.g-logo b{display:block}.g-logo .bp-mark{width:40px;height:40px;font-size:28px}
.g-count{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font:900 110px Oxanium;color:var(--accent);opacity:0;text-shadow:0 0 30px var(--accent)}.g-count.on{opacity:1}
.g-superbtn,.g-pausebtn{display:none}
.g-pause{position:absolute;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;z-index:5}.g-pause[hidden]{display:none}.g-pause .panel{display:flex;flex-direction:column;gap:12px;min-width:280px;text-align:center}
/* resultados */
.results{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2vw;padding:20px}
.res-port img{height:88vh;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--accent) 40%,transparent))}
.res-card{width:min(560px,94vw);text-align:center}.res-card h2{font-size:34px;color:var(--accent)}
.res-grade{font:900 120px/1 Oxanium;color:var(--accent);text-shadow:4px 4px 0 #000,0 0 30px var(--accent)}.res-grade.g-SS{color:#FFD400}
.res-new{font:800 18px Oxanium;letter-spacing:.2em;background:var(--accent);color:#000;display:inline-block;padding:2px 10px}
.res-score{font:800 48px Oxanium}.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.res-grid div{border:1px solid #333;padding:8px 2px}.res-grid b{display:block;font:800 22px Oxanium}.res-grid span{font-size:12px;color:var(--muted);letter-spacing:.1em}
.res-btns{display:flex;gap:12px;justify-content:center;margin-top:14px}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;z-index:20}.modal .panel{width:min(520px,94vw);display:flex;flex-direction:column;gap:14px}
.modal label{display:flex;flex-wrap:wrap;justify-content:space-between;font:700 14px Oxanium;letter-spacing:.08em}.modal input[type=range]{width:100%;accent-color:var(--accent)}.v{color:var(--accent)}
.cal{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted)}
/* editor */
.editor{position:absolute;inset:0;display:flex;flex-direction:column;background:#000;z-index:10}
.ed-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border-bottom:2px solid var(--accent)}.ed-bar label{font:700 12px Oxanium;display:flex;gap:6px;align-items:center}.ed-t{font:700 15px Oxanium;margin-right:auto;color:var(--accent)}
.ed-bar select{background:#111;color:var(--ink);border:1px solid #444;font:inherit}
.ed-cv{flex:1;width:100%;cursor:crosshair}.ed-info{display:flex;gap:18px;padding:8px 14px;font-size:13px;color:var(--muted);flex-wrap:wrap}.ed-info .ed-pos,.ed-info .ed-n{color:var(--ink);font-family:Oxanium}.ed-st{color:var(--accent)}
@media (max-width:900px),(orientation:portrait){
  .m-body{grid-template-columns:1fr;overflow:auto}.m-list{overflow:visible}.m-sub{display:none}.menu header{padding:12px}.logo{font-size:24px}
  .g-top{left:12px;top:10px;width:52vw}.g-title{font-size:22px}.g-artist{font-size:13px}
  .g-score{right:12px;top:8px}.g-score>b{font-size:28px}.g-sbar{width:110px}.g-combo{font-size:24px}
  .g-left{left:10px;top:18vh;width:90px}.g-acc b{font-size:18px}.g-judge{font-size:18px}.g-meter{height:20vh;width:22px}.g-mhint{display:none}
  .g-graffiti,.g-who,.g-logo{display:none}.g-port{height:50vh;opacity:.2}
  .g-superbtn{display:block;position:absolute;right:12px;top:42vh;z-index:4;font:800 15px Oxanium;background:#222;color:var(--muted);border:2px solid #555;padding:14px 10px;border-radius:50%;width:74px;height:74px}
  .game.ready .g-superbtn{background:var(--accent);color:#000;border-color:var(--ink)}
  .g-pausebtn{display:block;position:absolute;left:12px;bottom:14px;z-index:4;background:#222;color:var(--ink);border:1px solid #555;font:800 14px Oxanium;width:40px;height:32px}
  .res-port{display:none}.res-grid{grid-template-columns:repeat(2,1fr)}.res-grade{font-size:80px}
}