/* PLAY REDO (app.js, index.html #playUi): over the satellite, three panels in #0c100e at 88 percent.
   Top bar under the status bar: hole arrows (44px), Hole n (Barlow Condensed 24/600) over "Par n · course" with a 13px chevron; the
   center opens the course picker. Yardage card at the right under the top bar: Front, Center (44/700), Back, right aligned (glass
   task order; the line under Center was removed). Bottom row above the tab bar (56px): GPS chip at the left, The Word with its live count at the right.
   frameHole keeps the tee and green markers 20px clear of all three. The profile circle is not on the map (band header elsewhere). */
.play-ui{--pr-bg:rgba(12,16,14,.88)}
.pr-top{position:fixed;left:0;right:0;top:var(--safe-t);z-index:6;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;column-gap:8px;
  padding:12px 16px;background:var(--pr-bg);color:var(--ink)}
.pr-arrow{width:44px;height:44px;padding:0;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink);font:600 36px/1 var(--f-head);cursor:pointer;display:grid;place-items:center}
.pr-arrow:active{background:rgba(255,255,255,.08)}
.pr-arrow:disabled{opacity:.3;cursor:default}
.pr-title{min-width:0;height:48px;padding:0;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:4px}
.pr-title:active{background:rgba(255,255,255,.08)}
.pr-title b{display:block;font:600 24px/28px var(--f-head);letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap}
.pr-sub{display:flex;align-items:center;column-gap:4px;max-width:100%;font:400 13px/16px var(--f-text);color:var(--ink-2)}
.pr-sub-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-chev{flex:none;width:13px;height:9px;color:var(--ink-2)}
.pr-yards{position:fixed;right:16px;top:calc(var(--safe-t) + 84px);z-index:6;display:flex;flex-direction:column;row-gap:8px;align-items:flex-end;min-width:96px;
  padding:12px;border-radius:12px;background:var(--pr-bg);color:var(--ink);text-align:right}
.pr-yards.off{display:none}
.pr-yards.soon > .pr-y{display:none}
.pr-y{display:flex;flex-direction:column;align-items:flex-end;row-gap:4px}
.pr-y small{display:block;font:600 var(--t-label)/1.3 var(--f-text);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3)}
.pr-y b{display:block;font:600 20px/1 var(--f-head);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ink)}
.pr-y.pr-c b{font-size:44px;font-weight:700}
.pr-y em{display:block;font:400 var(--t-label)/1.3 var(--f-text);font-style:normal;color:var(--ink-2)}
.pr-y em:empty{display:none}
.pr-soon{margin:0;white-space:nowrap;font:400 var(--t-small)/1.4 var(--f-text);color:var(--ink-2)}
.pr-bottom{position:fixed;left:0;right:0;bottom:var(--tabs-total);z-index:6;height:56px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;column-gap:12px;background:var(--pr-bg)}
.pr-gps{display:flex;align-items:center;column-gap:8px;min-width:0;font:600 var(--t-small)/1 var(--f-text);color:var(--ink-2);white-space:nowrap}
.pr-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.pr-gps[data-state=live] .pr-dot{background:var(--green-2)}
.pr-gps[data-state=live]{color:var(--ink)}
.pr-word{flex:none;display:flex;align-items:center;column-gap:8px;height:44px;padding:0 12px;border:1px solid var(--edge, rgba(255,255,255,.3));border-radius:var(--r-ctl);background:transparent;
  color:var(--ink);font:600 var(--t-body)/1 var(--f-text);cursor:pointer}
