:root {
  --paper:#e8e0d8; --surface:#e8e0d8; --ink:#292421; --muted:#756d67;
  --wine:#8c2f3d; --wine-dark:#63202d; --board:#9b8e84; --line:rgba(63,48,40,.13);
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); }
body { font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-tap-highlight-color:transparent; user-select:none; }
.container { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:16px; }
button { font:inherit; cursor:pointer; }
button:focus-visible { outline:3px solid var(--wine); outline-offset:4px; }
.sound-button { position:absolute; top:8px; right:8px; z-index:4; display:flex; align-items:center; justify-content:center; width:54px; height:54px; padding:0; border:0; background:transparent; color:var(--muted); }
.sound-button svg { filter:drop-shadow(0 1px 0 rgba(255,253,249,.95)) drop-shadow(0 2px 2px rgba(63,48,40,.24)); }
.sound-button[aria-pressed="true"] { color:var(--wine); }
.sound-button .sound-on { display:none; }
.sound-button[aria-pressed="true"] .sound-on { display:initial; }
.sound-button[aria-pressed="true"] .sound-off { display:none; }
#game { position:relative; width:480px; line-height:0; border-radius:9px; overflow:hidden; }
#game::after { content:""; position:absolute; inset:0; border:1px solid #cec2b7; border-radius:inherit; pointer-events:none; z-index:3; }
#canvas { display:block; width:480px; height:720px; background:var(--surface); }
#floor { width:480px; height:24px; background:var(--paper); }
#loading { position:absolute; inset:80px 0 auto; text-align:center; line-height:1.5; color:var(--muted); }
#overlay { position:absolute; inset:0; z-index:2; display:none; align-items:center; justify-content:center; padding-top:160px; }
#playAgainButton { padding:12px 26px; min-height:48px; color:var(--surface); background:var(--wine); border:0; border-radius:5px; font-size:20px; }
#playAgainButton:hover { background:var(--wine-dark); }
@media(max-width:620px) and (orientation:portrait) {
  html,body { width:100%; height:100%; overflow:hidden; }
  .container { width:100%; height:100vh; height:100dvh; min-height:0; padding:0; gap:0; justify-content:flex-start; overflow:hidden; }
  #game { flex:none; border-radius:0; box-shadow:none; }
  #game::after { border-radius:0; }
}