:root{color-scheme:light;--paper:#f4efe3;--ink:#1f2a22;--muted:#5b665d;--line:#cfc7b6;--green:#2f6b3a;--green-soft:#e2ecd9;--accent:#d2532f;--card:#fffdf7;font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",Calibri,"Segoe UI",system-ui,sans-serif;font-size:17px;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
/* A hidden view or panel is never rendered, whatever layout rule applies to its class at a breakpoint. */
[hidden]{display:none !important}
html,body{margin:0}
body{line-height:1.5;overflow-x:clip;-webkit-text-size-adjust:100%}
button,summary{font:inherit}
button,a,summary,canvas{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:10px 18px;min-height:46px;font-weight:650;line-height:1.3}
button:hover:not(:disabled){background:var(--green-soft)}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.primary{background:var(--green);color:#fff;border-color:var(--green)}
.primary:hover:not(:disabled){background:#265a2f;color:#fff}
.quiet{border-color:var(--line);background:transparent;font-weight:550}
a{color:inherit;text-underline-offset:3px}
p{margin:0 0 12px}
h1,h2,h3{line-height:1.15;margin:0;text-wrap:balance}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:.9rem;color:var(--muted)}
.notice{margin:16px;padding:14px;border:2px solid var(--accent);border-radius:12px}

.game{width:min(100%,560px);margin-inline:auto;padding:0 16px 8px}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:12px 0 6px}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:.95rem;min-height:44px}
.brand svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2}
.title{font-size:1.35rem;letter-spacing:.01em;font-weight:800;color:var(--green);white-space:nowrap}
html.large-text .title,html.large-text #hud-text{white-space:normal}

/* Course selection */
.lede{font-size:1.15rem;font-weight:600;margin:6px 0 16px}
.course-list{display:grid;gap:16px}
.course-card{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-areas:"art copy" "actions actions";gap:10px 14px;padding:12px;border:2px solid var(--ink);border-radius:18px;background:var(--card);box-shadow:4px 5px 0 #d8d3c3;align-items:center}
.course-card canvas{grid-area:art;width:118px;height:auto;border-radius:12px;display:block;border:2px solid var(--ink)}
.course-card .copy{grid-area:copy;min-width:0}
.course-card h3{font-size:1.3rem;font-weight:800}
.course-card .tagline{margin:2px 0 6px;font-size:.95rem}
.course-card .meta{margin:0;font-size:.9rem;color:var(--muted)}
.course-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:8px}
.course-actions button{flex:1 1 120px;padding-inline:12px}
.course-actions .resume-note{flex-basis:100%;margin:2px 0 0;font-size:.9rem;color:var(--green);font-weight:650}
/* Play */
.hud{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:4px 0 8px;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;line-height:1.3}
@media (min-width:360px){#hud-text{white-space:nowrap}}
.hud-button{min-height:44px;padding:6px 14px;font-size:.95rem}
/* The canvas takes each hole's own proportions (--hole-ratio, set by the game) so the green fills it. */
#course{display:block;width:100%;height:auto;aspect-ratio:var(--hole-ratio,0.565);max-height:calc(100svh - 150px);margin-inline:auto;border-radius:10px;border:2px solid var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:var(--green-soft)}
.play{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* While a shot is being dragged, nothing on the page is selectable: the finger often leaves the course. */
html.is-dragging,html.is-dragging *{user-select:none !important;-webkit-user-select:none !important;-webkit-touch-callout:none !important}
.line{margin:10px 0 6px;font-weight:600;text-align:center;min-height:1.5em}
.play-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.course-label{color:var(--muted);font-size:.95rem;font-weight:600}
.fullscreen-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;font-size:.95rem}
.sheet{margin-top:12px;padding:16px;border:2px solid var(--ink);border-radius:16px;background:var(--card);text-align:center;box-shadow:0 8px 24px rgba(31,42,34,.28)}
/* Phones: the next action floats over the finished hole instead of sitting below the fold. */
@media (max-width:699px){.sheet{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,340px);margin:0;z-index:2}}
.sheet h2{font-size:1.5rem;margin-bottom:4px}
.sheet p{margin-bottom:12px}
.sheet button{width:100%;margin-top:8px}

