/* Cart Caddy — modern dark theme. Scoped to #playView so it doesn't leak
   into the rest of the app. Charcoal base, electric chartreuse accent,
   Inter type. White text for readable data. */

#playView {
    --cc-bg:           #0a0d11;
    --cc-surface:      #14181e;
    --cc-surface-hi:   #1c2128;
    --cc-border:       rgba(255, 255, 255, 0.08);
    --cc-border-hi:    rgba(255, 255, 255, 0.14);
    --cc-text:         #f0f2f5;
    --cc-text-dim:     #8a9099;
    --cc-accent:       #b6ff3a;
    --cc-accent-soft:  rgba(182, 255, 58, 0.12);
    --cc-accent-mid:   rgba(182, 255, 58, 0.30);
    --cc-accent-ink:   #0a0d11;
    --cc-warn:         #ff8a8a;

    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Take over the area between the top of the viewport and the bottom tab bar
   so internal flex layout has a known height to fill. Without this, the
   play view inherits .tab-view { display: block } and overflows behind the
   bottom tab bar. */
#playView.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

#playView .cc-screen {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;       /* allow inner flex children to scroll if needed */
    overflow: hidden;
}

/* --- Topbar --- */

#playView .cc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    background: var(--cc-bg);
    border-bottom: 1px solid var(--cc-border);
    flex-shrink: 0;
}

#playView .cc-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--cc-text);
    letter-spacing: -0.01em;
    margin: 0;
}

#playView .cc-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: -10px;
    border-radius: 50%;
    color: var(--cc-text);
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease;
}
#playView .cc-back:active { background: var(--cc-surface-hi); }

/* Topbar action button (e.g. Save). Always visible — sits in the topbar
 * so the mobile keyboard can't hide it. */
#playView .cc-topbar-action {
    appearance: none;
    background: none;
    border: none;
    padding: 8px 4px;
    margin-right: -4px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--cc-accent);
    letter-spacing: -0.01em;
    cursor: pointer;
    min-width: 56px;
    text-align: right;
}
#playView .cc-topbar-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
#playView .cc-topbar-action:not(:disabled):active {
    filter: brightness(0.85);
}

#playView .cc-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

#playView .cc-gps-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cc-text-dim);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#playView .cc-gps-pill::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cc-text-dim);
}
#playView .cc-gps-pill[data-state="ok"]::before  { background: var(--cc-accent); box-shadow: 0 0 6px var(--cc-accent-mid); }
#playView .cc-gps-pill[data-state="ok"]          { color: var(--cc-text); }
#playView .cc-gps-pill[data-state="off"]::before { background: transparent; border: 1px solid var(--cc-text-dim); }

#playView .cc-battery {
    font-size: 12px;
    font-weight: 500;
    color: var(--cc-text-dim);
    font-variant-numeric: tabular-nums;
}

#playView .cc-hole-counter {
    font-size: 13px;
    font-weight: 500;
    color: var(--cc-text-dim);
    font-variant-numeric: tabular-nums;
}

/* In-development notice on the landing — sets expectations before the user
   taps Start Round and discovers there's only one course. */
#playView .cc-notice {
    margin: 12px 16px 0;
    padding: 12px 14px;
    background: var(--cc-accent-soft);
    border-left: 3px solid var(--cc-accent);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cc-text);
    flex-shrink: 0;
}

#playView .cc-notice strong {
    color: var(--cc-accent);
    font-weight: 700;
}

#playView .cc-notice-link {
    color: var(--cc-accent);
    font-weight: 600;
    text-decoration: underline;
}

/* --- Landing screen: one prominent Start Round button + small My Bag link.
 * Old equal-weight tile grid (.cc-grid-stack / .cc-tile) is retained below
 * for any other 2-tile views, but the landing now uses cc-landing-main. */

#playView .cc-landing-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 24px 16px 32px;
    min-height: 0;
}

/* Resume Round cards — painted above Start Round only when the user has
 * an active round in play_active_rounds. Empty by default so nothing
 * renders on the cold path. */
#playView .cc-resume-slot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
}

#playView .cc-resume-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 80%;
    max-width: 320px;
    padding: 14px 36px 14px 18px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-accent);
    border-radius: 18px;
    color: var(--cc-text);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(216, 255, 58, 0.10);
    transition: background .12s ease, transform .12s ease;
}

#playView .cc-resume-card:active {
    background: var(--cc-surface-hi);
    transform: scale(0.98);
}

#playView .cc-resume-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cc-accent);
}

#playView .cc-resume-card-course {
    font-size: 18px;
    font-weight: 700;
    color: var(--cc-text);
    letter-spacing: -0.01em;
}

#playView .cc-resume-card-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cc-accent);
    font-size: 22px;
    line-height: 1;
}

#playView .cc-start-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 80%;
    max-width: 320px;
    padding: 36px 24px;
    background: var(--cc-surface);
    border: 2px solid var(--cc-accent);
    border-radius: 28px;
    color: var(--cc-text);
    text-decoration: none;
    box-shadow: 0 6px 28px rgba(216, 255, 58, 0.18);
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

#playView .cc-start-btn:active {
    transform: scale(0.98);
    background: var(--cc-surface-hi);
    box-shadow: 0 4px 16px rgba(216, 255, 58, 0.12);
}

#playView .cc-start-btn-icon {
    width: 72px;
    height: 72px;
    color: var(--cc-accent);
}

#playView .cc-start-btn-text {
    font-size: 28px;
    font-weight: 800;
    color: var(--cc-text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
}

#playView .cc-bag-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    background: var(--cc-surface);
    border: 2px solid var(--cc-accent);
    border-radius: 22px;
    color: var(--cc-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(216, 255, 58, 0.10);
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

#playView .cc-bag-link:active {
    background: var(--cc-surface-hi);
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(216, 255, 58, 0.06);
}

