/* Chains / resort sports: clean aqua, coral actions, refractive white glass. Display type is a vendored OFL condensed face. */
/* Barlow Condensed (OFL, via @fontsource/barlow-condensed): Latin, plus Latin Extended for accented names. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/barlow-condensed-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/barlow-condensed-700-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/barlow-condensed-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/barlow-condensed-800-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --accent: #087d9c; --ink: #12374e; --mint: #5cf0a8; --black: #0c1114;
  --text: #153a50; --muted: #426378; --border: #ffffffa6;
  --surface: linear-gradient(145deg, #ffffffb8, #e4f7ff94); --ease: cubic-bezier(.2, 0, 0, 1);
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--text); font: 15px/1.35 "Segoe UI", system-ui, -apple-system, sans-serif; overscroll-behavior: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
html { height: 100dvh; }
body { -webkit-user-select: none; user-select: none; }
html, body, button, input, .overlay, #hud { touch-action: manipulation; }   /* iOS Safari ignores user-scalable=no: no double-tap zoom on quick repeated taps */
input { -webkit-user-select: text; user-select: text; }
#gestureTrace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; color: #5cf0a8; }
#gestureTrace.active { opacity: 1; }
#gestureTrace.invalid { color: #ff6d68; }
#gestureTrace polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#gestureTrace .trace-edge { stroke: #12374e99; stroke-width: 10; }
#gestureTrace .trace-line { stroke: currentColor; stroke-width: 4; }
#gestureTrace circle { fill: currentColor; stroke: #ffffff; stroke-width: 2; }
@media (pointer: coarse) { button { min-height: 44px; } input { font-size: 16px; } }
.hidden { display: none !important; }
button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 14px; font: inherit; font-weight: 650; color: inherit; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(155deg, #ffffffb8, #e5f6ff6b); box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #96c6da55, inset 0 0 9px #ffffff40, 0 3px 9px #17496918; backdrop-filter: blur(14px) saturate(1.45); -webkit-backdrop-filter: blur(14px) saturate(1.45); cursor: pointer; user-select: none; transition: transform 150ms var(--ease), background-color 120ms, border-color 120ms, color 120ms; }
button:active:not(:disabled) { transform: scale(.96); }
button:disabled { cursor: default; }
button.primary { background: linear-gradient(180deg, #ffffff38, #ffffff00 52%), linear-gradient(135deg, #ff7c69f0, #ee4a57e8); color: #fff; border-color: #ffc7ba; box-shadow: inset 0 1px 1px #ffe3da, inset 0 -1px 1px #a0263c40, 0 1px 2px #0c111426, 0 8px 22px #0c111424; font-weight: 800; text-shadow: 0 1px 1px #a0263c55; }   /* liquid glass: a specular rim and a neutral drop, no coloured halo */
button.on { color: #075d81; border-color: #42b2d1; background: #c9f1ffb8; box-shadow: inset 0 -2px var(--accent); }
button:focus-visible, input:focus-visible { outline: 3px solid #087baf; outline-offset: 3px; }
@media (hover: hover) { button:hover:not(:disabled) { background-color: #ffffffb8; border-color: #ffffff; } button.primary:hover { background: #ff7c78df; border-color: #fff0e5; } button.on:hover { background-color: #bbf0ff; border-color: var(--accent); } }
.icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: none; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
input { min-width: 0; width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid #ffffffb0; border-radius: 8px; background: #ffffff80; color: var(--text); font: inherit; box-shadow: inset 0 2px 5px #27668112; }
input::placeholder { color: #587c91; }
input:focus { border-color: var(--accent); }
.panel { position: relative; padding: 18px; border: 1px solid #ffffffb8; border-top-color: #fffffff0; border-radius: 22px; background: var(--surface); box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #87b9d755, inset 0 0 12px #ffffff30, 0 12px 35px #12506a26; backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--sat)) 16px calc(16px + var(--sab)); overflow: auto; background: #4b9bc633; }
.overlay .panel { width: min(440px, 100%); max-height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #81928060 transparent; }
h2 { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; line-height: 1; margin: 0 0 6px; }
.eyebrow { font-family: var(--display); font-size: 12px; letter-spacing: 1.8px; font-weight: 700; text-transform: uppercase; color: var(--accent); }
.panel > .eyebrow { display: flex; align-items: center; gap: 8px; }
.panel > .eyebrow .icon { width: 16px; height: 16px; }
.muted { color: var(--muted); font-size: 12px; font-weight: 450; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row2 { display: flex; gap: 8px; }
.row2 > button { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack > * { flex-shrink: 0; }
.big { width: 100%; padding: 13px; font-size: 15px; min-height: 48px; }
.f { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 650; color: var(--muted); }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: #4997b61c; border: 1px solid #ffffff60; }
.seg button { flex: 1; min-width: 0; min-height: 32px; padding: 6px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.seg button:not(.on) { background: transparent; border-color: transparent; color: #3d637b; box-shadow: none; }
.seg button.on { background: #ffffffcf; color: #08799b; border-color: #fff; box-shadow: 0 1px 4px #0003; }
.quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); font-size: 12px; }
/* Clubhouse. Leave the golfer and course visible above the command panel. */
.overlay.hub, .overlay.locker { align-items: flex-end; padding-bottom: calc(12px + var(--sab)); background: linear-gradient(180deg, #c1edff18, transparent 28%, #c7f0ff14 65%, #a9dfff35); }
.overlay.hub { padding-top: calc(84px + var(--sat)); }
.hub-top { position: fixed; top: calc(14px + var(--sat)); left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.hub-top > * { pointer-events: auto; }
.brand { color: #fff; padding: 0 0 5px; font-family: var(--display); font-size: 50px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; line-height: .9; text-shadow: 0 2px 0 #0c111433, 0 6px 18px #0c628840; }
.brand small { display: block; margin: 0 0 6px 3px; font-size: 11px; font-weight: 700; letter-spacing: 3.5px; color: #fff; }
.brand::after { content: ''; display: block; width: 42px; height: 4px; background: var(--mint); margin: 7px 0 0 2px; transform: skewX(-24deg); }
/* Hosted by Huck Yeah (main.js): its way back sits above the brand, and the clubhouse takes the host's amber for the one
   thing to do next and its field green for labels. The glass stays: it reads over the course. */
.hub-brand { display: flex; flex-direction: column; align-items: flex-start; }
.host-home { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 12px 4px 8px; min-height: 30px; border-radius: 999px; border: 1px solid #e8a33d; background: #0a0f0bcc; color: #f2f7f1; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.host-home b { color: #e8a33d; font-weight: 800; }
.host-home .icon { width: 15px; height: 15px; }
.host-home:focus-visible { outline: 3px solid #e8a33d; outline-offset: 3px; }
@media (pointer: coarse) { .host-home { min-height: 36px; } }
:root[data-host="huckyeah"] { --mint: #e8a33d; --accent: #145e2e; }
:root[data-host="huckyeah"] button.primary { background: linear-gradient(135deg, #f2bb6de8, #e8a33dde); color: #0a0f0b; border-color: #f7d19a; box-shadow: inset 1px 1px 1px #f7d19a, inset -1px -1px 1px #b8751655, 0 3px 0 #7a4a0e55, 0 7px 20px #b8751625; }
:root[data-host="huckyeah"] button.on { color: #0d431f; border-color: #3fbf6a; box-shadow: inset 0 -2px #145e2e; }
.pcard { gap: 9px; max-width: 48%; padding: 7px 10px; text-align: left; border-radius: 12px; background: linear-gradient(140deg, #ffffffbb, #d9f4ff80); }
.pcard .sw { display: grid; place-items: center; width: 34px; height: 38px; flex: none; border-radius: 7px; box-shadow: inset 0 1px #fff5, inset 0 -8px 12px #0004; }
.pcard .sw .icon { width: 23px; height: 23px; }
.pcard > div { min-width: 0; }
.pcard b { display: block; font-family: var(--display); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; }
.pcard .muted { font-size: 10px; }
.hub-main { width: min(440px, 100%); gap: 10px; padding: 14px; border-radius: 26px; background: linear-gradient(180deg, #ffffff47, #ffffff00 34%), linear-gradient(145deg, #ffffff9e, #e4f7ff66); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #ffffff70, inset 0 0 0 1px #ffffff40, 0 2px 6px #0c11141a, 0 18px 44px #0c111433; backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); }   /* thinner glass than the other sheets: the staged woods tint through */
.play-cta { min-height: 68px; justify-content: flex-start; gap: 13px; padding: 10px 16px; border-radius: 12px; margin-bottom: 3px; text-align: left; }
.play-cta > [data-icon=play] .icon { width: 26px; height: 26px; fill: currentColor; margin-left: 1px; }
.play-cta .cta-copy { display: flex; flex: 1; flex-direction: column; gap: 1px; }
.play-cta strong { font-family: var(--display); font-size: 31px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; line-height: 1; }
.play-cta small { font-size: 11px; font-weight: 600; color: #fff3ef; }
.play-cta .cta-end { display: flex; padding-left: 13px; border-left: 1px solid #242e2330; }
.mode-btn { font-family: var(--display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; min-height: 44px; background: linear-gradient(145deg, #ffffffaa, #d7f0ff80); }
.mode-btn .icon { width: 18px; height: 18px; color: #1884a5; }
.round-opts { border-radius: 12px; background: #ffffff33; box-shadow: inset 0 1px 1px #ffffffc0, inset 0 0 0 1px #ffffff55; }
.round-opts summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; list-style: none; cursor: pointer; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink); }
.round-opts summary::-webkit-details-marker { display: none; }
.round-opts summary .icon { width: 18px; height: 18px; color: var(--accent); }
.round-opts summary:focus-visible { outline: 3px solid #087baf; outline-offset: 2px; border-radius: 12px; }
.ro-title { white-space: nowrap; }
.ro-sum { margin-left: auto; overflow: hidden; color: var(--muted); font-weight: 700; letter-spacing: .3px; white-space: nowrap; text-overflow: ellipsis; }
.ro-chev { display: flex; flex: none; }
.ro-chev .icon { width: 14px !important; height: 14px !important; color: var(--muted) !important; transition: transform 150ms var(--ease); }
.round-opts[open] .ro-chev .icon { transform: rotate(90deg); }
.round-settings { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.round-settings .f { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; }
.round-settings .seg { flex: 0 1 210px; letter-spacing: .4px; }
.round-settings .seg button { padding: 6px 7px; font-size: 13px; }
/* Course art is an actual destination preview, with a readable lower scrim. */
.ccard { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 114px; padding: 16px; border-radius: 12px; text-align: left; overflow: hidden; isolation: isolate; background: #213f31; outline: 1px solid #ffffff1a; outline-offset: -1px; }
.ccard .cmap { position: absolute; inset: 0; z-index: -2; }
.ccard .cmap img, .ccard .cmap svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.ccard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #071b16ed, #0c211879 75%, #10221848), linear-gradient(0deg, #061a15c9, transparent); }
.ccard .cinfo { min-width: 0; flex: 1; }
.ccard .cinfo b { display: block; font-family: var(--display); font-size: 26px; letter-spacing: .3px; text-transform: uppercase; font-weight: 800; line-height: 1; margin: 3px 0 5px; }
.ccard .cinfo .muted { display: block; font-size: 11px; color: #d0dccb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard .cinfo .eyebrow { font-size: 11px; letter-spacing: 1.6px; color: #ffe1a3; }
.ccard .chev { display: flex; flex: none; padding: 7px; background: #ffffff10; border: 1px solid #ffffff35; border-radius: 50%; }
.ccard .chev .icon { width: 15px; height: 15px; }
.ccard.on { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 3px 9px #17496918; }   /* an even 2px ring, the lit chevron says the rest */
.ccard.on .chev { color: #15241d; background: var(--accent); border-color: var(--accent); }
#btnCourses { min-height: 96px; padding: 12px 14px; }
#btnCourses .cinfo b { font-size: 21px; }   /* one hero on the hub card: Play round; the course name sits a step under it */
/* Locker room equipment controls. */
.overlay.locker .panel { max-height: 56vh; }
.opt { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid #ffffff10; }
.opt > span { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.sw-row { display: flex; gap: 9px; flex-wrap: wrap; padding: 3px; }
.sw-row button { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 9px; border: 2px solid #ffffff55; box-shadow: inset 0 -7px 8px #0003; }
.sw-row button.on { border-color: #075d81; outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: inset 0 -7px 8px #0003; }
.sw-row button.on::after { content: ''; width: 9px; height: 5px; border: solid white; border-width: 0 0 2px 2px; transform: rotate(-45deg); filter: drop-shadow(0 1px 2px #000); }
.opt input[type=number] { width: 90px; }
#btnRandomAvatar { font-size: 11px; padding: 8px 10px; min-height: 36px; }
#locker h2 { font-size: 26px; }

/* Live HUD: edge plates in the corners, an aim and power ring at bottom-centre, and a clear fairway between. */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--display); }
#hud > * { pointer-events: auto; }
#hud button:focus-visible { outline-color: #fff; }
#top { position: absolute; top: calc(12px + var(--sat)); left: 12px; width: 236px; pointer-events: none; color: #fff; text-transform: uppercase; filter: drop-shadow(0 3px 8px #0005); }
/* Both lines belong to the plate, a black tab above it and a pale strip under it, so neither floats loose on the scenery. */
#holeInfo, #throwNo { display: flex; gap: 8px; padding: 5px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .8px; line-height: 1; white-space: nowrap; }
#holeInfo { width: fit-content; padding-right: 18px; background: var(--black); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%); }
#throwNo { justify-content: space-between; background: #d9faea; color: var(--black); }
#dist { font-weight: 800; letter-spacing: .5px; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* the live distance rides the strip, as broadcast plates do; the tag over the pin says it big */
#holeLabel::after { content: '·'; margin-left: 8px; opacity: .7; }
#playerInfo { display: flex; align-items: stretch; background: var(--mint); color: var(--black); }
#playerName { flex: 1; min-width: 0; padding: 5px 10px 4px; font-size: 26px; font-weight: 800; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#toPar { display: grid; place-items: center; min-width: 50px; padding: 0 10px; background: var(--black); color: #fff; font-size: 24px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* the round's score to par: the player's standing at a glance */
#conditions { position: absolute; right: 12px; bottom: calc(62px + var(--sab)); display: flex; gap: 14px; padding: 7px 10px 6px; pointer-events: none; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; border: 1px solid #ffffff2e; border-radius: 8px; background: #0c1114c4; box-shadow: 0 2px 8px #0006; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#conditions b { font-weight: 800; margin-left: 3px; }
#wind { display: inline-flex; align-items: center; gap: 4px; }
#windArrow { display: inline-flex; color: var(--mint); transition: transform 150ms; }
#windArrow .icon { width: 13px; height: 13px; }
#utilities { position: absolute; right: 12px; top: calc(12px + var(--sat)); z-index: 4; display: flex; gap: 8px; }
/* Sound is one tap away everywhere: beside the course tools in a round, beside the locker card in the clubhouse. */
.sound-toggle .icon { width: 22px; height: 22px; }
.sound-toggle.muted-sound { opacity: .8; }
/* Clubhouse corner: a narrow column on the right edge, so the locker tile and sound never sit over the athlete's face (a phone's
   browser bars shorten the view and frame him higher, which put his face under the old wide locker card). */
.hub-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hub-tools .pcard { flex-direction: column; gap: 3px; width: 58px; max-width: none; padding: 6px 4px 5px; text-align: center; }
.hub-tools .pcard > div { width: 100%; }
.hub-tools .pcard b { font-size: 12px; line-height: 1.1; }
.hub-tools .pcard .muted { display: block; font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.hub-sound { width: 58px; height: 46px; min-height: 46px; flex: none; padding: 0; border-radius: 12px; background: linear-gradient(140deg, #ffffffbb, #d9f4ff80); color: var(--ink); }
@media (orientation: portrait) and (max-height: 640px) {   /* the clubhouse panel starts ~90px down: no room for the column */
  .hub-tools { flex-direction: row; }
  .hub-tools .pcard { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .hub-tools .pcard > div { display: none; }
  .hub-sound { width: 46px; }
}
#btnMute, #btnUtilities { width: 46px; height: 46px; padding: 0; border-radius: 10px; border-color: #ffffff2e; background: #0c1114c4; color: #fff; box-shadow: 0 2px 8px #0006; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#btnUtilities[aria-expanded=true] { color: var(--black); background: var(--mint); border-color: var(--mint); }
#sideBtns { position: absolute; top: 54px; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 224px; padding: 8px; border: 1px solid #ffffff2a; border-radius: 12px; background: #0c1114e6; color: #fff; box-shadow: 0 8px 26px #0008; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#sideBtns button { width: auto; height: 46px; min-height: 46px; padding: 7px; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; justify-content: flex-start; border-radius: 8px; border-color: transparent; background: #ffffff10; color: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#sideBtns button .icon { width: 18px; height: 18px; }
#sideBtns button.on { background: var(--mint); color: var(--black); border-color: var(--mint); }
.sound-toggle .sound-icons { display: grid; place-items: center; }
.sound-toggle .sound-icons > span { grid-area: 1/1; transition: opacity 150ms var(--ease), transform 150ms var(--ease), filter 150ms var(--ease); }
.sound-toggle:not(.muted-sound) .sound-off, .sound-toggle.muted-sound .sound-on { opacity: 0; transform: scale(.25); filter: blur(4px); }
.sound-toggle:not(.muted-sound) .sound-on, .sound-toggle.muted-sound .sound-off { opacity: 1; transform: scale(1); filter: blur(0); }
/* Equipment: two compact chips in the bottom corners; their pickers pop up above them. */
#hud > #controls { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--sab)); z-index: 3; pointer-events: none; }
.equipment-summary { display: flex; justify-content: space-between; }
.equipment-summary > button { pointer-events: auto; width: 110px; min-height: 40px; padding: 4px 6px 4px 8px; gap: 6px; justify-content: flex-start; border-radius: 8px; border-color: #ffffff2e; background: #0c1114c4; color: #fff; box-shadow: 0 2px 8px #0006; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.equipment-summary > button .icon { width: 18px; height: 18px; }
.equipment-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; text-align: left; }
.equipment-copy small { color: var(--mint); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1; }
.equipment-copy b { max-width: 100%; font-size: 13px; font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipment-summary .picker-chevron { display: none; }   /* ponytail: the chip is 110px; the mint eyebrow already says it opens */
[aria-expanded=true] .picker-chevron .icon { transform: rotate(90deg); }
.equipment-summary > button[aria-expanded=true] { border-color: var(--mint); background: #0c1114ee; }
#throwRow, #discRow { position: absolute; bottom: calc(100% + 8px); display: grid; gap: 5px; padding: 6px; pointer-events: auto; border: 1px solid #ffffff2a; border-radius: 12px; background: #0c1114e6; color: #fff; box-shadow: 0 8px 28px #0008; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#throwRow { left: 0; width: min(100%, 440px); grid-template-columns: repeat(5, minmax(0, 1fr)); }
#discRow { right: 0; width: min(100%, 360px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
#throwRow button, #discRow button { min-width: 0; min-height: 54px; padding: 6px 2px; gap: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #fff; border-color: transparent; border-radius: 8px; background: #ffffff10; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#throwRow button { flex-direction: column; }
#throwRow button .icon { width: 21px; height: 21px; }
#discRow button { flex-wrap: wrap; }
#discRow button .muted { display: block; flex-basis: 100%; font-size: 10px; font-weight: 700; color: #ffffff99; text-align: center; }
#throwRow button.on, #discRow button.on { background: var(--mint); color: var(--black); border-color: var(--mint); }
#discRow button.on .muted { color: #0c111499; }
.dot { width: 12px; height: 12px; flex: none; border-radius: 50%; display: inline-block; border: 1px solid #ffffff55; box-shadow: inset 0 -3px 3px #0004; }
@media (hover: hover) {
  .equipment-summary > button:hover:not(:disabled), #btnUtilities:hover:not(:disabled) { background-color: #1a2328; border-color: #ffffff55; }
  #throwRow button:hover:not(:disabled), #discRow button:hover:not(:disabled), #sideBtns button:hover:not(:disabled) { background-color: #ffffff24; border-color: #ffffff30; }
  #throwRow button.on:hover, #discRow button.on:hover, #sideBtns button.on:hover { background-color: var(--mint); border-color: var(--mint); }
}
/* Swipe zone: the lower 40% is transparent input; the only chrome is a one-line hint above the ring. */
#pad { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px calc(102px + var(--sab)); touch-action: none; user-select: none; }
#pad .hint { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 12px 6px 9px; border-radius: 999px; background: #0c1114a6; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .5s var(--ease); }
/* Aim zone: the view outside the pad. On touch screens a chip names it until the first throw; a wide screen splits for two
   thumbs (ui.css landscape block below): the left side drags the aim while the right swipes. */
#aimZone { position: absolute; left: 14px; top: 47%; z-index: 1; display: none; pointer-events: none; transition: opacity .5s var(--ease); }
#aimZone > span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #0c1114a6; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#aimZone .icon { width: 18px; height: 18px; color: var(--mint); stroke-width: 2.4; }
@media (pointer: coarse) { body[data-phase='aim'] #aimZone, body[data-phase='windup'] #aimZone { display: block; } }
body.thrown #aimZone, #hud.equipment-open #aimZone, #hud.spectating #aimZone { opacity: 0; }   /* nothing to aim while someone else is up */
#hintArrow { display: inline-flex; width: 18px; height: 18px; flex: none; color: var(--mint); }
#hintArrow .icon { width: 18px; height: 18px; stroke-width: 2.4; }
#hintSub { display: none; }
body[data-phase='windup'] #hintText, #pad.bad #hintText { display: none; }
body[data-phase='windup'] #hintSub, #pad.bad #hintSub { display: inline; }
body.thrown #pad .hint, #pad.idle .hint { opacity: 0; }
body.thrown[data-phase='windup'] #pad .hint, body.thrown #pad.bad .hint { opacity: 1; }
#pad.bad .hint { animation: shake .3s; background: #7a1d1dd6; }
@keyframes shake { 0%,100% {transform:translateX(0)} 25% {transform:translateX(-8px)} 75% {transform:translateX(8px)} }
#power { --p: 0; position: absolute; left: 50%; bottom: calc(14px + var(--sab)); width: 76px; height: 76px; margin-left: -38px; z-index: 2; pointer-events: none; }
#power::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--mint) calc(var(--p) * 1turn), #ffffff70 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); filter: drop-shadow(0 1px 3px #0008); }
#power::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid #ffffff40; }
#powerFill { position: absolute; inset: 0; transform: rotate(calc(var(--p) * 1turn)); transition: transform .04s linear; }
#powerFill::before { content: ''; position: absolute; top: -5px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--black), 0 1px 4px #0008; }
#powerLabel { position: absolute; left: 50%; bottom: calc(52px + var(--sab)); transform: translate(-50%, 50%); z-index: 2; pointer-events: none; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .5px; text-shadow: 0 1px 3px #000c; font-variant-numeric: tabular-nums; }
#power, #powerLabel { visibility: hidden; }
body[data-phase='aim'] #power, body[data-phase='windup'] #power, body[data-phase='windup'] #powerLabel, body[data-phase='release'] #power, body[data-phase='release'] #powerLabel { visibility: visible; }
#hud.equipment-open #power, #hud.equipment-open #powerLabel, #hud.equipment-open #pad .hint, #hud.equipment-open #conditions, #hud.equipment-open #waiting { visibility: hidden; }
#waiting { position: absolute; left: 50%; bottom: calc(102px + var(--sab)); transform: translateX(-50%); max-width: calc(100% - 40px); padding: 7px 14px; border: 0; border-radius: 999px; background: #0c1114b8; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#toast { position: absolute; left: 50%; top: 22%; max-width: 80%; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 0); transition: opacity .2s, transform .2s; }
#toast.show { opacity: 1; transform: translate(-50%, -8px); }
#toast b { display: block; font-size: 34px; font-weight: 850; letter-spacing: -1px; text-shadow: 0 3px 16px #000c; }
#toast span { font-size: 13px; text-shadow: 0 1px 8px #000; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 20; }
#fade.on { opacity: 1; }
body[data-phase='result'] #pad, body[data-phase='result'] #controls, body[data-phase='result'] #power, body[data-phase='result'] #powerLabel, body[data-phase='result'] #sideBtns, body[data-phase='result'] #waiting, body[data-phase='result'] #conditions, body[data-phase='result'] #utilities,
body.result-mode #pad, body.result-mode #controls, body.result-mode #power, body.result-mode #powerLabel, body.result-mode #sideBtns, body.result-mode #waiting, body.result-mode #conditions, body.result-mode #utilities { display: none; }
body[data-phase='result'] #toast, body.result-mode #toast { top: auto; bottom: calc(12% + var(--sab)); width: 92%; max-width: 650px; }
body[data-phase='result'] #toast b, body.result-mode #toast b { font-size: clamp(38px, 8vw, 62px); line-height: 1.05; letter-spacing: -1.4px; }
body[data-phase='result'] #toast span, body.result-mode #toast span { margin-top: 12px; padding: 8px 15px; font-size: clamp(14px, 3.8vw, 20px); }
/* Leaderboard and social rooms. */
table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 5px; text-align: center; border-bottom: 1px solid #19628820; }
th { color: var(--muted); font-weight: 650; }
td.name { text-align: left; font-weight: 650; white-space: nowrap; }
td.s-1, td.s-2, td.s-3 { color: #087c68; font-weight: 750; } td.s1 { color: #966200; } td.s2, td.s3, td.s4 { color: #ba3b51; }
td.cur { background: #f4cb6517; }
.stand { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 12px; border: 1px solid #ffffff18; border-radius: 10px; background: #ffffff80; }
.stand .standing-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stand .rank { display: grid; place-items: center; width: 25px; flex: none; color: var(--muted); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.stand b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.stand.win { border-color: #f4b44f; background: #fff2cdb0; }
.stand.win .rank { color: var(--accent); }
.players .row { margin-bottom: 8px; padding: 8px; border-radius: 10px; background: #ffffff08; }
.players .row button { min-height: 34px; padding: 6px 9px; }
.code { margin: 6px 0; padding: 14px; border: 1px dashed #f4cb6566; border-radius: 12px; font-size: 42px; font-weight: 800; letter-spacing: 8px; text-align: center; color: var(--accent); }
.inline-error { border: 1px solid #f3ad7f; border-radius: 8px; padding: 10px 12px; color: #8f322d; background: #ffdfdba6; font-size: 12px; }
.leave-dialog { position: fixed; inset: 0; margin: auto; width: min(380px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; color: var(--text); }
.leave-dialog::backdrop { background: #164d7770; }
.leave-dialog p { margin: 0 0 8px; line-height: 1.6; }
button[aria-busy=true] .icon { opacity: .55; }
ul.list { list-style: none; padding: 0; margin: 0 0 10px; }
ul.list li { display: flex; justify-content: space-between; margin-bottom: 6px; padding: 10px; border: 1px solid #ffffff18; border-radius: 8px; background: #ffffff80; }
.kbd { display: inline-block; padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; background: #ffffff10; }
#help .instructions > div { padding: 0 0 12px; border-bottom: 1px solid #ffffff14; color: #36576b; font-size: 13px; line-height: 1.6; }
#help .instructions b { color: var(--text); }
/* Key art (art/keyart: ChatGPT wide, Gemini tall): the wordmark sits in each image's calm area, the dark left third
   on landscape screens and the canopy on portrait phones. */
#loading { position: fixed; inset: 0; display: flex; justify-content: center; flex-direction: column; gap: 14px; z-index: 50; color: #d6e6de;
  align-items: flex-start; padding: 0 max(6vw, 24px);
  background: linear-gradient(90deg, #06120ef0, #06120ea6 32%, #06120e1f 62%, transparent), url('../assets/keyart/keyart-wide.jpg') 70% center / cover, var(--ink); }
#loading .load-brand { text-align: left; }
#loading .load-brand::after { margin-left: 2px; }
@media (orientation: portrait) {
  #loading { align-items: center; justify-content: flex-start; padding: calc(12vh + var(--sat)) 24px 0;
    background: linear-gradient(180deg, #06120ee0, #06120e8c 30%, #06120e14 55%, transparent), url('../assets/keyart/keyart-tall.jpg') center 70% / cover, var(--ink); }
  #loading .load-brand { text-align: center; }
  #loading .load-brand::after { margin: 12px auto 0; }
}
#loading .load-brand { color: #fff; font-family: var(--display); font-size: clamp(60px, 8vw, 128px); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; line-height: .9; margin-bottom: 10px; text-shadow: 0 4px 22px #0008; }
#loading .load-brand small { display: block; font-size: clamp(13px, 1.1vw, 18px); letter-spacing: 5px; color: #ffe1a3; margin-bottom: 6px; }
#loading .load-brand::after { content: ''; display: block; width: 56px; height: 5px; background: var(--mint); margin-top: 12px; transform: skewX(-24deg); }
#loading .muted { color: #d6e6de; }
.spin { width: 42px; height: 42px; border: 2px solid #ffffff20; border-top-color: var(--accent); border-radius: 50%; animation: rot 1s linear infinite; }
@keyframes rot { to {transform:rotate(360deg)} }
/* Scorecard: a folder-tab card in black and mint over the dimmed course, with a RESULTS watermark. */
#score.overlay { overflow: hidden; background: rgba(0, 0, 0, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }   /* the panel scrolls itself; hidden keeps the watermark's bleed off the scrollbar */
#score::before, #score::after { content: 'RESULTS'; position: fixed; z-index: 0; pointer-events: none; font-family: var(--display); font-size: clamp(110px, 22vw, 300px); font-weight: 800; line-height: .8; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px #ffffff2a; user-select: none; }
#score::before { top: -1vw; left: -1vw; }
#score::after { right: -1vw; bottom: -1vw; }
#score .panel { --gutter: 28px; position: relative; z-index: 1; width: min(560px, 100%); padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--black); font-family: var(--display); filter: drop-shadow(0 24px 50px #000a); scrollbar-color: #ffffff60 transparent; }
#score .eyebrow { align-self: flex-start; display: inline-flex; gap: 6px; padding: 7px 14px 6px; border-radius: 6px 6px 0 0; background: #0f5a3c; color: #fff; font-size: 12px; letter-spacing: 2px; }
/* Two loud things only: this headline and the lit current-hole column. Everything else stays at body weight with air around it. */
#score h2 { margin: 0; padding: 16px var(--gutter) 12px; border-radius: 0 6px 0 0; background: var(--mint); color: var(--black); font-size: clamp(40px, 6vw, 56px); letter-spacing: -.02em; line-height: .95; }
.score-body { display: flex; flex-direction: column; background: #f4f5f3; border-radius: 0 0 6px 6px; overflow: hidden; }
#score #scoreBest { padding: 16px var(--gutter) 0; font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #0f5a3c; }
/* A golfer's scorecard shorthand: circle under par, square over, a second ring for each stroke past one; par stays bare. */
#score .mk { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; }
#score .badge { width: 40px; height: 40px; font-size: 19px; }
#score td.s-1 .mk, #score td.s-2 .mk, #score td.s-3 .mk { background: var(--mint); color: var(--black); }
#score td.s-2 .mk, #score td.s-3 .mk { outline: 2px solid var(--mint); outline-offset: 2px; }
#score td.s1 .mk, #score td.s2 .mk, #score td.s3 .mk, #score td.s4 .mk { border-radius: 3px; box-shadow: inset 0 0 0 2px currentColor; }
#score td.s2 .mk, #score td.s3 .mk, #score td.s4 .mk { outline: 2px solid currentColor; outline-offset: 2px; }
.score-grid { overflow-x: auto; padding: 16px 0 6px; }
#score table { font-family: var(--display); font-size: 16px; }
#score th { padding: 8px 3px 7px; background: var(--black); color: #fff; font-size: 18px; font-weight: 800; line-height: 1.05; letter-spacing: .3px; text-transform: uppercase; border: 0; }
#score th .muted { color: #ffffffb8; font-size: 16px; font-weight: 700; letter-spacing: .3px; }
#score th:not(.key):not(:last-child) { width: 7.2%; }   /* even hole columns, played or blank */
#score th.key { padding-left: var(--gutter); text-align: left; color: #ffffffa8; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; line-height: 1.6; }   /* names the two header lines; each column then prints just its numbers */
#score th.key .muted { color: inherit; font-size: inherit; letter-spacing: inherit; }
#score th.cur, #score th.cur .muted { color: var(--mint); }
#score td { padding: 8px 3px; font-weight: 700; color: var(--black); border: 0; }
#score tr:first-child + tr td { padding-top: 14px; }
#score td.name { padding-left: var(--gutter); max-width: 128px; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; font-weight: 800; }
#score td.name .rank { display: inline-block; width: 24px; color: #6b7570; font-size: 12px; vertical-align: 1px; }
#score td.name .rank .icon { width: 16px; height: 16px; color: #b0731a; vertical-align: -3px; }
#score td.name .dot { width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; border: 0; box-shadow: none; }
#score td.cur { background: #5cf0a826; }   /* the lit column: a mint wash under the badges, over the global amber tint */
#score tr + tr + tr td { box-shadow: inset 0 1px #0c111412; }   /* hairlines between players carry the eye from name to total across holes still to play (they are left blank, not dashed) */
#score td.tot { padding-right: var(--gutter); font-size: 18px; }
/* Score to par is the number that matters: a solid chip under the total, mint under par, black over, a quiet ring at even. */
#score td.tot small { display: block; width: fit-content; min-width: 34px; margin: 3px auto 0; padding: 2px 8px 1px; border-radius: 999px; font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: .3px; color: var(--black); box-shadow: inset 0 0 0 1.5px #0c111433; }
#score td.tot small.under { background: var(--mint); box-shadow: none; }
#score td.tot small.over { background: var(--black); color: #fff; box-shadow: none; }
#score td.s-1, #score td.s-2, #score td.s-3 { color: #0f8a55; } #score td.s1 { color: #b0731a; } #score td.s2, #score td.s3, #score td.s4 { color: #c0392b; }
#score .score-actions { padding: 18px var(--gutter) var(--gutter); gap: 10px; }
#score .score-actions button { font-family: var(--display); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; border-radius: 999px; min-height: 44px; backdrop-filter: none; -webkit-backdrop-filter: none; }
#score #btnScoreMenu { background: transparent; border: 2px solid #0c111433; box-shadow: none; color: var(--black); }
#score #btnScoreNext { background: var(--black); border-color: var(--black); color: #fff; box-shadow: none; }
#score #btnScoreNext .icon { width: 18px; height: 18px; }
#score button:focus-visible { outline-color: var(--black); }
#score #scoreWait { padding: 0 16px 14px; text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
@media (hover: hover) { #score #btnScoreNext:hover { background: #1d262b; border-color: #1d262b; } #score #btnScoreMenu:hover:not(:disabled) { background-color: #0c11140f; border-color: #0c111466; } }
/* Compact phones retain full labels and scroll only within the panel. */
@media (max-width: 460px) {
  .hub-top { left: 14px; right: 14px; }
  .brand { font-size: 40px; }
  .panel { padding: 16px; }
  .hub-main { padding: 12px; border-radius: 24px; }
  #top { width: min(236px, calc(100% - 136px)); }   /* room for the sound and tools buttons beside it */
  #score .panel { --gutter: 18px; }
  #score th { font-size: 14px; } #score th .muted { font-size: 12px; } #score th.key { font-size: 10px; letter-spacing: .8px; }
  #score .mk { width: 20px; height: 20px; }
  #score .badge { width: 30px; height: 30px; font-size: 15px; }
  #score table { font-size: 14px; }
  #score td { padding: 6px 2px; }
  #score td.name { max-width: 104px; }
  #score td.tot { font-size: 16px; }
}
@media (max-width: 560px) {
  #conditions { flex-direction: column; align-items: flex-end; gap: 3px; }   /* two short lines clear the ring at bottom-centre */
  #sideBtns { top: 74px; }   /* below the name plate */
}
@media (min-width: 900px) {
  .overlay.hub, .overlay.locker { justify-content: flex-start; align-items: center; padding-left: 5vw; }
  .overlay.locker .panel, .overlay.hub .panel { max-height: 100%; }
  .overlay.hub { padding-top: calc(136px + var(--sat)); }   /* the brand ends ~118 px down: the sheet never cuts the title */
  .overlay.hub .panel { width: clamp(340px, 24vw, 410px); }
  #btnCourses { min-height: 80px; }
  .hub-top { left: 5vw; right: 3vw; top: calc(26px + var(--sat)); }
  .brand { font-size: 60px; }
  .brand small { font-size: 12px; letter-spacing: 5px; }
  #top { top: calc(20px + var(--sat)); left: 24px; width: 260px; }
  #playerName { font-size: 28px; }
  #utilities { right: 24px; top: calc(20px + var(--sat)); }
  #hud > #controls { left: 24px; right: 24px; bottom: calc(20px + var(--sab)); }
  #conditions { right: 24px; bottom: calc(70px + var(--sab)); }
}
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  #top { width: 200px; }
  #playerName { font-size: 21px; }
  #toPar { font-size: 19px; min-width: 42px; }
  #holeInfo, #throwNo { font-size: 11px; }
  #btnMute, #btnUtilities { width: 40px; height: 40px; min-height: 40px; }
  #sideBtns { top: 48px; }
  #power { width: 60px; height: 60px; margin-left: -30px; }
  #powerLabel { bottom: calc(44px + var(--sab)); font-size: 13px; }
  #pad { padding-bottom: calc(84px + var(--sab)); }
  #waiting { bottom: calc(84px + var(--sab)); }
  #toast { top: 18%; }
  .overlay.hub { align-items: flex-start; justify-content: flex-start; padding-left: 12px; padding-top: calc(72px + var(--sat)); }
  .overlay.hub .panel { width: min(360px, 52%); max-height: 100%; }
  /* a landscape phone has ~300px under the brand: the whole card fits without scrolling */
  .hub-main { gap: 5px; padding: 10px; }
  .play-cta { min-height: 50px; padding: 6px 14px; margin-bottom: 0; }
  .play-cta strong { font-size: 24px; }
  .mode-btn { min-height: 40px; padding: 8px 12px; }
  #btnCourses { min-height: 58px; padding: 7px 12px; }
  #btnCourses .cinfo b { font-size: 18px; margin: 1px 0 2px; }
  #btnCourses .cinfo .eyebrow { display: none; }   /* the card's art and name already say it; the eyebrow cost a line */
  .round-opts summary { min-height: 40px; }
  .round-settings .seg button { min-height: 30px; padding: 3px 6px; }
  .overlay.locker { align-items: center; justify-content: flex-start; padding-left: 12px; }
  .overlay.locker .panel { width: min(400px, 55%); max-height: 100%; }
  .brand { font-size: 33px; }
  .hub-top { top: calc(10px + var(--sat)); }
  .hub-brand { flex-direction: row; align-items: center; gap: 14px; }   /* the host's pill beside the brand: no height to stack it */
  .host-home { order: 2; margin: 0; }
  /* the verdict card in the left third, low: at 23% from the top it sat on the athlete's face in the reaction shot, which frames
     him mid-screen (QA on Gull Point Bluffs), and the controls it would meet there are hidden for the result */
  body[data-phase='result'] #toast, body.result-mode #toast { top: auto; bottom: calc(16% + var(--sab)); left: calc(25% + var(--sal) / 2); width: 46%; }
  body[data-phase='result'] #react, body.result-mode #react { left: calc(25% + var(--sal) / 2); bottom: calc(16% + 92px + var(--sab)); }
  body[data-phase='result'] #toast b, body.result-mode #toast b { font-size: 42px; }
  #score .panel { --gutter: 20px; width: min(620px, 100%); }
  #score .eyebrow { padding: 5px 12px 4px; }
  #score h2 { font-size: 34px; padding: 8px var(--gutter) 6px; }
  #score #scoreBest { padding-top: 8px; }
  .score-grid { padding: 4px 0 0; }
  #score .mk { width: 20px; height: 20px; }
  #score .badge { width: 30px; height: 30px; font-size: 15px; }
  #score th { padding: 5px 2px 4px; font-size: 14px; }
  #score th .muted { font-size: 12px; }
  #score th.key { font-size: 10px; line-height: 1.4; }
  #score td { padding: 4px 2px; font-size: 13px; }
  #score tr:first-child + tr td { padding-top: 6px; }
  #score td.tot { font-size: 15px; }
  #score td.tot small { margin-top: 1px; font-size: 12px; }
  #score .score-actions { padding: 8px var(--gutter) 12px; }
  #score .score-actions button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  button, #toast, #fade, #windArrow, .sound-toggle .sound-icons > span, #pad .hint, #powerFill { transition: none; }
  button:active:not(:disabled) { transform: none; }
  #pad.bad .hint { animation: none; }
}

/* Mii creator: one part family at a time, with the live figure above the tray. */
.overlay.locker .panel { max-height: 56vh; width: min(440px, 100%); padding: 16px; gap: 10px; }
.locker-preview-label { position: absolute; top: calc(20px + var(--sat)); left: 22px; color: #153a50; font-family: var(--display); font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; text-shadow: 0 1px 0 #ffffff9c; }
.locker-preview-label span { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; }
#avOpts { gap: 10px; }
.locker-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.locker-tabs button { border-radius: 9px; min-height: 43px; padding: 8px 5px; font-size: 12px; }
.locker-tabs button.on { background: #0a89b5cf; color: white; border-color: #b8f0ff; box-shadow: inset 0 1px #b9efff, 0 3px 0 #08719138; }
.locker-parts { min-height: 108px; }
.face-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.face-tabs button { flex: 1; min-width: 0; padding: 6px 3px; min-height: 36px; font-size: 10px; border-radius: 7px; }
.face-tabs button.on { color: #05658b; border-color: #39a6c9; background: #d2f4ffb0; }
.opt { border-color: #1f6b8618; margin-bottom: 9px; }
.opt:last-child { margin-bottom: 0; }
.opt > span { font-size: 10px; letter-spacing: .8px; }
.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.choice-grid button { flex-direction: column; min-height: 46px; padding: 7px 3px; font-size: 10px; border-radius: 9px; gap: 1px; }
.choice-grid button.on { background: #c6efffd0; box-shadow: inset 0 0 0 1px #269bc4, inset 0 1px #fff; }
.face-choice { width: 46px; height: 40px; color: #263d50; }
.sw-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; padding: 3px; }
.sw-row button { width: 100%; height: 38px; min-height: 38px; background: linear-gradient(140deg, #ffffff38, transparent), var(--swatch); border-color: #ffffffbd; border-radius: 9px; }
.sw-row button.on { border-color: white; outline-color: #087baf; box-shadow: inset 0 -3px 5px #0001; }
#btnLockerDone { min-height: 44px; position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 18px #f4fbff, 0 4px 14px #e0576140; }   /* the panel scrolls (the Hair tab runs long; a landscape phone shows ~370 px of it): Ready to play stays on screen, pinned to its bottom edge */
@media (min-width: 900px) {
  .overlay.locker .panel { max-height: calc(100% - 60px); }
  .locker-preview-label { left: auto; right: 5vw; top: 32px; text-align: right; }
}
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .overlay.locker .panel { max-height: 100%; width: min(400px, 55%); }
  .locker-preview-label { left: auto; right: 18px; top: 16px; font-size: 20px; text-align: right; }
  .choice-grid button { min-height: 40px; }
}

/* Joyful, readable feedback over the course. */
#toast b { color: #fff; font-family: var(--display); font-style: normal; text-transform: uppercase; font-size: clamp(34px, 8vw, 60px); font-weight: 800; letter-spacing: .5px; text-shadow: 0 3px 0 #0c1114, 2px 0 0 #0c1114, -2px 0 0 #0c1114, 0 -2px 0 #0c1114, 0 8px 16px #0c111460; }
#toast span { display: inline-block; margin-top: 6px; padding: 5px 12px; color: var(--black); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; background: var(--mint); border: 0; border-radius: 4px; text-shadow: none; }
#toast span:empty { display: none; }
#toast.show { transform: translate(-50%, -8px) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { #toast.show { transform: translate(-50%, -8px); } }

.ccard .cinfo b, .ccard .chev { color: #fff; }
/* ---------- hole intro: flyover title, HUD hidden while the camera flies ---------- */
#hud { transition: opacity .45s; }
body[data-phase='intro'] #hud { opacity: 0; }
#holeTitle { position: fixed; left: calc(22px + env(safe-area-inset-left, 0px)); bottom: calc(24px + var(--sab)); z-index: 11; pointer-events: none; opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; color: #fff; font-family: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif; font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: .005em; text-shadow: 0 2px 3px #0009, 0 10px 34px #0008; }
#holeTitle b, #holeTitle span { display: block; font-size: clamp(42px, 9.5vmin, 104px); font-weight: 800; }
body[data-phase='intro'] #holeTitle { opacity: 1; transform: none; transition-duration: .5s; }
/* Target tag: the basket's distance on a hairline over the pin (the camera in main.js places it every frame, UI.setHud writes
   the metres). Dark glass like the HUD chips and a step under them in weight; it bows out inside the putting range. */
#pin { position: fixed; left: 0; top: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; font-family: var(--display); will-change: transform, opacity; }
#pin b { display: flex; align-items: center; gap: 4px; padding: 3px 9px 2px 7px; border: 1px solid #ffffff3d; border-radius: 999px; background: #0c11148f; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px #ffffff1f, 0 2px 8px #0004; backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); }
#pin svg { width: 13px; height: 13px; color: var(--mint); }
#pin i { width: 1.5px; height: 24px; background: linear-gradient(#ffffffd9, #ffffff59); transition: height .8s var(--ease); }
body[data-phase='intro'] #pin i { height: 46px; }   /* the establishing shot sees the pin past the hole's gantry: the tag flies clear of its banner */
#pin::after { content: ''; width: 5px; height: 5px; margin-top: -1px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1.5px #0c111466; }
@media (max-height: 520px) and (min-aspect-ratio: 5/4) { #pin b { font-size: 13px; padding: 2px 8px 1px 6px; } #pin svg { width: 11px; height: 11px; } #pin i { height: 18px; } }
@media (prefers-reduced-motion: reduce) { #holeTitle, #hud { transition: none; } }

/* ---- invite matches: turn-based play on everyone's own time ---- */
.match-badge { position: absolute; top: -7px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #f14e5a; color: #fff; font: 800 12px/22px var(--display); letter-spacing: .3px; box-shadow: 0 2px 6px #c2395155; }
#matches { align-items: flex-end; padding-top: calc(70px + var(--sat)); }   /* sits low like the clubhouse sheet, so the athlete stays in view above it */
.match-panel h2 { margin-bottom: 0; }
#btnMatchNew { min-height: 58px; justify-content: flex-start; gap: 12px; text-align: left; }
#btnMatchNew .cta-copy { display: flex; flex-direction: column; gap: 1px; }
#btnMatchNew strong { font-family: var(--display); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; line-height: 1; }
#btnMatchNew small { font-size: 11px; font-weight: 600; color: #fff3ef; }
.match-list { display: flex; flex-direction: column; gap: 6px; }
.match-list:empty { display: none; }
.match-item { justify-content: space-between; width: 100%; min-height: 54px; text-align: left; }
.match-item .mi-copy { display: flex; flex-direction: column; min-width: 0; }
.match-item .mi-copy b { font-family: var(--display); font-size: 16px; text-transform: uppercase; letter-spacing: .4px; }
.match-item .mi-copy span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-item .mi-tag { flex: none; padding: 3px 8px; border-radius: 999px; font: 700 11px/1.4 var(--display); letter-spacing: .8px; text-transform: uppercase; background: #4997b61c; color: var(--muted); }
.match-item.yours { border-color: #f6a596; box-shadow: inset 0 0 0 1px #f6a596, 0 3px 9px #17496918; }
.match-item.yours .mi-tag { background: #f14e5a; color: #fff; }
.match-paste summary { cursor: pointer; font-size: 12px; font-weight: 650; color: var(--accent); padding: 4px 0; }
.match-paste .row { margin-top: 6px; }
.match-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.match-invite { flex: none; min-height: 36px; padding: 6px 12px; font-size: 13px; }
.match-status { padding: 10px 12px; border-radius: 12px; background: #4997b614; border: 1px solid #ffffff70; font-size: 13px; line-height: 1.4; }
.match-status b { font-weight: 750; }
.match-status.yours { background: #ffe4dea8; border-color: #f6a596; }
.match-grid { padding: 4px 0 0; }
#matchTable { width: 100%; border-collapse: collapse; font-size: 13px; }
#matchTable th, #matchTable td { padding: 6px 4px; text-align: center; border-bottom: 1px solid #ffffff60; white-space: nowrap; }
#matchTable th { font: 700 12px/1.1 var(--display); letter-spacing: .5px; color: var(--muted); }
#matchTable th .muted, #matchTable th small { display: block; font-size: 10px; font-weight: 500; }
#matchTable td.name { text-align: left; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
#matchTable td.name .dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
#matchTable tr.up td.name::after { content: ' ●'; color: #f14e5a; font-size: 10px; }
#matchTable tr.away td { opacity: .55; }
#matchTable td.tot { font-weight: 800; }
#matchTable td.tot small { display: block; font-size: 10px; font-weight: 700; }
#matchTable th.cur { color: var(--accent); }
.match-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.match-feed:empty { display: none; }
.match-feed li b { color: var(--text); }
.match-install { padding: 12px; border-radius: 12px; background: #ffffff70; border: 1px solid #ffffffb0; font-size: 13px; }
.match-install ol { margin: 6px 0 8px; padding-left: 20px; }
.match-install li { margin: 2px 0; }
@media (min-width: 900px) and (min-aspect-ratio: 6/5) {   /* wide: the sheet stands at the left like the clubhouse panel, the athlete free beside it */
  #matches { align-items: center; justify-content: flex-start; padding: calc(24px + var(--sat)) 24px calc(24px + var(--sab)) max(24px, 3vw); }
}
/* opened from a room invite link: joining is the only thing on offer (Create moves behind "Host my own room instead") */
#online.invited #btnCreate { display: none; }

/* The landing estimate shows while aiming, outside the circle, for throws other than putts. */
#shotPlan { position: absolute; left: 24px; top: calc(112px + var(--sat)); display: none; padding: 8px 10px; border-left: 2px solid var(--mint); background: #0c1114b5; border-radius: 0 6px 6px 0; color: #fff; pointer-events: none; font-variant-numeric: tabular-nums; }
#shotPlan small { display: block; color: #d0e0da; font: 700 10px/1.4 var(--display); letter-spacing: 1px; }
#shotPlan b { display: block; font: 700 17px/1.4 var(--display); }
#shotPlan > span { display: block; color: var(--mint); font-size: 11px; font-weight: 700; }
#shotPlan.danger { border-color: #ff9275; }
#shotPlan.danger > span { color: #ffb19d; }
#power .power-target { display: none; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(transparent calc(var(--suggested, .72) * 1turn - 2deg), #ffd23f 0 calc(var(--suggested, .72) * 1turn + 2deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
#power.suggesting .power-target { display: block; }
body[data-phase='aim'] #hud:not(.spectating) #shotPlan:not(.off) { display: block; }   /* aiming only: the swipe itself runs on feel */
#hud.equipment-open #shotPlan, #hud:has(#btnUtilities[aria-expanded='true']) #shotPlan { visibility: hidden; }
@media (max-width: 700px) { #shotPlan { left: 12px; top: calc(102px + var(--sat)); padding: 6px 8px; } }
@media (max-height: 520px) { #shotPlan { top: calc(12px + var(--sat)); left: auto; right: 128px; } }   /* clear of the sound and tools buttons */

/* Dark HUD glass: every plate gets a specular top rim and a shaded lower lip under a saturated blur, so they read as glass
   over the course instead of flat chips. Neutral shadows only. */
#conditions, .equipment-summary > button, #btnMute, #btnUtilities, #pad .hint, #aimZone > span, #shotPlan, #waiting { box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #0000004d, 0 2px 8px #0006; backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); }
/* Two thumbs on a wide touch screen: the left ~40% drags the aim, the right ~60% (under the score strip) takes the swipe,
   with the power ring under the swipe hand. One finger still works: drag on the left, swipe on the right. */
@media (pointer: coarse) and (min-aspect-ratio: 6/5) {
  #pad { left: 40%; top: calc(70px + var(--sat)); height: auto; padding-left: 12px; padding-right: 12px; }
  #pad::before { content: ''; position: absolute; left: 0; top: 10%; bottom: 22%; width: 1px; background: linear-gradient(#ffffff00, #ffffff38, #ffffff00); pointer-events: none; }
  body.thrown #pad::before { opacity: .5; }
  #aimZone { top: auto; left: 16px; bottom: calc(76px + var(--sab)); }
  #power, #powerLabel, #waiting { left: 63%; }   /* clear of the wind plate on a 390-430 pt tall phone on its side */
  #pad { padding-bottom: calc(108px + var(--sab)); }   /* the hint rides over the wind plate, not into it */
  /* the wind plate under the score plate: at the bottom right it sat on the athlete's hip, who stands in the right third over
     the swipe pad (AIM.driveS), and the left column between the score and the aim pill is open sky and trees */
  #conditions { right: auto; left: 12px; bottom: auto; top: calc(84px + var(--sat)); flex-direction: column; align-items: flex-start; gap: 3px; }
}
/* A phone on its side: the notch or Dynamic Island takes ~50 px of one long edge (viewport-fit=cover), where the score plate
   and the menu button used to sit. */
@media (pointer: coarse) and (orientation: landscape) {
  #hud { left: var(--sal); right: var(--sar); }
  .overlay { padding-left: calc(16px + var(--sal)); padding-right: calc(16px + var(--sar)); }
  .overlay.hub, .overlay.locker { padding-left: calc(12px + var(--sal)); }
  #matches { padding-left: calc(24px + var(--sal)); padding-right: calc(24px + var(--sar)); }
  .hub-top { left: calc(14px + var(--sal)); right: calc(14px + var(--sar)); }
}
/* The verdict (UI.react): clapping hands over a good result, a drooping "womp womp" under a bad one. */
#react { position: absolute; left: 50%; top: 13%; z-index: 3; transform: translateX(-50%); pointer-events: none; white-space: nowrap; opacity: 0; }
body[data-phase='result'] #react, body.result-mode #react { top: auto; bottom: calc(12% + 112px + var(--sab)); }
#react.good, #react.bad { animation: reactIn 2.4s var(--ease) forwards; }
#react.good span { display: inline-block; font-size: 66px; line-height: 1; filter: drop-shadow(0 4px 10px #0007); transform-origin: 50% 80%; animation: clapping .32s ease-in-out 6 alternate; }
#react.bad { font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: 1px; color: #ffd0c4; text-shadow: 0 3px 14px #000c; }
#react.bad i { display: inline-block; font-style: normal; animation: womp 1.6s ease-in forwards; animation-delay: calc(var(--i) * 40ms); }
#react.bad b { display: inline-block; width: .35em; }
@keyframes reactIn { 0% { opacity: 0; } 8%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes clapping { from { transform: scale(.82) rotate(-9deg); } to { transform: scale(1.1) rotate(7deg); } }
@keyframes womp { 0% { transform: none; } 22% { transform: translateY(-4px); } 40% { transform: translateY(2px) rotate(-3deg); } 100% { transform: translateY(16px) rotate(calc((var(--i) - 4) * 3deg)); } }
@media (prefers-reduced-motion: reduce) { #react.good span, #react.bad i { animation: none; } }
/* Mobile's vignette (Desktop's is in its grade pass): a static layer the compositor blends, no GPU pass of the game's own. */
#vignette { position: fixed; inset: 0; z-index: 0; display: none; pointer-events: none; background: radial-gradient(ellipse farthest-corner at 50% 48%, #0000 48%, #0000000f 68%, #00000040 100%); }
body.gfx-mobile #vignette { display: block; }
/* The thumb coach (src/coach.js): ghost thumbs act out each move, a card names it. Nothing here takes a touch except Skip. */
#hud > #coach { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#coach[hidden] { display: none; }
#coach .ghost { position: absolute; width: 0; height: 0; display: none; }
#coach[data-step='aim'] .g-aim, #coach[data-step='both'] .g-aim, #coach[data-step='throw']:not(.held) .g-pad, #coach[data-step='both']:not(.held) .g-pad { display: block; }
#coach.done .ghost { display: none; }
#coach .thumb { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fff, #ffffffd0 55%, #ffffff8c); box-shadow: 0 0 0 7px #5cf0a838, 0 0 0 1.5px var(--mint), 0 6px 16px #0007; opacity: 0; }
#coach .trail { position: absolute; left: 0; top: -4px; width: var(--len); height: 8px; border-radius: 4px; background: linear-gradient(90deg, #5cf0a800, #5cf0a8d0); transform-origin: 0 50%; transform: rotate(var(--rot)) scaleX(0); opacity: 0; }
#coach .g-aim .thumb { animation: coachDrag 2.6s var(--ease) infinite; }
#coach .g-pad .thumb { animation: coachSwipe 2.2s infinite; }
#coach .g-pad .trail { animation: coachTrail 2.2s infinite; }
#coach[data-step='both'] .g-pad .thumb { animation-name: coachHold; }
#coach[data-step='both'] .g-pad .trail { animation-name: coachHoldTrail; }
#coach[data-step='both'] .g-aim .thumb { animation-delay: .5s; }
@keyframes coachDrag { 0% { opacity: 0; transform: scale(.75); } 10% { opacity: 1; transform: scale(1); } 34% { transform: translateX(calc(var(--dx) * -1)); } 66% { transform: translateX(var(--dx)); } 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.85); } }
@keyframes coachSwipe { 0% { opacity: 0; transform: scale(.75); } 14% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 58% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 76%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.85); } }
@keyframes coachTrail { 0%, 14% { opacity: 0; transform: rotate(var(--rot)) scaleX(0); animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 16% { opacity: 1; } 58% { opacity: 1; transform: rotate(var(--rot)) scaleX(1); } 80%, 100% { opacity: 0; transform: rotate(var(--rot)) scaleX(1); } }
@keyframes coachHold { 0% { opacity: 0; transform: scale(.75); } 12% { opacity: 1; transform: scale(1); } 30%, 88% { opacity: 1; transform: translate(calc(var(--dx) * .38), calc(var(--dy) * .38)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * .38), calc(var(--dy) * .38)); } }
@keyframes coachHoldTrail { 0%, 12% { opacity: 0; transform: rotate(var(--rot)) scaleX(0); } 30%, 88% { opacity: 1; transform: rotate(var(--rot)) scaleX(.38); } 100% { opacity: 0; transform: rotate(var(--rot)) scaleX(.38); } }
#coach .coach-card { position: absolute; left: 0; top: 0; width: max-content; max-width: min(300px, calc(100vw - 24px)); padding: 9px 12px 11px 14px; border: 1px solid #ffffff2e; border-radius: 14px; background: #0c1114d9; color: #fff; box-shadow: 0 8px 24px #0006; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: coachIn .35s var(--ease); }
#coach .coach-top { display: flex; align-items: center; gap: 8px; color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
#coach .coach-dots { display: inline-flex; gap: 4px; }
#coach .coach-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff40; }
#coach .coach-dots i.on { background: var(--mint); }
#coach .coach-skip { margin: -8px -6px -8px auto; min-height: 36px; padding: 6px 8px; border: 0; background: none; box-shadow: none; color: #ffffffa6; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; pointer-events: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
#coach .coach-title { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 21px; font-weight: 800; line-height: 1.1; letter-spacing: .2px; }
#coach .coach-title .icon { width: 22px; height: 22px; color: var(--mint); stroke-width: 3; }
#coach .coach-sub { display: block; margin-top: 3px; color: #ffffffc4; font-family: system-ui, -apple-system, sans-serif; font-size: 13px; line-height: 1.35; }
#coach.done .coach-card { border-color: #5cf0a880; }
@keyframes coachIn { from { opacity: 0; } to { opacity: 1; } }
body.coaching #aimZone { visibility: hidden; }
body[data-coach='throw'][data-phase='aim'] #pad:not(.bad) .hint { opacity: 0; }   /* faded, not hidden: after the first throw body.thrown keeps it at 0 with no flash */
#hud.equipment-open #coach, #hud:has(#btnUtilities[aria-expanded='true']) #coach { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  #coach .thumb, #coach .trail, #coach .coach-card { animation: none; opacity: 1; }
  #coach .g-pad .thumb { transform: translate(var(--dx), var(--dy)); }
  #coach .g-pad .trail { transform: rotate(var(--rot)); }
  #coach[data-step='both'] .g-pad .thumb { transform: translate(calc(var(--dx) * .38), calc(var(--dy) * .38)); }
  #coach[data-step='both'] .g-pad .trail { transform: rotate(var(--rot)) scaleX(.38); }
}
.touch-only { display: none !important; }
@media (pointer: coarse) { .touch-only { display: inline-flex !important; } }
/* A GPU reset (context lost): the HUD's waiting line is hidden in the clubhouse, so the notice sits over every screen. */
body.gfx-lost::after { content: 'Restoring graphics…'; position: fixed; left: 50%; top: 50%; z-index: 60; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 999px; background: #0c1114e0; color: #fff; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
/* ---------- Turns: the Pass & play sheet ---------- */
.setup-turns .seg { max-width: 300px; }
.setup-turns .muted { font-size: 12px; }

/* ---------- Waiting room ---------- */
/* The online panel becomes the room: the code and the round on top, a jersey card per player, then ready / start. */
#online.in-room .panel { width: min(540px, 100%); }
#online.in-room .name-field, #online.in-room #inviteNote, #online.in-room .panel > .eyebrow { display: none; }
#online.in-room h2 { margin-bottom: 0; }
.waiting-room { gap: 12px; }
.wr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wr-code { display: flex; flex-direction: column; gap: 2px; }
.wr-code .code { margin: 0; padding: 0; border: 0; font-family: var(--display); font-size: 48px; line-height: .9; letter-spacing: 8px; text-align: left; color: var(--ink); -webkit-user-select: text; user-select: text; }
.wr-share { min-height: 44px; padding: 8px 18px 8px 14px; border-radius: 999px; font-family: var(--display); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: #075d81; }
.wr-share .icon { width: 18px; height: 18px; }
.wr-round { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, #0f3346f2, #155a6fe6); box-shadow: inset 0 1px #ffffff2e, 0 6px 18px #0d3a5230; }
.wr-round::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 100% 0, #5cf0a826, transparent 55%); }
.wr-course-art { width: 74px; height: 74px; flex: none; border-radius: 10px; overflow: hidden; background: #ffffff1a; box-shadow: 0 0 0 1px #ffffff40, 0 4px 10px #0004; }
.wr-course-art img, .wr-course-art svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.wr-round-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wr-round-copy .eyebrow { color: #ffd65c; }
.wr-round-copy b { font-family: var(--display); font-size: 25px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .3px; }
#roomRoundSub { font-size: 13px; font-weight: 750; color: #e9f8ff; }
.wr-order-hint { font-size: 12px; line-height: 1.3; color: #bfe0ec; }
.wr-round.changed { animation: wr-flash 1.1s var(--ease); }
.wr-settings { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; }
.wr-settings .f { font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; }
.wr-settings .wr-course-pick { grid-column: 1 / -1; }
.wr-settings .seg button { font-size: 13px; }
.wr-settings select { width: 100%; min-height: 42px; padding: 8px 34px 8px 12px; border: 1px solid #ffffffb0; border-radius: 8px; font: 650 15px/1.2 "Segoe UI", system-ui, -apple-system, sans-serif; letter-spacing: 0; text-transform: none; color: var(--text); background: #ffffff8c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087d9c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 18px; box-shadow: inset 0 2px 5px #27668112; -webkit-appearance: none; appearance: none; }
.wr-settings select:focus-visible { outline: 3px solid #087baf; outline-offset: 2px; }
.wr-roster-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: -4px; }
.wr-count { font-size: 12px; font-weight: 750; color: var(--muted); }
.wr-count.all { color: #0b8a55; }
.wr-roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 620px) and (min-height: 521px) { .wr-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Ready / Start stay in reach on short phones: the action row pins to the bottom of the scrolling panel. */
.wr-actions { position: sticky; bottom: -18px; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin: 0 -18px -6px; padding: 10px 18px 12px; border-radius: 0 0 22px 22px; background: linear-gradient(#e8f6fc00, #e5f4fae6 26%, #e2f2f8f5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wr-card { position: relative; display: flex; align-items: center; gap: 9px; min-height: 60px; padding: 8px 10px 8px 8px; border: 1px solid #ffffffd0; border-radius: 12px; background: linear-gradient(150deg, #ffffffd9, #eef9ffb0); box-shadow: 0 2px 8px #1749691a; transition: border-color 160ms, box-shadow 160ms; }
.wr-card.me { border-color: #3fb4d6; box-shadow: 0 0 0 1.5px #3fb4d6, 0 3px 10px #17496926; }
.wr-card.ready:not(.host):not(.bot) { background: linear-gradient(150deg, #f4fff9e6, #d9fbeacc); }
.wr-card.away { opacity: .72; }
.wr-jersey { position: relative; width: 42px; height: 42px; flex: none; filter: drop-shadow(0 2px 2px #0c111433); }
.wr-jersey svg { width: 100%; height: 100%; display: block; }
.wr-jersey text { font-family: var(--display); font-size: 15px; font-weight: 800; }
.wr-badge { position: absolute; left: -5px; top: -4px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #2fd88a; color: #fff; box-shadow: 0 0 0 2px #fff; }
.wr-badge .icon { width: 12px; height: 12px; stroke-width: 3.2; }
.wr-who { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1; }
.wr-who b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 750; color: var(--ink); }
.wr-pill { display: inline-flex; align-items: center; padding: 2px 8px 1px; border-radius: 999px; font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: .9px; line-height: 1.25; text-transform: uppercase; white-space: nowrap; background: #12374e14; color: #4c6c80; }
.wr-pill em { margin-left: .4em; font-style: normal; opacity: .8; }
.wr-card.ready .wr-pill { background: #2fd88a; color: #fff; }
.wr-card.host .wr-pill { background: var(--accent); color: #fff; }
.wr-card.bot .wr-pill { background: #12374e1f; color: var(--ink); }
.wr-card.away .wr-pill { background: #ffd65c; color: #5a4300; }
.wr-x { position: absolute; top: 50%; right: 6px; width: 30px; height: 30px; min-height: 30px; padding: 0; margin-top: -15px; border-radius: 50%; font-size: 13px; color: var(--muted); }
.wr-card.bot { padding-right: 42px; }
.wr-open { padding: 0; border: 1.5px dashed #12374e2e; background: #ffffff2e; box-shadow: none; }
.wr-invite { width: 100%; height: 100%; min-height: 58px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #5a7a8e; }
.wr-invite .icon { width: 16px; height: 16px; }
.wr-card.new { animation: wr-in 420ms var(--ease) both; }
.wr-card.pop .wr-pill, .wr-card.pop .wr-badge { animation: wr-pop 420ms var(--ease); }
.wr-ready { justify-content: flex-start; gap: 12px; min-height: 60px; padding: 8px 16px; border-radius: 12px; text-align: left; color: #fff; background: linear-gradient(135deg, #ff7c69e8, #f14e5ade); border-color: #ffc7ba; box-shadow: inset 1px 1px 1px #ffd5c9, 0 3px 0 #bf344c55, 0 7px 20px #cb425b25; }
.wr-ready .cta-copy, #btnLobbyStart .cta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.wr-ready strong, #btnLobbyStart strong { white-space: nowrap; font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .4px; }
.wr-ready small, #btnLobbyStart small { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; opacity: .92; }
.wr-ready-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid #ffffffb0; }
.wr-ready-icon .icon { width: 18px; height: 18px; stroke-width: 3; opacity: .55; }
.wr-ready.on-ready { color: #054a2c; background: linear-gradient(135deg, #8af7c7, #3fdc95); border-color: #c9ffe6; box-shadow: inset 1px 1px 1px #e3fff1, 0 3px 0 #1d9f6555, 0 7px 20px #1d9f6526; }
.wr-ready.on-ready .wr-ready-icon { background: #fff; border-color: #fff; color: #10a463; }
.wr-ready.on-ready .wr-ready-icon .icon { opacity: 1; }
#hostControls #btnLobbyBot { flex: 0 0 auto; min-width: 92px; font-family: var(--display); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
#btnLobbyStart { flex: 1; justify-content: flex-start; gap: 12px; min-height: 60px; padding: 8px 16px; text-align: left; }
#btnLobbyStart > [data-icon=play] .icon { width: 24px; height: 24px; fill: currentColor; }
#btnLobbyStart.waiting { background: linear-gradient(135deg, #ff9d8ed0, #f37a83cc); }
#btnLobbyStart.armed { animation: wr-arm 900ms var(--ease) infinite; }
#btnRoomLocker, #btnLeave { font-family: var(--display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
@keyframes wr-in { from { opacity: 0; transform: translateY(10px) scale(.95); } }
@keyframes wr-pop { 45% { transform: scale(1.22); } }
@keyframes wr-flash { 0%, 100% { box-shadow: inset 0 1px #ffffff2e, 0 6px 18px #0d3a5230; } 25% { box-shadow: inset 0 1px #ffffff2e, 0 0 0 3px #ffd65c, 0 6px 18px #0d3a5230; } }
@keyframes wr-arm { 50% { transform: scale(1.025); box-shadow: inset 1px 1px 1px #ffd5c9, 0 3px 0 #bf344c55, 0 0 0 4px #ff7c6955; } }
@media (max-width: 400px) {
  .wr-code .code { font-size: 42px; letter-spacing: 6px; }
  .wr-course-art { width: 60px; height: 60px; }
  .wr-round-copy b { font-size: 22px; }
  .wr-card { gap: 7px; padding: 7px 8px 7px 6px; }
  .wr-jersey { width: 38px; height: 38px; }
}
@media (max-width: 460px) { .wr-actions { bottom: -16px; margin: 0 -16px -4px; padding: 10px 16px 12px; } .wr-ready strong, #btnLobbyStart strong { font-size: 21px; } #btnLobbyStart, .wr-ready { padding: 8px 12px; gap: 10px; } #hostControls #btnLobbyBot { min-width: 78px; } }
/* Landscape phones: the room runs two columns, the round and buttons on the left, the roster on the right. */
@media (max-height: 520px) and (min-width: 640px) {
  #online.in-room .panel { width: min(820px, 100%); }
  .waiting-room { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-auto-flow: dense; gap: 10px 14px; align-items: start; }
  .waiting-room > :not(.wr-roster-head):not(.wr-roster):not(.wr-actions) { grid-column: 1; }
  .waiting-room > .wr-roster-head, .waiting-room > .wr-roster { grid-column: 2; }
  .waiting-room > .wr-roster-head { grid-row: 1; }
  .waiting-room > .wr-roster { grid-row: 2 / span 6; }
  .wr-code .code { font-size: 38px; }
  .wr-course-art { width: 56px; height: 56px; }
  #online.in-room h2 { display: none; }
  .waiting-room > .wr-roster-head { align-self: end; }
  .wr-roster { align-content: start; }
  .waiting-room > .wr-actions { grid-column: 1 / -1; flex-direction: row; margin: 0 -18px -6px; }
  .wr-actions > * { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .wr-card.new, .wr-card.pop .wr-pill, .wr-card.pop .wr-badge, .wr-round.changed, #btnLobbyStart.armed { animation: none; } }