/* Results */
.results h2{font-size:1.6rem;margin:6px 0 4px}
.scorecard{width:100%;border-collapse:collapse;margin:10px 0 14px;font-variant-numeric:tabular-nums}
.scorecard th,.scorecard td{padding:7px 6px;text-align:center;border-bottom:1px solid var(--line)}
.scorecard th:first-child,.scorecard td:first-child{text-align:left}
.scorecard tfoot td,.scorecard .total td{font-weight:800;white-space:nowrap}
.scorecard .under{color:var(--green);font-weight:700}
.scorecard .over{color:var(--accent)}
.results-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.results-actions .copy-scorecard{grid-column:1/-1}

/* Pause dialog */
.pause{border:2px solid var(--ink);border-radius:18px;padding:18px;width:min(92vw,360px);max-height:min(90svh,640px);overflow:auto;background:var(--card);color:var(--ink)}
.pause::backdrop{background:rgba(31,42,34,.55)}
.pause h2{font-size:1.4rem;margin-bottom:12px}
.pause-actions{display:grid;gap:8px}
.pause-actions button{width:100%}
#abandon-confirm button,#help-panel button,#hole-picker button{width:100%;margin-top:8px}
.hole-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hole-grid button{padding:8px 4px;min-height:52px;font-size:.95rem;line-height:1.2}
.hole-grid button small{display:block;font-weight:500;color:var(--muted)}

.site-footer{width:min(100%,560px);margin:20px auto 0;padding:14px 16px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:6px}
.site-footer a{display:inline-flex;align-items:center;min-height:40px;font-size:.95rem}

/* Consent card (shared prompt, styled here) */
.rtg-consent{border:2px solid var(--ink);border-radius:14px;background:var(--card);padding:12px 14px;box-shadow:4px 5px 0 #d8d3c3;font-size:.95rem}
.rtg-consent p{margin:0 0 10px}
/* Phones: a shorter card so it fits the room under the course cards (the shared prompt hides itself when it would cover them). */
@media (max-width:699px){.rtg-consent{padding:8px 10px;font-size:.9rem;line-height:1.3}.rtg-consent p{margin:0 0 6px}}
.rtg-consent-actions{display:flex;gap:8px}
.rtg-consent-actions button{flex:1;min-height:44px;padding:6px 10px}
.rtg-consent-allow{background:var(--green);color:#fff;border-color:var(--green)}

/* Information pages */
.document{width:min(100%,640px);margin-inline:auto;padding:16px 16px 40px}
.document h1{font-size:1.9rem;margin:16px 0 12px}
.document h2{font-size:1.25rem;margin:22px 0 8px}
.document p{font-size:1rem}

/* Full screen: HUD, course, one line and the controls fit one screen. */
.fullscreen-fit{display:contents}
html.game-fullscreen-lock{overflow:hidden;overscroll-behavior:none}
.game.is-fullscreen{position:fixed;inset:0;z-index:2147483001;width:auto;max-width:none;margin:0;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:var(--paper);overflow:auto;overscroll-behavior:none;display:grid;gap:6px;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr)}
.game.is-fullscreen .top,.game.is-fullscreen #save-note{display:none}
.game.is-fullscreen .view{display:contents}
.game.is-fullscreen .view[hidden]{display:none}
.game.is-fullscreen .hud{padding:0 2px}
.game.is-fullscreen .fullscreen-fit{display:grid;place-items:center;container-type:size;min-height:0;min-width:0}
.game.is-fullscreen #course{width:min(100cqw,calc(100cqh * var(--hole-ratio,0.565)));max-height:none;height:auto}
.game.is-fullscreen .line{margin:0}
@media (max-width:699px){.game.is-fullscreen .course-label{display:none}}
.game.is-fullscreen .sheet{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,340px);margin:0;z-index:2}
.game.is-fullscreen .course-list,.game.is-fullscreen .lede,.game.is-fullscreen .results h2,.game.is-fullscreen #results-summary,.game.is-fullscreen .scorecard,.game.is-fullscreen .results-actions{grid-column:1}
.game.is-fullscreen[data-view="play"] .play-controls{display:flex}