#playView .cc-bag-link-icon {
    width: 22px;
    height: 22px;
    color: var(--cc-accent);
}

/* --- Landing tile stack (kept for other 2-tile views, no longer used by landing) --- */

#playView .cc-grid-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    flex: 1;
    min-height: 0;
}

#playView .cc-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 22px;
    padding: 22px;
    text-decoration: none;
    color: var(--cc-text);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

#playView .cc-tile--lg {
    flex: 1;
    font-size: 22px;
    font-weight: 600;
}

#playView .cc-tile:active {
    transform: scale(0.98);
    background: var(--cc-surface-hi);
    border-color: var(--cc-border-hi);
}

/* Icon sits in a chartreuse-tinted square chip top-left of each tile. */
#playView .cc-icon {
    width: 56px;
    height: 56px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--cc-accent-soft);
    color: var(--cc-accent);
    margin: 0;
}

#playView .cc-tile span {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--cc-text);
    line-height: 1.2;
}

/* --- Course Select --- */

#playView .cc-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#playView .cc-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 16px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    color: var(--cc-text);
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
    width: 100%;
    font-family: inherit;
}

#playView .cc-row-name {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
}

#playView .cc-row-loc {
    font-size: 13px;
    color: var(--cc-text-dim);
    line-height: 1.2;
}

#playView .cc-row.is-selected {
    background: var(--cc-accent-soft);
    border-color: var(--cc-accent);
}

#playView .cc-row.is-selected .cc-row-name { color: var(--cc-accent); }

/* Up/down chevrons in the topbar - decorative until 2+ courses. */
#playView .cc-chevrons {
    display: flex;
    gap: 6px;
    color: var(--cc-text-dim);
    font-size: 16px;
    opacity: 0.5;
}

#playView .cc-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--cc-border);
    border-radius: 6px;
    line-height: 1;
}

/* --- Sticky bottom CTA --- */

#playView .cc-cta {
    margin: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
    padding: 14px 18px;
    background: var(--cc-accent);
    color: var(--cc-accent-ink);
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter .12s ease, transform .12s ease;
}

#playView .cc-cta:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#playView .cc-cta:not(:disabled):active {
    filter: brightness(0.9);
    transform: scale(0.99);
}

/* Inline variant: lives inside a scrollable body next to its inputs so the
 * mobile keyboard can't hide it. Drops the bottom-anchored margins. */
#playView .cc-cta.cc-cta-inline {
    margin: 4px 0 0;
}

/* Hole-screen action row: Log Shot + Finish Hole side-by-side. Log Shot
 * takes the larger share (primary action) and Finish Hole is outlined
 * (secondary). Margins are inherited from .cc-cta via the row itself. */
/* Full-width Log Shot: chartreuse, single primary action on its own row so
 * the tap target is huge one-handed on a phone. */
#playView .cc-cta-block {
    display: block;
    width: calc(100% - 32px);
    margin: 16px 16px 0;
    flex-shrink: 0;
}

/* Three-up action row: Finish Hole | Add Notes | Enter Score. Equal-width
 * chartreuse-outlined pills, sit at the bottom of the scroll, padded for
 * the iOS home-indicator safe area. */
#playView .cc-hole-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin: 14px 16px calc(env(safe-area-inset-bottom) + 20px);
    flex-shrink: 0;
}

#playView .cc-action-btn {
    appearance: none;
    background: transparent;
    color: var(--cc-text);
    border: 1px solid var(--cc-accent);
    border-radius: 14px;
    padding: 14px 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    min-width: 0;            /* let labels truncate cleanly in the 3-col grid */
}

#playView .cc-action-btn:active {
    background: var(--cc-accent-soft);
    transform: scale(0.97);
}

#playView .cc-action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Blow Up Hole — secondary action below the main 3-up row. */
#playView .cc-hole-actions-secondary {
    display: flex;
    justify-content: center;
    margin: 0 16px 16px;
    flex-shrink: 0;
}

#playView .cc-action-btn-blowup {
    background: transparent;
    color: var(--cc-text-dim);
    border: 1px solid var(--cc-border);
}
#playView .cc-action-btn-blowup:active {
    background: rgba(255, 138, 138, 0.12);
    border-color: rgba(255, 138, 138, 0.4);
    color: #ff8a8a;
}

/* Legacy: a couple of pages still spawn .cc-hole-cta-row through older
 * code paths. Keeping a minimal stub so nothing breaks if those run. */
#playView .cc-hole-cta-row {
    display: flex;
    gap: 10px;
    margin: 12px 16px;
}
#playView .cc-hole-cta-row .cc-cta {
    margin: 0;
    flex-shrink: 0;
}
#playView .cc-hole-cta-row .cc-cta-primary-grow { flex: 1.4 1 0; }
#playView .cc-hole-cta-row .cc-cta-secondary {
    flex: 1 1 0;
    background: transparent;
    color: var(--cc-text);
    border: 1px solid var(--cc-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#playView .cc-hole-cta-row .cc-cta-secondary:active {
    background: var(--cc-surface-hi);
}

/* --- Hole screen --- */

#playView .cc-hole-meta {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 16px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--cc-border);
    font-size: 13px;
    font-weight: 500;
    color: var(--cc-text-dim);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* HOLE label inherits 56px so it reads as a unit with the hole number,
 * PAR label inherits 28px to match its number. Labels stay dim/500-weight
 * via the parent .cc-hole-meta — numbers (.cc-data) get bumped to 700
 * + bright text by the rules below. */
#playView .cc-hole-num {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 1;
}

#playView .cc-hole-par {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 1;
}

#playView .cc-data {
    color: var(--cc-text);
    font-weight: 600;
    font-size: 18px;
}

