/* frontend/puttily.css — PUTTILY (id `puttily`) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Ring Out / Ricochet precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * The UI reads the player's BOARD SCHEME (GameTheme's --pgr-* tokens — the mock's theme table is the same set, L428–441),
 * Arcade through `gm-arcade` on the screen. The COURSE is classic green felt in every scheme (the mock's root style, L20);
 * Arcade only tints the rails with its accent (L465). PLAYER colours are NOT here: puttily.js writes --pt-p0…3 from
 * frontend/player-colours.js (the ONE source — a later Settings colourblind mode feeds it). No shape icons anywhere
 * (owner, frames 20/21).
 *
 * ── Geometry is the mock's ──────────────────────────────────────────────────
 * DESKTOP: ONE design box 1280 × 553 (the mock's 637 less its 84 px chat strip), scaled as a unit by BoardFit. Rails 244,
 * padding 14, gaps 14 (L43–108). The collapsed chat pill hands the COURSE its 40 px: the board declares 593.
 * PHONE (384 × 812, survives 360 × 740): a grid — player strip 52 · hole + countdown 40 · COURSE · feed 38 · controls band
 * (pad 128, meter 18, state 30 / bubble 56 / lay of the land 36) (L134–187). The rails are `display: contents` there.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every row is a FIXED size except the course. Feedback changes colour, glow or a 1–2 px transform — never size or
 * spacing. The pad hatches when locked, never hides. The countdown slot is always there (dashed "—" until a ball drops).
 * Callouts, the scorecard, the setup strip and the flying chip are ABSOLUTE layers inside the root, never fixed.
 */

