:root {
  color-scheme: light;
  --ink: #213653;
  --secondary: #435b76;
  --pearl: #f9fcff;
  --glass: linear-gradient(155deg, #fffffff0, #f3f8ffd9);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  color: var(--ink);
  background: #c8e4ef;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none }
body { position: fixed; inset: 0; user-select: none; -webkit-user-select: none; touch-action: none }
#game { display: block; width: 100%; height: 100%; touch-action: none }
[hidden] { display: none !important }
button { color: inherit; cursor: pointer; border: none; font: inherit; touch-action: manipulation }
button:focus-visible { outline: 3px solid #445ca8; outline-offset: 3px }
button:active { transform: scale(.97) }
.glass, .sheet, .card, #hint {
  background: var(--glass);
  border: 1px solid #ffffffcc;
  box-shadow: inset 0 1px 0 #fff, 0 5px 18px #34496b16;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
nav { position: fixed; z-index: 4; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: grid; gap: 6px }
nav button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: transform .12s }
nav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
#mute .off, #mute[aria-pressed=true] .on { display: none }
#mute[aria-pressed=true] .off { display: inline }
#start { position: fixed; inset: 0; display: grid; align-content: space-between; justify-items: center; padding: max(28px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)) }
.brand { text-align: center; padding-top: min(4vh, 32px) }
h1 { font-size: clamp(58px, 10vh, 98px); letter-spacing: -.075em; line-height: 1.08; margin: 0; font-weight: 850; text-shadow: 0 2px #ffffff8c }
.brand span { display: block; margin-top: 5px; text-transform: uppercase; letter-spacing: .32em; font-size: 13px; font-weight: 750 }
.sheet, .card { width: min(100%, 390px); border-radius: 28px; padding: 19px 22px }
.sheet .summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px }
.summary p { font-size: 14px; line-height: 1.45; max-width: 215px; margin: 0 }
.best { display: grid; gap: 2px; text-align: right; color: var(--secondary); font-size: 10px; letter-spacing: .11em }
.best b { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums }
.primary { width: 100%; min-height: 52px; border-radius: 18px; background: linear-gradient(115deg,#30496d,#435782); color: white; font-weight: 750; font-size: 18px; box-shadow: inset 0 1px #ffffff38, 0 3px 6px #23365622; transition: transform .14s }
.instructions { font-size: 13px; color: var(--secondary); margin: 13px 0 0; text-align: center }
#hud { position: fixed; inset: max(12px, env(safe-area-inset-top)) auto auto max(12px, env(safe-area-inset-left)); display: flex; align-items: flex-start; gap: 7px; max-width: calc(100vw - 75px); pointer-events: none }
.stats, .danger { border-radius: 19px; padding: 9px 14px; display: grid; gap: 3px; font-variant-numeric: tabular-nums }
.stats span, .danger small { font-size: 11px; font-weight: 650 }
.stats strong { line-height: 1; font-size: 23px }
.stats small, .danger span { font-size: 10px; color: var(--secondary) }
.track { height: 5px; margin: 3px 0; border-radius: 4px; background: #ccd8e8; overflow: hidden }
#dangerFill { height: 100%; transition: width .15s }
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: #25334e22; padding: 16px }
.card { text-align: center; padding: 23px }
.eyebrow { letter-spacing: .15em; font-size: 10px; font-weight: 700 }
h2 { font-size: 32px; letter-spacing: -.045em; margin: 8px 0 20px }
.badge { color: #823d55; font-weight: 700 }
.results { display: flex; gap: 10px; margin: 14px 0 22px }
.results div { flex: 1; font-size: 12px; color: var(--secondary) }
.results b { display: block; color: var(--ink); font-size: 24px }
#hint, #toast { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); border-radius: 24px; padding: 10px 16px; font-size: 13px; font-weight: 600; text-align: center; width: max-content; max-width: 93vw; pointer-events: none }
#hint[data-press=true] { background: #ffe4d8; color: #633e47 }
#toast { background: #213653; color: white; opacity: 0; transition: opacity .18s }
@media (orientation: landscape) and (max-height: 580px) {
  #start { grid-template-columns: 1fr minmax(250px, 38%); align-content: end; align-items: end; gap: 15px; padding: 16px max(65px, env(safe-area-inset-right)) max(13px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)) }
  .sheet { padding: 13px 17px }.brand { justify-self: start; text-align: left; padding: 0 }
  h1 { font-size: 48px }.brand span { font-size: 10px }.sheet .summary { margin-bottom: 8px }
}

:root { --ink:#20354d; --secondary:#486072; --glass:linear-gradient(145deg,#fffcf4f5,#eff5f4e6) }
.brand { color:#203752; text-shadow:0 1px 0 #fff7 }
.brand span { color:#314d66 }
.primary { background:linear-gradient(115deg,#285364,#264054); box-shadow:inset 0 1px #c8eee044,0 3px 8px #243f5926 }
#hint[data-press=true] { background:#fff0d8; color:#734553 }