/* Hole and par numbers are the primary anchors on this screen — they need
 * to read at arm's length in sunlight. Big tabular digits so the number
 * doesn't jump when navigating holes. */
#playView .cc-hole-num .cc-data {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--cc-text);
}

#playView .cc-hole-par .cc-data {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--cc-text);
}

/* Running score strip — compact single-line summary between the hole/par
   header and the yardage instrument panel. Updates on Finish Hole only
   (not live during a hole). */
#playView .cc-round-strip {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 2px 18px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

#playView .cc-round-strip-diff {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#playView .cc-round-strip-diff.is-under { color: var(--cc-accent); }
#playView .cc-round-strip-diff.is-over  { color: #ff8a8a; }

#playView .cc-round-strip-total {
    font-variant-numeric: tabular-nums;
}

#playView .cc-round-strip-sep {
    color: var(--cc-text-dim);
    opacity: 0.5;
}

#playView .cc-distances {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    align-items: center;
    padding: 14px 12px;
    gap: 6px;
    flex: 1;
    min-height: 0;
    /* Bulletproof the instrument panel: with flex:1 + min-height:0 the
       fixed-size yardage numbers can visually escape the box when the
       column is squeezed by siblings appearing. overflow:hidden
       guarantees back/middle/front never bleed onto the suggestion or
       lastshot zones below. */
    overflow: hidden;
}

#playView .cc-dist {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#playView .cc-dist-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#playView .cc-dist-value {
    font-size: 56px;
    line-height: 1;
    color: var(--cc-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.02em;
}

#playView .cc-dist--primary .cc-dist-value {
    font-size: 84px;
    color: var(--cc-accent);
}

#playView .cc-dist-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Suggested club band */
#playView .cc-suggest {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    /* The chartreuse MIDDLE yardage is 84px tall; with the previous 6px gap
       its descender visually crashed into the PLAY caption. Generous vertical
       padding + a top border give the suggestion row its own band that the
       big number can never bleed into. */
    padding: 14px 18px 12px;
    margin-top: 4px;
    border-top: 1px solid var(--cc-border);
    flex-shrink: 0;
}

#playView .cc-suggest-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#playView .cc-suggest-club {
    font-size: 22px;
    font-weight: 600;
    color: var(--cc-text);
    letter-spacing: -0.01em;
}

#playView .cc-suggest-conf {
    font-size: 13px;
    font-weight: 500;
    color: var(--cc-text-dim);
    font-variant-numeric: tabular-nums;
}

#playView .cc-gps-status {
    text-align: center;
    padding: 4px 18px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cc-text-dim);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
#playView .cc-gps-status.is-warn { color: var(--cc-warn); }

/* Last-shot read-out — dedicated zone sandwiched between the suggestion
   row and the GPS status. Always visible (renders "—" when no shot pair
   yet) so the row's height never shifts and it can't visually collide
   with the instrument panel above. Top + bottom hairlines mark it as
   its own zone in the visual hierarchy. */
#playView .cc-lastshot {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 6px 18px;
    margin: 4px 0 0;
    flex-shrink: 0;
    border-top: 1px solid var(--cc-border);
    border-bottom: 1px solid var(--cc-border);
}

#playView .cc-lastshot-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#playView .cc-lastshot-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--cc-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

#playView .cc-lastshot-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* In-round shots log: tappable header + collapsible body of shot rows.
 * Lives directly under the lastshot pill so all shot UI clusters together. */
#playView .cc-shots-log {
    margin: 6px 18px 0;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

#playView .cc-shots-log[hidden] { display: none; }

#playView .cc-shots-log-toggle {
    appearance: none;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
}

#playView .cc-shots-log-toggle:active {
    background: var(--cc-surface-hi);
}

#playView .cc-shots-log-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#playView .cc-shots-log-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--cc-text);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

#playView .cc-shots-log-chev {
    font-size: 14px;
    color: var(--cc-text-dim);
    line-height: 1;
    transition: color .12s ease;
}

#playView .cc-shots-log-toggle[aria-expanded="true"] .cc-shots-log-chev {
    color: var(--cc-accent);
}

#playView .cc-shots-log-body {
    padding: 4px 14px 10px;
    border-top: 1px solid var(--cc-border);
    max-height: 220px;
    overflow-y: auto;
}

#playView .cc-shots-log-body[hidden] { display: none; }

#playView .cc-shots-log-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--cc-border);
}

#playView .cc-shots-log-row:last-child { border-bottom: none; }

#playView .cc-shots-log-row-num {
    font-size: 14px;
    font-weight: 500;
    color: var(--cc-text-dim);
    letter-spacing: 0.02em;
}

#playView .cc-shots-log-row-dist {
    font-size: 18px;
    font-weight: 700;
    color: var(--cc-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

#playView .cc-shots-log-row-unit {
    font-size: 10px;
    font-weight: 600;
    color: var(--cc-text-dim);
    margin-left: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#playView .cc-shots-log-row-empty {
    font-size: 14px;
    color: var(--cc-text-dim);
}

#playView .cc-hole-nav {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--cc-border);
    flex-shrink: 0;
}

#playView .cc-nav-btn {
    flex: 1;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.04em;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    transition: background .12s ease, color .12s ease;
}

#playView .cc-nav-btn:not(.is-disabled):active {
    background: var(--cc-surface-hi);
    color: var(--cc-text);
}

#playView .cc-nav-btn.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

#playView .cc-nav-btn + .cc-nav-btn {
    border-left: 1px solid var(--cc-border);
}

/* --- My Bag (single-column list + detail) --- */

#playView .cc-bag-list {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

#playView .cc-bag-listrow {
    display: grid;
    grid-template-columns: 1fr auto 16px;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--cc-text);
    border-bottom: 1px solid var(--cc-border);
    transition: background .12s ease;
}

