:root {
  color-scheme: light;
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #14324a;
  --glass: rgba(255,255,255,.88);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #76d4ff; }
body { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { font: inherit; }

.app-shell {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 20%, #b7edff 0, #72d0ff 42%, #4cb7f1 100%);
}

.game-wrap {
  position: relative;
  width: min(100vw, 520px);
  height: 100dvh;
  max-height: 920px;
  overflow: hidden;
  background: #65c8ff;
  box-shadow: 0 0 50px rgba(0,0,0,.22);
}

canvas { display: block; width: 100%; height: 100%; }

.topbar {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}

.brand {
  display: flex; gap: 8px; align-items: center;
  font-weight: 900; letter-spacing: .06em; color: var(--ink);
  background: rgba(255,255,255,.62); border: 2px solid rgba(255,255,255,.75);
  padding: 7px 11px; border-radius: 999px; backdrop-filter: blur(8px);
}
.brand-mark { font-size: 20px; }
.icon-btn {
  pointer-events: auto; border: 0; border-radius: 50%; width: 44px; height: 44px;
  background: rgba(255,255,255,.82); box-shadow: 0 5px 16px rgba(0,0,0,.15);
  cursor: pointer; font-size: 20px;
}

.score {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  font-size: clamp(48px, 15vw, 82px); line-height: 1; font-weight: 1000;
  color: white; text-shadow: 0 4px 0 rgba(20,50,74,.18), 0 0 12px rgba(0,0,0,.16);
  pointer-events: none;
}

.panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(84%, 390px); text-align: center; color: var(--ink);
  background: var(--glass); border: 3px solid rgba(255,255,255,.94);
  border-radius: 28px; padding: 28px 24px 22px;
  box-shadow: 0 18px 50px rgba(26,81,115,.25);
  backdrop-filter: blur(10px);
}
.panel h1, .panel h2 { margin: 0; font-weight: 1000; letter-spacing: .04em; }
.panel h1 { font-size: clamp(32px, 9vw, 48px); }
.panel h2 { font-size: clamp(30px, 8vw, 42px); }
.mascot { font-size: 68px; filter: drop-shadow(0 8px 8px rgba(0,0,0,.16)); animation: bob 1.7s ease-in-out infinite; }
.tagline { margin: 8px 0 22px; font-weight: 800; color: #3a6f8d; }
.hint { margin: 15px 0 0; font-size: 14px; font-weight: 700; color: #50758a; }
.primary-btn {
  border: 0; border-radius: 999px; padding: 15px 34px; min-width: 190px;
  color: #fff; background: linear-gradient(#ffb11f, #ff8a00);
  box-shadow: 0 7px 0 #d96c00, 0 12px 24px rgba(216,108,0,.28);
  font-size: 20px; font-weight: 1000; letter-spacing: .04em; cursor: pointer;
}
.primary-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 #d96c00, 0 7px 16px rgba(216,108,0,.25); }
.hidden { display: none !important; }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 12px; }
.results div { background: rgba(101,200,255,.18); border-radius: 18px; padding: 13px; }
.results span { display: block; font-weight: 800; font-size: 13px; color: #557589; text-transform: uppercase; letter-spacing: .08em; }
.results strong { font-size: 32px; }
.medal { font-size: 42px; margin-bottom: 15px; }
.footer-note {
  position: absolute; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom));
  text-align: center; font-size: 11px; font-weight: 700; color: rgba(20,50,74,.62); pointer-events: none;
}

@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

@media (min-width: 700px) and (min-height: 700px) {
  .game-wrap { height: min(92vh, 900px); border-radius: 26px; }
}