:root { color-scheme: only light; font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; background:#17130f; }
* { box-sizing:border-box; touch-action:none; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:radial-gradient(circle at 50% 20%,#40362b,#100d0a 72%); }
body { display:grid; place-items:center; }
#game-shell { position:relative; width:min(100vw,56.25vh); height:min(100vh,177.78vw); overflow:hidden; background:#eee4cf; box-shadow:0 0 60px #000; }
#game { display:block; width:100%; height:100%; }
.help { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; color:#f4ead6; background:rgba(26,20,15,.76); backdrop-filter:blur(3px); text-align:center; transition:.25s opacity; }
.help strong { font-size:clamp(36px,12vw,62px); letter-spacing:.12em; }
.help span { font:600 14px/1.5 system-ui,sans-serif; opacity:.88; }
.help button { min-width:168px; min-height:50px; border:1px solid #d6b77b; border-radius:7px; color:#f8efd9; background:#872e25; font:800 17px system-ui,sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.help button.secondary { min-height:42px; color:#3b2b20; background:#eadabd; border-color:#9d805d; font-size:15px; }
.help.hidden { opacity:0; pointer-events:none; }
.sound { position:absolute; right:max(12px,env(safe-area-inset-right)); top:max(12px,env(safe-area-inset-top)); width:42px; height:42px; border:1px solid rgba(78,53,31,.35); border-radius:50%; background:rgba(242,230,204,.78); color:#3a2c21; font-weight:800; }
@media (min-aspect-ratio: 9/16) { #game-shell { border-radius:14px; } }