:root{
--ink:#fff3dc;--muted:#baa99c;--gold:#e7b866;--amber:#ff9b46;--cyan:#5de4ff;--pink:#ff5da9;--violet:#9c7cff;--bg:#05040a;
--lane0:#62e8ff;--lane1:#ffcb66;--lane2:#ff6e9c;--lane3:#9c7cff;--safe-bottom:max(14px,env(safe-area-inset-bottom));
--panel:rgba(10,7,14,.52);--panel-line:rgba(255,239,205,.10);--wood:url('assets/fretboard-walnut.webp');--brass:url('assets/brushed-brass.webp');
}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#030208;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden;touch-action:none;-webkit-tap-highlight-color:transparent}button,a{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}#gameCanvas,#bgLayers{position:fixed;inset:0;width:100%;height:100%}#gameCanvas{z-index:2}#bgLayers{z-index:0;overflow:hidden;background:radial-gradient(circle at 50% 20%,#2d183d 0,#10091a 35%,#040309 78%)}
.nebula-texture{position:absolute;inset:-5%;background:url('assets/cosmic-nebula.webp') center/cover no-repeat;opacity:.62;filter:saturate(1.06) contrast(1.12);transform:scale(1.06);animation:nebulaBreath 16s ease-in-out infinite alternate}.bg-photo{position:absolute;inset:-7%;background:center/cover no-repeat;filter:saturate(.78) contrast(1.12) brightness(.25);opacity:.18;transform:scale(1.1);transition:opacity 1.6s ease,filter 1.6s ease,transform 7s ease}.bg-a{background-image:url('assets/qwantani-night.webp');mix-blend-mode:screen;opacity:.24;filter:saturate(.92) contrast(1.08) brightness(.48)}.bg-b{background-image:url('../assets/stills/gece-kervani-psychedelic-room-ripple-portrait.webp');mix-blend-mode:screen;opacity:.06}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 44%,transparent 18%,rgba(3,2,7,.36) 58%,rgba(1,1,3,.92) 100%)}.grain{position:absolute;inset:-18%;opacity:.048;background-image:url('assets/film-grain-128.png');background-repeat:repeat;background-size:180px 180px;mix-blend-mode:soft-light;animation:grain .34s steps(2) infinite;will-change:transform;contain:paint}.ornament-field{position:absolute;inset:0;display:grid;place-items:center;opacity:.22;mix-blend-mode:screen}.ornament-field i{position:absolute;width:min(64vmin,720px);aspect-ratio:1;border:1px solid rgba(231,184,102,.11);border-radius:50%;animation:orbit 42s linear infinite}.ornament-field i::before,.ornament-field i::after{content:"";position:absolute;inset:12%;border:1px dashed rgba(93,228,255,.08);border-radius:50%;transform:rotate(38deg)}.ornament-field i::after{inset:27%;border-color:rgba(255,93,169,.08);transform:rotate(-27deg)}.ornament-field i:nth-child(2){width:min(82vmin,940px);animation-direction:reverse;animation-duration:58s}.ornament-field i:nth-child(3){width:min(47vmin,560px);animation-duration:32s}.ornament-field i:nth-child(3)::before{border-style:solid;border-color:rgba(231,184,102,.12)}
@keyframes nebulaBreath{from{transform:scale(1.04) translate3d(-.5%,0,0);opacity:.52}to{transform:scale(1.1) translate3d(.8%,-.7%,0);opacity:.70}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(3%,3%)}100%{transform:translate(-2%,-1%)}}
.game-topbar{position:fixed;z-index:30;left:18px;right:18px;top:16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none}.game-topbar>*{pointer-events:auto}.back-link,.brand,.lang-switch{background:linear-gradient(145deg,rgba(18,10,20,.62),rgba(5,4,10,.42));border:1px solid var(--panel-line);backdrop-filter:blur(10px) saturate(1.12);box-shadow:0 10px 36px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.018)}.back-link{justify-self:start;font-size:.82rem;letter-spacing:.08em;color:#ded1c4;padding:10px 14px;border-radius:999px}.brand{display:flex;align-items:center;gap:10px;padding:8px 15px;border-radius:999px}.brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(231,184,102,.13))}.brand strong,.brand small{display:block}.brand strong{font:700 .76rem/1 ui-sans-serif;letter-spacing:.18em}.brand small{font-size:.56rem;letter-spacing:.12em;color:#a9998e;margin-top:3px}.lang-switch{justify-self:end;display:flex;padding:4px;border-radius:999px}.lang-switch button{border:0;background:transparent;padding:7px 9px;border-radius:999px;font-size:.66rem;cursor:pointer;color:#a99fa5}.lang-switch button.active{background:linear-gradient(145deg,rgba(231,184,102,.16),rgba(124,92,255,.12));color:#fff6df;box-shadow:inset 0 0 0 1px rgba(231,184,102,.17)}
.overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:80px 20px 30px;background:radial-gradient(circle at 50% 42%,rgba(51,22,62,.45),rgba(3,2,7,.9));opacity:0;visibility:hidden;transition:.45s ease;pointer-events:none}.overlay.active{opacity:1;visibility:visible;pointer-events:auto}.intro{background:radial-gradient(circle at 50% 33%,rgba(108,47,130,.21),rgba(3,2,7,.91) 64%),linear-gradient(rgba(5,4,10,.18),rgba(5,4,10,.63))}.intro-card{position:relative;z-index:2;width:min(720px,94vw);text-align:center;padding:32px clamp(18px,4vw,46px);border:1px solid rgba(231,184,102,.20);border-radius:34px;background:linear-gradient(145deg,rgba(23,13,29,.76),rgba(7,5,12,.72));box-shadow:0 34px 140px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.025),0 0 70px rgba(156,92,255,.04);backdrop-filter:blur(24px)}.intro-card::before{content:"";position:absolute;inset:9px;border:1px solid rgba(231,184,102,.06);border-radius:27px;pointer-events:none}.eyebrow{display:block;font-size:.68rem;letter-spacing:.34em;color:var(--gold)}.intro h1{font:800 clamp(3.4rem,10vw,7.8rem)/.78 ui-sans-serif;margin:18px 0 26px;letter-spacing:-.07em;background:linear-gradient(180deg,#fff9ea 7%,#f2ce81 57%,#9d6038);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 18px 60px rgba(255,158,70,.12)}.intro p{max-width:580px;margin:0 auto 20px;color:#cdbfba;line-height:1.6}.song-chip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;max-width:560px;margin:18px auto;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);text-align:left}.song-chip span,.song-chip small{font-size:.64rem;letter-spacing:.14em;color:#988c8a}.song-chip strong{font-size:.9rem;letter-spacing:.08em}.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.difficulty button{padding:13px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:.22s ease}.difficulty button:hover{transform:translateY(-1px);background:rgba(255,255,255,.055)}.difficulty button.selected{background:linear-gradient(135deg,rgba(231,184,102,.20),rgba(124,92,255,.14));border-color:rgba(231,184,102,.48);box-shadow:0 0 34px rgba(231,184,102,.08)}.difficulty span,.difficulty small{display:block}.difficulty span{font-weight:800;letter-spacing:.09em}.difficulty small{font-size:.65rem;color:#978d8b;margin-top:4px}.calibration{max-width:560px;margin:15px auto}.calibration label{display:flex;justify-content:space-between;font-size:.7rem;color:#9d9192;letter-spacing:.08em}.calibration input{width:100%;accent-color:#e7b866;margin-top:8px}.controls-preview{display:flex;justify-content:center;align-items:center;gap:8px;color:#9d9192;font-size:.72rem;margin:14px 0}.controls-preview kbd{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#17121e;border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 0 #08070c;color:#fff}.start-btn{display:flex;align-items:center;justify-content:center;gap:24px;width:min(100%,430px);margin:20px auto 0;border:0;border-radius:999px;padding:17px 22px;background:linear-gradient(90deg,#bf7336,#f1ca79 43%,#b66b39);color:#190c08;font-weight:900;letter-spacing:.1em;cursor:pointer;box-shadow:0 14px 60px rgba(231,184,102,.25),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s ease,box-shadow .2s ease}.start-btn:hover{transform:translateY(-2px);box-shadow:0 18px 76px rgba(231,184,102,.32)}.start-btn b{font-size:1.2rem}.intro-orbit{position:absolute;width:min(78vw,920px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(231,184,102,.1);animation:orbit 36s linear infinite}.intro-orbit::before,.intro-orbit::after{content:"";position:absolute;inset:11%;border:1px solid rgba(93,228,255,.08);border-radius:50%;transform:rotate(54deg)}.intro-orbit::after{inset:24%;border-color:rgba(255,93,169,.08);transform:rotate(-32deg)}.intro-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:#e7b866;box-shadow:0 0 30px #e7b866}.intro-orbit i:nth-child(1){top:12%;left:24%}.intro-orbit i:nth-child(2){right:8%;top:48%;background:#5de4ff}.intro-orbit i:nth-child(3){bottom:8%;left:42%;background:#ff5da9}
.countdown{font-size:clamp(8rem,30vw,18rem);font-weight:900;color:#f7e7c5;text-shadow:0 0 90px rgba(231,184,102,.45)}.pause-card,.result-card{width:min(600px,92vw);padding:34px;border:1px solid rgba(231,184,102,.14);border-radius:30px;background:linear-gradient(145deg,rgba(15,8,18,.9),rgba(7,5,11,.88));backdrop-filter:blur(12px);text-align:center;box-shadow:0 32px 100px rgba(0,0,0,.45)}.pause-card span{letter-spacing:.3em;color:#e7b866}.pause-card h2{font-size:2rem}.pause-card button,.site-cta{display:inline-block;margin:7px;padding:12px 18px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer}.result-card>h2{font-size:clamp(4rem,10vw,7rem);margin:12px 0 20px;letter-spacing:-.07em;background:linear-gradient(180deg,#fff8e6,#e7b866);-webkit-background-clip:text;background-clip:text;color:transparent}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.result-grid div{padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.04)}.result-grid small,.result-grid strong{display:block}.result-grid small{font-size:.6rem;color:#9f9497;letter-spacing:.12em}.result-grid strong{font-size:1.3rem;margin-top:4px}
.hud{position:fixed;z-index:20;left:20px;right:20px;top:84px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;pointer-events:none}.hud>div{opacity:0;transition:.3s}.playing .hud>div{opacity:1}.score-block span,.accuracy-block span{display:block;font-size:.57rem;letter-spacing:.22em;color:#9b929e}.score-block strong,.accuracy-block strong{font:800 clamp(1.15rem,2.2vw,1.8rem)/1 ui-monospace,monospace;letter-spacing:.04em;text-shadow:0 0 18px rgba(255,255,255,.06)}.accuracy-block{text-align:right}.combo-block{text-align:center}.combo-block strong{display:block;font:900 clamp(3rem,7vw,6.5rem)/.72 ui-sans-serif;letter-spacing:-.08em;color:#fff3da;text-shadow:0 0 34px rgba(231,184,102,.28)}.combo-block span{font-size:.6rem;letter-spacing:.28em;color:#c8afa2}.combo-block em{display:inline-block;margin-top:5px;padding:4px 9px;border-radius:999px;background:rgba(231,184,102,.11);color:#e7b866;font-style:normal;font-size:.7rem;border:1px solid rgba(231,184,102,.08)}.pause-btn{position:fixed;right:18px;bottom:calc(var(--safe-bottom) + 90px);z-index:24;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.09);background:rgba(8,6,12,.48);backdrop-filter:blur(8px);color:#d8d0d4;cursor:pointer;opacity:0;pointer-events:none}.playing .pause-btn{opacity:1;pointer-events:auto}.phase-label{position:fixed;z-index:20;left:20px;bottom:calc(var(--safe-bottom) + 90px);opacity:0;transition:.3s;min-width:150px}.playing .phase-label{opacity:1}.phase-label small,.phase-label strong{display:block}.phase-label small{font-size:.55rem;letter-spacing:.24em;color:#9b929e}.phase-label strong{font-size:.85rem;letter-spacing:.18em;color:#e7b866}.energy-meter{display:block;width:132px;height:3px;margin-top:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}.energy-meter i{display:block;height:100%;width:22%;background:linear-gradient(90deg,var(--gold),var(--pink),var(--cyan));box-shadow:0 0 14px rgba(231,184,102,.45);transition:width .8s ease}.judgement{position:fixed;z-index:26;left:50%;top:61%;transform:translate(-50%,-50%) scale(.6);opacity:0;font-weight:900;font-size:clamp(2rem,5vw,4.4rem);letter-spacing:-.04em;pointer-events:none;text-shadow:0 0 24px currentColor}.judgement.show{animation:judge .32s ease-out}@keyframes judge{0%{opacity:1;transform:translate(-50%,-50%) scale(.88)}26%{opacity:1;transform:translate(-50%,-50%) scale(1.13)}100%{opacity:0;transform:translate(-50%,-66%) scale(.9)}}
.milestone{position:fixed;z-index:29;left:50%;top:45%;transform:translate(-50%,-50%) scale(.7);width:min(560px,92vw);padding:32px;text-align:center;opacity:0;pointer-events:none;border:1px solid rgba(231,184,102,.26);border-radius:36px;background:radial-gradient(circle at 50% 42%,rgba(88,42,99,.76),rgba(7,5,12,.76));backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(255,255,255,.025),0 28px 110px rgba(0,0,0,.38),0 0 100px rgba(156,92,255,.10)}.milestone::before,.milestone::after{content:"";position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border:1px solid rgba(231,184,102,.22);border-radius:50%;transform:translate(-50%,-50%) scale(.35);opacity:0}.milestone::after{border-color:rgba(93,228,255,.16)}.milestone small,.milestone strong,.milestone span{display:block}.milestone small{letter-spacing:.28em;color:#d2b88c}.milestone strong{font-size:clamp(5.4rem,17vw,11rem);line-height:.76;color:#f9e1a8;text-shadow:0 0 46px rgba(231,184,102,.38)}.milestone span{margin-top:14px;letter-spacing:.2em}.milestone.show{animation:milestone .88s ease both}.milestone.show::before{animation:shock .62s ease-out}.milestone.show::after{animation:shock .76s .04s ease-out}@keyframes milestone{0%{opacity:0;transform:translate(-50%,-50%) scale(.42)}13%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}68%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(1.14)}}@keyframes shock{0%{opacity:.9;transform:translate(-50%,-50%) scale(.28)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
.event-banner{position:fixed;z-index:22;left:50%;top:20%;transform:translate(-50%,-20px);text-align:center;opacity:0;pointer-events:none}.event-banner small,.event-banner strong{display:block}.event-banner small{font-size:.6rem;letter-spacing:.28em;color:#b0a3aa}.event-banner strong{font-size:clamp(1.5rem,3vw,2.7rem);letter-spacing:.13em;text-shadow:0 0 28px rgba(231,184,102,.16)}.event-banner.show{animation:event 1.05s ease both}@keyframes event{0%{opacity:0;transform:translate(-50%,-22px) scale(.94)}18%,70%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,20px) scale(1.04)}}
.touch-zones{position:fixed;z-index:25;left:50%;bottom:var(--safe-bottom);transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(92vw,620px);height:72px;opacity:0;pointer-events:none;transition:.25s}.playing .touch-zones{opacity:1;pointer-events:auto}.touch-zones button{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:19px;background:linear-gradient(180deg,rgba(16,10,19,.74),rgba(7,5,11,.72));backdrop-filter:blur(14px);font-weight:900;font-size:1.08rem;box-shadow:inset 0 0 26px rgba(255,255,255,.022),0 9px 28px rgba(0,0,0,.18);touch-action:none}.touch-zones button::after{content:"";position:absolute;left:14%;right:14%;top:6px;height:2px;border-radius:999px;background:currentColor;opacity:.28;box-shadow:0 0 12px currentColor}.touch-zones button:nth-child(1){color:var(--lane0)}.touch-zones button:nth-child(2){color:var(--lane1)}.touch-zones button:nth-child(3){color:var(--lane2)}.touch-zones button:nth-child(4){color:var(--lane3)}.touch-zones button.pressed{transform:translateY(2px) scale(.97);background:rgba(255,255,255,.13);box-shadow:inset 0 0 36px currentColor}
body[data-phase="WARM"] .nebula-texture{filter:saturate(1.15) contrast(1.12) hue-rotate(-8deg);opacity:.68}body[data-phase="PSYCHEDELIC"] .bg-b{opacity:.18;filter:hue-rotate(18deg) saturate(1.5) brightness(.43);transform:scale(1.13) rotate(.5deg)}body[data-phase="PSYCHEDELIC"] .ornament-field{opacity:.32}body[data-phase="FEVER"] .bg-a{opacity:.33;filter:saturate(1.38) contrast(1.12) brightness(.4);transform:scale(1.15)}body[data-phase="FEVER"] .nebula-texture{filter:saturate(1.5) hue-rotate(-12deg);opacity:.76}body[data-phase="TRANSCENDENCE"] #bgLayers{background:radial-gradient(circle at 50% 30%,#3d2360,#08182a 40%,#03040a 78%)}body[data-phase="TRANSCENDENCE"] .ornament-field{opacity:.44}body[data-phase="FINALE"] .bg-b{opacity:.30;filter:saturate(1.55) brightness(.50)}body[data-phase="WARM"] .energy-meter i{width:38%}body[data-phase="PSYCHEDELIC"] .energy-meter i{width:54%}body[data-phase="FEVER"] .energy-meter i{width:70%}body[data-phase="TRANSCENDENCE"] .energy-meter i{width:86%}body[data-phase="FINALE"] .energy-meter i{width:100%}
/* Tablet landscape */
@media (min-width:721px) and (max-width:1180px){.game-topbar{left:14px;right:14px}.hud{left:16px;right:16px;top:80px}.touch-zones{width:min(86vw,680px);height:78px}.phase-label{left:16px}.pause-btn{right:16px}.intro-card{width:min(720px,88vw)}}
/* Tablet portrait */
@media (min-width:600px) and (max-width:900px) and (orientation:portrait){.game-topbar{grid-template-columns:auto 1fr auto;left:12px;right:12px}.brand{justify-self:center}.brand small{display:none}.hud{top:76px}.touch-zones{width:calc(100vw - 38px);height:84px}.phase-label{bottom:calc(var(--safe-bottom) + 104px)}.pause-btn{bottom:calc(var(--safe-bottom) + 104px)}}
/* Mobile */
@media(max-width:599px){.game-topbar{grid-template-columns:auto 1fr auto;left:9px;right:9px;top:10px}.brand{justify-self:center;padding:6px 9px}.brand div{display:none}.brand img{width:30px;height:30px}.back-link span{display:none}.back-link{padding:9px 11px}.lang-switch button{padding:7px 8px}.hud{top:64px;left:10px;right:10px}.combo-block strong{font-size:3.2rem}.score-block strong,.accuracy-block strong{font-size:.94rem}.score-block span,.accuracy-block span{font-size:.49rem}.intro-card{padding:22px 14px;border-radius:26px}.intro h1{font-size:clamp(3.4rem,20vw,5.8rem)}.song-chip{grid-template-columns:1fr;text-align:center;gap:5px}.difficulty{gap:6px}.difficulty button{padding:11px 5px}.controls-preview{display:none}.result-grid{grid-template-columns:repeat(2,1fr)}.phase-label{left:10px;bottom:calc(var(--safe-bottom) + 91px);min-width:112px}.energy-meter{width:104px}.pause-btn{right:10px;bottom:calc(var(--safe-bottom) + 91px)}.touch-zones{height:72px;width:calc(100vw - 14px);gap:5px}.touch-zones button{border-radius:16px}.judgement{top:58%}.event-banner{top:16%}.milestone{padding:24px 16px}}
@media (max-height:620px) and (orientation:landscape){.game-topbar{top:7px}.hud{top:56px}.brand small{display:none}.touch-zones{height:58px;width:min(70vw,610px)}.phase-label,.pause-btn{bottom:calc(var(--safe-bottom) + 70px)}.intro-card{padding:16px 20px;max-height:90vh;overflow:auto}.intro h1{font-size:3.2rem;margin:10px 0 14px}.intro p{margin-bottom:10px}.song-chip{margin:10px auto}.difficulty{margin:10px 0}.calibration{margin:8px auto}.start-btn{margin-top:10px;padding:13px}.controls-preview{display:none}}
@media(prefers-reduced-motion:reduce){.grain,.intro-orbit,.nebula-texture,.ornament-field i{animation:none!important}.bg-photo{transition:none}}


/* Online D1 leaderboard */
.leaderboard-widget{margin:16px auto 0;width:min(100%,620px);border:1px solid rgba(231,184,102,.14);border-radius:22px;background:linear-gradient(180deg,rgba(28,13,28,.66),rgba(8,6,12,.7));overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.03),0 18px 48px rgba(0,0,0,.18)}
.lb-head{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.055)}.lb-title{font-size:.68rem;letter-spacing:.17em;color:#e4cda9}.lb-diff{padding:4px 8px;border-radius:999px;background:rgba(231,184,102,.08);color:#e7b866;font-size:.6rem;letter-spacing:.12em}.lb-live{font-size:.55rem;letter-spacing:.13em;color:#897f87}.lb-live.online{color:#79e7b0;text-shadow:0 0 12px rgba(121,231,176,.28)}
.lb-list{padding:6px}.lb-row{display:grid;grid-template-columns:34px 1fr auto;grid-template-areas:'rank name score' 'rank meta meta';gap:2px 9px;align-items:center;padding:7px 9px;border-radius:12px;color:#d7ced3}.lb-row:nth-child(even){background:rgba(255,255,255,.025)}.lb-row.podium{background:linear-gradient(90deg,rgba(231,184,102,.09),rgba(255,255,255,.015))}.lb-rank{grid-area:rank;font:800 .8rem ui-monospace,monospace;color:#8e838b}.podium .lb-rank{color:#e7b866}.lb-row strong{grid-area:name;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-score{grid-area:score;font:800 .78rem ui-monospace,monospace;color:#fff1d4}.lb-row small{grid-area:meta;color:#897e86;font-size:.58rem;letter-spacing:.04em}.lb-empty{padding:18px;text-align:center;color:#8f838a;font-size:.72rem}
.leaderboard-submit{margin:14px 0 0;padding:14px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}.lb-submit-row{display:grid;grid-template-columns:1fr auto;gap:8px}.lb-submit-row input{min-width:0;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(5,4,8,.5);color:#fff;padding:12px 13px;font:inherit;outline:none}.lb-submit-row input:focus{border-color:rgba(231,184,102,.46);box-shadow:0 0 0 3px rgba(231,184,102,.08)}.lb-submit-row button{border:1px solid rgba(231,184,102,.18);border-radius:13px;background:linear-gradient(135deg,rgba(231,184,102,.2),rgba(156,92,255,.16));color:#f9e4bc;padding:0 14px;font-size:.7rem;font-weight:800;letter-spacing:.08em;cursor:pointer}.lb-submit-row button:disabled{opacity:.4;cursor:not-allowed}.lb-submit-status{display:block;min-height:1.2em;margin-top:8px;color:#9d9299;font-size:.68rem}.lb-submit-status[data-kind="ok"]{color:#79e7b0}.lb-submit-status[data-kind="error"]{color:#ff7b91}.player-rank{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.05);color:#a99ba3;font-size:.65rem;letter-spacing:.12em}.player-rank strong{font-size:1.1rem;color:#f3d18f}
.result-card{max-height:min(94vh,900px);overflow:auto}.result-card .leaderboard-widget{margin-top:14px}.intro-card .leaderboard-widget{max-height:260px}.intro-card .lb-list{max-height:190px;overflow:auto}
@media(max-width:599px){.leaderboard-widget{border-radius:17px}.lb-head{padding:9px 10px}.lb-row{padding:6px 7px}.intro-card .leaderboard-widget{max-height:220px}.intro-card .lb-list{max-height:150px}.lb-submit-row{grid-template-columns:1fr}.lb-submit-row button{padding:11px}.result-card{padding-bottom:calc(16px + var(--safe-bottom))}}


/* V1.3 timed-run + compact live Top 5 */
.hud{grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr);}
.time-block{position:fixed;z-index:24;left:50%;top:clamp(142px,18vh,188px);transform:translateX(-50%);display:grid;place-items:center;min-width:94px;padding:8px 15px;border-radius:18px;background:linear-gradient(180deg,rgba(12,8,18,.58),rgba(7,5,11,.42));border:1px solid rgba(231,184,102,.13);backdrop-filter:blur(8px);box-shadow:0 12px 32px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .25s ease}.playing .time-block{opacity:1}.time-block span{font-size:.52rem;letter-spacing:.24em;color:#a89a9d}.time-block strong{font:900 1.5rem/1 ui-monospace,monospace;color:#fff0cf;text-shadow:0 0 18px rgba(231,184,102,.18)}.time-block small{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(-4px);white-space:nowrap;color:#79e7b0;font:800 .67rem ui-monospace,monospace;opacity:0;text-shadow:0 0 12px rgba(121,231,176,.25)}.time-block small.show{animation:timeGain .36s ease-out}@keyframes timeGain{0%{opacity:0;transform:translateY(-50%) translateX(-5px) scale(.85)}24%{opacity:1;transform:translateY(-50%) translateX(0) scale(1.08)}100%{opacity:0;transform:translateY(-85%) translateX(8px) scale(.96)}}
.leaderboard-side{position:fixed;z-index:21;right:16px;top:24%;width:214px;margin:0;opacity:0;transform:translateX(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;background:linear-gradient(180deg,rgba(17,10,21,.53),rgba(6,5,10,.44));backdrop-filter:blur(13px)}.playing .leaderboard-side{opacity:.82;transform:none}.leaderboard-side:hover{opacity:1}.leaderboard-side .lb-head{grid-template-columns:1fr auto;padding:8px 9px;gap:6px}.leaderboard-side .lb-title{font-size:.56rem;letter-spacing:.11em}.leaderboard-side .lb-diff{font-size:.5rem;padding:3px 6px}.leaderboard-side .lb-live{display:none}.leaderboard-side .lb-list{padding:4px}.leaderboard-side .lb-row{grid-template-columns:23px 1fr auto;grid-template-areas:'rank name score';padding:5px 6px;gap:5px;border-radius:9px}.leaderboard-side .lb-rank{font-size:.62rem}.leaderboard-side .lb-row strong{font-size:.63rem}.leaderboard-side .lb-score{font-size:.61rem}.leaderboard-side .lb-row small{display:none}.leaderboard-side .lb-empty{padding:10px 7px;font-size:.58rem}
@media (min-width:600px) and (max-width:1180px){.leaderboard-side{right:10px;top:27%;width:178px}.leaderboard-side .lb-title{font-size:.5rem}.leaderboard-side .lb-row strong,.leaderboard-side .lb-score{font-size:.57rem}.time-block{top:136px;min-width:86px}}
@media(max-width:599px){.time-block{top:123px;min-width:72px;padding:6px 10px;border-radius:14px}.time-block strong{font-size:1.1rem}.time-block span{font-size:.43rem}.time-block small{font-size:.54rem;left:auto;right:calc(100% + 5px)}.leaderboard-side{right:5px;top:25%;width:124px;border-radius:13px;opacity:0}.playing .leaderboard-side{opacity:.70}.leaderboard-side .lb-head{padding:5px 6px}.leaderboard-side .lb-title{font-size:.43rem;letter-spacing:.06em}.leaderboard-side .lb-diff{font-size:.42rem;padding:2px 4px}.leaderboard-side .lb-list{padding:2px}.leaderboard-side .lb-row{grid-template-columns:16px minmax(0,1fr) auto;padding:3px 4px;gap:3px;border-radius:6px}.leaderboard-side .lb-rank{font-size:.47rem}.leaderboard-side .lb-row strong{font-size:.49rem}.leaderboard-side .lb-score{font-size:.46rem}.leaderboard-side .lb-empty{font-size:.47rem;padding:6px 4px}}
@media(max-width:360px){.leaderboard-side{width:108px;top:27%}.leaderboard-side .lb-title{font-size:.39rem}.leaderboard-side .lb-row strong{max-width:48px}.time-block{top:116px}}
@media (max-height:620px) and (orientation:landscape){.leaderboard-side{top:24%;width:160px}.time-block{top:92px}}


/* V1.4 final visual pass: guitar world + readable live Top 5 */
#stageDecor{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.guitar-fallback,.stage-guitar{position:absolute;left:clamp(8px,2.5vw,46px);bottom:clamp(70px,8vh,110px);width:clamp(190px,25vw,390px);height:min(72vh,760px);object-fit:contain;object-position:left bottom;transform:rotate(-7deg);transform-origin:50% 82%;filter:drop-shadow(0 28px 42px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(231,184,102,.16));transition:opacity .35s ease,filter .35s ease,transform .5s ease}
.guitar-fallback{opacity:.88}.stage-guitar{opacity:0;background:transparent}.stage-guitar.ready{opacity:.90}.guitar-fallback.model-ready{opacity:.06}
.guitar-glow{position:absolute;left:-5vw;bottom:-12vh;width:min(44vw,620px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(231,184,102,.18),rgba(156,92,255,.06) 44%,transparent 72%);filter:blur(14px);opacity:.66}
body.playing .guitar-fallback,body.playing .stage-guitar{transform:rotate(-5deg) scale(1.025)}
body[data-phase="PSYCHEDELIC"] .guitar-glow,body[data-phase="FEVER"] .guitar-glow{background:radial-gradient(circle,rgba(93,228,255,.15),rgba(255,93,169,.08) 42%,transparent 72%)}
body[data-phase="TRANSCENDENCE"] .guitar-glow,body[data-phase="FINALE"] .guitar-glow{opacity:.88;filter:blur(18px)}
.leaderboard-side{right:18px;top:22%;width:238px;background:linear-gradient(180deg,rgba(19,11,24,.88),rgba(7,5,11,.82));border-color:rgba(231,184,102,.26);box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(9px)}
.playing .leaderboard-side{opacity:.96;transform:none}.leaderboard-side .lb-head{padding:9px 10px}.leaderboard-side .lb-title{font-size:.61rem;color:#f0d7aa}.leaderboard-side .lb-diff{font-size:.52rem}.leaderboard-side .lb-row{padding:6px 7px}.leaderboard-side .lb-rank{font-size:.66rem}.leaderboard-side .lb-row strong{font-size:.68rem;color:#f1e8e2}.leaderboard-side .lb-score{font-size:.67rem;color:#fff0c9}
@media (min-width:600px) and (max-width:1180px){.guitar-fallback,.stage-guitar{left:-8vw;width:34vw;height:62vh;opacity:.48}.stage-guitar.ready{opacity:.58}.leaderboard-side{right:10px;top:24%;width:196px}.playing .leaderboard-side{opacity:.94}}
@media(max-width:599px){.guitar-fallback,.stage-guitar{left:-18vw;bottom:88px;width:54vw;height:44vh;transform:rotate(-10deg);opacity:.28}.stage-guitar.ready{opacity:.34}.guitar-glow{left:-24vw;bottom:2vh;width:78vw;opacity:.38}.leaderboard-side{right:5px;top:22%;width:142px;background:rgba(12,8,17,.88);border-color:rgba(231,184,102,.24)}.playing .leaderboard-side{opacity:.94}.leaderboard-side .lb-title{font-size:.46rem}.leaderboard-side .lb-row strong{font-size:.52rem}.leaderboard-side .lb-score{font-size:.50rem}}
@media(prefers-reduced-motion:reduce){.stage-guitar{display:none}.guitar-fallback{transform:none!important}}

/* V3.3.24 performance containment: same visuals, less invalidation */
#gameCanvas{contain:strict}.judgement,.milestone,.event-banner,.time-block,.leaderboard-side{will-change:transform,opacity}.hud,.touch-zones,.leaderboard-side,.phase-label{contain:layout paint style}.touch-zones button{will-change:transform}.playing .leaderboard-side{backface-visibility:hidden}

/* V3.3.25 mobile-start + performance parity patch */
html,body{min-height:100%;min-height:100dvh}
.overlay{min-height:100%;min-height:100dvh}
@media(max-width:599px){
  .overlay{place-items:start center;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:calc(64px + env(safe-area-inset-top)) 7px calc(12px + env(safe-area-inset-bottom));}
  .overlay.active{pointer-events:auto}
  .intro-card{width:calc(100vw - 14px);max-width:560px;margin:auto;padding:18px 12px calc(10px + env(safe-area-inset-bottom));border-radius:24px;backdrop-filter:blur(9px)}
  .intro h1{font-size:clamp(2.75rem,17vw,4.7rem);margin:11px 0 14px;line-height:.82}
  .intro p{font-size:.88rem;line-height:1.45;margin-bottom:10px}
  .song-chip{margin:9px auto;padding:9px 11px;border-radius:15px}
  .difficulty{margin:9px 0}
  .difficulty button{min-height:50px;padding:9px 4px}
  .intro-card .leaderboard-widget{max-height:172px;margin:9px 0}
  .intro-card .lb-list{max-height:108px}
  .calibration{margin:9px auto 5px}
  .calibration input{min-height:28px;margin-top:3px}
  .start-btn{position:sticky;bottom:max(2px,env(safe-area-inset-bottom));z-index:8;min-height:54px;margin:9px auto 0;padding:15px 18px;box-shadow:0 12px 44px rgba(231,184,102,.24),0 -14px 28px rgba(7,5,11,.62);touch-action:manipulation}
  .touch-zones{bottom:max(8px,env(safe-area-inset-bottom));height:74px}
  .touch-zones button{min-width:0;min-height:58px;touch-action:manipulation;-webkit-user-select:none;user-select:none;backdrop-filter:blur(10px)}
  .leaderboard-side{max-height:40vh;overflow:hidden;backdrop-filter:blur(12px)}
  .game-topbar{top:max(8px,env(safe-area-inset-top))}
  .hud{top:calc(58px + env(safe-area-inset-top))}
}
@media(max-width:380px){
  .intro-card{padding-left:9px;padding-right:9px}
  .intro h1{font-size:clamp(2.45rem,16vw,3.7rem)}
  .song-chip span,.song-chip small{font-size:.57rem}
  .difficulty span{font-size:.78rem}
  .difficulty small{font-size:.55rem}
  .intro-card .leaderboard-widget{max-height:150px}
  .intro-card .lb-list{max-height:88px}
}
@media(max-height:700px) and (max-width:599px){
  .overlay{padding-top:calc(54px + env(safe-area-inset-top))}
  .intro-card{padding-top:13px}
  .intro .eyebrow{font-size:.58rem}
  .intro h1{font-size:clamp(2.35rem,13vw,3.35rem);margin:7px 0 9px}
  .intro p{font-size:.79rem;line-height:1.35;margin-bottom:7px}
  .song-chip{margin:6px auto;padding:7px 9px}
  .difficulty{margin:6px 0}
  .difficulty button{min-height:44px;padding:7px 3px}
  .intro-card .leaderboard-widget{max-height:126px;margin:6px 0}
  .intro-card .lb-list{max-height:70px}
  .calibration{margin:6px auto 2px}
  .start-btn{min-height:50px;margin-top:6px;padding:12px 15px}
}
@media (max-height:620px) and (orientation:landscape){
  .overlay{place-items:start center;overflow-y:auto;touch-action:pan-y;padding-top:calc(48px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .intro-card{max-height:none;overflow:visible;margin:auto}
  .start-btn{position:sticky;bottom:max(2px,env(safe-area-inset-bottom));z-index:8;touch-action:manipulation}
}
body.menu-mode{touch-action:pan-y}
body.menu-mode .overlay.active{touch-action:pan-y}

/* V3.3.26 regression-safe short-tablet/laptop entry reachability */
@media (min-width:600px) and (max-width:1180px) and (max-height:820px){
  .overlay{place-items:start center;overflow-y:auto;overscroll-behavior:contain;padding-top:68px;padding-bottom:18px}
  .intro-card{margin:auto;max-height:none;overflow:visible}
  .intro h1{font-size:clamp(3rem,8vw,5.4rem);margin:12px 0 18px}
  .intro p{margin-bottom:12px}
  .song-chip{margin:11px auto}
  .difficulty{margin:11px 0}
  .calibration{margin:9px auto}
  .start-btn{position:sticky;bottom:4px;z-index:8}
}

/* V3.3.27 sustained-play performance pass */
body.playing .nebula-texture,body.playing .grain,body.playing .ornament-field i{animation-play-state:paused}
body.playing .grain{opacity:.032}
body.playing .ornament-field{opacity:.16}
body.playing .guitar-glow{filter:blur(12px);opacity:.56}
body.playing .leaderboard-side{backdrop-filter:blur(7px)}
body.playing .touch-zones button{backdrop-filter:blur(5px)}
body.playing .pause-btn,body.playing .time-block{backdrop-filter:blur(6px)}
@media(max-width:599px){body.playing .guitar-glow{filter:blur(8px);opacity:.30}.nebula-texture{filter:saturate(1.03) contrast(1.08)}.bg-a{filter:saturate(.9) contrast(1.04) brightness(.46)}}