#playView .cc-bag-listrow:active {
    background: var(--cc-surface-hi);
}

#playView .cc-bag-listrow-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

#playView .cc-bag-listrow-dist {
    font-size: 16px;
    font-weight: 700;
    color: var(--cc-accent);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

#playView .cc-bag-listrow-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-left: 2px;
}

#playView .cc-bag-listrow-empty {
    color: var(--cc-text-dim);
    font-size: 18px;
    font-weight: 500;
}

#playView .cc-bag-listrow-chev {
    color: var(--cc-text-dim);
    font-size: 22px;
    line-height: 1;
    text-align: right;
}

/* Single-club edit screen */

#playView .cc-bag-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

#playView .cc-bag-detail-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#playView .cc-bag-detail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#playView .cc-bag-detail-name {
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    color: var(--cc-text);
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 12px;
    padding: 16px 18px;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: -0.01em;
    transition: border-color .12s ease, background .12s ease;
}

#playView .cc-bag-detail-name:focus {
    outline: none;
    border-color: var(--cc-accent);
    background: var(--cc-surface-hi);
}

#playView .cc-bag-detail-distrow {
    display: flex;
    align-items: baseline;
    gap: 12px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 12px;
    padding: 12px 18px;
    transition: border-color .12s ease, background .12s ease;
}

#playView .cc-bag-detail-distrow:focus-within {
    border-color: var(--cc-accent);
    background: var(--cc-surface-hi);
}

#playView .cc-bag-detail-dist {
    font-family: inherit;
    font-size: 36px;
    font-weight: 700;
    color: var(--cc-accent);
    background: transparent;
    border: none;
    padding: 6px 0;
    width: 100%;
    text-align: left;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    -moz-appearance: textfield;
    appearance: textfield;
}

#playView .cc-bag-detail-dist::-webkit-outer-spin-button,
#playView .cc-bag-detail-dist::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#playView .cc-bag-detail-dist:focus {
    outline: none;
}

#playView .cc-bag-detail-dist::placeholder {
    color: var(--cc-text-dim);
    opacity: 0.6;
}

#playView .cc-bag-detail-unit {
    font-size: 16px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Empty/loading states --- */

#playView .cc-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-text-dim);
    font-size: 14px;
    padding: 24px;
    text-align: center;
}

/* Rich dark-context empty state (chartreuse accent on charcoal). Used for the
   My Bag empty list and the Cart Caddy first-run hero. */
#playView .cc-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 6px;
}
#playView .cc-empty-state-icon {
    width: 56px;
    height: 56px;
    color: var(--cc-accent);
    margin-bottom: 10px;
}
#playView .cc-empty-state-icon svg { width: 100%; height: 100%; }
#playView .cc-empty-state h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--cc-text);
    margin: 0;
}
#playView .cc-empty-state p {
    font-size: 14px;
    color: var(--cc-text-dim);
    max-width: 280px;
    margin: 0;
    line-height: 1.45;
}
#playView .cc-empty-state-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-top: 18px;
}
/* Compact secondary link beneath the primary CTA in a dark empty state. */
#playView .cc-empty-state-secondary {
    background: none;
    border: none;
    color: var(--cc-text-dim);
    font-size: 14px;
    font-weight: 600;
    padding: 8px;
    cursor: pointer;
    text-decoration: none;
}
#playView .cc-empty-state-secondary:active { color: var(--cc-accent); }

/* --- Round Setup screen (mode + starting hole picker) --- */

#playView .cc-round-setup-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 18px 4px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

#playView .cc-round-setup-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#playView .cc-round-setup-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--cc-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

/* Segmented control: three equal buttons, selected gets accent fill. */
#playView .cc-round-setup-segmented {
    display: flex;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    padding: 4px;
    gap: 4px;
}

#playView .cc-round-setup-seg {
    appearance: none;
    flex: 1 1 0;
    background: transparent;
    border: none;
    color: var(--cc-text-dim);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 12px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

#playView .cc-round-setup-seg:active {
    background: var(--cc-surface-hi);
    color: var(--cc-text);
}

#playView .cc-round-setup-seg.is-selected {
    background: var(--cc-accent);
    color: var(--cc-accent-ink);
}

/* Starting-hole grid: 6 columns, fills 1.5 rows for a 9-hole range or
 * 3 rows for an 18-hole range. */
#playView .cc-round-setup-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

#playView .cc-round-setup-cell {
    appearance: none;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    color: var(--cc-text);
    font: inherit;
    font-size: 20px;
    font-weight: 700;
    padding: 14px 0;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
    font-variant-numeric: tabular-nums;
}

#playView .cc-round-setup-cell:active {
    transform: scale(0.96);
    background: var(--cc-surface-hi);
}

#playView .cc-round-setup-cell.is-selected {
    background: var(--cc-accent);
    color: var(--cc-accent-ink);
    border-color: var(--cc-accent);
}

/* Hole screen content below the topbar scrolls vertically. Keeps yardages
 * and primary CTAs at the top of the viewport when the user is playing,
 * with Notes / hole indicator / Finish Hole link revealed by scrolling. */
#playView .cc-hole-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Outro section at the very bottom of the scrollable area: which hole
 * you're on plus a text-style Finish Hole tap target. The big "HOLE 4"
 * print is intentional — confirms what you're entering info for after
 * scrolling past everything else. */
#playView .cc-hole-outro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px calc(env(safe-area-inset-bottom) + 24px);
    margin-top: 14px;
    border-top: 1px solid var(--cc-border);
}

