: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}
/* Masthead: the game's own mark and name. Dayplay Games is a quiet publisher credit in the footer, so the
   masthead stays one short row on every phone and the course keeps the room. */
.title{font-size:1.45rem;letter-spacing:.01em;font-weight:800;color:var(--green);white-space:nowrap}
.game-name{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:inherit}
.game-mark{width:36px;height:36px;flex:none;display:block}
.publisher{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:.85rem;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.publisher img{width:20px;height:20px;border-radius:5px;display:block}
.publisher:hover span{text-decoration:underline}
html.large-text .title,html.large-text #hud-text,html.large-text .publisher{white-space:normal}
/* Enlarged text: course cards stack their art above the copy so long course names never widen the page
   (which also pushed the floating analytics card past the screen edge on narrow phones). */
html.large-text .course-card,html.large-text .course-card.daily{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "copy" "actions"}

/* 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}
/* The Daily Nine sits first, on the green, so the day's round is the obvious place to start. */
.course-card.daily{background:var(--green-soft);border-color:var(--green);box-shadow:4px 5px 0 #b9cdb0}
.course-card.daily h3{color:var(--green)}
/* Short or narrow phones: brand and title share one row, and the Daily Nine card drops its preview
   art (every course card below keeps one), so its play button sits high on the first screen and the
   analytics card has room under it without covering the heading or that button. */
@media (max-width:359px){.title{font-size:1.3rem}.game-name{gap:8px}.game-mark{width:32px;height:32px}}
@media (max-width:699px) and (max-height:640px) and (orientation:portrait){.course-card.daily{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "actions"}.course-card.daily canvas{display:none}}
@media (min-width:700px){.course-card.daily{grid-column:1/-1;grid-template-columns:140px minmax(0,1fr) auto;grid-template-areas:"art copy actions"}.course-card.daily .course-actions{flex-direction:column;align-items:stretch;min-width:220px}.course-card.daily .course-actions .resume-note{text-align:center}}
/* Play */
/* On narrow phones the HUD text may wrap to two lines; two lines fit the Menu button's 44px row, so the
   row (and the course under it) keeps its height whatever the stroke count. */
.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.25}
.hud-button{min-height:44px;padding:6px 14px;font-size:.95rem}
#hud-text{min-width:0;overflow:hidden}
.hud-items{display:flex;flex-wrap:wrap;margin-left:-1.1em}
.hud-item{white-space:nowrap}
.hud-dot{display:inline-block;width:1.1em;text-align:center}
/* 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)}
/* During a round nothing on the page (masthead, HUD, status line, controls, footer) is selectable or long-press
   callout-able: a pullback often starts just off the course or sweeps off it over text. */
html.is-playing body,.play,.game.is-fullscreen{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}
/* The status line is one grid cell holding the live text plus hidden copies of the hole's hint and the
   longest in-play message (set by the game), so its height never changes while a hole is played. */
.line{margin:10px 0 6px;font-weight:600;text-align:center;display:grid;min-height:1.5em}
.line::before,.line::after,.line-text{grid-area:1/1}
.line::before{content:attr(data-hint);visibility:hidden}
.line::after{content:attr(data-long);visibility:hidden}
/* Enlarged text on wide screens: once a hole's card is up there is nothing left to aim, so the reserve is
   released and the side column (HUD, line, controls and the card) still fits one full screen. */
@media (min-width:700px){html.large-text #view-play:has(> #hole-done:not([hidden])) .line::before,html.large-text #view-play:has(> #hole-done:not([hidden])) .line::after{display:none}}
.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}
.more-games{margin:14px 0 0;text-align:center}
.more-games a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;color:var(--green)}
/* Full screen shows the game's own name beside the exit button; nothing else is branded there. */
.fs-name{display:none;align-items:center;gap:8px;font-weight:800;color:var(--green);white-space:nowrap}
.fs-name .game-mark{width:26px;height:26px}

