@font-face{font-family:Anton;src:url(fonts/Anton-Regular.woff2) format("woff2");font-display:block}
@font-face{font-family:Bebas;src:url(fonts/BebasNeue-Regular.woff2) format("woff2");font-display:block}
@font-face{font-family:Oswald;src:url(fonts/Oswald.woff2) format("woff2");font-weight:200 700;font-display:block}
:root{--red:#ff2a45;--gold:#ffc83a;--teal:#27e0c2;--ink:#07060d;--panel:#14121f;--line:#2e2a45}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
html,body{margin:0;height:100%;background:#000;overflow:hidden;overscroll-behavior:none;font-family:Oswald,system-ui,sans-serif;color:#fff}
body{display:flex;align-items:center;justify-content:center}
#stage{position:relative;width:390px;height:844px;transform-origin:center center;flex:none;background:var(--ink);overflow:hidden}
#c{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
#ui{position:absolute;inset:0;pointer-events:none}
#cap{position:absolute;left:8px;right:8px;top:142px;min-height:0;opacity:0;transition:opacity .2s;background:rgba(7,6,13,.86);border:1px solid var(--line);border-left:4px solid var(--gold);padding:6px 10px;border-radius:6px;font-size:14px;line-height:1.25;letter-spacing:.2px}
#cap.on{opacity:1}
#cap b{font-family:Bebas;font-weight:400;letter-spacing:1.5px;color:var(--gold);margin-right:6px;font-size:16px}
#toast{position:absolute;left:0;right:0;top:170px;text-align:center;font-family:Bebas;font-size:26px;letter-spacing:2px;color:var(--gold);text-shadow:0 2px 0 #000,0 0 14px rgba(255,200,58,.5);opacity:0;transition:opacity .25s}
#toast.on{opacity:1}
#panel{position:absolute;inset:0;pointer-events:none}
.sheet{position:absolute;left:0;right:0;pointer-events:auto;background:linear-gradient(180deg,#1b1830,#0e0c18);border-top:2px solid var(--red);padding:14px 14px 18px;box-shadow:0 -10px 40px rgba(0,0,0,.7)}
.sheet.bottom{bottom:0;border-radius:18px 18px 0 0;animation:up .22s ease-out}
.full{position:absolute;inset:0;pointer-events:auto;background:radial-gradient(120% 80% at 50% 0%,#241a3e 0,#0b0914 70%);padding:16px 14px;overflow:auto;animation:fade .2s}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
h1,h2,h3{font-family:Anton;font-weight:400;margin:0;letter-spacing:1px;text-transform:uppercase}
h2{font-size:26px;color:var(--gold)}
h3{font-size:17px;color:#fff;letter-spacing:1.2px}
p{margin:6px 0;font-size:14px;line-height:1.3;color:#dcd8f0}
small,.dim{color:#9a95b8;font-size:12px}
.btn{display:block;width:100%;border:0;border-radius:10px;padding:13px 10px;font-family:Anton;font-size:19px;letter-spacing:1.5px;text-transform:uppercase;color:#120a10;background:linear-gradient(180deg,#ffd75a,#ffb21f);box-shadow:0 4px 0 #8a5a00,0 8px 18px rgba(0,0,0,.5);cursor:pointer;margin-top:10px;pointer-events:auto}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a5a00}
.btn.red{background:linear-gradient(180deg,#ff5a6e,#e0122f);color:#fff;box-shadow:0 4px 0 #7a0016,0 8px 18px rgba(0,0,0,.5)}
.btn.ghost{background:#201c34;color:#fff;box-shadow:0 3px 0 #0a0814;border:1px solid var(--line);font-size:15px;padding:10px}
.btn.dis{filter:grayscale(1) brightness(.6);pointer-events:none}
.row{display:flex;gap:8px;align-items:center}
.row>*{flex:1}
.card{background:#1a1730;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px}
.tabs{display:flex;gap:6px;margin:10px 0 4px}
.tab{flex:1;text-align:center;padding:8px 2px;border-radius:8px;background:#1b1830;border:1px solid var(--line);font-family:Bebas;font-size:17px;letter-spacing:1.5px;cursor:pointer;pointer-events:auto}
.tab.on{background:var(--red);border-color:var(--red)}
.pill{display:inline-block;background:#251f40;border:1px solid var(--line);border-radius:99px;padding:2px 9px;font-size:12px;margin-right:4px}
.big{font-family:Anton;font-size:40px;letter-spacing:1px;line-height:1}
.gold{color:var(--gold)}.red{color:var(--red)}.teal{color:var(--teal)}
.days{display:flex;gap:5px;margin:8px 0}
.day{flex:1;text-align:center;padding:6px 0;border-radius:8px;background:#201c34;border:1px solid var(--line);font-size:11px;color:#9a95b8}
.day.done{background:#3a2a06;border-color:var(--gold);color:var(--gold)}
.day.today{box-shadow:0 0 0 2px var(--teal)}
table{width:100%;border-collapse:collapse;font-size:15px}
td{padding:6px 4px;border-bottom:1px solid #2a2640}
td.r{text-align:right;font-family:Anton;color:var(--gold)}
tr.me td{background:#2b1630;color:#fff}
.portrait{width:92px;height:110px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 8px #000)}
.gate{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:70px;background:linear-gradient(180deg,rgba(7,6,13,0) 30%,rgba(7,6,13,.92) 70%)}
.logo{font-family:Anton;text-align:center;text-transform:uppercase;line-height:.92;text-shadow:0 4px 0 #000,0 0 30px rgba(255,42,69,.6)}
.x18{display:inline-block;border:3px solid var(--red);color:var(--red);border-radius:8px;padding:0 8px;font-family:Anton;font-size:24px;margin-right:8px;vertical-align:middle}
.fine{font-size:11px;color:#8a85a8;text-align:center;margin-top:10px;line-height:1.35}
.kbd{display:inline-block;border:1px solid #4a4568;border-radius:4px;padding:0 5px;font-size:11px;color:#cfcbe6}
.full,.full *{touch-action:pan-y}
.sheet,.sheet *{touch-action:manipulation}
.pimg{position:absolute;right:6px;bottom:100%;height:150px;pointer-events:none;filter:drop-shadow(0 6px 10px #000)}
.hint{position:absolute;left:0;right:0;text-align:center;font-family:Bebas;letter-spacing:2px;font-size:17px;color:#fff;text-shadow:0 2px 0 #000}

/* v0.2 */
:root{--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom)}
html,body{touch-action:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}
.full{padding-top:calc(16px + var(--sat));padding-bottom:calc(16px + var(--sab))}
.sheet{padding-bottom:calc(18px + var(--sab))}
.btn,.tab,.song,.seg{min-height:44px}
.tab{padding:11px 2px;font-size:16px}
.up{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #2a2640;font-size:14px}
.up .btn{width:84px;flex:none;margin:0;padding:9px 4px;font-size:16px}
.songs{max-height:360px;overflow:auto;margin-top:6px}
.song{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#1a1730;border:1px solid var(--line);margin-top:6px;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.song.on{border-color:var(--gold);background:#2b2208}
.song .sn{font-family:Anton;font-size:17px;letter-spacing:1px;text-transform:uppercase}
.song .sr{font-size:12px;color:#9a95b8}
.song .sr b{color:var(--gold);font-family:Anton}
.segs{display:flex;gap:6px;margin-top:6px}
.seg{flex:1;text-align:center;padding:10px 2px;border-radius:8px;background:#1b1830;border:1px solid var(--line);font-family:Bebas;font-size:17px;letter-spacing:1.5px;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.seg.on{background:var(--red);border-color:var(--red)}
.lbl{font-family:Bebas;letter-spacing:2px;color:#9a95b8;font-size:14px;margin-top:10px}
.song .sn{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.15}
.song .sn b{font-family:Anton;font-weight:400;font-size:17px;letter-spacing:1px;color:#fff}
.song .sn span{font-size:12px;color:#b9b4d6;font-family:Oswald}
.song .sn span.dim{color:#8a85a8}
.song .sr{display:flex;flex-direction:column;align-items:flex-end;flex:none;font-size:11px;min-width:44px}
.song .sr b{font-size:20px}
.songs{max-height:300px}
/* v1.0 leaderboard controls */
.seg2{display:flex;gap:6px;margin:8px 0}
.seg2 button,.chips button{flex:1;min-height:44px;border:1px solid #3a3558;background:#171428;color:#cfc8ee;border-radius:10px;font:700 14px Oswald,Bebas,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.seg2 button.on,.chips button.on{background:#ff2a45;border-color:#ff2a45;color:#fff}
.chips{display:flex;gap:6px;overflow-x:auto;margin:6px 0 10px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.chips button{flex:0 0 auto;padding:0 14px}
.inp{width:100%;box-sizing:border-box;min-height:48px;margin:8px 0;padding:0 14px;border-radius:10px;border:1px solid #4a4470;background:#0e0c1a;color:#fff;font:600 16px Oswald,sans-serif;-webkit-user-select:text;user-select:text}
.credit-row{padding:6px 0;border-bottom:1px solid #2a2640}.credit-row b{color:#ffc83a}.credit-row span{display:block;color:#a9a3c8;font-size:13px}