@media (min-width:700px){
  .game{width:min(100%,1040px);padding-inline:24px}
  .top{padding-top:18px}
  .title{font-size:1.6rem}
  .select{max-width:720px;margin-inline:auto}
  .course-list{grid-template-columns:1fr 1fr}
  .course-card{grid-template-columns:140px minmax(0,1fr)}
  .course-card canvas{width:140px}
  .play{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto auto;column-gap:28px;align-items:start}
  .play .hud{grid-column:2;grid-row:1;grid-template-columns:1fr;gap:8px 12px;padding-top:0;font-size:1.2rem;min-width:0}
  .play #course{grid-column:1;grid-row:1/6;max-height:calc(100svh - 120px);width:auto;max-width:100%}
  .play .line{grid-column:2;grid-row:2;text-align:left;margin-top:14px}
  .play .play-controls{grid-column:2;grid-row:3;flex-direction:column;align-items:stretch}
  .play .sheet{grid-column:2;grid-row:4}
  .results{max-width:640px}
  .game.is-fullscreen{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto auto minmax(0,1fr);column-gap:22px}
  .game.is-fullscreen .fullscreen-fit{grid-column:1;grid-row:1/5}
  .game.is-fullscreen .hud{grid-column:2;grid-row:1}
  .game.is-fullscreen .line{grid-column:2;grid-row:2;text-align:left}
  .game.is-fullscreen .play-controls{grid-column:2;grid-row:3}
  .game.is-fullscreen .sheet{position:static;transform:none;width:auto;grid-column:2;grid-row:4;align-self:start}
}
@media (orientation:landscape) and (max-height:500px){
  .play{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,200px);column-gap:14px;align-items:start}
  .play #course{grid-column:1;grid-row:1/5;max-height:calc(100svh - 24px);width:auto;max-width:100%}
  .play .hud{grid-column:2;grid-row:1;grid-template-columns:1fr;gap:4px;font-size:.95rem;min-width:0}
  .play #hud-text{white-space:normal}
  .play .line{grid-column:2;grid-row:2;text-align:left;font-size:.95rem}
  .play .play-controls{grid-column:2;grid-row:3;flex-direction:column;align-items:stretch}
  .game[data-view="play"] .top{display:none}
  .play #course{max-height:calc(100svh - 16px)}
  .play .sheet{position:fixed;left:auto;right:12px;bottom:12px;transform:none;width:min(46vw,300px);padding:10px}
  .play .sheet h2{font-size:1.15rem}
  .game.is-fullscreen{grid-template-columns:minmax(0,1fr) clamp(150px,30vw,240px);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:12px}
  .game.is-fullscreen .fullscreen-fit{grid-column:1;grid-row:1/5}
  .game.is-fullscreen .hud{grid-column:2;grid-row:1;grid-template-columns:1fr;font-size:.9rem}
  .game.is-fullscreen .line{font-size:.9rem}
  .game.is-fullscreen .hud-button,.game.is-fullscreen .fullscreen-toggle{min-height:44px;padding:4px 10px;font-size:.9rem}
  .game.is-fullscreen .course-label{display:none}
  .game.is-fullscreen .line{grid-column:2;grid-row:2;text-align:left}
  .game.is-fullscreen .play-controls{grid-column:2;grid-row:3}
  .game.is-fullscreen .sheet{position:fixed;left:auto;right:12px;bottom:12px;transform:none;width:min(46vw,300px);padding:10px;grid-column:auto;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){.sheet,.pause{transition:none}}