#playView .cc-hole-outro-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--cc-text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#playView .cc-hole-outro-num {
    font-size: 64px;
    font-weight: 800;
    color: var(--cc-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

/* "Enter Score" pill that lives directly under the big "Hole N" indicator
 * in the bottom outro. Chartreuse fill — the score screen is where any
 * round-scoring work actually happens, so this gets visual emphasis. */
#playView .cc-hole-outro-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 14px 36px;
    background: var(--cc-accent);
    color: var(--cc-accent-ink);
    border-radius: 24px;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(216, 255, 58, 0.18);
    transition: transform .12s ease, filter .12s ease;
}

#playView .cc-hole-outro-score:active {
    transform: scale(0.97);
    filter: brightness(0.92);
}

/* Same visual treatment kept on the score screen's bottom outro — the
 * difference is just the label ("Finish Hole" vs "Enter Score"). */
#playView .cc-hole-outro-finish {
    appearance: none;
    background: var(--cc-accent);
    color: var(--cc-accent-ink);
    border: none;
    border-radius: 24px;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 36px;
    margin-top: 12px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(216, 255, 58, 0.18);
    transition: transform .12s ease, filter .12s ease;
}

#playView .cc-hole-outro-finish:active {
    transform: scale(0.97);
    filter: brightness(0.92);
}

/* --- Score entry screen --- */

#playView .cc-score-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

#playView .cc-score-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#playView .cc-score-section-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--cc-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

/* Score grid: 3 columns, par-relative styling (eagle/birdie/par/bogey/double).
 * The variant classes draw circles or squares around the number using
 * inset borders so the cell shell stays a consistent height. */
#playView .cc-score-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

#playView .cc-score-cell {
    appearance: none;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    color: var(--cc-text);
    font: inherit;
    padding: 12px 0 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

#playView .cc-score-cell:active { transform: scale(0.97); }

/* The number sits inside its own decoration wrapper. Par-relative variants
 * add a circle / square border (and an outer ring for the double variants)
 * directly on this element, which keeps the decoration centered on the
 * digit regardless of whether a "Par" label is rendered below. */
#playView .cc-score-cell-num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--cc-text);
    line-height: 1;
    box-sizing: border-box;
}

#playView .cc-score-cell-par {
    font-size: 10px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
}

/* Single circle = birdie */
#playView .cc-score-cell--circle .cc-score-cell-num {
    border: 2px solid var(--cc-text);
    border-radius: 50%;
}

/* Double circle = eagle / albatross */
#playView .cc-score-cell--doublecircle .cc-score-cell-num {
    border: 2px solid var(--cc-text);
    border-radius: 50%;
}
#playView .cc-score-cell--doublecircle .cc-score-cell-num::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid var(--cc-text);
    border-radius: 50%;
    pointer-events: none;
}

/* Single square = bogey */
#playView .cc-score-cell--square .cc-score-cell-num {
    border: 2px solid var(--cc-text);
    border-radius: 4px;
}

/* Double square = double bogey or worse */
#playView .cc-score-cell--doublesquare .cc-score-cell-num {
    border: 2px solid var(--cc-text);
    border-radius: 4px;
}
#playView .cc-score-cell--doublesquare .cc-score-cell-num::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid var(--cc-text);
    border-radius: 4px;
    pointer-events: none;
}

/* Selected state: chartreuse fill, ink-colored text + decoration. */
#playView .cc-score-cell.is-selected {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
}
#playView .cc-score-cell.is-selected .cc-score-cell-num,
#playView .cc-score-cell.is-selected .cc-score-cell-par {
    color: var(--cc-accent-ink);
}
#playView .cc-score-cell.is-selected .cc-score-cell-num {
    border-color: var(--cc-accent-ink);
}
#playView .cc-score-cell.is-selected .cc-score-cell-num::after {
    border-color: var(--cc-accent-ink);
}

/* Putts / Chips / Sand / Penalties — 5 equal cells per row. */
#playView .cc-stat-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

#playView .cc-stat-cell {
    appearance: none;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 12px;
    color: var(--cc-text);
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    padding: 14px 0;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

#playView .cc-stat-cell:active { transform: scale(0.96); }

#playView .cc-stat-cell.is-selected {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-accent-ink);
}

/* Fairway Hit / GIR — two equal-width cells, one check, one cross. */
#playView .cc-bool-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#playView .cc-bool-cell {
    appearance: none;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    color: var(--cc-text-dim);
    font: inherit;
    padding: 14px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

#playView .cc-bool-cell svg {
    width: 28px;
    height: 28px;
}

#playView .cc-bool-cell:active { transform: scale(0.97); }

/* Selected styling keys off the immutable data-value attribute (1 = Yes,
 * 0 = No) so the runtime click handler only needs to toggle .is-selected.
 * Previously these required a paired .is-yes / .is-no class which the
 * tap handler never set — only the initial render did — so tapping a
 * Yes/No cell mid-form left no visible highlight even though the state
 * was correctly persisted. */
#playView .cc-bool-cell.is-selected[data-value="1"] {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-accent-ink);
}

#playView .cc-bool-cell.is-selected[data-value="0"] {
    background: rgba(255, 99, 99, 0.12);
    border-color: rgba(255, 99, 99, 0.6);
    color: #ff8a8a;
}

/* Score-screen outro tweaks: when the outro sits inside the scrollable
 * body, it doesn't need its own top border (the rest of the form already
 * has enough vertical separation via section gaps). */
#playView .cc-hole-outro-in-score {
    border-top: none;
    margin-top: 24px;
    padding-top: 12px;
}

/* --- Notes screens (list, scope picker, hole picker, compose) --- */

#playView .cc-notes-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#playView .cc-note-card {
    position: relative;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    padding: 12px 14px 14px;
    overflow: hidden;
}

#playView .cc-note-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

#playView .cc-note-card-scope {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

