:root {
  --bg: #123d2a;
  --bg2: #0b2b1d;
  --ink: #f4f7ef;
  --muted: #b7cdb9;
  --gold: #ffcf3f;
  --accent: #ff6b4a;
  --card: #fdfbf3;
  --card-ink: #20342a;
  --cell: 56px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 0%, #1d5a3d 0%, var(--bg) 55%, var(--bg2) 100%);
  color: var(--ink);
  font: 16px/1.4 ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
}
#app { height: 100%; max-width: 560px; margin: 0 auto; position: relative; overflow: hidden; }
.screen { display: none; height: 100%; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.screen.active { display: flex; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }

/* Home */
#home { align-items: center; justify-content: center; justify-content: safe center; gap: 22px; text-align: center; overflow-y: auto; padding-top: calc(max(16px, env(safe-area-inset-top)) + 56px); }
.logo h1 { margin: 0; font-size: 56px; line-height: .95; letter-spacing: -1px; font-weight: 900; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.logo h1 span { color: var(--gold); }
.tagline { color: var(--muted); margin: 10px 0 0; text-wrap: balance; }
.menu { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }
.btn { background: rgba(255,255,255,.12); border-radius: 16px; padding: 14px 16px; font-weight: 700; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); transition: transform .08s; }
.btn:active { transform: translateY(2px); }
.btn.big { padding: 18px; font-size: 20px; }
.btn.big small, #btn-play small { display: block; font-size: 13px; font-weight: 500; opacity: .75; margin-top: 2px; }
.btn.primary { background: var(--gold); color: #3a2a00; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.home-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 1.4em; }
.streak { color: var(--gold); font-weight: 700; }
.streak:empty { display: none; }
.daily-progress { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.2); padding: 7px 14px; border-radius: 999px; font-size: 14px; color: var(--muted); }
.daily-progress[hidden] { display: none; }
.daily-progress b { color: var(--ink); }
.daily-progress .dots { display: flex; gap: 4px; }
.daily-progress i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.daily-progress i.on { background: var(--gold); box-shadow: 0 0 0 1px #c48b00 inset; }
.banner { background: var(--accent); color: #fff; padding: 12px 16px; border-radius: 14px; font-weight: 700; max-width: 340px; }
.coins-pill { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.25); padding: 6px 12px 6px 8px; border-radius: 999px; font-weight: 800; }
.coins-pill.small { position: static; }
.coin.mini { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 3px; }
.coin { flex: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, var(--gold) 45%, #c48b00); box-shadow: 0 1px 0 rgba(0,0,0,.3); }

/* Play */
.hud { display: flex; align-items: center; gap: 12px; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.12); font-size: 30px; line-height: 40px; }
.hud-title { flex: 1; text-align: center; }
#hole-label { font-weight: 900; font-size: 20px; }
.hud-score { color: var(--muted); font-size: 14px; }
.hud-score span { color: var(--ink); font-weight: 800; }
.goal { margin-top: 10px; text-align: center; background: rgba(255,107,74,.2); border: 1px solid rgba(255,107,74,.5); border-radius: 12px; padding: 6px 10px; font-size: 14px; }
.board-wrap { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative; touch-action: none; margin-top: 10px;
  /* the rough around the fairway: darker grass with faint diagonal mowing stripes */
  border-radius: 24px; background: repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 14px, transparent 14px 28px), #2f7a35;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.1), inset 0 6px 14px rgba(0,30,10,.18); }
.board-wrap .fj-board { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 4px 10px rgba(0,30,10,.18), 0 0 0 3px var(--fj-fringe), 0 0 0 calc(var(--cell) * .2 + 3px) #3a8a3c, 0 calc(var(--cell) * .2) calc(var(--cell) * .4) rgba(0,0,0,.3); }
.scenery { position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; overflow: hidden; }
.scenery .deco { position: absolute; left: 0; top: 0; filter: saturate(.75) brightness(.82); }
.scenery .deco .fj-tree > circle:first-child { opacity: .15; }
.board-wrap .board { z-index: 1; }
.hint-line { text-align: center; color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.tools { display: flex; gap: 10px; margin-top: 10px; }
.tool { flex: 1; background: rgba(255,255,255,.12); border-radius: 14px; padding: 8px 4px; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.tool svg, .btn-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tool-label { display: flex; align-items: center; gap: 6px; }
.tool .price-tag { color: var(--gold); font-weight: 800; display: inline-flex; align-items: center; }
.tool[hidden] { display: none; }
.tool:disabled { opacity: .55; }
.tool:disabled svg { opacity: .7; }
.btn-ic { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.loading[hidden] { display: none; }
.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--muted); }

.board { position: relative; touch-action: none; }
.board > * { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); }
.board .tile { z-index: 0; pointer-events: none; }
.board > .hazard { width: 100%; height: 100%; }
.board .drag-lane { z-index: 1; pointer-events: none; background: rgba(255,255,255,.18); border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); }
.board.shake { animation: shake .12s linear 1; }
@keyframes shake { 25% { translate: 3px 0; } 75% { translate: -3px 0; } }
.board .tree { z-index: 1; pointer-events: none; }
.board .hole { z-index: 1; pointer-events: none; } /* the flag stays inside its own cell */

.cart { transition: transform .16s ease-out; z-index: 2; cursor: grab; }
/* A grab area at least 44 px thick across the cart, even when cells are smaller (landscape, 320 px). */
.cart::before { content: ""; position: absolute; --grow: max(0px, (44px - var(--cell)) / 2); }
.cart.h::before { left: 0; right: 0; top: calc(var(--grow) * -1); bottom: calc(var(--grow) * -1); }
.cart.v::before { top: 0; bottom: 0; left: calc(var(--grow) * -1); right: calc(var(--grow) * -1); }
.cart.dragging { transition: none; z-index: 6; cursor: grabbing; }
.cart.dragging .fj-cart { filter: drop-shadow(0 calc(var(--cell) * .08) calc(var(--cell) * .06) rgba(0, 0, 0, .3)); }

.ball { z-index: 4; transition-property: transform; transition-timing-function: cubic-bezier(.2,.7,.3,1); pointer-events: none; }
.ball .fj-ball { transition: opacity .12s, transform .12s; }
.ball.drowned .fj-ball { opacity: 0; transform: scale(.4); }
.ball.respawn .fj-ball { animation: respawn .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes respawn { from { opacity: 0; transform: scale(.2); } }
.ball.bump .fj-ball { animation: bump .25s; }
@keyframes bump { 30% { transform: translateX(8%); } 60% { transform: translateX(-8%); } }
.board .sand-puff { z-index: 5; }

/* Floating "+1 penalty" over the spot the ball comes back to. */
.board .floater { z-index: 9; pointer-events: none; display: flex; justify-content: center; align-items: flex-start; overflow: visible; }
.floater span { white-space: nowrap; margin-top: -18%; background: #e8453c; color: #fff; font-weight: 900; font-size: max(13px, calc(var(--cell) * .26)); padding: 3px 9px; border-radius: 999px; box-shadow: 0 3px 0 rgba(0,0,0,.25); animation: floater 2s ease-out forwards; }
/* Pops in, holds for about 1.6 s, then drifts up and fades. */
@keyframes floater { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 9% { opacity: 1; transform: translateY(0) scale(1.1); } 15% { transform: scale(1); } 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-22px); } }
.hud-score.flash span { animation: flash .6s; }
@keyframes flash { 30% { color: #ff6b5c; } }

/* Tutorial coach: banner above the board, plus an animated hand on the board. */
.coach { margin-top: 10px; background: var(--card); color: var(--card-ink); border-radius: 16px; padding: 8px 14px 10px 10px; box-shadow: 0 4px 0 rgba(0,0,0,.18); display: flex; gap: 10px; align-items: center; }
.coach[hidden] { display: none; }
.coach-avatar { flex: none; width: 46px; height: 46px; animation: coach-bob 2.4s ease-in-out infinite; }
.coach-avatar svg { display: block; width: 100%; height: 100%; }
@keyframes coach-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }
.coach-body { flex: 1; min-width: 0; }
.coach-step { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #23733a; }
/* Always two lines tall, so the board does not jump between steps. */
.coach-text { font-weight: 800; font-size: 17px; line-height: 1.25; min-height: 2.5em; text-wrap: balance; }
.board .coach-path { inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; }
.coach-path svg { display: block; overflow: visible; }
.coach-path line.under { stroke: rgba(0,0,0,.3); stroke-dasharray: none; animation: none; filter: none; opacity: 1; }
.coach-path line { stroke: #fff; stroke-linecap: round; stroke-dasharray: 2 14; opacity: .9; animation: march .7s linear infinite; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.coach-path polygon { fill: #fff; opacity: .95; stroke: rgba(0,0,0,.35); stroke-width: 2; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
/* Where the ball or cart ends up: a faint ball, a dashed ring round the cup, or a dashed cart slot. */
.board .coach-ghost { z-index: 2; pointer-events: none; opacity: .45; animation: ghost 2s ease-in-out infinite; }
.board .coach-ghost.ring::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 3px dashed #fff; }
.board .coach-ghost.slot { opacity: .8; border: 3px dashed rgba(255,255,255,.9); border-radius: 14px; background: rgba(255,255,255,.12); }
@keyframes ghost { 0%, 40% { opacity: .2; } 70%, 100% { opacity: .55; } }
@keyframes march { to { stroke-dashoffset: -16; } }
.board .coach-ring { width: 0; height: 0; z-index: 8; pointer-events: none; }
.coach-ring::before { content: ""; position: absolute; left: calc(var(--cell) * -.32); top: calc(var(--cell) * -.32); width: calc(var(--cell) * .64); height: calc(var(--cell) * .64); border-radius: 50%; border: 3px solid #fff; box-sizing: border-box; opacity: 0; animation: touch 1.6s ease-out infinite; }
@keyframes touch { 0%, 4% { opacity: 0; transform: scale(1.4); } 10% { opacity: .95; transform: scale(.8); } 30% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
.board .coach-hand { width: calc(var(--cell) * .8); height: calc(var(--cell) * 1.0133); z-index: 9; pointer-events: none; animation: hand 1.6s linear infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); transform-origin: 35% 5.3%; }
.coach-hand svg { display: block; width: 100%; height: 100%; }
/* Scale and flip turn around the fingertip (transform-origin), so the fingertip stays on its path. */
/* A 1.6 s loop: pops in and presses (150 ms), drags along the path (600 ms, ease-in-out), lifts off
   (150 ms), rests at the end (400 ms), then blinks back to the start (300 ms). It is fully opaque for
   all but about 200 ms of the loop. */
@keyframes hand {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) translate(8%, 9%) var(--flip, scale(1)) scale(1.08); }
  4% { opacity: 1; transform: translate(var(--x0), var(--y0)) translate(8%, 9%) var(--flip, scale(1)) scale(1.08); }
  9.4% { opacity: 1; transform: translate(var(--x0), var(--y0)) var(--flip, scale(1)) scale(.92); animation-timing-function: ease-in-out; }
  46.9% { opacity: 1; transform: translate(var(--x1), var(--y1)) var(--flip, scale(1)) scale(.92); }
  56.3% { opacity: 1; transform: translate(var(--x1), var(--y1)) translate(8%, 9%) var(--flip, scale(1)) scale(1.08); }
  81.3% { opacity: 1; transform: translate(var(--x1), var(--y1)) translate(8%, 9%) var(--flip, scale(1)) scale(1.08); }
  87.5%, 100% { opacity: 0; transform: translate(var(--x1), var(--y1)) translate(8%, 9%) var(--flip, scale(1)) scale(1.08); }
}
/* visibility, not opacity: the coach animations set opacity themselves and would win. */
.board.touching .coach-g { visibility: hidden; animation-play-state: paused; }
.tool.nudge { color: #ffd23f; background: rgba(255,210,63,.18); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 0 0 3px #ffd23f, 0 0 18px rgba(255,210,63,.55); animation: nudge 1s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes nudge { 50% { transform: scale(1.05); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 0 0 3px #ffd23f, 0 0 26px rgba(255,210,63,.75); } }
@media (prefers-reduced-motion: reduce) { .tool.nudge { animation: none; } }

/* Mute button */
.mute-btn { display: flex; align-items: center; justify-content: center; padding: 0; }
.mute-btn svg { width: 24px; height: 24px; }
.home-mute { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; }

/* Home scene */
.hero { margin: 0 auto 22px; }
.hero > * { position: absolute; left: 0; top: 0; }
/* 5 s loop: the blue cart slides down out of the lane, the ball rolls into the cup, then it resets. */
.hero .hero-cart { animation: hero-cart 5s ease-in-out infinite; z-index: 2; }
@keyframes hero-cart { 0%, 14% { transform: translateY(0); } 24%, 84% { transform: translateY(var(--cell)); } 94%, 100% { transform: translateY(0); } }
.hero .hero-ball { z-index: 3; animation: hero-ball 5s infinite; }
@keyframes hero-ball {
  0%, 30% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
  46% { transform: translateX(calc(var(--cell) * 5)) scale(1); opacity: 1; }
  54%, 88% { transform: translateX(calc(var(--cell) * 5)) translateY(6%) scale(.2); opacity: 0; }
  89% { transform: translateX(0) scale(.6); opacity: 0; }
  96%, 100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* Feature intro card */
.intro-items { display: grid; gap: 14px; text-align: left; }
.intro-item { display: flex; gap: 14px; align-items: center; }
.intro-item p { margin: 2px 0 0; font-size: 14px; color: #44584b; }
.intro-icon { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--fj-fairway-a); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.08); position: relative; overflow: hidden; }
.intro-icon > div { position: absolute; inset: 6px; }
.howto.intro-items { gap: 10px; }
.howto .intro-item { gap: 12px; }
.howto .intro-icon { width: 46px; height: 46px; }
.howto .intro-icon > div { inset: 3px; }
.howto .intro-item p { margin: 0; font-size: 15px; color: var(--card-ink); }
.howto-cart { position: absolute; left: calc(50% - 12px); top: -2px; width: 24px; height: 44px; }
.howto-ball { position: absolute; inset: 0; }
.howto-ball .fj-ball { inset: 12%; width: 76%; height: 76%; }

#result .card { position: relative; z-index: 1; }
/* Confetti lives inside the result card: over the fairway banner, under the text and buttons. */
#result .card > .fj-confetti { inset: 0; overflow: hidden; z-index: 1; border-radius: inherit; }
#result .card > :not(.fj-confetti):not(.result-art) { position: relative; z-index: 2; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Modals */
.modal { position: absolute; inset: 0; background: rgba(5,20,12,.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.card { background: var(--card); color: var(--card-ink); border-radius: 24px; padding: 24px 20px; width: 100%; max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 12px; animation: pop .25s ease-out; max-height: 90%; overflow: auto; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.card h2 { margin: 0; }
.card .btn { background: #e8eee2; color: var(--card-ink); }
.card .btn.primary { background: var(--gold); color: #3a2a00; }
.card p { margin: 0; }
.muted { color: #56685b; font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Result card: a fairway banner with the cup (and a bird for a birdie) above the score. */
.result-card { padding-top: 0; overflow: hidden auto; }
.result-art { position: relative; height: 92px; margin: 0 -20px 4px; background: radial-gradient(60% 90% at 50% 100%, #7fd16f, var(--fj-fairway-a) 60%, var(--fj-fairway-b)); border-bottom: 3px solid var(--fj-fringe); }
.result-art .ra-deco { position: absolute; }
.result-art .ra-deco.a { left: 5%; bottom: 8px; width: 46px; height: 46px; }
.result-art .ra-deco.b { left: calc(5% + 38px); bottom: 2px; width: 30px; height: 30px; }
.result-art .ra-deco.c { right: 4%; bottom: 6px; width: 40px; height: 40px; }
.result-art .ra-hole { position: absolute; left: calc(50% - 32px); top: 22px; width: 64px; height: 64px; }
.result-art .ra-ball { position: absolute; left: calc(50% - 32px); top: 22px; width: 64px; height: 64px; animation: ra-drop .9s cubic-bezier(.5, 0, .7, 1) .15s both; }
@keyframes ra-drop { 0% { transform: translate(-90px, -10px); opacity: 1; } 60% { transform: translate(0, 4px) scale(1); opacity: 1; } 100% { transform: translate(0, 8px) scale(.25); opacity: 0; } }
.result-art .ra-bird { position: absolute; right: 16%; top: 10px; width: 54px; height: 40px; animation: ra-bird 1.6s ease-in-out infinite alternate; }
.result-art .ra-bird svg { display: block; width: 100%; height: 100%; }
@keyframes ra-bird { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-8px) rotate(4deg); } }
.result-name { font-size: 40px; font-weight: 900; color: #1e7a3c; line-height: 1.1; }
.stars { font-size: 36px; letter-spacing: 6px; color: #d9dfd6; line-height: 1; }
.stars span { display: inline-block; animation: star-pop .32s cubic-bezier(.3, 1.6, .5, 1) both; }
.stars .on { color: var(--gold); text-shadow: 0 2px 0 #c48b00; }
@keyframes star-pop { from { transform: scale(0); opacity: 0; } }
.chips { display: flex; justify-content: center; gap: 8px; }
.chips span { background: #e8eee2; border-radius: 999px; padding: 4px 12px; font-size: 14px; color: #44584b; }
.chips b { color: var(--card-ink); }
.reward { font-weight: 900; font-size: 20px; color: #855a00; display: flex; align-items: center; justify-content: center; gap: 6px; }
.reward:empty { display: none; }
.reward .coin { width: 22px; height: 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-pill { position: static; background: #e8eee2; color: var(--card-ink); }
.skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.skin { position: relative; background: #eef2ea; border-radius: 16px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--card-ink); }
.skin.equipped { outline: 3px solid #1e7a3c; }
.skin .swatch { position: relative; width: 64px; height: 64px; margin-bottom: 2px; }
.skin .swatch::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8bd67c, var(--fj-fairway-a) 55%, var(--fj-fairway-b)); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.skin .swatch .fj-ball { inset: 12%; width: 76%; height: 76%; }
.skin .price { color: #855a00; display: inline-flex; align-items: center; }
.skin .price .lock { width: 13px; height: 13px; margin-right: 3px; }
.skin .state { color: #44584b; }
.skin .state.on { color: #1e7a3c; }
.skin .badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: #1e7a3c; color: #fff; display: grid; place-items: center; }
.skin .badge svg { width: 15px; height: 15px; }
.skin.locked .swatch::before { opacity: .6; }
.skin.locked .price { color: #5a6157; opacity: .6; }

.toast { position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%); background: #10170f; color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 700; z-index: 30; white-space: nowrap; }
.toast[hidden] { display: none; }

/* Landscape phones: the board takes the full height on the left, HUD, coach and tools stack in a
   side column on the right. The home screen puts its hero scene left of the title and lays the menu out 2 x 2. */
@media (orientation: landscape) and (max-height: 520px) {
  #app { max-width: 980px; }
  .screen { padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  #play.screen.active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 220px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "board hud" "board goal" "board coach" "board ." "board tools"; column-gap: 16px; row-gap: 8px; }
  #play .hud { grid-area: hud; flex-wrap: wrap; gap: 8px; }
  #play .hud-title { order: 1; flex-basis: 100%; }
  #play .hud .coins-pill { margin-left: auto; }
  #play .goal { grid-area: goal; margin: 0; }
  #play .coach { grid-area: coach; margin: 0; padding: 6px 10px; }
  #play .coach-avatar { width: 34px; height: 34px; }
  #play .coach-text { font-size: 15px; }
  #play .board-wrap { grid-area: board; margin: 0; }
  #play .hint-line { display: none; }
  #play .tools { grid-area: tools; }
  #play .tool { padding: 6px 2px; font-size: 12px; }
  /* Home: the hero scene on the left, title, tagline and menu on the right. */
  #home.screen.active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: 1fr repeat(5, auto) 1fr; column-gap: 28px; row-gap: 10px; justify-items: center; padding-top: max(10px, env(safe-area-inset-top)); }
  #home .logo { display: contents; }
  #home .hero { display: block; grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
  #home .logo h1 { grid-column: 2; grid-row: 2; }
  #home .tagline { grid-column: 2; grid-row: 3; margin: 0; }
  #home #challenge-banner { grid-column: 2; grid-row: 4; }
  #home .menu { grid-column: 2; grid-row: 5; }
  #home .home-foot { grid-column: 2; grid-row: 6; }
  .logo h1 { font-size: 40px; }
  .logo h1 br { display: none; }
  .menu { display: grid; grid-template-columns: 1fr 1fr; max-width: 440px; gap: 10px; }
  .menu .row { display: contents; }
  .btn.big { padding: 12px; font-size: 18px; }
  .toast { bottom: 24px; }
}
/* Short portrait phones (browser bars showing, iPhone SE): tighter home screen so the menu fits. */
@media (orientation: portrait) and (max-height: 600px) {
  #home .hero { display: none; }
}
@media (orientation: portrait) and (max-height: 700px) {
  #home { gap: 14px; }
  .logo h1 { font-size: 44px; }
  .btn.big { padding: 14px; font-size: 18px; }
}
/* Narrow phones (320 px): keep the HUD score on one line. */
@media (max-width: 359px) {
  .hud { gap: 6px; }
  #hole-label { font-size: 18px; }
  .hud-score { font-size: 13px; white-space: nowrap; }
  .hud .coins-pill.small { padding: 5px 9px 5px 6px; gap: 4px; }
}