/* 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 .publisher{margin-bottom:2px}
.site-footer a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:.95rem}

/* Consent card (shared prompt, styled here) */
.privacy-consent{border:2px solid var(--ink);border-radius:14px;background:var(--card);padding:12px 14px;box-shadow:4px 5px 0 #d8d3c3;font-size:.95rem}
.privacy-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){.privacy-consent{padding:8px 10px;font-size:.9rem;line-height:1.3}.privacy-consent p{margin:0 0 6px}}
/* Two equal buttons side by side; with enlarged text they stack instead of pushing the card past the screen edge. */
.privacy-consent-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5em),1fr));gap:8px}
.privacy-consent-actions button{min-height:44px;padding:6px 10px}
.privacy-consent-allow{background:var(--green);color:#fff;border-color:var(--green)}

/* Information pages */
.document-top{width:min(100%,640px);margin-inline:auto;padding:12px 16px 0}
.document{width:min(100%,640px);margin-inline:auto;padding:0 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}
.game.is-fullscreen .fs-name{display:inline-flex}
/* iPhone's one-time "add to Home Screen" tip floats over the top of the course instead of taking a
   row of the full-screen grid, so neither its arrival nor its timeout moves the course. */
.fullscreen-tip{position:fixed;z-index:3;top:calc(max(8px,env(safe-area-inset-top)) + 56px);left:50%;transform:translateX(-50%);width:min(92vw,400px);display:flex;align-items:center;gap:8px;padding:8px 6px 8px 14px;border-radius:12px;background:var(--ink);color:var(--paper);box-shadow:0 8px 24px rgba(31,42,34,.3)}
.fullscreen-tip p{margin:0;font-size:.9rem;line-height:1.35}
.fullscreen-tip button{flex:none;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:inherit}
.fullscreen-tip button:hover:not(:disabled){background:rgba(255,255,255,.12)}

@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;width:min(100%,calc((100svh - 120px) * var(--hole-ratio,0.565)));max-height:none}
  .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;width:min(100%,calc((100svh - 16px) * var(--hole-ratio,0.565)));max-height:none}
  .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 .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}}

/* Leaderboards. Everything here stays hidden until the service says boards are open on this host. */
:root{--dpb-bg:var(--card);--dpb-ink:var(--ink);--dpb-muted:var(--muted);--dpb-line:var(--line);--dpb-accent:var(--green);--dpb-accent-ink:#fff;--dpb-you:var(--green-soft)}
.boards-open{min-height:44px;padding:0 14px;font-size:.95rem} /* short label: with the title it must fit one row on a 320px phone, or the page jumps when it appears */
.game[data-view="play"] .boards-open{display:none}
.results-boards{margin:0 0 14px;padding:12px 14px;border:2px solid var(--line);border-radius:14px;background:var(--card)}
.results-boards[data-state="named"]{min-height:6.5rem}
.results-boards[data-state="name"]{min-height:11rem}
.boards-line{margin:0 0 8px;font-weight:650}
.boards-see{min-height:44px;padding:0 14px}
.sheet .hole-board{min-height:1.5em;margin:0 0 8px;font-size:.92rem;color:var(--muted)}

.player-choice{margin:0 0 16px;padding:14px;border:2px solid var(--line);border-radius:14px;background:var(--card)}
.player-choice p{margin:0 0 10px}.player-choice-actions{display:flex;flex-wrap:wrap;gap:8px}.player-choice button{min-height:44px;padding:8px 14px}.player-choice #player-name-form{margin-top:14px}

.top .title{min-width:0;max-width:100%;white-space:normal}.game-name{max-width:100%;min-width:0}.game-name span{min-width:0;overflow-wrap:anywhere}.publisher{max-width:100%;white-space:normal}.publisher span{min-width:0;overflow-wrap:anywhere}

/* First-visit tutorial (lib/game-tutorial.mjs) in Mini Golf's colours; the look and layout are shared. */
:root{--dpt-bg:var(--card);--dpt-ink:var(--ink);--dpt-muted:var(--muted);--dpt-line:var(--line);--dpt-tint:var(--green-soft);--dpt-accent:var(--green);--dpt-accent-ink:#fff}
.tutorial-row{margin:0 0 12px}