:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #3a352b;
  background: #fff5ce;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100svh;
  padding: max(14px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% -20%, #fffdf0 0, #fff5ce 50%, #ffdfad 100%);
}
button { font: inherit; cursor: pointer; }
button:focus-visible, canvas:focus-visible { outline: 3px solid #3c8e71; outline-offset: 3px; }
[hidden] { display: none !important; }

.game-shell { width: min(100%, 1024px); margin: 0 auto; }
.topbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 5px 10px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: clamp(19px, 3vw, 26px); font-weight: 900; letter-spacing: .02em; }
.brand-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: #d9f6c5; box-shadow: inset 0 -3px #bde2a8; font-size: 24px; }
.brand small { display: inline-block; margin-left: 4px; vertical-align: middle; color: #787066; font-size: 11px; font-weight: 800; }
.pause-button { border: 2px solid #4e4a3e; border-radius: 12px; background: #fffdf4; color: inherit; padding: 6px 14px; font-weight: 800; box-shadow: 0 3px #d4c9a1; }
.pause-button:disabled { opacity: .45; cursor: default; }

.game-card { overflow: hidden; border: 3px solid #4c4838; border-radius: 24px; background: #fffdf3; box-shadow: 0 9px 0 #d6ba82, 0 19px 30px #a9753e25; }
.hud { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 10px 12px; background: #fffdf3; border-bottom: 3px solid #4c4838; }
.stat { text-align: center; border-right: 1px solid #e6dcc0; }
.stat:last-child { border-right: 0; }
.stat-label { display: block; margin-bottom: 2px; color: #777060; font-size: 12px; font-weight: 700; }
.stat strong { display: block; font-size: clamp(19px, 3vw, 28px); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-hits strong { color: #de735b; }

.stage { position: relative; width: 100%; height: min(63vw, 610px); min-height: 390px; overflow: hidden; background: #bceefa; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.chase-meter { position: absolute; left: 14px; bottom: 13px; z-index: 1; width: min(190px, 42%); padding: 7px 9px 8px; border: 2px solid #4c4838; border-radius: 12px; background: #fffdf1e8; box-shadow: 0 3px #4c483844; font-size: 11px; font-weight: 800; }
.chase-track { height: 8px; margin-top: 5px; border-radius: 999px; background: #e8dcc8; overflow: hidden; }
#chase-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f9be66, #ec7768); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }

.overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; background: #453a3270; backdrop-filter: blur(3px); }
.overlay[hidden] { display: none; }
.panel { width: min(100%, 480px); padding: clamp(20px, 4vw, 34px); border: 3px solid #4c4838; border-radius: 24px; background: #fffdf1; box-shadow: 0 8px 0 #d7a978, 0 17px 25px #36271a45; text-align: center; }
.panel-kicker { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #e6f6cf; color: #4f7650; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.panel h1, .panel h2 { margin: 12px 0 6px; color: #3b4231; font-size: clamp(36px, 6vw, 58px); line-height: 1.12; letter-spacing: .025em; }
.panel h2 { font-size: clamp(32px, 5vw, 48px); }
.panel p { margin: 10px 0 18px; line-height: 1.65; font-weight: 650; }
.primary-button { min-width: 185px; padding: 12px 23px; border: 2px solid #375e40; border-radius: 14px; background: #73d980; color: #273a2b; font-size: 18px; font-weight: 900; box-shadow: 0 5px #3a9153; transition: transform .12s, box-shadow .12s; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 7px #3a9153; }
.primary-button:active { transform: translateY(4px); box-shadow: 0 1px #3a9153; }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: 0 3px #3a9153; }
.primary-button span { margin-left: 8px; }
#load-status { margin: 9px 0 0; color: #766d60; font-size: 12px; }
.panel .control-hint { margin: 19px 0 0; color: #766d60; font-size: 12px; line-height: 1.8; }
.control-hint strong { color: #4e764c; }
.panel .result-line { margin-bottom: 0; font-size: 18px; }
.result-line strong { color: #da7651; font-size: 34px; font-variant-numeric: tabular-nums; }
.panel .result-subline { margin: 3px 0 20px; color: #766d60; font-size: 13px; }

.touch-controls { display: none; justify-content: center; gap: 12px; padding: 11px; border-top: 3px solid #4c4838; background: #fffdf3; }
.touch-controls button { min-width: 72px; min-height: 48px; border: 2px solid #4c4838; border-radius: 14px; background: #e8f8cf; color: #314536; font-size: 24px; font-weight: 900; box-shadow: 0 3px #b8d2a0; }
.touch-controls button:active { transform: translateY(2px); box-shadow: 0 1px #b8d2a0; }
.touch-controls span { font-size: 14px; }
.footer-note { margin: 15px 8px 0; color: #76684f; font-size: 13px; text-align: center; }

@media (max-width: 640px) {
  body { padding-left: 8px; padding-right: 8px; }
  .topbar { min-height: 46px; }
  .game-card { border-radius: 18px; }
  .hud { gap: 1px; padding: 8px 3px; }
  .stat-label { font-size: 10px; }
  .stat strong { font-size: 18px; }
  .stage { height: min(68svh, 690px); min-height: 430px; }
  .touch-controls { display: flex; }
  .panel { padding: 20px 15px; }
  .panel .control-hint { font-size: 11px; }
  .footer-note { font-size: 11px; }
}

@media (max-height: 700px) and (max-width: 640px) {
  .stage { height: 55svh; min-height: 320px; }
  .footer-note { display: none; }
}