#playView .cc-note-card-scope-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--cc-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#playView .cc-note-card-stamp {
    font-size: 11px;
    color: var(--cc-text-dim);
    font-weight: 500;
}

#playView .cc-note-card-menu-btn {
    appearance: none;
    background: none;
    border: none;
    color: var(--cc-text-dim);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 8px;
}

#playView .cc-note-card-menu-btn:active {
    background: var(--cc-surface-hi);
    color: var(--cc-text);
}

#playView .cc-note-card-text {
    font-size: 15px;
    color: var(--cc-text);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

#playView .cc-note-card-menu {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cc-border);
}

#playView .cc-note-card.is-menu-open .cc-note-card-menu {
    display: flex;
}

#playView .cc-note-card-menu-item {
    appearance: none;
    background: none;
    border: none;
    color: var(--cc-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}

#playView .cc-note-card-menu-item:active {
    background: var(--cc-surface-hi);
}

#playView .cc-note-card-menu-item.is-danger {
    color: #ff7373;
}

/* Scope picker: two big tap targets, vertically stacked. */
#playView .cc-notes-scope-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#playView .cc-notes-scope-prompt {
    font-size: 13px;
    color: var(--cc-text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 4px;
}

#playView .cc-notes-scope-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 18px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    color: var(--cc-text);
    text-decoration: none;
}

#playView .cc-notes-scope-btn:active {
    background: var(--cc-surface-hi);
    border-color: var(--cc-accent);
}

#playView .cc-notes-scope-btn-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--cc-text);
}

#playView .cc-notes-scope-btn-sub {
    font-size: 13px;
    color: var(--cc-text-dim);
    font-weight: 500;
}

/* Hole picker grid: 18 cells, 6 wide × 3 tall on a typical phone. */
#playView .cc-notes-holegrid-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
}

#playView .cc-notes-holegrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

#playView .cc-notes-hole-cell {
    appearance: none;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    color: var(--cc-text);
    font: inherit;
    font-size: 20px;
    font-weight: 700;
    padding: 14px 0;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
    font-variant-numeric: tabular-nums;
}

#playView .cc-notes-hole-cell:active {
    transform: scale(0.96);
    background: var(--cc-surface-hi);
}

#playView .cc-notes-hole-cell.is-selected {
    background: var(--cc-accent);
    color: var(--cc-accent-ink);
    border-color: var(--cc-accent);
}

/* Compose / edit: full-height textarea, action row below. */
#playView .cc-notes-compose-body {
    flex: 1;
    min-height: 0;
    padding: 14px 16px 0;
    display: flex;
    flex-direction: column;
}

#playView .cc-notes-textarea {
    flex: 1;
    width: 100%;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    color: var(--cc-text);
    font: inherit;
    font-size: 16px;
    line-height: 1.45;
    padding: 14px 16px;
    box-sizing: border-box;
    resize: none;
    outline: none;
    transition: border-color .12s ease;
}

#playView .cc-notes-textarea:focus {
    border-color: var(--cc-accent);
}

#playView .cc-notes-compose-actions {
    display: flex;
    gap: 10px;
    margin: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
}

#playView .cc-notes-compose-actions .cc-cta {
    margin: 0;
    flex-shrink: 0;
}

#playView .cc-notes-compose-actions .cc-cta-secondary {
    flex: 1 1 0;
    background: transparent;
    color: var(--cc-text);
    border: 1px solid var(--cc-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#playView .cc-notes-compose-actions .cc-cta-secondary:active {
    background: var(--cc-surface-hi);
}

#playView .cc-notes-compose-actions .cc-cta-primary-grow {
    flex: 1.6 1 0;
}

/* --- Finish Hole transition overlay ---
 * Full-bleed inside #playView; sits above the rest of the screen for a
 * brief moment so the hole change registers as a deliberate transition
 * instead of an unannounced screen swap. */
#playView .cc-transition-overlay {
    position: absolute;
    inset: 0;
    background: var(--cc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

#playView .cc-transition-overlay.is-visible {
    opacity: 1;
}

#playView .cc-transition-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
}

#playView .cc-transition-primary {
    font-size: 18px;
    font-weight: 600;
    color: var(--cc-text-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#playView .cc-transition-secondary {
    font-size: 56px;
    font-weight: 800;
    color: var(--cc-accent);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* --- Rounds history (list + detail / scorecard) --- */

#playView .cc-rounds-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* List card: <article> wrapping a tappable link + a 3-dot menu button.
 * The menu lives at the bottom of the card and is revealed by toggling
 * .is-menu-open on the article. */
#playView .cc-round-card {
    position: relative;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    overflow: hidden;
    /* Flex child of the .cc-rounds-body column. Without flex-shrink: 0 the
       cards get squeezed once the list exceeds the viewport, and combined
       with overflow: hidden that CLIPS the bottom stat row (Score/Par numbers
       cut off). Lock natural height so the body's overflow-y: auto scrolls. */
    flex-shrink: 0;
}

#playView .cc-round-card-tap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 44px 14px 14px;       /* right padding clears the menu btn */
    color: var(--cc-text);
    text-decoration: none;
}

#playView .cc-round-card-tap:active {
    background: var(--cc-surface-hi);
}

#playView .cc-round-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

#playView .cc-round-card-course {
    font-size: 16px;
    font-weight: 700;
    color: var(--cc-text);
    letter-spacing: -0.01em;
}

#playView .cc-round-card-date {
    font-size: 12px;
    color: var(--cc-text-dim);
    font-weight: 500;
}

#playView .cc-round-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

#playView .cc-round-card-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

#playView .cc-round-card-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-text-dim);
}

#playView .cc-round-card-stat-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--cc-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

#playView .cc-round-card-stat-diff.is-under .cc-round-card-stat-val { color: var(--cc-accent); }
#playView .cc-round-card-stat-diff.is-over  .cc-round-card-stat-val { color: #ff8a8a; }

