:root{--ink:#0d0d0d;--gold:#F5C542;--cream:#FFF8E8;--cream2:#F5EDDC;--muted:#c9b79c;--si:#5ee0ff;--good:#6ee7a8;--bad:#ff6b6b;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--serif:Georgia,"Times New Roman",serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
 --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px)}
html[data-lang=en]{--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
html[data-lang=ko]{--sans:"Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic",sans-serif}
html[data-lang=ko] body{word-break:keep-all}
html.i18n-pending body{visibility:hidden}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#1a0b05;color:var(--cream);font-family:var(--sans)}
body{position:fixed;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 80% at 50% 0%,#5a2410 0%,#1a0b05 70%)}
#cv{display:block;touch-action:none;outline:none;box-shadow:0 0 60px rgba(0,0,0,.5)}
.pbar{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(8px + var(--st)) calc(10px + var(--sr)) 8px calc(10px + var(--sl));pointer-events:none}
.pbar>*{pointer-events:auto}
.pback{font:700 12.5px var(--sans);color:var(--cream);text-decoration:none;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);padding:7px 11px;border-radius:999px;white-space:nowrap}
.ptitle{font:700 14px var(--serif);letter-spacing:.1em;color:var(--gold);text-shadow:0 1px 6px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:999px;overflow:hidden;background:rgba(0,0,0,.45)}
.lang button{appearance:none;border:0;background:transparent;color:var(--cream);font:700 12px/1 var(--sans);padding:7px 9px;min-width:30px;cursor:pointer}
.lang button+button{border-left:1px solid rgba(255,255,255,.18)}
.lang button.on{background:var(--gold);color:#1a0f0a}
.pad{position:fixed;left:0;right:0;bottom:0;z-index:4;display:none;justify-content:space-between;align-items:flex-end;padding:0 calc(14px + var(--sr)) calc(16px + var(--sb)) calc(14px + var(--sl));pointer-events:none}
.playing .pad{display:flex}
@media (hover:hover) and (pointer:fine){.playing .pad{display:none}}
.pl{display:flex;gap:12px}
.pb{pointer-events:auto;touch-action:none;width:74px;height:74px;border-radius:22px;border:2px solid rgba(255,248,232,.35);background:rgba(10,6,4,.42);color:var(--cream);font:900 24px var(--sans);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pb.pj{width:104px;font-size:18px;border-color:rgba(245,197,66,.6);color:var(--gold)}
.pb.down{background:rgba(245,197,66,.35);transform:scale(.96)}
.pause{position:fixed;z-index:5;right:calc(12px + var(--sr));top:calc(54px + var(--st));display:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:var(--cream);font:700 12px var(--sans);cursor:pointer}
.playing .pause{display:block}
.sheet{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:calc(56px + var(--st)) calc(14px + var(--sr)) calc(16px + var(--sb)) calc(14px + var(--sl));background:rgba(12,5,2,.55);overflow-y:auto;touch-action:pan-y;-webkit-user-select:text;user-select:text}
.sheet[hidden]{display:none}
.sh{width:min(420px,100%);margin:auto;text-align:center;background:rgba(14,8,5,.86);border:1px solid rgba(245,197,66,.4);border-radius:26px;padding:22px 20px 18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.logo{font-size:44px;line-height:1;filter:grayscale(1) brightness(.2) drop-shadow(0 0 8px rgba(245,197,66,.8))}
h1{margin:6px 0 4px;font:900 32px var(--sans);color:var(--gold);letter-spacing:.04em}
.tag{margin:0 0 12px;color:var(--cream2);font-weight:600}
.challenge{margin:0 0 12px;padding:9px 12px;border-radius:14px;background:rgba(94,224,255,.12);border:1px solid rgba(94,224,255,.4);color:var(--si);font-weight:700;font-size:14px}
.big{appearance:none;border:0;cursor:pointer;width:100%;padding:15px 18px;border-radius:999px;background:linear-gradient(180deg,#ffd95e,#F5C542);color:#1a0f0a;font:900 19px var(--sans);box-shadow:0 6px 0 #a87d16,0 10px 24px rgba(245,197,66,.35);margin:4px 0 12px}
.big:active{transform:translateY(3px);box-shadow:0 3px 0 #a87d16}
.big.sm{width:auto;flex:1;font-size:16px;padding:12px 16px;margin:0}
.row{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:6px 0}
.mini{appearance:none;cursor:pointer;border:1px solid rgba(245,197,66,.45);background:rgba(255,255,255,.04);color:var(--gold);font:700 13px var(--sans);padding:9px 13px;border-radius:999px}
.mini.hot{background:var(--gold);color:#1a0f0a}
.mini:disabled{opacity:.5;cursor:default}
.tog{appearance:none;cursor:pointer;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:var(--muted);font:700 12.5px var(--sans);padding:8px 12px;border-radius:999px}
.tog.on{border-color:rgba(110,231,168,.6);color:var(--good);background:rgba(110,231,168,.1)}
.seed{font-size:13px;color:var(--muted)}.seed code{font:700 14px var(--mono);color:var(--gold)}
.note{font-size:12px;color:var(--muted);margin:6px 0}
.note.good{color:var(--good)}.note.bad{color:var(--bad)}
.how{font-size:12px;color:var(--cream2);opacity:.8;margin:8px 0}
.si{font-size:11.5px;color:var(--si);opacity:.85;margin:10px 0 0}
.ot{font:700 22px var(--serif);color:var(--gold)}
.score{font:900 64px/1.05 var(--sans);color:var(--cream);text-shadow:0 0 30px rgba(245,197,66,.4)}
.sub{font-size:13px;color:var(--muted);margin-bottom:12px}
.sub b{color:var(--good)}
.share{margin:6px 0 10px}
.xbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 18px;border-radius:999px;background:#000;color:#fff;text-decoration:none;font:900 17px var(--sans);border:1.5px solid rgba(255,255,255,.85);box-shadow:0 0 0 4px rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.4)}
.xbtn svg{width:20px;height:20px;fill:#fff;flex:none}
.xbtn:active{transform:scale(.98)}
.submit{display:flex;gap:8px;margin:12px 0 0}
.submit input{flex:1;min-width:0;padding:10px 12px;border-radius:999px;border:1px solid rgba(245,197,66,.4);background:rgba(255,255,255,.06);color:var(--cream);font:600 14px var(--sans)}
.submit[hidden]{display:none}
.lbbox{margin-top:10px;text-align:left}
.lbt{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.lbt button{appearance:none;cursor:pointer;border:0;background:transparent;color:var(--muted);font:700 12.5px var(--sans);padding:5px 10px;border-radius:999px}
.lbt button.on{background:rgba(245,197,66,.16);color:var(--gold)}
.lbl{list-style:none;margin:0;padding:0;font-size:13px;max-height:210px;overflow:auto}
.lbl li{display:grid;grid-template-columns:26px 1fr auto auto;gap:8px;align-items:center;padding:5px 6px;border-bottom:1px dashed rgba(255,255,255,.07)}
.lbl li.me{background:rgba(245,197,66,.12);border-radius:8px}
.lbl .rk{font:700 12px var(--mono);color:var(--gold)}
.lbl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbl .sd{font:11px var(--mono);color:var(--muted)}
.lbl .mm{font-weight:900;color:var(--cream)}
.lbl .empty{display:block;color:var(--muted);text-align:center;border:0}
.lbn{font-size:11px;color:var(--muted);text-align:center;margin:6px 0 0}
.toast{position:fixed;left:50%;bottom:calc(30px + var(--sb));transform:translateX(-50%) translateY(20px);z-index:9;background:rgba(0,0,0,.85);color:var(--cream);padding:9px 16px;border-radius:999px;font:700 13px var(--sans);opacity:0;transition:.25s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}
@media (max-width:380px){.ptitle{display:none}.score{font-size:54px}}
/* back / sound / pause menu */
.pright{display:flex;align-items:center;gap:6px}
.snd{font-size:15px;line-height:1;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);color:var(--cream);border-radius:999px;padding:6px 9px;cursor:pointer}
.pback{font-size:13.5px;padding:9px 13px}
.homebtn{display:block;margin:14px auto 0;text-align:center;font:800 15px var(--sans);color:var(--cream);text-decoration:none;background:rgba(255,248,232,.08);border:1px solid rgba(255,248,232,.28);border-radius:999px;padding:12px 18px;max-width:320px}
.homebtn:active{background:rgba(255,248,232,.18)}
.vol{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--cream2)}
.vol input{width:130px;accent-color:#F5C542}
#pausesheet .sh{max-width:360px}

.showav{flex-basis:100%;display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,248,232,.75);margin-top:4px}.showav a{color:#F5C542}
.lbl .nm{display:inline-flex;align-items:center;gap:6px}.lbl .avmini{flex:none;border-radius:6px}
.submit{flex-wrap:wrap}
.showav input{flex:none!important;width:16px;height:16px;padding:0!important;margin:0}.showav{justify-content:flex-start}
.ptitle{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;min-width:0}@media (max-width:400px){.ptitle{font-size:12px;letter-spacing:.04em}}