:root {
  color-scheme: dark;
  --ink: #d9f4ec;
  --muted: #84b9b3;
  --teal: #102c3c;
  --teal-2: #123d4a;
  --cyan: #23d2e2;
  --lavender: #8374bd;
  --lavender-dark: #4e4782;
  --gold: #ffd56a;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(circle at 50% 0%, #1b4c58 0%, #0a1c2a 62%, #07121d 100%);
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  touch-action: none;
}

button { font: inherit; }
.app-shell { min-height: 100vh; padding: 18px 12px 22px; display: grid; place-items: center; }
.game-card { width: min(100%, 430px); }
.topbar {
  height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: linear-gradient(180deg, #244b58, #173546); border: 2px solid #3f6d76;
  border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 10px 32px #06121d99;
}
.level-chip, .duck-meter { display: flex; align-items: baseline; gap: 6px; color: #b8e7dc; }
.level-chip { padding: 7px 10px; background: #132936; border-radius: 12px; box-shadow: inset 0 1px #52828a; }
.level-chip span { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.level-chip strong { font-size: 16px; color: #f5dd85; }
.duck-meter { font-size: 12px; margin-right: auto; }
.duck-icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #f3a4bc; color: #643d68; font-size: 10px; border: 2px solid #ffd5de; }
.top-actions { display: flex; gap: 8px; }
.icon-btn { width: 38px; height: 38px; border: 2px solid #7cdae2; border-radius: 13px; color: #f1ffff; background: linear-gradient(145deg, #2ed2df, #127d9b); box-shadow: inset 0 2px #b7ffff66, 0 4px 0 #0b566e; cursor: pointer; font-weight: 900; font-size: 20px; }
.icon-btn:active { transform: translateY(2px); box-shadow: inset 0 2px #b7ffff66, 0 2px 0 #0b566e; }
.stage-wrap { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #0d2938; border-inline: 2px solid #3f6d76; }
#gameCanvas { width: 100%; height: 100%; display: block; image-rendering: auto; }
.stage-hint { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: #0d2734d9; border: 1px solid #8be4d477; color: #c8eee5; font-size: 12px; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.stage-hint.fade { opacity: 0; }
.state-toast { position: absolute; left: 50%; bottom: 84px; transform: translate(-50%, 12px); padding: 8px 15px; border-radius: 999px; background: #062331e8; border: 1px solid #52e6e2; color: #d9ffff; font-size: 12px; opacity: 0; transition: .25s; pointer-events: none; white-space: nowrap; }
.state-toast.show { opacity: 1; transform: translate(-50%, 0); }
.control-strip { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #102d3b; border: 2px solid #3f6d76; border-top: 0; border-radius: 0 0 24px 24px; }
.control-copy { display: flex; align-items: center; gap: 7px; color: #8dbbb7; font-size: 10px; }
.control-copy b { color: #d4f5ec; }
.control-dot { width: 8px; height: 8px; border-radius: 50%; background: #52f0cf; box-shadow: 0 0 10px #52f0cf; }
.water-readout { min-width: 78px; color: #81bec1; font-size: 10px; }
.meter { margin-top: 5px; width: 78px; height: 7px; border-radius: 99px; background: #08202d; overflow: hidden; border: 1px solid #386e78; }
.meter i { display: block; height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #1bbcd6, #8df9e9); box-shadow: 0 0 8px #35dfe5; transition: width .25s; }
.demo-note { margin: 12px 0 0; text-align: center; color: #68979a; font-size: 11px; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: #0618249e; backdrop-filter: blur(4px); z-index: 4; }
.overlay[hidden] { display: none; }
.overlay-panel { width: min(80%, 290px); text-align: center; padding: 25px 21px 22px; border: 2px solid #6bdedb; border-radius: 24px; background: linear-gradient(160deg, #1b5060, #102f46); box-shadow: 0 18px 60px #020b13cc; }
.overlay-kicker { color: #8ff7e5; letter-spacing: .18em; font-size: 10px; }
.overlay h2 { margin: 8px 0 7px; color: #fff4af; font-size: 24px; }
.overlay p { margin: 0 0 17px; color: #afd9d4; font-size: 12px; line-height: 1.6; }
.result-bubbles { color: #90f8ed; letter-spacing: 8px; font-size: 22px; }
.primary-btn { border: 0; border-radius: 14px; padding: 11px 22px; color: #11303a; background: linear-gradient(180deg, #fff08d, #ffbd56); box-shadow: 0 4px 0 #b86b32; cursor: pointer; font-weight: 900; }
.primary-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #b86b32; }
.result-actions { display: flex; justify-content: center; gap: 10px; }
.secondary-btn { border: 1px solid #78cbd0; border-radius: 14px; padding: 10px 16px; color: #d9ffff; background: #174353; cursor: pointer; font-weight: 800; }
.secondary-btn:active { transform: translateY(2px); }

@media (min-height: 900px) { .app-shell { padding-top: 28px; } .topbar { height: 68px; } }