/* 3-dot menu button. Sits in the top-right corner of the card, on top of
 * the tap link via z-index + stopPropagation in the JS handler. */
#playView .cc-round-card-menu-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    appearance: none;
    background: none;
    border: none;
    color: var(--cc-text-dim);
    font-size: 22px;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 8px;
    z-index: 2;
}

#playView .cc-round-card-menu-btn:active {
    background: var(--cc-surface-hi);
    color: var(--cc-text);
}

/* Inline menu revealed by .is-menu-open. Stacked Delete + Cancel buttons. */
#playView .cc-round-card-menu {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px 10px;
    border-top: 1px solid var(--cc-border);
}

#playView .cc-round-card.is-menu-open .cc-round-card-menu {
    display: flex;
}

#playView .cc-round-card-menu-item {
    appearance: none;
    background: none;
    border: none;
    color: var(--cc-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}

#playView .cc-round-card-menu-item:active {
    background: var(--cc-surface-hi);
}

#playView .cc-round-card-menu-item.is-danger {
    color: #ff7373;
}

/* Detail screen — destructive "Delete Round" link at the bottom of the
 * scorecard. Low-visibility on purpose; this is a one-way action. */
#playView .cc-round-detail-footer {
    display: flex;
    justify-content: center;
    padding: 8px 0 calc(env(safe-area-inset-bottom) + 12px);
}

#playView .cc-round-detail-delete {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 99, 99, 0.4);
    color: #ff8a8a;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 10px 22px;
    border-radius: 22px;
    cursor: pointer;
    transition: background .12s ease;
}

#playView .cc-round-detail-delete:active {
    background: rgba(255, 99, 99, 0.12);
}

/* Detail / scorecard. */
#playView .cc-round-detail-summary {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#playView .cc-round-detail-course {
    font-size: 22px;
    font-weight: 800;
    color: var(--cc-text);
    letter-spacing: -0.02em;
}

#playView .cc-round-detail-date {
    font-size: 13px;
    color: var(--cc-text-dim);
    font-weight: 500;
    margin-bottom: 12px;
}

#playView .cc-round-detail-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

#playView .cc-round-detail-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

#playView .cc-round-detail-total-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-text-dim);
}

#playView .cc-round-detail-total-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--cc-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

#playView .cc-round-detail-total-diff.is-under .cc-round-detail-total-val { color: var(--cc-accent); }
#playView .cc-round-detail-total-diff.is-over  .cc-round-detail-total-val { color: #ff8a8a; }

/* Scorecard table: 5-column grid (Hole / Par / Score / +/- / Putts). */
#playView .cc-round-detail-scorecard {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    overflow: hidden;
    /* The parent .cc-rounds-body is a flex column. Without flex-shrink: 0,
       this section gets squished when total content exceeds the viewport;
       combined with overflow: hidden (rounded corners), the squish CLIPS
       the bottom rows so e.g. hole 18 disappears off the bottom even
       though the parent has overflow-y: auto. Lock the natural height so
       scrolling actually reveals every row. */
    flex-shrink: 0;
}

/* Same flex-shrink protection for the other round-detail sections —
   without it the summary or footer could get squeezed when the body
   is short. */
#playView .cc-round-detail-summary,
#playView .cc-round-detail-footer { flex-shrink: 0; }

#playView .cc-scorecard-head,
#playView .cc-scorecard-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
    align-items: center;
}

#playView .cc-scorecard-head {
    background: var(--cc-surface-hi);
    border-bottom: 1px solid var(--cc-border);
}

#playView .cc-scorecard-row {
    border-bottom: 1px solid var(--cc-border);
}

#playView .cc-scorecard-row:last-child { border-bottom: none; }

#playView .cc-scorecard-cell {
    padding: 12px 6px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--cc-text);
    font-variant-numeric: tabular-nums;
}

#playView .cc-scorecard-cell-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-text-dim);
    padding: 10px 6px;
}

#playView .cc-scorecard-cell-hole {
    color: var(--cc-text-dim);
    font-weight: 700;
}

/* Tappable scorecard rows (round editing). Button replaces the div wrapper
   so reset button styling while keeping the grid layout. */
#playView .cc-scorecard-row-tap {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--cc-border);
    width: 100%;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
    align-items: center;
    transition: background .12s ease;
}
#playView .cc-scorecard-row-tap:last-child { border-bottom: none; }
#playView .cc-scorecard-row-tap:active { background: var(--cc-surface-hi); }

#playView .cc-scorecard-cell.is-under { color: var(--cc-accent); font-weight: 700; }
#playView .cc-scorecard-cell.is-over  { color: #ff8a8a; font-weight: 700; }

/* Mini score decoration inside the scorecard's Score column — a tighter
 * version of the entry-screen score-cell decorations. */
#playView .cc-scorecard-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    position: relative;
    font-size: 15px;
    font-weight: 700;
    box-sizing: border-box;
}

#playView .cc-score-mini--circle { border: 1.5px solid var(--cc-text); border-radius: 50%; }
#playView .cc-score-mini--doublecircle { border: 1.5px solid var(--cc-text); border-radius: 50%; }
#playView .cc-score-mini--doublecircle::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1.5px solid var(--cc-text);
    border-radius: 50%;
}
#playView .cc-score-mini--square { border: 1.5px solid var(--cc-text); border-radius: 3px; }
#playView .cc-score-mini--doublesquare { border: 1.5px solid var(--cc-text); border-radius: 3px; }
#playView .cc-score-mini--doublesquare::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1.5px solid var(--cc-text);
    border-radius: 3px;
}