.pr-word:active{background:rgba(255,255,255,.08)}
.pr-badge{min-width:20px;height:20px;padding:0 4px;border-radius:10px;display:grid;place-items:center;background:var(--green-2);color:#fff;font:700 var(--t-label)/1 var(--f-text);font-variant-numeric:tabular-nums}
.pr-badge:is(:empty){display:none}
:is(.pr-arrow,.pr-title,.pr-word):focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
/* the first time tip for The Word points down at its button */
body.tab-play .word-tip{left:16px;right:16px;bottom:calc(var(--tabs-total) + 68px)}
body.tab-play .word-tip::after{left:auto;right:48px}
/* the profile circle is not on the map; it is in the band header on every other screen */
body.tab-play .profile-btn{display:none}
.pr-word[data-count="0"] .pr-badge{background:var(--ctl)}

/* PLAYFIX (Jay): edge to edge map and FLOATING panels. The satellite fills Play from the top of the screen (behind the status bar in
   standalone, viewport-fit=cover) down to the tab bar; the top bar, the yardage card and the bottom row float 16px in from the sides
   with radius 16 and map around every edge. Panels clear the status bar with env(safe-area-inset-top). */
body.tab-play #map{position:fixed!important;left:0;right:0;top:0;width:100vw;height:calc(var(--app-h) - var(--tabs-bar))}   /* fullscreen task: down to the tab bar's top */
.pr-top{left:16px;right:16px;top:calc(var(--safe-t) + 12px);border-radius:16px;padding:12px 8px;column-gap:4px}
.pr-yards{right:16px;top:calc(var(--safe-t) + 96px);border-radius:16px}
.pr-bottom{left:16px;right:16px;bottom:calc(var(--tabs-total) + 12px);border-radius:16px;padding:0 12px 0 16px}
body.tab-play .word-tip{bottom:calc(var(--tabs-total) + 80px)}
/* the top bar line: "Par 4 · 280 Yds · White · " stays whole, the course name gives way with an ellipsis */
.pr-sub-t{display:flex;min-width:0;white-space:nowrap}
#parLine{flex:none}
#courseName{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* tee chip at the top of the yardage card (44px target) */
.pr-tee{display:flex;align-items:center;justify-content:flex-end;column-gap:4px;height:44px;margin:-12px -4px 0 0;padding:0 4px;border:0;border-radius:var(--r-ctl);background:transparent;
  color:var(--ink);font:600 var(--t-small)/1 var(--f-text);cursor:pointer;white-space:nowrap}
.pr-tee:active{background:rgba(255,255,255,.08)}
.pr-tee:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
.pr-yards.soon .pr-tee{display:none}
.pr-yards{row-gap:4px}
/* Course Intel button: one line */
.pr-word{white-space:nowrap}
/* Select a Tee sheet: Men / Women, one radio row per tee */
.sheet .tee-sex{margin:0 0 12px}
.sheet .tee-list{display:flex;flex-direction:column}
.sheet .tee-row{display:flex;align-items:center;justify-content:space-between;column-gap:12px;min-height:48px;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;
  color:var(--ink);font:400 var(--t-body)/1.3 var(--f-text);text-align:left;cursor:pointer;width:100%}
.sheet .tee-row .tee-t{flex:1;min-width:0}
.sheet .tee-radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink-3)}
.sheet .tee-row[aria-checked=true] .tee-radio{border-color:var(--green-2);background:radial-gradient(circle,var(--green-2) 0 5px,transparent 6px)}
#parLine{margin-right:4px}   /* the space before the course name (flex drops trailing spaces) */
/* the bottom row sits 32px above the tab bar so the Google logo and Terms at the map's bottom edge stay visible under it */
.pr-bottom{bottom:calc(var(--tabs-total) + 32px)}
body.tab-play .word-tip{bottom:calc(var(--tabs-total) + 100px)}
.sheet .tee-sex{display:grid;grid-template-columns:1fr 1fr;column-gap:4px}
.sheet .tee-sex button{margin:0;min-width:0}
.sheet .tee-list .tee-row{margin:0;height:auto;border-radius:0}
/* GLASS (Jay): the top bar, the yardage card, the bottom row and the Course Intel tip are frosted glass over the satellite: #0c100e at
   55 percent (raised per panel only where a text box measured under 4.5:1 over the brightest or busiest part of hole 1) plus a 14px blur.
   The yardage card reads tee chip, Front, Center (44/700), Back. Bottom sheets stay solid. */
.play-ui{--g-top:.4;--g-card:.4;--g-bottom:.4;--g-tip:.4}   /* glass3 (Jay): lighter glass, 40 percent for all four panels */
.pr-top,.pr-yards,.pr-bottom,body.tab-play .word-tip{-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%)}
.pr-top{background:rgba(12,16,14,var(--g-top))}
.pr-yards{background:rgba(12,16,14,var(--g-card))}
.pr-bottom{background:rgba(12,16,14,var(--g-bottom))}
body.tab-play .word-tip{--g-tip:.4;border-radius:16px;background:rgba(12,16,14,var(--g-tip))}
body.tab-play .word-tip::after{border-top-color:rgba(12,16,14,var(--g-tip))}
/* GLASS3 (Jay): every panel's text carries a shadow so it reads on the lighter glass; the card captions are #d0d6d3 and sit directly
   above their own numbers (4px), 12px between pairs; numbers stay white. The first visit tip sits right above the bottom row and Play
   frames the hole above it while it shows (app.js frameHole). */
