:root{--green:#35ff88;--red:#ff4d4d;--gold:#ffd24a;--cyan:#9fd8d8;--ink:#06110b;--font:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font);color:#eef4f0;background:#05070c;overflow:hidden}#game-canvas{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui button{pointer-events:auto}.hidden{display:none!important}#fx-vignette{opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 18vmax 6vmax #ff2828d9}#fx-flash{opacity:0;position:absolute;inset:0}#fx-fade{opacity:0;background:#000;position:absolute;inset:0}.screen{text-align:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:radial-gradient(120% 90% at 50% 8%,#182c268c,#05080c00 55%),#05080cd1;flex-direction:column;justify-content:center;align-items:center;gap:22px;animation:.4s both screenIn;display:flex;position:absolute;inset:0}@keyframes screenIn{0%{opacity:0}to{opacity:1}}.screen-big{letter-spacing:.12em;text-indent:.12em;font-size:clamp(44px,8vw,88px);font-weight:900}button{font-family:var(--font);letter-spacing:.18em;text-indent:.18em;cursor:pointer;border:none;border-radius:10px;padding:14px 44px;font-size:clamp(18px,2.4vw,24px);font-weight:800;transition:transform .12s,box-shadow .12s,background .12s}button:active{transform:translateY(1px)scale(.98)}#title-zh{gap:clamp(14px,3.5vw,44px);font-size:clamp(76px,15vw,150px);font-weight:900;line-height:1.1;display:flex}.title-char{text-shadow:0 0 34px #35ff8847,0 4px #00000073;animation:.55s cubic-bezier(.2,1.4,.4,1) both charDrop;animation-delay:calc(var(--i) * .14s);display:inline-block;position:relative}.title-char .tone{text-shadow:none;font-size:.3em;font-weight:400;position:absolute;top:-.34em;left:50%;transform:translate(-50%)}.title-char .tone-1{color:var(--cyan)}.title-char .tone-2{color:var(--gold)}.title-char .tone-3{color:var(--red)}@keyframes charDrop{0%{opacity:0;transform:translateY(-.4em)scale(1.15)}to{opacity:1;transform:none}}#btn-start{background:var(--green);color:var(--ink);font-size:clamp(22px,3vw,30px);box-shadow:0 0 0 2px #35ff8859,0 6px 26px #35ff8859}#btn-start:hover{transform:translateY(-2px)scale(1.03);box-shadow:0 0 0 2px #35ff88a6,0 10px 36px #35ff888c}#settle-toast{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#050c09c7;border:1px solid #35ff8866;border-radius:14px;flex-direction:column;gap:10px;max-width:min(340px,44vw);padding:16px 18px;display:flex;position:absolute;bottom:22px;left:22px;box-shadow:0 10px 34px #0009,0 0 26px #35ff881f}#settle-toast.slide-in{animation:.45s cubic-bezier(.2,1.4,.4,1) both settleIn}#settle-toast.slide-out{animation:.45s ease-in both settleOut}@keyframes settleIn{0%{opacity:0;transform:translate(-30px,26px)scale(.92)}to{opacity:1;transform:none}}@keyframes settleOut{0%{opacity:1}to{opacity:0;transform:translate(-24px,20px)}}#settle-title{color:var(--green);letter-spacing:.1em;text-shadow:0 0 24px #35ff8866;font-size:clamp(22px,3vw,30px);font-weight:900}#settle-stats{flex-direction:column;gap:6px;display:flex}.stat-row{background:#ffffff0d;border:1px solid #9fd8d82e;border-radius:8px;justify-content:space-between;align-items:baseline;gap:20px;padding:7px 12px;font-size:clamp(13px,1.7vw,16px);display:flex}.stat-label{color:#9fb3ad;letter-spacing:.1em}.stat-value{color:#fff;font-variant-numeric:tabular-nums;font-weight:800}.stat-row.stat-total{background:#35ff8817;border-color:#35ff888c;box-shadow:0 0 22px #35ff8826}.stat-row.stat-total .stat-value{color:var(--green);font-size:1.2em}#gameover-title{color:var(--red);text-shadow:0 0 36px #ff4d4d73}#gameover-sub{color:var(--gold);letter-spacing:.12em;font-size:clamp(16px,2.2vw,22px)}#gameover-score{color:#c9d4cf;letter-spacing:.1em;font-size:clamp(15px,2vw,20px)}#btn-retry{background:var(--red);color:#2b0606;box-shadow:0 0 0 2px #ff4d4d59,0 6px 26px #ff4d4d59}#btn-retry:hover{transform:translateY(-2px)scale(1.03);box-shadow:0 0 0 2px #ff4d4da6,0 10px 36px #ff4d4d8c}#hud{pointer-events:none;position:absolute;inset:0}#hud-score{color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 2px 14px #000000b3,0 0 22px #ffd24a40;font-size:clamp(28px,3.6vw,42px);font-weight:900;position:absolute;top:16px;left:50%;transform:translate(-50%)}#hud-left{align-items:center;gap:14px;display:flex;position:absolute;top:18px;left:22px}#hud-phase-char{color:var(--gold);text-shadow:0 0 24px #ffd24a73,0 3px #00000080;font-size:clamp(44px,6vw,64px);font-weight:900;line-height:1;transition:color .5s}#hud-phase-char.shit{color:#ff6b4a;text-shadow:0 0 24px #ff6b4a8c,0 3px #00000080}#hud-phase-char.critical{animation:.5s step-end infinite charBlink}@keyframes charBlink{50%{opacity:.4}}#hud-bar-emoji{filter:drop-shadow(0 2px 8px #0009);font-size:clamp(26px,3.4vw,36px)}#hud-bar{background:#080e0cb8;border-radius:11px;width:min(300px,32vw);height:22px;position:relative;box-shadow:inset 0 0 0 1px #ffffff29,0 4px 18px #0000008c}#hud-bar-fill{background:linear-gradient(90deg, #c9941f, var(--gold));border-radius:11px;width:0%;height:100%;transition:width .1s linear;box-shadow:0 0 14px #ffd24a73}#hud-bar-fill.urge{background:linear-gradient(90deg, var(--green), #d8e04c 55%, #ff5a3c);box-shadow:0 0 14px #35ff8866}#hud-bar.bump{animation:.25s bump}@keyframes bump{50%{transform:scale(1.06)}}#hud-bar.warn #hud-bar-fill.urge{box-shadow:0 0 20px #ff823cbf}#hud-bar.critical{animation:.5s ease-in-out infinite barPulse}#hud-bar.critical #hud-bar-fill{background:linear-gradient(90deg,#ff8a3c,#ff3b30);box-shadow:0 0 28px #ff3b30e6}@keyframes barPulse{0%,to{transform:scale(1);box-shadow:inset 0 0 0 1px #ff5a4699,0 0 14px #ff3b3059}50%{transform:scale(1.03);box-shadow:inset 0 0 0 1px #ff5a46e6,0 0 30px #ff3b30b3}}#hud-bar.frozen{box-shadow:inset 0 0 0 1px #9fd8d8bf,0 0 24px #9fd8d873}#hud-bar.frozen:after{content:"";pointer-events:none;background:repeating-linear-gradient(115deg,#9fd8d866 0 5px,#9fd8d814 5px 12px);border-radius:11px;animation:1.1s linear infinite iceSlide;position:absolute;inset:0}@keyframes iceSlide{to{background-position:26px 0}}#hud-room{color:var(--green);flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:14px;right:24px}#hud-room-char{text-shadow:0 0 30px #35ff88cc,0 0 60px #35ff8859,0 4px #00000080;font-size:clamp(64px,8.5vw,96px);font-weight:900;line-height:1}#hud-room-dist{letter-spacing:.06em;font-variant-numeric:tabular-nums;text-shadow:0 0 14px #35ff88cc;background:#061a10b8;border:3px solid #35ff88d9;border-radius:10px;padding:4px 18px;font-size:clamp(24px,3.2vw,34px);font-weight:900;box-shadow:0 0 28px #35ff8873,inset 0 0 18px #35ff882e}#hud-room.near #hud-room-char,#hud-room.near #hud-room-dist{animation:.6s ease-in-out infinite roomPulse}@keyframes roomPulse{0%,to{transform:scale(1)}50%{text-shadow:0 0 22px #35ff88;transform:scale(1.08)}}#qte-hint{display:none}#qte-overlay{pointer-events:none;flex-direction:column;justify-content:flex-end;align-items:center;gap:18px;padding-bottom:12vh;display:flex;position:absolute;inset:0}#qte-title{letter-spacing:.45em;text-indent:.45em;color:var(--red);text-shadow:0 0 26px #ff4d4d8c;font-size:clamp(26px,4vw,40px);font-weight:900;animation:1s ease-in-out infinite qteBreath}@keyframes qteBreath{50%{opacity:.65}}#qte-seq{--jitter:0;gap:14px;display:flex}.qte-key{color:#fff;background:#ffffff14;border:2px solid #ffffff47;border-radius:12px;justify-content:center;align-items:center;width:clamp(56px,8vw,72px);height:clamp(56px,8vw,72px);font-size:clamp(34px,5vw,46px);animation:.1s infinite jitter;display:flex;box-shadow:0 4px 16px #00000073}.qte-key.current{background:#ff4d4deb;border-color:#ffc4bd;box-shadow:0 0 26px #ff4d4da6}.qte-key.done{opacity:.32;color:var(--green);border-color:#35ff8899;animation:none}@keyframes jitter{0%{transform:translate(0)}25%{transform:translate(calc(var(--jitter) * 1px), 0)}75%{transform:translate(calc(var(--jitter) * -1px), calc(var(--jitter) * .5px))}to{transform:translate(0, calc(var(--jitter) * -.5px))}}#qte-timer{background:#ffffff24;border-radius:6px;width:min(440px,62vw);height:12px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1f}#qte-timer-fill{background:linear-gradient(90deg,#ff8a3c,#ff3b30);border-radius:6px;height:100%;box-shadow:0 0 14px #ff4d4d99}#qte-hint{color:#ffb3ab;letter-spacing:.25em;text-indent:.25em;font-size:clamp(14px,1.9vw,18px)}