#puttily-game-screen, .pt-root {
  --pt-bg: var(--pgr-bg, radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%));
  --pt-mid: var(--pgr-solid, #141519);
  --pt-txt: var(--pgr-txt, #e9e8e4); --pt-dim: var(--pgr-dim, #83858b);
  --pt-panel: var(--pgr-panel, rgba(255, 255, 255, .022)); --pt-line: var(--pgr-line, rgba(255, 255, 255, .075));
  --pt-seat: var(--pgr-seat, rgba(255, 255, 255, .025));
  --pt-sel: var(--pgr-sel, oklch(.74 .14 152)); --pt-selTxt: #0b0c10;
  --pt-btn: var(--pgr-btn, linear-gradient(180deg, #2d3036, #22242a)); --pt-btnTxt: var(--pgr-btnTxt, #f1f0ec);
  --pt-bubbleBg: var(--pgr-bubbleBg, #e9e8e4); --pt-bubbleTxt: var(--pgr-bubbleTxt, #16171b);
  --pt-ui: var(--pgr-font, 'Outfit', system-ui, sans-serif);
  --pt-rad: 14px;
  /* the COURSE (mock L20) */
  --pt-felt: oklch(.55 .11 150); --pt-feltHi: oklch(.62 .115 147); --pt-feltLo: oklch(.47 .1 152);
  --pt-feltTex: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.5px) 0 0/7px 7px;
  --pt-tee: oklch(.66 .1 146);
  --pt-rail: #8b5a32; --pt-railHi: #b98150; --pt-railLo: #4f3019;
  --pt-railTex: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 11px);
  --pt-railGlow: 0 10px 24px rgba(0, 0, 0, .4);
  --pt-sand: oklch(.83 .075 80); --pt-sandHi: oklch(.89 .06 85); --pt-sandGrain: rgba(110, 70, 25, .32);
  --pt-ice: oklch(.9 .04 225); --pt-iceHi: #f4fbff;
  --pt-bumper: oklch(.6 .16 28); --pt-bumperCap: oklch(.72 .14 30); --pt-bumperRing: #f3eee4;
  --pt-cupRim: #f7f6f0; --pt-cupHole: #101712; --pt-flag: #f7f6f0; --pt-pole: #ece6d6; --pt-spark: #fff4c2;
  --pt-ink: #0b0c0f;
}
#puttily-game-screen.gm-arcade, .gm-arcade .pt-root {
  --pt-rad: 18px;
  --pt-felt: oklch(.57 .135 149); --pt-feltHi: oklch(.64 .135 146); --pt-feltLo: oklch(.48 .12 152);
  --pt-rail: color-mix(in oklch, var(--pgr-accent, #8338EC) 28%, #7a4e2c); --pt-railLo: color-mix(in oklch, var(--pgr-accent, #8338EC) 35%, #3a220f);
  --pt-railHi: color-mix(in oklch, var(--pgr-accent, #8338EC) 30%, #c08a55); --pt-railGlow: 0 0 22px color-mix(in oklch, var(--pgr-accent, #8338EC) 45%, transparent);
}

/* ── setup card (on the screen's palette) ───────────────────────────────── */
#puttily-game-screen { background: var(--pt-bg); color: var(--pt-txt); }
.pt-setup-card { max-width: 560px; margin: 24px auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--pt-ui); background: var(--pt-panel); color: var(--pt-txt); border: 1px solid var(--pt-line); }
.pt-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pt-dim); font-weight: 700; }
.pt-setup-title { margin: 0; font-size: 30px; }
.pt-setup-blurb, .pt-setup-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.pt-setup-hint { color: var(--pt-dim); font-size: 12.5px; }
.pt-setup-row { display: flex; align-items: center; gap: 12px; }
.pt-setup-lab { width: 64px; font-weight: 700; font-size: 13px; color: var(--pt-dim); }
.pt-opts { display: flex; gap: 6px; }
.pt-opt { min-width: 52px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--pt-line); background: var(--pt-panel); color: var(--pt-txt); font: 700 14px var(--pt-ui); cursor: pointer; }
.pt-opt[data-on="1"] { background: var(--pt-btn); color: var(--pt-btnTxt); box-shadow: 0 0 0 2px var(--pt-txt); }
.pt-start { margin-top: 6px; height: 48px; border-radius: 12px; border: 1px solid var(--pt-line); background: var(--pt-btn); color: var(--pt-btnTxt); font: 800 17px var(--pt-ui); letter-spacing: .04em; cursor: pointer; }
.pt-start:active, .pt-opt:active { transform: translateY(1px); }
@media (hover: hover) { .pt-start:hover { filter: brightness(1.12); } .pt-opt:hover { box-shadow: 0 0 0 2px var(--pt-txt); } }

/* ── the board root (PHONE first: a grid; the rails dissolve into it) ───── */
.pt-root {
  --pt-pad: 10px; --pt-gap: 8px; --pt-padS: 128px; --pt-meterW: 18px; --pt-cdW: 118px;
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--pt-phone-h, 694px); padding: var(--pt-pad);
  display: grid; gap: var(--pt-gap);
  grid-template-columns: var(--pt-padS) var(--pt-meterW) minmax(0, 1fr) var(--pt-cdW);
  grid-template-rows: 52px 40px minmax(0, 1fr) 38px 30px 56px 36px;
  grid-template-areas: "cards cards cards cards" "hole hole hole cd" "course course course course" "feed feed feed feed"
    "pad meter state state" "pad meter bubble bubble" "pad meter lotl lotl";
  background: var(--pt-bg); color: var(--pt-txt); font-family: var(--pt-ui);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.pt-root *, .pt-root *::before, .pt-root *::after { box-sizing: border-box; }
.pt-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.pt-left, .pt-right, .pt-ctrl, .pt-padrow { display: contents; }
.pt-gap { display: none; }

/* hole title + clock */
.pt-hole { grid-area: hole; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.pt-hole-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-htitle { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-hclock { font-size: 12px; color: var(--pt-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-hclock b { font-weight: 400; }
.pt-hclock em { font-style: normal; }
.pt-menu { flex: none; width: 30px; height: 24px; border: 1px solid var(--pt-line); border-radius: 999px; cursor: pointer; font-size: 13px; background: var(--pt-panel); color: var(--pt-txt); }
.pt-menu:active { transform: translateY(1px); }

/* the first-in countdown: phone chip / PC panel (mock cdStyles, L651–655) */
.pt-cd { grid-area: cd; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px; border-radius: 12px; border: 2px dashed var(--pt-line); min-width: 0; --pt-cdc: var(--pt-dim); }
.pt-cd[data-on="1"] { border-style: solid; border-color: var(--pt-cdc); background: color-mix(in oklch, var(--pt-cdc) 9%, transparent); }
.pt-cd[data-on="1"][data-hot="1"] { background: color-mix(in oklch, var(--pt-cdc) 16%, transparent); }
.pt-cd-ring { display: none; }
.pt-cd-txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.pt-cd-lab { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--pt-dim); white-space: nowrap; }
.pt-cd-l1 { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-cd-l2 { display: none; }
.pt-cd-num { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pt-cdc); line-height: 1; display: inline-block; min-width: 28px; text-align: right; }

/* the player strip / rows — filled with the player's colour, dark ink (frame 20) */
.pt-cards { grid-area: cards; display: grid; grid-template-columns: repeat(var(--pt-n, 3), minmax(0, 1fr)); gap: 6px; min-width: 0; }
.pt-card { position: relative; height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 7px; border-radius: 11px; min-width: 0;
  background: var(--pt-pc); color: var(--pt-ink); transform-origin: 50% 50%; }
.pt-card[data-in="1"] { background: color-mix(in oklch, var(--pt-pc) 72%, #fff); }
.pt-card[data-you="1"] { box-shadow: 0 0 0 2px #fff; }
.pt-card[data-fx="good"] { animation: pt-good 1.1s both; z-index: 2; }
.pt-card[data-fx="bad"] { animation: pt-bad 2.4s both; z-index: 2; }
/* the mock's one loop (L16) split into its two one-shots: GOOD 0–18% of 8 s, BAD 50–82% of 8 s */
@keyframes pt-good { 0% { transform: none; filter: none } 22% { transform: scale(1.08); filter: brightness(1.35) saturate(1.25) } 50% { transform: scale(.985); filter: brightness(1.15) } 72% { transform: scale(1); filter: brightness(1.05) } 100% { transform: none; filter: none } }
@keyframes pt-bad { 0% { transform: none; filter: none } 6% { transform: translateX(-5px); filter: brightness(.55) saturate(.8) } 12% { transform: translateX(5px) } 19% { transform: translateX(-4px) } 25% { transform: translateX(3px) } 31% { transform: translateX(-2px) } 37% { transform: translateX(1px) } 44% { transform: none; filter: brightness(.55) saturate(.8) } 75% { filter: brightness(.55) saturate(.8) } 100% { transform: none; filter: none } }
.pt-card-top { display: flex; align-items: center; gap: 5px; min-width: 0; height: 15px; }
.pt-cbody, .pt-cnrow { display: flex; flex: 1; min-width: 0; align-items: center; }
.pt-cname { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pt-cpu { display: none; }
.pt-cicon { flex: none; font-size: 10px; font-weight: 800; color: rgba(11, 12, 15, .72); width: 10px; text-align: center; }
.pt-cstatus { display: none; }
.pt-cline { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; height: 15px; overflow: hidden; }
.pt-cline b { font-weight: 900; font-size: 1.12em; margin-right: 1px; }
.pt-cline i { font-style: normal; color: #fff; text-shadow: -1px -1px 0 #0b0c0f, 1px -1px 0 #0b0c0f, -1px 1px 0 #0b0c0f, 1px 1px 0 #0b0c0f, 0 0 1px #0b0c0f; margin: 0 3px 0 1px; }
.pt-cright { display: none; }

/* the course area: the one flexible cell */
.pt-mid { grid-area: course; position: relative; min-width: 0; min-height: 0; }
.pt-area { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: crosshair; }   /* owner playtest 1: drag anywhere on the course */
.pt-wrap { position: absolute; border-radius: 8px; background: var(--pt-railTex), var(--pt-rail); box-shadow: inset 0 0 0 2px var(--pt-railLo), 0 0 0 2px var(--pt-railLo), var(--pt-railGlow); }
.pt-felt { position: absolute; overflow: hidden; border-radius: 2px; background: var(--pt-feltTex), var(--pt-felt); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); touch-action: none; }
.pt-felt > div { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pt-tags, .pt-marks { position: absolute; inset: 0; pointer-events: none; }
.pt-tags > div, .pt-marks > div { position: absolute; }

/* the feed */
.pt-feed { grid-area: feed; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; overflow: hidden; min-width: 0; }
.pt-feedt { display: none; }
.pt-feedl { height: 16px; line-height: 16px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pt-dim); }
.pt-feedl[data-top="1"] { color: var(--pt-txt); font-weight: 700; }
/* THE SHOT CALLS in the feed (owner, 2026-10-03): the call's own words in its own colour, bold on every line */
.pt-call { font-weight: 800; color: #ffd83d; }
.pt-call[data-call="ace"] { color: #ffd83d; text-shadow: 0 0 8px rgba(255, 216, 61, .55); }
.pt-call[data-call="pool"] { color: #c99bff; }
.pt-call[data-call="bumped"] { color: #ffa34d; }
.pt-call[data-call="trick"] { color: #ff6b81; }
.pt-call[data-call="curve"] { color: #3fe0c5; }
.pt-call[data-call="kiss"] { color: #ff8fc8; }
.pt-call[data-call="bank"] { color: #6fb4ff; }
.pt-call[data-call="long"] { color: #7fe36f; }
.pt-call[data-call="lipin"] { color: #f2e6b8; }

/* the controls band: state · swing pad · meter · power-up bubble · lay of the land */
.pt-state { grid-area: state; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden;
  background: transparent; border: 2px dashed var(--pt-line); color: var(--pt-dim); min-width: 0; }
.pt-state i { font-style: normal; width: 16px; text-align: center; flex: none; }
/* ⭐ THE AIM CHIP rides at the row's right end: the row's height is fixed, the status text gives way (ellipsis) — nothing
   above or below moves when it appears or its label changes (the locked-layout standard). */
.pt-state-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pt-aimchip { flex: none; margin-left: auto; height: 24px; padding: 0 9px; border-radius: 999px; border: 1.5px solid currentColor;
  background: rgba(0, 0, 0, .18); color: inherit; font: 800 11px var(--pt-ui); letter-spacing: .02em; white-space: nowrap; cursor: pointer; opacity: .9; }
.pt-aimchip:disabled { cursor: default; opacity: .45; }
.pt-aimk { display: none; }   /* both rows are narrow: the chip reads Spot / Push / Pull (Aim: only for screen readers + textContent) */
@media (hover: hover) { .pt-aimchip:not(:disabled):hover { opacity: 1; background: rgba(0, 0, 0, .3); } }
.pt-state[data-s="ready"] { background: var(--pt-sel); border: 2px solid var(--pt-sel); color: var(--pt-selTxt); }
.pt-state[data-s="in"] { background: color-mix(in oklch, var(--pt-txt) 10%, transparent); border: 2px solid var(--pt-txt); color: var(--pt-txt); }
.pt-pad { grid-area: pad; position: relative; width: var(--pt-padS); height: var(--pt-padS); align-self: center; border-radius: 16px; overflow: hidden; cursor: grab; touch-action: none;
  background: color-mix(in oklch, var(--pt-txt) 6%, transparent); border: 2px solid var(--pt-line); }
.pt-pad[data-s="drag"] { border-color: var(--pt-txt); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pt-sel) 55%, transparent); cursor: grabbing; }
.pt-pad[data-s="hover"] { box-shadow: 0 0 0 3px color-mix(in oklch, var(--pt-txt) 28%, transparent); }
.pt-pad[data-s="locked"], .pt-pad[data-s="done"] { border-style: dashed; cursor: not-allowed; }
.pt-pad > div { position: absolute; }
.pt-meter { grid-area: meter; position: relative; width: var(--pt-meterW); height: var(--pt-padS); align-self: center; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--pt-line);
  background: repeating-linear-gradient(0deg, color-mix(in oklch, var(--pt-txt) 16%, transparent) 0 1px, transparent 1px 20%), color-mix(in oklch, var(--pt-txt) 6%, transparent); }
.pt-mfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, var(--pt-sel), color-mix(in oklch, var(--pt-sel) 55%, #fff)); }
.pt-mlab { position: absolute; left: 0; right: 0; top: 5px; text-align: center; font-size: 9px; font-weight: 800; color: var(--pt-txt); font-variant-numeric: tabular-nums; }
.pt-bubble { grid-area: bubble; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px; border-radius: 14px; min-width: 0; overflow: hidden; cursor: pointer;
  border: 2px dashed var(--pt-line); color: var(--pt-dim); background: transparent; font: inherit; text-align: left; transition: filter .12s, transform .12s, box-shadow .12s; }
.pt-bic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; line-height: 1; border: 2px dashed var(--pt-line); font-family: system-ui, sans-serif; }
.pt-bbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-bname { font-size: 14px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.pt-bsub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.pt-bubble[data-s="empty"] { cursor: default; }
.pt-bubble[data-s="incoming"] { border: 2px dashed var(--pt-txt); background: color-mix(in oklch, var(--pt-txt) 7%, transparent); color: var(--pt-txt); cursor: default; }
.pt-bubble[data-s="incoming"] .pt-bic { border-color: var(--pt-txt); }
.pt-bubble[data-s="holding"] { background: var(--pt-panel); border: 2px solid color-mix(in oklch, var(--pt-txt) 60%, transparent); color: var(--pt-txt); }
.pt-bubble[data-s="holding"] .pt-bic { background: var(--pt-bubbleBg); color: var(--pt-bubbleTxt); border: none; }
.pt-bubble[data-s="armed"], .pt-bubble[data-s="waiting"] { background: var(--pt-bubbleBg); color: var(--pt-bubbleTxt); border: 2px solid var(--pt-txt);
  box-shadow: 0 0 0 3px var(--pt-txt), 0 0 22px 4px color-mix(in oklch, var(--pt-bubbleBg) 70%, transparent); }
.pt-bubble[data-s="armed"] .pt-bic, .pt-bubble[data-s="waiting"] .pt-bic { background: var(--pt-bubbleTxt); color: var(--pt-bubbleBg); border: none; }
.pt-bubble[data-s="waiting"] { outline: 2px dashed var(--pt-txt); outline-offset: 3px; }
.pt-bubble[data-s="locked"] { cursor: not-allowed; background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--pt-txt) 7%, transparent) 0 6px, transparent 6px 12px); }
.pt-bubble[data-s="holding"]:active { transform: translateY(2px); filter: brightness(.9); }
@media (hover: hover) { .pt-bubble[data-s="holding"]:hover { filter: brightness(1.15); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pt-txt) 30%, transparent); } }
.pt-lotl { grid-area: lotl; height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: 13px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; cursor: pointer;
  background: var(--pt-btn); color: var(--pt-btnTxt); border: 1px solid var(--pt-line); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .7); transition: filter .12s, transform .12s, box-shadow .12s; min-width: 0; }
.pt-lotl[data-s="active"] { background: var(--pt-txt); color: var(--pt-mid); border: 2px solid var(--pt-txt); box-shadow: 0 0 16px color-mix(in oklch, var(--pt-txt) 40%, transparent); }
.pt-lotl:disabled { background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--pt-txt) 7%, transparent) 0 6px, transparent 6px 12px); color: var(--pt-dim); border: 2px dashed var(--pt-line); cursor: not-allowed; box-shadow: none; }
.pt-lotl:not(:disabled):active { transform: translateY(2px); filter: brightness(.88); }
@media (hover: hover) { .pt-lotl:not(:disabled):hover { filter: brightness(1.15); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pt-txt) 30%, transparent); } .pt-menu:hover { box-shadow: 0 0 0 2px var(--pt-txt); } }

/* ── SCREEN-LEVEL layers (absolute inside the root; never fixed) ────────── */
.pt-callout { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); z-index: 32; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 18px; border-radius: 16px;
  background: var(--pt-bubbleBg); color: var(--pt-bubbleTxt); box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .7); white-space: nowrap; text-align: center; pointer-events: none; opacity: 0; transition: opacity .18s; }
.pt-callout[data-on="1"] { opacity: 1; }
.pt-callout[data-on="1"][data-aim="1"] { opacity: .12; }
.pt-callout[data-hot="1"] { background: #fff; color: #0b0c10; box-shadow: 0 0 40px rgba(255, 255, 255, .5); }
.pt-callout em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .14em; opacity: .75; }
.pt-callout b { font-size: 20px; font-weight: 800; }
.pt-callout span { font-size: 12px; opacity: .85; }
.pt-fx { position: absolute; inset: 0; pointer-events: none; z-index: 28; overflow: hidden; }
.pt-fx > div { position: absolute; }
.pt-scrim { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(4, 6, 5, .62); z-index: 24; display: none; }
.pt-card-sheet { position: absolute; left: 50%; top: 120px; width: calc(100% - 28px); transform: translateX(-50%); display: none; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px;
  background: var(--pt-mid); color: var(--pt-txt); border: 2px solid var(--pt-txt); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); z-index: 25; }
.pt-root[data-sheet="1"] .pt-scrim, .pt-root[data-sheet="1"] .pt-card-sheet { display: flex; }
.pt-sheet-head { display: flex; flex-direction: column; gap: 2px; }
.pt-sheet-head b { font-size: 18px; font-weight: 800; }
.pt-sheet-head span { font-size: 12px; color: var(--pt-dim); }
.pt-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 4px; align-items: center; }
.pt-gh { font-size: 10px; font-weight: 700; color: var(--pt-dim); letter-spacing: .08em; text-align: center; padding: 6px 0; }
.pt-gh[data-l="1"] { text-align: left; }
.pt-gc { height: 34px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 8px; background: var(--pt-seat); border: 1px solid var(--pt-line); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.pt-gc[data-k="par"] { background: transparent; color: var(--pt-dim); font-size: 12px; }
.pt-gc[data-k="empty"] { background: transparent; border: 1px dashed var(--pt-line); }
.pt-gc[data-flag="1"] { border: 2px solid var(--pt-txt); background: color-mix(in oklch, var(--pt-txt) 10%, var(--pt-seat)); }
.pt-gc[data-k="tot"] { font-size: 12px; }
.pt-gc[data-you="1"][data-k="tot"] { background: var(--pt-sel); color: var(--pt-selTxt); }
.pt-gn { display: flex; align-items: center; height: 34px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; border-left: 4px solid var(--pt-pc); padding-left: 8px; }
.pt-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-sheet-foot span { font-size: 11px; color: var(--pt-dim); }
.pt-next { flex: none; height: 36px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--pt-line); background: var(--pt-btn); color: var(--pt-btnTxt); font: 800 14px var(--pt-ui); cursor: pointer; }
.pt-next:active { transform: translateY(1px); }
@media (hover: hover) { .pt-next:hover { filter: brightness(1.12); } }
/* the setup roll strip */
.pt-strip { position: absolute; left: 50%; top: 190px; width: 348px; height: 136px; transform: translateX(-50%); z-index: 26; display: none; flex-direction: column; gap: 6px; padding: 12px 14px;
  border-radius: 18px; background: rgba(10, 12, 11, .9); border: 2px solid var(--pt-txt); box-shadow: 0 20px 40px rgba(0, 0, 0, .55); color: #fff; }
.pt-root[data-strip="1"] .pt-strip { display: flex; }
.pt-strip-t { font: 800 11px ui-monospace, Menlo, monospace; letter-spacing: .12em; }
.pt-strip-dice { flex: 1; display: grid; grid-template-columns: repeat(var(--pt-n, 3), minmax(0, 1fr)); gap: 6px; align-items: center; }
.pt-sd { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pt-sd-die { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22%; box-shadow: 0 0 0 3px var(--pt-pc); }
.pt-sd-lab { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* the pickup die's cube (the Ramp roll — frontend/ramp-roll.js) */
.pt-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.pt-cubeslot { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pt-cubeg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pt-cubeg > * { flex: none; }
.pt-endrows { display: flex; flex-direction: column; gap: 6px; }
.pt-endrow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.pt-endrow[data-win="1"] { box-shadow: inset 0 0 0 2px currentColor; }
.pt-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pt-endnm i { width: 12px; height: 12px; border-radius: 50%; background: var(--pt-pc); display: inline-block; }
.pt-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }
/* 🌐 ONLINE (MP slice B): THE CLUB TAP — between your release and your ball moving (the server's LEAD + the round trip) the
   aim you sent stays drawn and breathes, and a ring pulses on your ball (puttily.js ptDynamicEls). */
.pt-gauge.pt-tapping { animation: pt-tap .5s ease-in-out infinite alternate; }
@keyframes pt-tap { from { opacity: 1 } to { opacity: .55 } }
.pt-clubtap { pointer-events: none; }
/* the scorecard's per-hole replay hash (the owner's PC ↔ iPhone check: the same hex on every screen) */
.pt-sh-hash { font-style: normal; font-family: ui-monospace, Menlo, monospace; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .pt-root *, .pt-root *::before, .pt-root *::after { animation: none !important; transition: none !important; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #puttily-game-screen.pt-playing .wrap { padding: 0 2px; max-width: none; }
  #puttily-game-screen.pt-playing .topbar { display: none; }
  #puttily-game-screen.pt-playing.pt-topbar-open .topbar { display: flex; }
  /* the notch: the hidden .topbar carried the safe-area inset (predicely_notch_safe_area; test/_safe_area_top.test.js).
     ⛔ PADDING, never margin (a margin collapses through the screen div). */
  #puttily-game-screen.pt-playing:not(.pt-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
}
/* ⭐ SHORT PHONES (owner playtest 2026-10-07: Android in Brave — URL bar + toolbar + nav bar leave ≈ 360 × 520, and the
   course, the one flexible row, was "TINY"). puttily.js ptFitPhone sets data-short when the root is under PT_UI.shortH:
   every fixed row tightens (320 → 227 px) and the course takes the rest — and ptPaintCourse turns the hole SIDEWAYS when
   that draws it bigger. Decided by the screen, never by play, so nothing moves mid-hole (the locked-layout standard). */
@media (max-width: 999px) {
  .pt-root[data-short="1"] { --pt-pad: 6px; --pt-gap: 5px; --pt-padS: 100px;
    grid-template-rows: 42px 30px minmax(0, 1fr) 19px 28px 40px 26px; }
  .pt-root[data-short="1"] .pt-card { height: 42px; gap: 2px; }
  .pt-root[data-short="1"] .pt-state { height: 28px; }
  .pt-root[data-short="1"] .pt-hole-l { flex-direction: row; align-items: baseline; gap: 8px; }
  .pt-root[data-short="1"] .pt-htitle { font-size: 14px; }
  .pt-root[data-short="1"] .pt-hclock em { display: none; }   /* one row: "Hole 5 of 5 · Par 2  1:15" */
  .pt-root[data-short="1"] .pt-cd-num { font-size: 20px; }
  .pt-root[data-short="1"] .pt-bubble { height: 40px; gap: 8px; padding: 0 8px; }
  .pt-root[data-short="1"] .pt-bic { width: 28px; height: 28px; font-size: 15px; }
  .pt-root[data-short="1"] .pt-bname { font-size: 13px; }
  .pt-root[data-short="1"] .pt-bsub { font-size: 10px; }
  .pt-root[data-short="1"] .pt-lotl { height: 26px; font-size: 12px; border-radius: 9px; }
}
/* the mock's 360 × 740 floor: same slots, a little tighter */
@media (max-width: 370px) {
  .pt-root { --pt-pad: 8px; --pt-gap: 6px; --pt-cdW: 108px; }
  .pt-htitle { font-size: 14px; }
  .pt-cname { font-size: 11px; }
  .pt-cline { font-size: 11px; }
  .pt-bubble { padding: 0 8px; gap: 8px; }
  .pt-bname { font-size: 13px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 637 less the 84 px chat strip) ── */
@media (min-width: 1000px) {
  #puttily-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .pt-root {
    --pt-pad: 14px; --pt-padS: 176px; --pt-meterW: 24px;
    width: 1280px; height: var(--pt-fit-h, 553px);
    display: flex; flex-direction: row; gap: 14px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .pt-left, .pt-right { display: flex; flex-direction: column; gap: 10px; width: 244px; flex: none; min-height: 0; }
  .pt-gap { display: block; flex: 1; }
  .pt-hole { height: 84px; flex: none; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; padding: 0 14px; border-radius: var(--pt-rad); background: var(--pt-panel); border: 1px solid var(--pt-line); }
  .pt-hole-l { gap: 5px; }
  .pt-htitle { font-size: 17px; }
  .pt-hclock { display: flex; align-items: baseline; gap: 8px; color: var(--pt-txt); }
  .pt-hclock b { font-size: 30px; font-weight: 800; line-height: 1; }
  .pt-hclock em { font-size: 12px; color: var(--pt-dim); }
  .pt-menu { display: none; }
  .pt-cd { height: 86px; flex: none; justify-content: flex-start; gap: 12px; padding: 0 14px; border-radius: var(--pt-rad); }
  .pt-cd:not([data-on="1"]) { background: var(--pt-panel); }
  .pt-cd-ring { display: flex; order: -1; width: 62px; height: 62px; flex: none; border-radius: 50%; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--pt-cdc); border: 2px dashed var(--pt-line); }
  .pt-cd[data-on="1"] .pt-cd-ring { border: none; background: radial-gradient(closest-side, var(--pt-mid) 80%, transparent 81%), conic-gradient(var(--pt-cdc) var(--pt-cdf, 0%), color-mix(in oklch, var(--pt-txt) 16%, transparent) 0); }
  .pt-cd-num { display: none; }
  .pt-cd-txt { gap: 3px; line-height: 1.25; }
  .pt-cd-lab { font-size: 10px; }
  .pt-cd-l1 { font-size: 14px; font-weight: 700; }
  .pt-cd-l2 { display: block; font-size: 12px; color: var(--pt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pt-ctrl { display: flex; flex: none; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--pt-rad); background: var(--pt-panel); border: 1px solid var(--pt-line); }
  .pt-state { height: 36px; font-size: 16px; padding: 0 12px; }
  .pt-state i { width: 18px; }
  .pt-state { gap: 6px; }
  .pt-aimchip { height: 26px; padding: 0 7px; font-size: 11px; }   /* the 218 px row keeps "Ready — shoot!" whole beside it */
  .pt-padrow { display: flex; gap: 10px; height: 176px; }
  .pt-mlab { font-size: 10px; }
  .pt-bubble { height: 60px; }
  .pt-bic { width: 40px; height: 40px; font-size: 20px; }
  .pt-bname { font-size: 15px; }
  .pt-mid { flex: 1; min-height: 0; }
  .pt-cards { display: flex; flex-direction: column; gap: 8px; flex: none; }
  .pt-card { height: 62px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 12px; border-radius: var(--pt-rad); }
  .pt-card-top { display: contents; }
  .pt-cbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .pt-cname { font-size: 15px; flex: none; max-width: 100%; }
  .pt-cnrow { display: flex; align-items: center; gap: 6px; min-width: 0; height: 18px; }
  .pt-cpu { display: inline-flex; flex: none; height: 18px; align-items: center; font-size: 11px; font-weight: 800; padding: 0 5px; border-radius: 5px; background: var(--pt-bubbleBg); color: var(--pt-bubbleTxt); white-space: nowrap; max-width: 92px; overflow: hidden; }
  .pt-cpu:empty { display: none; }
  .pt-cicon { display: none; }
  .pt-cstatus { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; color: rgba(11, 12, 15, .72); height: 15px; line-height: 15px; }
  .pt-cline { display: none; }
  .pt-cright { display: flex; width: 62px; flex: none; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1; }
  .pt-cright span { display: flex; align-items: baseline; gap: 4px; }
  .pt-cright em { font-style: normal; font-size: 9px; letter-spacing: .08em; font-weight: 700; color: rgba(11, 12, 15, .72); }
  .pt-cright b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .pt-cright small { font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: rgba(11, 12, 15, .72); }
  .pt-cright small i { font-style: normal; color: #fff; text-shadow: -1px -1px 0 #0b0c0f, 1px -1px 0 #0b0c0f, -1px 1px 0 #0b0c0f, 1px 1px 0 #0b0c0f; margin: 0 2px; }
  .pt-feed { height: 118px; flex: none; justify-content: flex-start; gap: 6px; padding: 11px 14px; border-radius: var(--pt-rad); background: var(--pt-panel); border: 1px solid var(--pt-line); }
  .pt-feedt { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--pt-dim); height: 14px; }
  .pt-feedl { font-size: 13px; height: 18px; line-height: 18px; }
  .pt-lotl { height: 48px; font-size: 15px; flex: none; }
  .pt-callout { top: 24px; padding: 12px 26px; }
  .pt-callout em { font-size: 11px; }
  .pt-callout b { font-size: 26px; }
  .pt-callout span { font-size: 14px; }
  .pt-card-sheet { top: 46px; width: 640px; padding: 20px 22px; }
  .pt-sheet-head { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .pt-sheet-head b { font-size: 22px; }
  .pt-sheet-head span { font-size: 13px; }
  .pt-grid { grid-template-columns: minmax(0, 1.7fr) repeat(5, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 6px; }
  .pt-gh { font-size: 12px; }
  .pt-gc { height: 40px; font-size: 17px; }
  .pt-gc[data-k="par"] { font-size: 14px; }
  .pt-gc[data-k="tot"] { font-size: 15px; }
  .pt-gn { height: 40px; font-size: 15px; }
  .pt-strip { top: 60px; width: 560px; height: 150px; }
  .pt-sd-lab { font-size: 12px; }
}