.pr-top,.pr-yards,.pr-bottom,body.tab-play .word-tip{text-shadow:0 1px 3px rgba(0,0,0,.75)}
.pr-y small{color:#d0d6d3}
.pr-yards{row-gap:12px}
.pr-y{row-gap:4px}
/* SUBTITLE (Jay): the top bar subtitle reads #d0d6d3, the same as the yardage card captions */
.pr-sub{color:#d0d6d3}
/* LIVEGPS: live but not on this hole, the chip reads Not on this hole with the gray dot; standing on another mapped hole, a small
   Go to hole N button shows under the hole title in the top bar */
.pr-gps[data-state=offhole]{color:var(--ink)}
.pr-goto{grid-column:2;justify-self:center;height:32px;margin-top:4px;padding:0 12px;border:1px solid rgba(255,255,255,.3);border-radius:16px;background:transparent;color:var(--ink);font:600 var(--t-small)/1 var(--f-text);cursor:pointer;white-space:nowrap}
.pr-goto[hidden]{display:none}
.pr-goto:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}

/* auditfix1: the unmapped hole card is a calm panel (no red, normal case title); the Turn on GPS and Map couldn't load cards use the
   same panel; the GPS chip reads GPS off · Tap to turn on until a tap */
body.tab-play .unmapped b{font:600 17px/1.3 var(--f-text);letter-spacing:0;text-transform:none}
body.tab-play .unmapped span{font:400 14px/1.4 var(--f-text)}
.pr-ask-row{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:12px}
.pr-ask-row .textbtn{font:600 15px/1 var(--f-text);color:var(--ink, #fff);background:none;border:0;padding:12px 4px;text-decoration:underline;text-underline-offset:4px}
.pr-gps[data-state=off]{cursor:pointer;color:var(--ink)}
/* the Turn on GPS card sits left of the yardage panel (never over the numbers); button, then Not now */
#gpsAsk{left:16px;right:122px;padding:14px 14px 8px}
#gpsAsk .pr-ask-row{flex-direction:column;gap:4px}
#gpsAsk .pr-ask-row .cta{width:100%}

/* STARTROUND (Jay): one full width primary button 12px above the bottom row, 16px from the sides, 48px, radius 12: Start a Round, or
   Score Hole N while a round is in progress (app.js). frameHole keeps the markers 20px clear of it; the Course Intel tip sits above it. */
.pr-start{position:fixed;left:16px;right:16px;bottom:var(--pr-start-b, calc(var(--tabs-total) + 100px));z-index:6;height:48px;margin:0;padding:0 16px;border:0;border-radius:12px;
  background:var(--green);color:#fff;font:600 16px/1 var(--f-text);letter-spacing:0;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent}
.pr-start[hidden]{display:none}
.pr-start:active{background:#00573c}
.pr-start:focus-visible{outline:2px solid #fff;outline-offset:2px}
html[data-play-cta="1"] body.tab-play .word-tip{bottom:calc(var(--pr-start-b, calc(var(--tabs-total) + 100px)) + 60px)}
/* Plays Like under the Center number: "Plays Like 292" (16px, caption color), then the wind with an arrow along the shot line; tap
   opens the breakdown. Hidden when the wind or elevation could not be read. */
.pr-pl{display:flex;flex-direction:column;align-items:flex-end;row-gap:4px;min-height:44px;margin:4px -4px -4px 0;padding:4px;border:0;border-radius:var(--r-ctl);
  background:transparent;color:#d0d6d3;text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pr-pl[hidden]{display:none}
.pr-pl:active{background:rgba(255,255,255,.08)}
.pr-pl:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
#plYds{font:400 16px/1.25 var(--f-text);white-space:nowrap}
.pr-pl-w{display:flex;align-items:center;column-gap:4px;font:400 13px/1.3 var(--f-text);white-space:nowrap}
#plArrow{flex:none;width:12px;height:12px;transition:transform .2s}
.sheet .pl-rows{margin:0 0 12px}
.sheet .pl-row{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:12px 0;border-bottom:1px solid var(--line);font:400 var(--t-body)/1.3 var(--f-text);color:var(--ink)}
.sheet .pl-row b{font:600 var(--t-body)/1.3 var(--f-text);font-variant-numeric:tabular-nums}
.sheet .pl-row.total b{font-size:20px}

/* NAVPLAY (Jay): three floating panels and at most one prompt.
   Top bar: three centered lines: the course name (13px, opens the picker, ellipsis only when needed) with the GPS dot (green when
   live, gray otherwise; it opens the GPS sheet), "‹ Hole n ›" (24/600 with the 44px arrows), then "Par n · yds · " and the tee
   ("White ▾" opens Select a Tee). The yardage card is slim (104px at most, no tee chip) with Plays Like as one line under Back.
   One bottom row: Start a Round (green, about 60 percent, Score Hole n during a round) and Course Intel with its count. */
.pr-top{display:flex;flex-direction:column;align-items:center;row-gap:0;padding:8px 8px 8px;column-gap:0}
.pr-l1,.pr-l2,.pr-l3{display:flex;align-items:center;justify-content:center;max-width:100%;min-width:0}
.pr-l1{height:32px;column-gap:4px}
.pr-course{display:flex;align-items:center;column-gap:4px;min-width:0;max-width:calc(100% - 48px);height:32px;padding:0 8px;border:0;border-radius:var(--r-ctl);background:transparent;
  color:#d0d6d3;font:600 13px/16px var(--f-text);cursor:pointer}
.pr-course #courseName{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-course:active,.pr-teebtn:active,.pr-gpsdot:active{background:rgba(255,255,255,.08)}
.pr-gpsdot{flex:none;width:44px;height:32px;margin:0;padding:0;border:0;border-radius:var(--r-ctl);background:transparent;display:grid;place-items:center;cursor:pointer}
.pr-gpsdot .pr-dot{width:10px;height:10px;border-radius:50%;background:var(--ink-3);box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.pr-gpsdot[data-state=live] .pr-dot{background:var(--green-2)}
.pr-l2{column-gap:8px;height:44px}
.pr-l2 b{display:block;font:600 24px/28px var(--f-head);letter-spacing:0;color:var(--ink);white-space:nowrap}
.pr-l3{height:32px;column-gap:0;font:400 13px/16px var(--f-text);color:#d0d6d3;white-space:nowrap}
.pr-l3 .pr-par{white-space:pre}
.pr-teebtn{display:flex;align-items:center;column-gap:4px;height:32px;margin:0;padding:0 8px 0 4px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink);font:600 13px/16px var(--f-text);cursor:pointer}
.pr-course .pr-chev,.pr-teebtn .pr-chev{width:10px;height:7px;color:#d0d6d3}
:is(.pr-course,.pr-teebtn,.pr-gpsdot):focus-visible{outline:2px solid var(--green-2);outline-offset:-2px}
.pr-goto{margin:4px 0 0}
.pr-yards{width:auto;min-width:0;max-width:104px;box-sizing:border-box}
.pr-pl{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;column-gap:4px;row-gap:0;min-height:32px;margin:0 -4px 0 0;padding:0 4px;white-space:nowrap}
#plYds{font:600 14px/1.2 var(--f-head);letter-spacing:0;color:#d0d6d3}
.pr-pl-w{column-gap:4px;font:600 14px/1.2 var(--f-head);letter-spacing:0;color:#d0d6d3}
.pr-bottom{display:flex;align-items:center;justify-content:space-between;column-gap:12px;padding:0 8px}
.pr-bottom .pr-start{position:static;flex:0 0 60%;height:44px;margin:0;padding:0 12px;border-radius:12px;box-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-bottom.solo{justify-content:flex-end}
.pr-bottom .pr-word{flex:1 1 auto;justify-content:center;min-width:0}
.pr-bottom.solo .pr-word{flex:0 0 auto}
html[data-play-cta="1"] body.tab-play .word-tip{bottom:calc(var(--tabs-total) + 100px)}
body:has(.so-sheet) .word-tip{display:none}
.pr-yards{top:var(--pr-card-top, calc(var(--safe-t) + 144px))}

/* TOPBAR (Jay): a wide, short top bar (about 76px): 8px top and bottom, 12px sides, same glass, radius 16, 16px from the screen edges.
   Line 1 (20px): the course name (13px, caption color) and the GPS dot right after it. Line 2 (36px): "‹" at the bar's left edge,
   "Hole n" (24/600) then " · Par n · yds · tee ▾" (15px) centered, "›" at the right edge. Every tap target is 44px tall; the
   extra height overlaps the bar edges (negative margins), so the bar stays short. */
.pr-top{display:flex;flex-direction:column;align-items:stretch;row-gap:4px;padding:8px 12px}
.pr-l1{height:20px;column-gap:0}
.pr-l1 .pr-course{height:44px;margin:-12px 0;padding:0 4px}
.pr-l1 .pr-gpsdot{height:44px;margin:-12px 0}
.pr-l2{height:36px;width:100%;justify-content:space-between;column-gap:0}
.pr-l2 .pr-arrow{flex:none;width:44px;height:44px;margin:-4px 0}
.pr-l2 .pr-arrow#prev{margin-left:-12px}
.pr-l2 .pr-arrow#next{margin-right:-12px}
.pr-mid{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;justify-content:center;white-space:nowrap;overflow:hidden}
.pr-mid #barHole{flex:none;font:600 24px/36px var(--f-head);letter-spacing:0;color:var(--ink)}
.pr-mid .pr-l3{display:inline-flex;align-items:baseline;height:auto;min-width:0;font:400 15px/36px var(--f-text);color:#d0d6d3;white-space:nowrap}
.pr-mid .pr-l3[hidden]{display:none}
.pr-mid .pr-par{white-space:pre}
.pr-mid .pr-teebtn{align-self:center;height:44px;margin:-4px 0;padding:0 4px;font:600 15px/1 var(--f-text);color:var(--ink)}

/* ONEPOINT: a leg bubble moved sideways off the line (app.js spreadBubbles) keeps a thin tick back to its leg */
#map .bubble{position:relative}
#map .bubble.nudge-r::before,#map .bubble.nudge-l::before{content:"";position:absolute;top:50%;width:var(--tick, 0px);height:2px;margin-top:-1px;background:rgba(255,255,255,.85);box-shadow:0 0 2px rgba(0,0,0,.6)}
#map .bubble.nudge-r::before{right:100%}
#map .bubble.nudge-l::before{left:100%}

/* gates task: free players see a "Plays Like" chip with a lock where the Plays Like line is (same 32px row, so the card keeps
   its height); the panel's glass and text shadow carry over. Tapping it opens Join Frataro Club. */
.pr-pl-lock .pl-lock-chip{display:inline-flex;align-items:center;column-gap:4px;height:24px;padding:0 8px;border-radius:12px;background:rgba(255,255,255,.12);font:600 14px/1.2 var(--f-head);letter-spacing:0;color:var(--gold-accent);white-space:nowrap}   /* goldlock: text and lock (currentColor) in the brand gold */
.pr-pl-lock .ent-lk{flex:0 0 auto;width:12px;height:12px}
.pr-pl-lock .pl-lock-chip{text-shadow:0 1px 3px rgba(0,0,0,.75)}   /* the card's own text shadow (buttons do not inherit it) */

/* pro6: Mark Shot (bottom right, just above the bottom row, the panels' 40 percent glass and text shadow), the shot dots and their
   yards (the leg bubble style, smaller), and the club on the Plays Like row: a second 16px line inside the same 32px row, so the
   card keeps its 104px width and its height */
.pr-mark{position:fixed;right:16px;bottom:calc(var(--tabs-total) + 100px);z-index:6;display:flex;align-items:center;column-gap:4px;height:44px;margin:0;padding:0 16px 0 12px;border:0;border-radius:22px;
  background:rgba(12,16,14,var(--g-card,.4));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:#fff;font:600 14px/1 var(--f-text);letter-spacing:0;
  text-shadow:0 1px 3px rgba(0,0,0,.75);cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.pr-mark[hidden]{display:none}
.pr-mark svg{width:18px;height:18px}
.pr-mark .pr-mark-lk{display:inline-flex;color:var(--gold-accent)}
.pr-mark .pr-mark-lk svg{width:14px;height:14px}
body:not(.tab-play) .pr-mark{display:none}
.shotdot{width:24px;height:24px;display:grid;place-items:center;transform:translateY(50%);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.shotdot::before{content:"";width:10px;height:10px;border-radius:50%;background:#e7c27a;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.6)}
#map .bubble.shotyd{font:700 13px/1 var(--f-num);padding:4px 8px;background:rgba(8,18,13,.82);border-color:#e7c27a}
.pr-pl.has-club{display:grid;grid-template-columns:auto auto;justify-content:end;align-content:center;column-gap:4px;row-gap:0}
.pr-pl.has-club :is(#plYds,.pr-pl-w){line-height:16px}
.pr-pl-club{grid-column:1/-1;overflow:hidden;font:600 14px/16px var(--f-head);letter-spacing:0;color:#d0d6d3;text-align:right;white-space:nowrap}
.pr-pl-club[hidden]{display:none}
/* fix_plays: a target that is not the green: " to Target" after the number when line 1 fits, else a small target dot before it */
#plYds .pl-to{font:600 11px/16px var(--f-head);letter-spacing:0;color:#d0d6d3;text-transform:none}
#plYds .pl-dot{display:inline-block;width:6px;height:6px;margin:0 4px 0 0;border-radius:50%;background:#e7c27a;box-shadow:0 0 0 1px #fff;vertical-align:middle}