@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');

:root{color-scheme:dark;--bg:#171126;--card:#211a34;--muted:#a39bb6;--cream:#fff5df;--pink:#ff8f9e;--gold:#ffd47b}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--cream);font-family:'Noto Sans TC',system-ui,sans-serif;background:radial-gradient(ellipse at 50% -15%,#463055 0,transparent 51%),radial-gradient(ellipse at 4% 75%,#282147 0,transparent 39%),var(--bg);display:flex;justify-content:center}
.shell{width:min(100% - 36px,960px);padding:27px 0 20px;display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.brand{color:var(--cream);font-weight:800;letter-spacing:.04em;text-decoration:none;font-size:17px}.brand-mark{color:var(--gold);margin-right:7px}.edition,.eyebrow,.stat-label{font-family:'DM Mono',monospace;letter-spacing:.13em}.edition{font-size:10px;color:#9a91ab}
.game-card{background:linear-gradient(145deg,rgba(43,34,62,.97),rgba(31,25,48,.98));border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:29px 34px 19px;box-shadow:0 24px 80px #09071180}
.intro{text-align:center}.eyebrow{color:var(--gold);font-size:10px;margin:0 0 6px}.intro h1{font-size:clamp(29px,5vw,41px);letter-spacing:.03em;margin:0;line-height:1.35}.intro h1 span{font-size:.78em;margin-left:9px}.subtitle{color:#b7aec5;font-size:13px;margin:7px 0 21px}
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;padding:12px 5px;margin:0 auto 14px;width:min(100%,550px);border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#171326a6}.stat{display:flex;flex-direction:column;align-items:center;gap:2px}.stat+.stat{border-left:1px solid rgba(255,255,255,.09)}.stat-label{font-size:9px;color:#968ba8}.stat strong{font-family:'DM Mono',monospace;font-size:20px;font-weight:500;color:#fff1d7}.stat strong small{font-family:'Noto Sans TC',sans-serif;font-size:10px;color:#a39bb6;margin-left:3px}.stat .hearts{font-family:system-ui,sans-serif;letter-spacing:3px;font-size:15px;color:var(--pink);padding:4px 0}
.stage-wrap{position:relative;width:100%;overflow:hidden;border-radius:15px;border:1px solid #8e688a44;background:#29213b;aspect-ratio:800/460}canvas{display:block;width:100%;height:100%;touch-action:none}
.overlay{position:absolute;inset:0;background:rgba(20,15,33,.61);display:grid;place-items:center;backdrop-filter:blur(3px);transition:opacity .2s}.overlay.hidden{opacity:0;pointer-events:none}.overlay-card{text-align:center;padding:18px}.overlay-emoji{font-size:37px;filter:drop-shadow(0 4px 15px #ffca7a40)}.overlay h2{font-size:22px;margin:5px 0 7px}.overlay p{font-size:12px;line-height:1.85;color:#c3b9cf;margin:0 0 17px}.start-button{border:0;border-radius:99px;background:linear-gradient(100deg,#ff9c9f,#ffca7a);color:#351e35;font:800 13px 'Noto Sans TC',sans-serif;padding:12px 22px;cursor:pointer;box-shadow:0 5px 20px #ffae8252;transition:transform .15s,filter .15s}.start-button:hover{transform:translateY(-2px);filter:brightness(1.07)}.start-button span{font-size:17px;vertical-align:-1px;margin-left:7px}
.controls-row{display:flex;justify-content:center;align-items:center;gap:22px;padding:15px 0 0;color:#aaa1b8;font-size:10px}.hint{display:flex;align-items:center;gap:4px}kbd{font:10px 'DM Mono',monospace;color:#e5dbea;border:1px solid #62576f;border-bottom-width:2px;border-radius:4px;padding:2px 5px;background:#30283e}.sound-toggle{margin-left:auto;color:#aaa1b8;background:none;border:0;font:inherit;font-size:10px;cursor:pointer}.sound-toggle:hover{color:var(--gold)}.touch-controls{display:none}
footer{display:flex;justify-content:space-between;color:#827a91;font-size:10px;padding:17px 4px;margin-top:auto}
@media(max-width:600px){.shell{width:min(100% - 22px,520px);padding-top:16px}.topbar{margin-bottom:14px}.edition{font-size:8px}.game-card{padding:22px 13px 14px;border-radius:18px}.subtitle{font-size:11px;margin-bottom:16px}.stats{padding:9px 2px;margin-bottom:10px}.stat-label{font-size:8px}.stat strong{font-size:17px}.stat .hearts{font-size:12px;letter-spacing:1px}.controls-row{gap:9px;justify-content:space-between;font-size:9px}.touch-hint{display:none}.sound-toggle{margin:0;font-size:9px}.sound-toggle span{display:none}.touch-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px;color:#90869f;font-size:10px}.touch-controls button{width:58px;height:40px;border-radius:12px;color:var(--cream);font-size:20px;background:#ffffff0c;border:1px solid #ffffff20;touch-action:none}.touch-controls button:active{background:#ffc87535}.stage-wrap{aspect-ratio:800/460}footer{font-size:9px}}
@media(max-width:370px){.controls-row{flex-wrap:wrap}.sound-toggle{width:100%;text-align:center}.edition{letter-spacing:.06em}}