:root{--gold:#f2c14e;--gold-hi:#ffe7a3;--gold-lo:#9a6a18;--ink:#fff6dc;--muted:#ffeec88c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none;background:#050403;margin:0;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,Microsoft YaHei,sans-serif;overflow:hidden}#app,#app canvas{display:block;position:fixed;inset:0}#vignette{pointer-events:none;opacity:0;background:radial-gradient(#0000 45%,#ff280a73 100%);animation:.6s ease-in-out infinite alternate throb;position:fixed;inset:0}@keyframes throb{0%{filter:brightness(.7)}to{filter:brightness(1.2)}}#hud{pointer-events:none;padding:max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));position:fixed;inset:0}.panel{top:max(14px, env(safe-area-inset-top));flex-direction:column;gap:8px;display:flex;position:absolute}.panel.left{left:16px}.panel.right{align-items:flex-end;right:16px}.stat span,.next-wrap span,#rise span{letter-spacing:.15em;color:var(--muted);font-size:11px;display:block}.stat b{font-variant-numeric:tabular-nums;background:linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));color:#0000;text-shadow:0 0 18px #f2c14e40;-webkit-background-clip:text;background-clip:text;font-size:30px;font-weight:800}.stat.small b{font-size:18px}.panel.right .stat,.next-wrap{text-align:right}#next{background:#ffdc960d;border:1px solid #ffdc9626;border-radius:10px;width:72px;height:72px}#rise{left:50%;bottom:max(18px, env(safe-area-inset-bottom));text-align:center;width:min(320px,70vw);position:absolute;transform:translate(-50%)}#rise .bar{background:#ffdc961f;border-radius:3px;height:6px;margin-top:6px;overflow:hidden}#rise-fill{background:linear-gradient(90deg, var(--gold-lo), var(--gold-hi));transform-origin:0;height:100%;transform:scaleX(0)}#rise-fill.urgent{background:linear-gradient(90deg,#c2410c,#ff7a45);animation:.25s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.5}}#mute{right:16px;bottom:max(14px, env(safe-area-inset-bottom));pointer-events:auto;width:36px;height:36px;color:var(--gold);cursor:pointer;background:#0000004d;border:1px solid #ffdc9640;border-radius:50%;font-size:16px;position:absolute}#mute.off{opacity:.4;text-decoration:line-through}#settings-btn{right:60px;bottom:max(14px, env(safe-area-inset-bottom));pointer-events:auto;width:36px;height:36px;color:var(--gold);cursor:pointer;background:#0000004d;border:1px solid #ffdc9640;border-radius:50%;font-size:17px;position:absolute}#settings{left:50%;bottom:calc(max(14px, env(safe-area-inset-bottom)) + 48px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#140e06eb;border:1px solid #ffdc9633;border-radius:16px;flex-direction:column;gap:14px;width:min(360px,100vw - 32px);padding:18px 18px 16px;display:none;position:fixed;transform:translate(-50%);box-shadow:0 12px 40px #0009}#settings.show{display:flex}#settings h2{letter-spacing:.2em;color:var(--gold-hi);margin:0;font-size:16px}#settings label{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}#settings label span{justify-content:space-between;display:flex}#settings label b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}#settings input[type=range]{width:100%;accent-color:var(--gold)}#settings .row{justify-content:flex-end;gap:10px;display:flex}#settings button{color:var(--ink);cursor:pointer;background:0 0;border:1px solid #ffdc964d;border-radius:999px;padding:8px 16px;font-size:14px}#settings button.primary{background:var(--gold);color:#2a1a00;border:none;font-weight:700}#popups{pointer-events:none;flex-direction:column;align-items:center;display:flex;position:fixed;top:36%;left:0;right:0}.popup{letter-spacing:.05em;white-space:nowrap;background:linear-gradient(180deg, #fff, var(--gold-hi) 40%, var(--gold) 70%, var(--gold-lo));color:#0000;filter:drop-shadow(0 0 12px #ffbe3c99);-webkit-background-clip:text;background-clip:text;font-size:34px;font-weight:900;animation:1s cubic-bezier(.2,1.4,.4,1) forwards pop;position:absolute}.popup.chain{font-size:48px}.popup.points{margin-top:52px;font-size:22px}.popup.level{margin-top:-60px;font-size:28px}@keyframes pop{0%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}75%{opacity:1;transform:translateY(-10px)}to{opacity:0;transform:translateY(-40px)}}#overlay{text-align:center;background:radial-gradient(#0504038c,#050403d9);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;display:none;position:fixed;inset:0}#overlay.show{display:flex}#overlay h1{letter-spacing:.12em;background:linear-gradient(180deg, #fff, var(--gold-hi) 35%, var(--gold) 65%, var(--gold-lo));color:#0000;filter:drop-shadow(0 0 20px #f2c14e59);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(34px,9vw,56px);font-weight:900}#overlay .sub{color:var(--muted);margin:0}#overlay .big{color:var(--gold-hi);margin:4px 0 0;font-size:56px;font-weight:900}.keys{color:var(--muted);grid-template-columns:repeat(2,auto);gap:6px 22px;margin:18px 0 6px;font-size:14px;display:grid}.keys b{color:var(--ink);margin-right:6px}.keys.touch{display:none}@media (hover:none) and (pointer:coarse){.keys{display:none}.keys.touch{display:grid}}#start-btn{letter-spacing:.2em;color:#2a1a00;background:linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #c98c22);cursor:pointer;border:none;border-radius:999px;margin-top:16px;padding:14px 44px;font-size:18px;font-weight:800;box-shadow:0 6px 30px #f2c14e59,inset 0 1px #fff9}#start-btn:active{transform:scale(.97)}@media (width<=600px){.stat b{font-size:24px}.stat.small b{font-size:15px}#next{width:56px;height:56px}.popup{font-size:26px}.popup.chain{font-size:38px}}