:root { color-scheme: light; font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; color: #243d32; background: #1d3028; --available-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)); --available-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { user-select: none; -webkit-user-select: none; touch-action: none; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* Fixed compositions, fitted inside the screen. Extra space is a neutral surround. */
#game { width: min(var(--available-width), calc(var(--available-height) * 16 / 9)); height: min(var(--available-height), calc(var(--available-width) * 9 / 16)); position: relative; overflow: hidden; container-type: size; flex: none; }
canvas { display: block; width: 100%; height: 100%; }
[hidden] { display: none !important; }
.overlay { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding: 4cqh 4cqw 3cqh; pointer-events: none; text-align: center; }
.intro { display: flex; align-items: center; flex-direction: column; }
h1 { font-size: 13cqh; letter-spacing: -.065em; line-height: .95; margin: 0; font-weight: 1000; text-shadow: 0 3px 0 #ffdb9d; }
.byline { margin: 1cqh 0 2cqh; font-size: clamp(12px, 2.4cqh, 22px); letter-spacing: .035em; }
.player-field { width: min(74cqw, 290px); margin-bottom: 1.6cqh; pointer-events: auto; }
.player-field label { display: block; margin-bottom: .7cqh; font-size: clamp(12px, 1.8cqh, 14px); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.player-field input { width: 100%; min-height: clamp(38px, 6.4cqh, 50px); border: 2px solid #243d32; border-radius: 999px; padding: 0 20px; background: #fff0d5ec; color: #243d32; font: 900 clamp(14px, 2.2cqh, 18px)/1 ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; text-align: center; text-transform: uppercase; letter-spacing: .06em; outline: none; box-shadow: 0 3px 0 #243d3224; }
.player-field input::placeholder { color: #496254; opacity: .72; font-size: .82em; }
.player-field input:focus { outline: 3px solid #fff3d7; outline-offset: 3px; }
.name-error { margin: .8cqh 0 0; color: #7a241d; font-size: 12px; font-weight: 800; }
button { pointer-events: auto; touch-action: manipulation; border: 2px solid #243d32; border-radius: 999px; background: #243d32; color: #fff2d6; min-width: clamp(120px, 21cqh, 180px); min-height: clamp(36px, 7.5cqh, 60px); padding: 1.8cqh 4cqh; font-family: inherit; font-size: clamp(12px, 2.2cqh, 18px); font-weight: 800; letter-spacing: .1em; cursor: pointer; box-shadow: 0 4px 0 #173026; transition: transform .15s, box-shadow .15s, background .15s; }
button:hover { background: #34513f; transform: translateY(-2px); box-shadow: 0 7px 0 #173026; }
button:active { transform: translateY(4px); box-shadow: 0 1px 0 #173026; }
button:focus-visible { outline: 3px solid #fff3d7; outline-offset: 6px; }
button:disabled { opacity: .65; cursor: wait; }
.hint { margin: 1.5cqh 0 0; font-size: clamp(10px, 1.65cqh, 13px); line-height: 1.4; opacity: .82; }
.leaderboard { width: min(76cqw, 310px); margin-top: 1.6cqh; padding: 1.5cqh 2.2cqh 1.2cqh; border: 2px solid #243d32; border-radius: clamp(14px, 2.5cqh, 22px); background: #fff0d5e8; box-shadow: 0 5px 0 #243d3220; pointer-events: auto; }
.leaderboard-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid #243d3240; padding-bottom: .8cqh; }
.leaderboard-heading h2 { margin: 0; font-size: clamp(16px, 2.7cqh, 22px); line-height: 1; letter-spacing: .04em; }
.leaderboard-heading span { font-size: clamp(10px, 1.45cqh, 12px); letter-spacing: .04em; opacity: .7; }
.leaderboard ol { list-style: none; margin: .8cqh 0 0; padding: 0; counter-reset: position; }
.leaderboard li { counter-increment: position; display: grid; grid-template-columns: 2.2em minmax(0,1fr) auto; align-items: center; min-height: 3.3cqh; gap: 8px; font-size: clamp(11px, 1.7cqh, 14px); font-variant-numeric: tabular-nums; }
.leaderboard li::before { content: counter(position) "."; text-align: left; font-weight: 1000; }
.leaderboard .leader-name { overflow: hidden; text-overflow: ellipsis; text-align: left; white-space: nowrap; font-weight: 900; text-transform: uppercase; }
.leaderboard .leader-score { font-weight: 1000; letter-spacing: .05em; }
.leaderboard .leaderboard-loading, .leaderboard .leaderboard-empty { display: block; padding: 1.2cqh 0; opacity: .7; }
.leaderboard .leaderboard-loading::before, .leaderboard .leaderboard-empty::before { content: none; }
.leaderboard-note { margin: .7cqh 0 0; font-size: clamp(9px, 1.3cqh, 11px); opacity: .65; }
.hud { position: absolute; top: 4cqh; left: 4cqw; right: 4cqw; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.wordmark { font-size: 26px; font-weight: 1000; letter-spacing: -.055em; }
.wordmark span { display: block; font-size: 11px; letter-spacing: .04em; font-weight: 400; margin-top: 2px; }
.scores { text-align: right; font-variant-numeric: tabular-nums; }
.best { display: block; font-size: 12px; letter-spacing: .1em; margin-bottom: 12px; }
.score-label { font-size: 10px; letter-spacing: .16em; display: block; }
#score { font-size: 30px; letter-spacing: .07em; }
.game-over { align-items: center; padding: 3cqh 4cqw; background: #ffcf8c30; backdrop-filter: blur(3px); }
.result { max-width: 100%; background: #fff0d5ed; border: 2px solid #243d32; border-radius: 24px; padding: 4cqh 5cqh; box-shadow: 0 8px 0 #243d321c; }
.eyebrow { font-size: 12px; letter-spacing: .08em; }
h2 { font-size: clamp(26px, 7cqh, 54px); line-height: 1.02; letter-spacing: -.045em; margin: 2.5cqh 0 3.5cqh; }
.result-scores { display: flex; gap: 4cqh; justify-content: center; margin-bottom: 3.5cqh; }
.result-scores p { margin: 0; font-size: 13px; }
.result-scores strong { display: block; font-size: 24px; letter-spacing: .04em; font-variant-numeric: tabular-nums; margin-top: 5px; }
#retry span { margin-left: 15px; font-size: 20px; }
.load-error { max-width: 320px; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Phones keep 9:16 even when rotated. Tablets use the same mobile composition. */
@media (pointer: coarse), (max-width: 600px) {
  #game { width: min(var(--available-width), calc(var(--available-height) * 9 / 16)); height: min(var(--available-height), calc(var(--available-width) * 16 / 9)); }
  .overlay { padding-top: 8cqh; }
  h1 { font-size: 21cqw; }
  .byline { font-size: 4cqw; margin: 1cqh 0 2.2cqh; }
  .player-field { width: 76cqw; margin-bottom: 1.7cqh; }
  .player-field label { font-size: 3cqw; }
  .player-field input { min-height: 11cqw; font-size: 4cqw; }
  .hint { max-width: 90cqw; font-size: 2.8cqw; margin-top: 1.5cqh; }
  .leaderboard { width: 80cqw; margin-top: 2cqh; padding: 2cqh 4cqw 1.5cqh; border-radius: 5cqw; }
  .leaderboard-heading h2 { font-size: 5cqw; }
  .leaderboard-heading span { font-size: 2.7cqw; }
  .leaderboard li { min-height: 4.2cqh; font-size: 3.3cqw; }
  .leaderboard-note { font-size: 2.45cqw; }
  .wordmark { font-size: 6cqw; }
  .wordmark span { font-size: 2.6cqw; }
  .best { font-size: 2.9cqw; margin-bottom: 2cqh; }
  #score { font-size: 7cqw; }
  .score-label { font-size: 2.5cqw; }
  .game-over { padding: 4cqw; }
  .result { padding: 6cqw; border-radius: 6cqw; }
  .eyebrow { font-size: 3cqw; }
  h2 { font-size: 10cqw; }
  .result-scores { gap: 6cqw; }
  .result-scores p { font-size: 3.4cqw; }
  .result-scores strong { font-size: 6cqw; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }