:root{
  --bg:#d6dbdf;
  --ink:#30343a;
  --muted:#7d858e;
  --green:#21c58e;
  --green-dark:#14a977;
  --line:rgba(62,69,76,.11);
  --danger:#b45454;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#bec5ca;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink)}
body{display:grid;place-items:center}
button,input,select{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(33,197,142,.35);outline-offset:3px}
.game-shell{position:relative;width:min(100vw,60vh);height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;background:var(--bg);touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 54px rgba(31,38,44,.22)}
.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.stage canvas{display:block;width:100%!important;height:100%!important;touch-action:none}
.score{position:absolute;z-index:5;top:max(28px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);min-width:90px;text-align:center;font-size:clamp(34px,7vh,54px);line-height:1;font-weight:500;letter-spacing:-.04em;color:#373c42;text-shadow:0 1px rgba(255,255,255,.28);pointer-events:none}
.bonus{position:absolute;z-index:6;left:50%;top:31%;width:92%;transform:translate(-50%,-50%);opacity:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px;font-weight:600;color:#5d646c;pointer-events:none}
.bonus.pop{animation:bonusPop .82s ease-out}
@keyframes bonusPop{0%{opacity:0;transform:translate(-50%,0) scale(.8)}20%{opacity:1;transform:translate(-50%,-20px) scale(1.05)}70%{opacity:1;transform:translate(-50%,-38px) scale(1)}100%{opacity:0;transform:translate(-50%,-58px) scale(.98)}}
.overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:26px;overflow:auto;background:rgba(214,219,223,.82);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.start-card,.over-card{width:min(100%,380px);text-align:center}
.scroll-card{max-height:calc(100% - 8px);overflow:auto;overscroll-behavior:contain}
.brand{margin:0 0 2px;color:#848b92;font-size:12px;letter-spacing:.24em;font-weight:600;text-indent:.24em}
.start-card h1{margin:0;color:#343940;font-size:clamp(52px,10vh,78px);font-weight:800;line-height:.98;letter-spacing:.04em}
.sub{margin:20px 0 28px;color:#68717a;font-size:14px;letter-spacing:.08em}
.main-btn,.ghost-btn,.restart-btn{border:0;cursor:pointer;min-height:56px;border-radius:999px;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.main-btn{width:220px;background:#fff;color:#30363c;box-shadow:0 8px 24px rgba(66,76,84,.13),0 1px 1px rgba(255,255,255,.6) inset;font-size:17px;font-weight:600}
.ghost-btn{display:block;width:220px;margin:12px auto 0;background:rgba(255,255,255,.36);color:#697078;border:1px solid rgba(255,255,255,.54);font-size:14px}
.main-btn:active,.ghost-btn:active,.restart-btn:active{transform:scale(.985)}
button:disabled{cursor:default;opacity:.48}
.help{margin:20px 0 0;color:#8c939a;font-size:11px;line-height:1.55}
.over-card{padding:28px 24px 23px;border-radius:20px;background:rgba(255,255,255,.93);box-shadow:0 18px 46px rgba(61,70,78,.18)}
.small-title{margin:0;color:#858c93;font-size:13px}
.final-score{margin:4px 0 13px;font-size:72px;line-height:1;font-weight:500;color:#33383e}
.best-row{display:flex;justify-content:center;gap:10px;margin-bottom:20px;color:#838a91;font-size:13px}
.best-row strong{color:#4d545b;font-weight:600}
.restart-btn{margin-top:18px}
.restart-btn span{display:inline-block;margin-right:8px;color:var(--green);font-size:25px;vertical-align:-2px}
.version{margin:16px 0 0;color:#a0a6ab;font-size:9px;letter-spacing:.15em}
.round-btn{border:0;border-radius:50%;background:rgba(255,255,255,.56);color:#626970;box-shadow:0 4px 14px rgba(59,68,75,.09);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;text-align:center;transition:transform .12s ease,opacity .12s ease,background .12s ease}
.round-btn:active{transform:scale(.94)}
.sound-btn{position:absolute;z-index:8;top:max(24px,env(safe-area-inset-top));right:18px;width:42px;height:42px;font-size:20px;line-height:42px}
.sound-btn[aria-pressed="true"]{opacity:.48;background:rgba(255,255,255,.36)}
.close-btn{position:absolute;top:14px;right:14px;width:36px;height:36px;font-size:22px;line-height:34px}
.loading{position:absolute;z-index:30;inset:0;display:grid;place-items:center;background:var(--bg);color:#70777e;font-size:13px;letter-spacing:.08em;transition:opacity .2s ease,visibility .2s ease}
.loading.hide{opacity:0;visibility:hidden;pointer-events:none}
.loading.error{padding:30px;text-align:center;line-height:1.8;color:#8c5252}
.start-mark{display:block;width:58px;height:58px;margin:0 auto 12px;border-radius:17px;box-shadow:0 8px 25px rgba(58,68,75,.12)}
.utility-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,220px);margin:12px auto 0}
.utility-row.over-tools{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,220px)}
.ghost-btn.compact{width:auto;min-width:0;margin:0;min-height:43px;padding:0 10px;font-size:12px}
.run-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 14px}
.run-stats>div{padding:10px 5px;border:1px solid var(--line);border-radius:12px;background:rgba(236,239,240,.66);text-align:center}
.run-stats span{display:block;color:#8b9298;font-size:9px;white-space:nowrap}
.run-stats strong{display:block;margin-top:3px;color:#454c53;font-size:17px;font-variant-numeric:tabular-nums}
.record-note{margin:3px 4px 0;padding:10px 12px;border:1px solid rgba(70,78,85,.08);border-radius:12px;background:rgba(236,239,240,.55);color:#8a9197;font-size:10px;line-height:1.55}
.record-note.new-best{border-color:rgba(33,197,142,.22);background:rgba(33,197,142,.07);color:#347d67;font-weight:650}
.utility-overlay{z-index:28;background:rgba(214,219,223,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.utility-card{position:relative;width:min(100%,360px);padding:28px 24px 24px;border-radius:20px;background:rgba(255,255,255,.95);box-shadow:0 18px 46px rgba(61,70,78,.17);text-align:center}
.utility-card h2{margin:5px 0 13px;color:#3a4046;font-size:30px}
.utility-copy{margin:0 auto 18px;color:#747c83;font-size:13px;line-height:1.65}
.utility-note{margin:13px 0 0;color:#92999f;font-size:10px;line-height:1.5}
.utility-note.ok{color:#3f846d}.utility-note.warn{color:#98704b}
.share-label{display:block;margin:0 0 7px 2px;color:#858c93;font-size:10px;text-align:left}
.share-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.share-row input{min-width:0;height:44px;border:1px solid rgba(70,78,85,.14);border-radius:11px;padding:0 11px;background:#f5f6f6;color:#50575e;font-size:13px;user-select:text;-webkit-user-select:text}
.share-row button{height:44px;border:0;border-radius:11px;padding:0 15px;background:var(--green);color:#fff;font-weight:600;cursor:pointer}
.settings-card{text-align:left}
.settings-card>.brand,.settings-card>h2,.settings-card>.utility-copy,.settings-card>.utility-note{text-align:center}
.settings-list{display:grid;gap:8px;margin-top:4px}
.setting-row,.setting-select-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;min-height:62px;padding:11px 12px;border:1px solid rgba(70,78,85,.09);border-radius:13px;background:#f1f3f3;cursor:pointer}
.setting-row>span:first-child,.setting-select-row>span:first-child{min-width:0}
.setting-row strong,.setting-select-row strong{display:block;color:#454c52;font-size:13px;font-weight:650}
.setting-row small,.setting-select-row small{display:block;margin-top:3px;color:#8b9298;font-size:9px;line-height:1.4}
.switch-input{position:absolute;opacity:0;pointer-events:none}
.switch-ui{position:relative;width:44px;height:26px;border-radius:999px;background:#c9ced1;box-shadow:inset 0 0 0 1px rgba(60,68,74,.06);transition:background .18s ease}
.switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(54,61,67,.20);transition:transform .18s ease}
.switch-input:checked+.switch-ui{background:var(--green)}
.switch-input:checked+.switch-ui::after{transform:translateX(18px)}
.setting-row:focus-within{outline:3px solid rgba(33,197,142,.26);outline-offset:2px}
.setting-select-row select{height:38px;min-width:82px;border:1px solid rgba(70,78,85,.12);border-radius:10px;padding:0 27px 0 10px;background:#fff;color:#4c545a;font-size:12px}
.start-card{padding-bottom:max(8px,env(safe-area-inset-bottom))}
.milestone{position:absolute;z-index:7;left:50%;top:18%;width:min(88%,420px);transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;text-align:center;color:#58616a;font-size:12px;font-weight:750;letter-spacing:.14em;text-shadow:0 1px rgba(255,255,255,.52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.milestone.show{animation:milestonePop 1.55s cubic-bezier(.2,.72,.22,1)}
.milestone[data-tone="combo"]{color:#4d7f83}.milestone[data-tone="gold"]{color:#9a7428}.milestone[data-tone="phase"]{color:#66717a}
@keyframes milestonePop{0%{opacity:0;transform:translate(-50%,-34%) scale(.88);letter-spacing:.22em}16%{opacity:1;transform:translate(-50%,-50%) scale(1.03);letter-spacing:.14em}68%{opacity:1;transform:translate(-50%,-58%) scale(1)}100%{opacity:0;transform:translate(-50%,-82%) scale(.98)}}
@media (max-width:700px){body{background:var(--bg)}.game-shell{width:100vw;box-shadow:none}.sound-btn{top:max(20px,env(safe-area-inset-top));right:14px;width:40px;height:40px;line-height:40px}}
@media (max-width:390px){.overlay{padding:14px}.over-card{padding-left:16px;padding-right:16px}.share-row{grid-template-columns:1fr}.share-row button{width:100%}}
@media (max-width:350px){.start-card h1{font-size:50px}.sub{margin:15px 0 22px}.utility-row{gap:6px}.ghost-btn.compact{font-size:11px;padding:0 6px}.setting-row,.setting-select-row{padding:10px;gap:9px}.milestone{font-size:10px;top:19%}}
@media (orientation:landscape) and (max-height:600px){.game-shell{width:min(100vw,72vh)}.score{top:max(14px,env(safe-area-inset-top));font-size:34px}}
@media (orientation:landscape) and (max-height:520px){.start-mark{width:42px;height:42px;margin-bottom:7px}.start-card h1{font-size:46px}.sub{margin:10px 0 14px}.help{margin-top:10px}.utility-row{margin-top:8px}.main-btn{min-height:48px}.ghost-btn.compact{min-height:38px}.over-card{padding-top:18px;padding-bottom:18px}.final-score{font-size:56px}}
@media (prefers-reduced-motion:reduce){.overlay,.main-btn,.ghost-btn,.round-btn,.switch-ui,.switch-ui::after{transition:none}.bonus.pop,.milestone.show{animation-duration:.01ms}}