:root { color-scheme: light; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; overflow: hidden; background: #172437; font-family: "Microsoft YaHei", system-ui, sans-serif; }
.app { position: relative; width: min(100vw, calc(100dvh * 0.4625)); aspect-ratio: 592 / 1280; overflow: hidden; background: #d8f7ff; box-shadow: 0 12px 44px #0008; touch-action: none; }
#game, #game canvas { display: block; width: 100% !important; height: 100% !important; }
.announce { position: absolute; z-index: 2; top: 20.6%; left: 50%; translate: -50% -50%; color: #ffae18; font-weight: 900; font-size: clamp(17px, 4.3vw, 31px); text-shadow: 0 2px #fff, 0 3px 5px #9b5600; pointer-events: none; opacity: 0; transition: opacity .18s; white-space: nowrap; }
.announce.show { opacity: 1; }
.modal { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: #15243a9b; padding: 20px; }
.modal.hidden { display: none; }
.modal-card { width: min(78%, 350px); text-align: center; border: 4px solid #fff3c5; border-radius: 24px; padding: 27px 22px 23px; background: linear-gradient(145deg,#fff9de,#ffcb61); box-shadow: 0 8px 0 #ba6b20, 0 22px 40px #06111d99; color: #663314; }
.modal-card h1 { margin: 3px 0 8px; font-size: 31px; }
.modal-card p { margin: 7px 0; font-weight: 700; }
.eyebrow { color: #9f5521; font-size: 14px; }
button { margin-top: 14px; width: 100%; border: 3px solid #fff6cd; border-radius: 14px; padding: 12px; cursor: pointer; background: linear-gradient(#ffad36,#f27317); color: #fff; font: 900 20px "Microsoft YaHei",sans-serif; text-shadow: 0 2px #9b3d11; box-shadow: 0 4px 0 #b94b10; }
button:active { translate: 0 3px; box-shadow: 0 1px 0 #b94b10; }
.debug-toggle { position: absolute; z-index: 5; right: 12px; top: 130px; width: auto; margin: 0; border-width: 2px; border-radius: 9px; padding: 7px 9px; font-size: 13px; box-shadow: 0 2px 0 #b94b10; }
.debug-panel { position: fixed; z-index: 10; top: 14px; right: 14px; width: 245px; padding: 13px; border: 1px solid #aeeeff; border-radius: 12px; background: #101b27ee; color: #e9f8ff; box-shadow: 0 12px 30px #0008; font-size: 12px; backdrop-filter: blur(9px); }
.debug-panel.hidden { display: none; }
.debug-panel strong { display: block; margin-bottom: 8px; font-size: 14px; }
.debug-panel label { display: grid; grid-template-columns: 1fr 48px; gap: 5px; align-items: center; margin-top: 7px; }
.debug-panel output { text-align: right; color: #ffcf5c; font-variant-numeric: tabular-nums; }
.debug-panel input { grid-column: 1 / -1; width: 100%; accent-color: #ff9e2b; }
.debug-panel p { margin: 10px 0 0; color: #aad1df; line-height: 1.35; }
kbd { border: 1px solid #6c9baa; border-radius: 3px; padding: 1px 4px; background: #1d3543; }