:root{--bg: #120b08;--bg2: #1a110c;--panel: #1f1510;--panel2: #2a1c14;--line: #3b2a1f;--text: #f3ead8;--text2: #c9b9a2;--text3: #8e7d68;--gold: #ffb84d;--gold2: #ffd98a;--red: #b8322a;--font-sans: "Be Vietnam Pro", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{min-height:100vh;background:radial-gradient(1200px 600px at 50% -200px,#3a1d10 0%,transparent 70%),var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.6}a{color:var(--gold2);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;color:inherit}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 max(16px,env(safe-area-inset-left));background:#120b08db;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--text)}.brand:hover{text-decoration:none}.brand img{border-radius:9px}.langSel select{height:38px;padding:0 30px 0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9b9a2' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--text);font:600 14px var(--font-sans);appearance:none;cursor:pointer}.wrap{max-width:1180px;margin:0 auto;padding:22px 16px 40px}h1{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.01em;line-height:1.2}.lead{margin-top:6px;color:var(--text2);font-size:16px}.player{container-type:inline-size;margin-top:18px;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:var(--panel)}.stageWrap{position:relative;width:100%;height:min(62.5cqw,76vh,calc(100svh - 124px));min-height:260px}.stage{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,#2b170d,#0d0806 70%)}.stage:focus{outline:none}.cover{position:absolute;inset:0;z-index:10;display:grid;place-items:center;overflow:hidden}.cover[hidden]{display:none}.coverImg{position:absolute;inset:-24px;background:url(/thumb.webp) center / cover no-repeat,#1a0f0a;filter:blur(10px) brightness(.5) saturate(1.15);transform:scale(1.05)}.coverBody{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;text-align:center}.coverLogo{border-radius:16px;box-shadow:0 10px 40px #ffb84d40}.coverName{font-size:clamp(22px,4cqw,34px);font-weight:800;text-shadow:0 2px 20px rgba(0,0,0,.6)}.playBtn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border:0;border-radius:999px;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a1200;font-size:17px;font-weight:800;box-shadow:0 10px 30px #ffb84d59;cursor:pointer;transition:transform .15s}.playBtn:hover{transform:translateY(-1px)}.playBtn:disabled{opacity:.75;cursor:progress}.coverMsg{color:#ffd2c8;font-size:14px}.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 10px 6px 16px;border-top:1px solid var(--line)}.best{display:inline-flex;align-items:center;gap:7px;color:var(--text2);font-size:14px}.best svg{color:var(--gold)}.best b{color:var(--text);font-family:var(--font-mono);font-size:15px}.tools{display:inline-flex;gap:6px}.tool{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer}.tool:hover{border-color:#5a4330}.tool[data-off]{color:var(--text3)}.tool[hidden]{display:none}.player[data-full]{display:flex;flex-direction:column;width:100vw;height:100vh;margin:0;border:0;border-radius:0;background:#0d0806}.player[data-fake]{position:fixed;inset:0;z-index:200;height:100dvh}.player[data-full] .stageWrap{flex:1;height:auto;min-height:0}.card{margin-top:18px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}.card h2{font-size:19px;font-weight:800;line-height:1.35;color:var(--gold2)}.card p{margin-top:10px;color:var(--text2);font-size:15.5px}.controls ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 18px;margin-top:12px;list-style:none}.controls li{display:flex;align-items:flex-start;gap:10px;color:var(--text2);font-size:14.5px}.controls kbd{flex:none;padding:2px 9px;border-radius:8px;border:1px solid #4a3626;background:var(--bg2);color:var(--text);font:700 12.5px/1.7 var(--font-mono);white-space:nowrap}.foot{max-width:1180px;margin:0 auto;padding:22px 16px 40px;border-top:1px solid var(--line);color:var(--text3);font-size:13.5px}.langs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px}.langs a{color:var(--text2)}.langs a[aria-current]{color:var(--gold2);font-weight:700}@media(max-width:720px){.wrap{padding-top:16px}.player{margin-left:-16px;margin-right:-16px;border-radius:0;border-left:0;border-right:0}.stageWrap{height:min(62.5cqw,72vh,calc(100svh - 124px))}.controls ul{grid-template-columns:1fr}.card{padding:16px}}body.game-page{overflow:hidden;background:#21170f}.game-page .top,.game-page .wrap>h1,.game-page .lead,.game-page .card,.game-page .foot{display:none}.game-page .wrap{max-width:none;margin:0;padding:0}.game-page .player{position:fixed;inset:0;width:100%;height:100dvh;margin:0;border:0;border-radius:0}.game-page .stageWrap{width:100%;height:100%;min-height:0}.game-page .bar,.game-page .bar .best,.game-page #restart{display:none}.game-page .tool{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#efdbab}.game-page .tools{gap:2px}
