@font-face { font-family: ArcadeFallback; src: local("Microsoft YaHei"); }
:root { --ink: #3b314a; --cream: #fff7e4; --paper: #f7ecd6; --mint: #bad7bf; --gold: #ffdf78; --rose: #d98b84; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: ArcadeFallback, "PingFang SC", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid #668c75; outline-offset: 3px; }
[hidden] { display: none !important; }
.game-shell { width: min(100% - 20px, 480px, calc((100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 2 / 3)); margin: max(8px, env(safe-area-inset-top)) auto; }
.game-top { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.back { color: var(--ink); text-decoration: none; font-size: 13px; }
.quiet { border: 1px solid #b6a595; border-radius: 4px; background: var(--cream); padding: 7px 12px; }
.game-board { position: relative; border: 3px solid var(--ink); box-shadow: 4px 4px 0 #c6b49e; overflow: hidden; background: #f4e5c8; container-type: inline-size; }
canvas { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }
.hud { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 4cqw 4cqw 3cqw; background: var(--cream); border-bottom: 2px solid #c9b79e; pointer-events: none; }
.hud div { display: grid; gap: 1cqw; min-width: 20%; }
.hud span { font-size: 2.7cqw; color: #8c7d77; }
.hud strong { font-size: 5cqw; font-variant-numeric: tabular-nums; }
.hud .time { text-align: center; }
.hud div:last-child { text-align: right; }
.hud small { font-size: 2.6cqw; font-weight: 400; }
.hud b { font-weight: inherit; }
.control-hint { position: absolute; inset: auto 0 4.5cqw; text-align: center; font-size: 2.8cqw; color: #77614e; pointer-events: none; }
.overlay { position: absolute; inset: 0; display: grid; align-items: center; padding: 5cqw; background: #f7ecd68c; }
.start-panel { padding: 7cqw 5cqw; border: 2px solid var(--ink); background: var(--cream); box-shadow: 4px 4px 0 #c1ad96; text-align: center; }
.eyebrow { font-family: Georgia, serif; font-size: 10px; letter-spacing: 2px; color: #97785e; }
.start-panel .eyebrow { font-size: 2.3cqw; letter-spacing: .4cqw; }
h1 { margin: 12px 0; font-size: 38px; letter-spacing: -1px; }
.start-panel h1 { font-size: 8cqw; margin: 3cqw 0; }
.overlay-copy { font-size: 3cqw; line-height: 1.8; color: #857263; margin: 0 0 5cqw; white-space: pre-line; }
.rules { display: flex; justify-content: space-around; margin-bottom: 4cqw; }
.rules div { display: grid; justify-items: center; gap: 2cqw; }
.rules img { width: 10cqw; height: 10cqw; object-fit: contain; }
.rules span, .rules b { display: block; font-size: 2.6cqw; line-height: 1.8; }
.rules b { font-weight: normal; color: #967b62; }
.primary { width: 100%; min-height: 11cqw; background: var(--gold); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 3.8cqw; font-weight: 700; }
.primary:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.load-status { min-height: 1.5em; font-size: 2.7cqw; color: #8b6055; }
.small-note { margin: 4cqw 0 0; font-size: 2.4cqw; line-height: 1.6; color: #8c7d77; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media(max-height: 500px) and (orientation: landscape) { .game-top { font-size: 10px; } .quiet { font-size: 10px; padding: 5px; } }