/* --- GPS debug overlay (?ccdebug=1) -------------------------------------- */
#playView #ccDebugOverlay {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(8, 8, 8, 0.92);
    color: #e8e8e8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.35;
    border-top: 1px solid #2a2a2a;
    padding: 6px 8px 8px;
    max-height: 50vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#playView #ccDebugOverlay .ccdbg-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
#playView #ccDebugOverlay .ccdbg-title {
    font-weight: 700; letter-spacing: 0.08em;
    color: #c8ff5a;
}
#playView #ccDebugOverlay .ccdbg-close {
    background: transparent; border: 1px solid #444; color: #ccc;
    border-radius: 3px; padding: 0 6px; font-size: 13px; line-height: 1;
    cursor: pointer;
}
#playView #ccDebugOverlay .ccdbg-grid {
    display: flex; flex-wrap: wrap; gap: 4px 6px;
}
#playView #ccDebugOverlay .ccdbg-cell {
    background: #1a1a1a; border-radius: 3px; padding: 2px 5px;
    white-space: nowrap;
}
#playView #ccDebugOverlay .ccdbg-cell b { color: #fff; font-weight: 600; }
#playView #ccDebugOverlay .ccdbg-state { text-transform: uppercase; font-weight: 700; }
#playView #ccDebugOverlay .ccdbg-state.is-live    { background: #1f3a14; color: #c8ff5a; }
#playView #ccDebugOverlay .ccdbg-state.is-locking { background: #3a2a0e; color: #ffcf6a; }
#playView #ccDebugOverlay .ccdbg-pill.is-on      { background: #1f3a14; color: #c8ff5a; }
#playView #ccDebugOverlay .ccdbg-pill.is-off     { background: #3a1414; color: #ff8a8a; }
/* Neutral is the right tone for "mv stationary" — it's a state, not a fault.
   Day 4 feedback: the red "mv ✗" pill read as alarming when it just meant
   "you're standing still." */
#playView #ccDebugOverlay .ccdbg-pill.is-neutral { background: #1a1a1a; color: #aaa; }
#playView #ccDebugOverlay .ccdbg-events {
    background: #111; border-radius: 3px; padding: 4px 6px;
    overflow-y: auto; max-height: 28vh;
}
#playView #ccDebugOverlay .ccdbg-ev {
    display: flex; gap: 6px; align-items: baseline;
    border-bottom: 1px dashed #222; padding: 1px 0;
}
#playView #ccDebugOverlay .ccdbg-ev:last-child { border-bottom: 0; }
#playView #ccDebugOverlay .ccdbg-ev-ts { color: #777; }
#playView #ccDebugOverlay .ccdbg-ev-type { color: #ddd; }
#playView #ccDebugOverlay .ccdbg-ev-detail { color: #999; }
#playView #ccDebugOverlay .ccdbg-ev.is-good .ccdbg-ev-type { color: #c8ff5a; }
#playView #ccDebugOverlay .ccdbg-ev.is-bad  .ccdbg-ev-type { color: #ff8a8a; }

/* --- Topbar right cluster (counter + ⋮ kebab) ------------------------------ */
#playView .cc-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

#playView .cc-topbar-menu {
    appearance: none;
    background: none;
    border: none;
    padding: 6px 4px;
    margin: 0 -4px 0 0;
    color: var(--cc-text);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#playView .cc-topbar-menu svg { width: 20px; height: 20px; }
#playView .cc-topbar-menu:active { background: var(--cc-surface-hi); }

/* --- Round actions menu (popover from kebab) ------------------------------- */
/* IMPORTANT: these selectors are NOT scoped to #playView because the menu
   and confirmation sheet are appended to document.body so they can render
   above the Cart Caddy view. That means the --cc-* custom properties
   declared on #playView don't cascade here, so every color is hardcoded.
   Don't refactor to var(--cc-...) without also moving the host element
   inside #playView. */
.cc-round-menu {
    position: fixed;
    z-index: 10000;
    background: #20262f;
    color: #f0f2f5;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    min-width: 200px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.cc-round-menu-item {
    appearance: none;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 14px 16px;
    font: inherit;
    font-size: 16px;
    color: #f0f2f5;
    cursor: pointer;
}
.cc-round-menu-item:hover  { background: rgba(255, 255, 255, 0.06); }
.cc-round-menu-item:active { background: rgba(255, 255, 255, 0.12); }
.cc-round-menu-item.is-destructive { color: #ff6b6b; font-weight: 600; }

/* --- End-Round confirmation sheet ----------------------------------------- */
.cc-round-confirm-backdrop {
    position: fixed; inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: ccFadeIn 0.15s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.cc-round-confirm-sheet {
    width: 100%;
    max-width: 560px;
    background: #20262f;
    color: #f0f2f5;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 24px 22px 28px;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.7);
    animation: ccSlideUp 0.18s ease-out;
}
.cc-round-confirm-title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.cc-round-confirm-body {
    margin: 0 0 20px;
    font-size: 14px;
    color: #c8ccd2;
    line-height: 1.45;
}
.cc-round-confirm-actions {
    display: flex;
    gap: 10px;
}
.cc-round-confirm-actions button {
    appearance: none;
    flex: 1;
    border-radius: 12px;
    padding: 14px 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.cc-round-confirm-cancel {
    background: #2c333d;
    color: #f0f2f5;
    border-color: rgba(255, 255, 255, 0.14);
}
.cc-round-confirm-cancel:hover  { background: #353c46; }
.cc-round-confirm-cancel:active { background: #404853; }
.cc-round-confirm-end {
    background: #ff6b6b;
    color: #1a0707;
    border-color: #ff6b6b;
}
.cc-round-confirm-end:hover  { background: #ff8080; border-color: #ff8080; }
.cc-round-confirm-end:active { background: #e85555; border-color: #e85555; }
@keyframes ccFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }