/* ============================================================
   Home menu, course list, in-course hole picker, name entry,
   auth, add-course, admin settings.
   ============================================================ */

/* ---- Home menu: broadcast tee-card ------------------------ */
/* A golf-telecast lower-third: a left-anchored card with a hairline brass
   frame + Fraunces wordmark + mono data bits, over a graded, slowly drifting
   map of today's featured course. */
#menu, #play-menu {
  position: fixed;
  inset: 0;
  display: flex;
  overflow: hidden;               /* fit to screen — no scroll / rubber-band */
  touch-action: none;
  overscroll-behavior: none;
  background: var(--green-900, #0e1f16);
  z-index: 20;
}

/* Backdrop: today's featured-course routing map, graded + slow ken-burns.
   background-image is set from JS (setMenuBackdrop); gradient here is the
   final fallback when no map loads. */
.menu-bg {
  position: absolute;
  inset: 0;
  background-color: var(--green-900, #0e1f16);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.82) brightness(0.7) contrast(1.05);
  transform-origin: 60% 45%;
  animation: menuKenburns 40s ease-in-out infinite alternate;
  will-change: transform;
}
/* Left→right pine scrim + vignette so the left-anchored card stays legible. */
.menu-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(6, 14, 9, 0.94) 0%,
      rgba(8, 18, 12, 0.86) 34%,
      rgba(10, 22, 15, 0.5) 68%,
      rgba(10, 22, 15, 0.28) 100%),
    radial-gradient(120% 90% at 30% 50%,
      rgba(0, 0, 0, 0) 45%, rgba(3, 8, 5, 0.7) 100%);
}

/* The card itself — left-anchored, hairline brass frame with corner ticks. */
.menu-box {
  position: relative;
  text-align: left;
  margin: auto auto auto 0;
  width: 380px;
  max-width: 88vw;
  max-height: 100dvh;
  padding: var(--s-6) var(--s-5) var(--s-5);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--s-6));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-5));
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--s-6));
  margin-left: max(env(safe-area-inset-left, 0px), 3vw);
  animation: panelIn 0.55s var(--ease) both;
}
/* Hairline brass frame + corner ticks (the broadcast "bug" chrome). */
.menu-box::before {
  content: "";
  position: absolute;
  inset: var(--s-3) 0 var(--s-3) 0;
  border-left: 2px solid var(--brass, #b08d4a);
  pointer-events: none;
  opacity: 0.9;
}

/* Broadcast bug: mono location tag naming the live backdrop course. */
.menu-bug {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  animation: menuRise 0.5s var(--ease) both;
  animation-delay: 0.05s;
}
.menu-bug.hidden { display: none; }
.menu-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brass-bright, #cfa85e);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}
.menu-tag::before {
  content: "▸";
  color: var(--brass, #b08d4a);
  font-size: 0.85em;
}
.menu-tag-free {
  color: var(--green-900, #0e1f16);
  background: var(--brass, #b08d4a);
  border-radius: var(--r-sm, 4px);
  padding: 2px 7px;
  letter-spacing: 1.2px;
}
.menu-tag-free::before { content: none; }
.menu-tag-free.hidden { display: none; }

/* Back link (Play submenu) — mono brass, top of the card. */
.menu-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 var(--s-4);
  padding: var(--s-1) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brass-bright, #cfa85e);
  transition: color var(--dur-fast), transform var(--dur-fast);
  animation: menuRise 0.5s var(--ease) both;
}
.menu-back:hover { color: var(--white, #ece5d3); transform: translateX(-2px); }

/* Wordmark: Fraunces serif + small kicker. */
.menu-wordmark { margin-bottom: var(--s-5); }
.menu-wordmark { animation: menuRise 0.55s var(--ease) both; animation-delay: 0.1s; }
.menu-box h1 {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(48px, 11vh, 68px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  line-height: 0.92;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55);
  margin: 0;
}
.menu-kicker {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Action rows: brass hairline rule + label + caret (no fake numbering). */
.menu-actions {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--s-4);
}
.menu-action {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  margin: 0;
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  background: none;
  border: none;
  border-top: var(--border-hair, 1px solid var(--w-08));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: color var(--dur-fast), background var(--dur-fast);
  animation: menuRise 0.5s var(--ease) both;
}
.menu-actions .menu-action:last-child { border-bottom: var(--border-hair, 1px solid var(--w-08)); }
.menu-action:nth-child(1) { animation-delay: 0.16s; }
.menu-action:nth-child(2) { animation-delay: 0.22s; }
.menu-action:nth-child(3) { animation-delay: 0.28s; }
.menu-action:nth-child(4) { animation-delay: 0.34s; }
.menu-rule {
  flex: 0 0 auto;
  width: 3px;
  height: 1.1em;
  background: var(--brass, #b08d4a);
  border-radius: 2px;
  opacity: 0.55;
  transition: height var(--dur-fast), opacity var(--dur-fast);
}
.menu-action-label {
  flex: 1 1 auto;
  font-size: var(--t-h2, 19px);
  font-weight: var(--fw-med);
  letter-spacing: 0.2px;
}
.menu-action--primary .menu-action-label {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.4px;
}
.menu-action--primary .menu-rule { opacity: 1; width: 4px; }
.menu-caret {
  flex: 0 0 auto;
  color: var(--brass, #b08d4a);
  font-size: 1.1em;
  opacity: 0.6;
  transform: translateX(0);
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.menu-action:hover { color: var(--brass-bright, #cfa85e); }
.menu-action:hover .menu-rule { height: 1.5em; opacity: 1; }
.menu-action:hover .menu-caret { transform: translateX(4px); opacity: 1; }
.menu-action:active { background: var(--w-05); }
.menu-action .fr-dot { margin-left: -0.2em; }

/* Ticker: mono "Today" divider + streak line. */
.menu-ticker {
  margin: 0 0 var(--s-5);
  animation: menuRise 0.5s var(--ease) both;
  animation-delay: 0.4s;
}
.menu-ticker.hidden { display: none; }
.menu-ticker-rule {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}
.menu-ticker-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--w-08);
}
.menu-ticker-line {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.menu-ticker-line.hidden { display: none; }
.menu-ticker-line::before {
  content: "◷ ";
  color: var(--brass, #b08d4a);
}

/* Footer strip: player / auth / fineprint, thin + muted, left-anchored. */
.menu-foot { text-align: left; }

@keyframes menuKenburns {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.14) translate(-2.5%, -1.5%); }
}
@keyframes menuRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Play menu -> landing: slide the Play view off to the right, revealing the
   already-shown landing beneath it. Sits above #menu (z 20) while it plays. */
#play-menu.pm-exit {
  z-index: 21;
  animation: pmSlideOut 0.34s var(--ease) both;
}
@keyframes pmSlideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-bg { animation: none; transform: scale(1.06); }
  .menu-box, .menu-bug, .menu-wordmark, .menu-action, .menu-ticker { animation: none; }
  #play-menu.pm-exit { animation: none; }
}

/* Short-height guard: compress the card so the 7-row Play view (tallest case)
   fits without scrolling on short phones (e.g. SE, landscape). */
@media (max-height: 720px) {
  .menu-box { padding-top: calc(env(safe-area-inset-top, 0px) + var(--s-4)); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-3)); }
  .menu-box h1 { font-size: clamp(40px, 8.5vh, 52px); }
  .menu-wordmark { margin-bottom: var(--s-3); }
  .menu-bug { margin-bottom: var(--s-2); }
  .menu-back { margin-bottom: var(--s-2); }
  .pm-item { padding-top: var(--s-2); padding-bottom: var(--s-2); }
}

/* Small text-link rows (account / admin) */
.menu-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: var(--s-5);
  row-gap: var(--s-1);
  margin-top: var(--s-3);
}
.menu-links:empty { display: none; }
.menu-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--w-70);
  font-size: var(--t-cap);
  font-weight: var(--fw-med);
  letter-spacing: 0.3px;
  padding: var(--s-1) 0;
}
.menu-link.hidden { display: none; }
.menu-links-admin .menu-link { color: var(--brass); }

/* Course picker list */
#course-list {
  width: 260px;
  max-width: 82vw;
  margin: 0 auto var(--s-4);
}
.course-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 7px 0;
  padding: var(--s-3) var(--s-4);
  border: var(--border-hair);
  border-radius: var(--r-md);
  background: var(--w-05);
  color: var(--w-85);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.course-opt:active { transform: scale(0.98); }
.course-opt.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #fff;
}
.course-opt-name { font-size: var(--t-body); font-weight: var(--fw-bold); letter-spacing: 0.2px; }
.course-opt-sub { font-size: 12px; font-weight: var(--fw-reg); opacity: 0.7; }
.course-opt-best {
  margin-top: 3px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--status-eagle);
  letter-spacing: 0.2px;
}

/* Player name line on the home menu */
.menu-player {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: var(--s-4) 0 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--t-cap);
  letter-spacing: 0.3px;
  cursor: pointer;
}
.menu-player b { color: var(--w-85); font-weight: var(--fw-bold); }
.menu-player .ic { font-size: 1em; color: var(--text-dim); }

/* Auth control on menu */
.menu-auth { margin-top: var(--s-1); text-align: left; }
.menu-auth-link {
  background: none; border: none; cursor: pointer;
  color: var(--accent-bright); font-size: var(--t-cap); font-weight: var(--fw-med); letter-spacing: 0.3px;
  text-decoration: underline; padding: var(--s-1);
}
.menu-auth-account { color: var(--text-dim); font-size: var(--t-cap); }
.menu-auth-account.hidden { display: none; }
#menu-signin.hidden { display: none; }

.menu-fineprint {
  margin: var(--s-3) 0 0; text-align: left;
  color: var(--text-muted); font-size: 11px; line-height: 1.5; opacity: 0.85;
}
.menu-fineprint a { color: var(--text-muted); text-decoration: underline; }

/* ---- In-course hole-select modal -------------------------- */
#course-menu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-scrim);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  z-index: 25;
}
#course-menu.hidden { display: none; }
.cm-box {
  background: var(--surface-panel);
  border: var(--border-hair);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  width: min(440px, 92vw);
  box-shadow: var(--shadow-3);
  animation: panelIn var(--dur-modal) var(--ease) both;
}
.cm-box h2 { color: var(--text); font-family: var(--font-display); font-weight: var(--fw-bold); text-align: center; margin-bottom: var(--s-4); letter-spacing: 0.5px; }
#hole-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.hole-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-2) 0;
  border: var(--border-hair);
  border-radius: var(--r-sm);
  background: var(--w-05);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--dur-fast);
}
.hole-cell .hn { font-size: 18px; font-weight: var(--fw-black); }
.hole-cell .hp { font-size: 10px; color: var(--text-dim); }
.hole-cell.current { background: var(--accent); border-color: var(--accent); }
.hole-cell:active { transform: scale(0.96); }
/* Finished holes in a match are locked (no going back). */
.hole-cell.done { opacity: 0.4; cursor: not-allowed; }
.hole-cell.done:active { transform: none; }
.hole-cell.done .hp { color: var(--accent); }
.cm-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.cm-actions .menu-btn { width: auto; flex: 1; margin: 0; padding: var(--s-3); font-size: var(--t-body); }

/* ---- Name-entry / auth / add-course / admin / account: scrim */
#name-entry, #add-course, #auth-modal, #admin-settings, #account-viewer,
#match-menu, #match-lobby, #match-setup, #quick-match, #bot-select,
#friends-modal, #friend-profile, #username-modal, #onboarding, #daily-home, #progress {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background:
    linear-gradient(rgba(5, 11, 8, 0.5), rgba(5, 11, 8, 0.5)),
    var(--surface-scrim);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
}
#onboarding { z-index: var(--z-onboarding); }   /* over gameplay, under the name gate */
.ob-card {
  width: min(400px, 92vw); background: var(--surface-raised, var(--w-08));
  border: 1px solid var(--w-08); border-radius: var(--r-lg, 16px);
  padding: var(--s-5) var(--s-5) var(--s-4); text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.ob-card h2 { margin: 0 0 var(--s-3); }
.ob-list { text-align: left; margin: 0 0 var(--s-4); padding-left: 1.1em;
  color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.ob-list li { margin-bottom: var(--s-2); }
.ob-list b { color: var(--text); }
.ob-card .menu-btn { width: 100%; margin: 0; }
#name-entry { z-index: var(--z-gate); }   /* name gate: above match/auth/tournament overlays */
#username-modal { z-index: var(--z-username); }   /* above friends, below the name gate */
#add-course { z-index: var(--z-sheet-low); }
#auth-modal, #admin-settings, #account-viewer { z-index: var(--z-sheet); }
#play-menu, #match-menu, #match-lobby, #match-setup, #quick-match, #bot-select, #progress { z-index: var(--z-sheet); }
#friends-modal { z-index: var(--z-friends); }
#friend-profile { z-index: var(--z-friend-prof); }   /* above the friends list it opens from */

/* Friends */
.av-uname { color: var(--text-dim); font-size: var(--t-cap); margin-top: 2px; }
.fr-box { width: min(420px, 92vw); }
.fr-tabs { display: flex; gap: 4px; margin-bottom: var(--s-2); }
.fr-tab {
  flex: 1; background: var(--w-05); border: none; color: var(--text-dim);
  font-size: 13px; font-weight: var(--fw-bold); padding: 8px 4px;
  border-radius: var(--r-md); cursor: pointer;
}
.fr-tab.active { background: var(--w-08); color: var(--text); }
.fr-badge, .fr-dot {
  display: inline-block; background: var(--accent-bright); color: #0e1f16;
  font-size: 10px; font-weight: var(--fw-black); border-radius: 999px;
  min-width: 16px; padding: 0 4px; line-height: 16px; text-align: center; margin-left: 5px;
}
.fr-dot { min-width: 9px; width: 9px; height: 9px; padding: 0; margin-left: 6px; vertical-align: middle; }
.fr-badge.hidden, .fr-dot.hidden { display: none; }
.fr-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 4px; border-bottom: 1px solid var(--w-05);
}
.fr-row-name { color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.fr-handle { color: var(--text-dim); font-size: 12px; }
.fr-row-act { display: flex; gap: 6px; flex: none; }
.fr-mini {
  background: var(--accent-bright); color: #0e1f16; border: none;
  font-size: 12px; font-weight: var(--fw-bold); padding: 6px 10px;
  border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
}
.fr-mini.secondary { background: var(--w-08); color: var(--text-dim); }
.fr-h2h { text-align: center; color: var(--text); font-size: 14px; margin: 6px 0 var(--s-3); }
.fr-h2h small { color: var(--text-faint); }
.fr-err { color: var(--status-over); font-size: 13px; text-align: center; padding: 8px 0; }
.fr-ok { color: var(--accent-bright); font-size: 13px; text-align: center; padding: 8px 0; }

/* Account viewer internals */
.av-box { width: min(420px, 92vw); max-height: min(88vh, 88dvh); display: flex; flex-direction: column; text-align: left; }
.av-box h2 { text-align: left; }
/* Flex column: header (id + tabs) + footer (account actions) stay fixed; only
   .av-scroll scrolls. Hub view fills it with a short .pm-list (no scroll needed). */
#av-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; margin: var(--s-1) 0 var(--s-2); }
.av-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.av-empty { text-align: center; color: var(--text-dim); padding: 28px var(--s-2); font-size: 14px; }
.av-id { text-align: center; padding: var(--s-1) 0 var(--s-3); border-bottom: 1px solid var(--w-08); margin-bottom: var(--s-3); }
.av-name { color: var(--text); font-size: var(--t-h1); font-weight: var(--fw-black); }
.av-edit { background: none; border: none; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 2px var(--s-1); }
.av-edit .ic { font-size: 1em; }
.av-badge { font-size: 10px; font-weight: var(--fw-black); letter-spacing: 0.6px; color: var(--accent-bright); border: 1px solid rgba(99, 185, 139, 0.5); border-radius: 6px; padding: 1px 5px; vertical-align: middle; }
.av-email { color: var(--text-dim); font-size: var(--t-cap); margin-top: 2px; }
.av-joined { color: var(--text-faint); font-size: 12px; margin-top: 2px; }
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-bottom: var(--s-3); }
/* Phone: 4 stats across ~311px inner width squeezes each cell to ~70px and clips
   the 19px values — drop to a 2×2 grid so each stat has room. */
@media (max-width: 640px) { .av-grid { grid-template-columns: repeat(2, 1fr); } }
.av-cell { background: var(--w-05); border-radius: var(--r-md); padding: var(--s-3) 6px; text-align: center; }
.av-val { color: var(--text); font-size: 19px; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.av-val small { font-size: 10px; font-weight: var(--fw-med); color: var(--text-faint); }
.av-hcp { color: var(--accent-bright); }
.av-lbl { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px; }
.av-best { color: var(--w-70); font-size: var(--t-cap); text-align: center; margin: 2px 0 var(--s-3); }
/* to-par colors via shared .tp-under/.tp-over/.tp-even (css/base.css) */
.av-section { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: var(--fw-bold); margin: var(--s-4) 0 6px; }
.av-table .lb-topar { text-align: left; }
.av-table .av-date { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- My Account hub + sub-views (hub rows use .pm-item, defined below) --- */
.av-tabs { padding: 0; margin: var(--s-2) 0 var(--s-3); }
.av-account-actions {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--w-08);
}
.av-account-actions .menu-btn { width: 100%; margin: 0; }
.ac-back { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }

/* Collapsible stats section (native <details>) — .av-section label + brass caret. */
.av-collapse { border-top: 1px solid var(--w-08); }
.av-collapse > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  font-weight: var(--fw-bold); padding: var(--s-3) 0 6px;
}
.av-collapse > summary::-webkit-details-marker { display: none; }
.av-collapse > summary::before {
  content: "›"; color: var(--brass); font-size: 14px; font-weight: var(--fw-bold);
  display: inline-block; transition: transform var(--dur-fast, 0.12s);
}
.av-collapse[open] > summary::before { transform: rotate(90deg); }

/* Tour Winnings tab: total (.ac-win-total, defined above) + event rows. */
.aw-list { display: flex; flex-direction: column; gap: 2px; }
.aw-row {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; text-align: left;
  background: var(--w-05); border: none; border-radius: var(--r-md);
  padding: 8px var(--s-3); cursor: pointer; color: var(--text);
}
.aw-row:hover { background: var(--w-08); }
.aw-name { flex: 1; font-size: 14px; font-weight: var(--fw-med); }
.aw-place { color: var(--brass-bright); font-size: 12px; font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.aw-prize { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums;
  min-width: 64px; text-align: right; }
.aw-disabled { opacity: 0.5; cursor: default; }
.ac-backbtn { background: none; border: none; color: var(--accent-bright); font-size: 14px; font-weight: var(--fw-bold); cursor: pointer; padding: 2px 0; }
.ac-back-title { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: var(--fw-bold); }
.ac-win-total { text-align: center; color: var(--accent-bright); font-size: 30px; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; padding: var(--s-2) 0 var(--s-4); }
.ac-win-total small { display: block; color: var(--text-dim); font-size: 11px; font-weight: var(--fw-med); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; }
.ac-bag-count { text-align: center; color: var(--text); font-size: 18px; font-weight: var(--fw-black); padding-bottom: var(--s-3); }
.ac-bag-count small { display: block; color: var(--text-dim); font-size: 11px; font-weight: var(--fw-med); margin-top: 2px; }
.ac-bag-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s-3); }
.ac-bag-row { display: flex; align-items: center; gap: var(--s-2); background: var(--w-05); border-radius: var(--r-md); padding: 8px var(--s-3); cursor: pointer; }
.ac-bag-row.on { background: var(--w-08); }
.ac-bag-row.ac-bag-locked { opacity: 0.7; cursor: default; }
.ac-bag-row input { flex: none; accent-color: var(--accent-bright); }
.ac-bag-name { flex: 1; color: var(--text); font-size: 14px; font-weight: var(--fw-med); }
.ac-bag-carry { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Broadcast tee-card shared modal card: dark pine panel + hairline brass rail,
   left-aligned Fraunces title with a brass ▸ tick. Matches the home landing. */
.ne-box {
  position: relative;
  width: min(340px, 88vw);
  background: var(--surface-panel);
  border: var(--border-hair);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
  text-align: left;
  box-shadow: var(--shadow-3);
  animation: panelIn var(--dur-modal) var(--ease) both;
}
.ne-box h2 { color: var(--text); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h1); margin-bottom: var(--s-1); text-align: left; }
.ne-box h2::before {
  content: "▸";
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 0.7em;
  margin-right: 0.45em;
  vertical-align: middle;
}
.ne-sub { color: var(--text-dim); font-size: var(--t-cap); margin-bottom: var(--s-4); text-align: left; }
.ne-actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.ne-actions .menu-btn { flex: 1; margin: 0; padding: var(--s-3); font-size: var(--t-body); }

/* ---- Play submenus: mirror the landing tee-card ------------------------
   The play-flow overlays (Quick Match, Bots, Vs Friends, Lobby, Match
   settings, Trophy Room) drop the centered-modal look and adopt the landing's
   left-anchored broadcast card over a pine backdrop. The inner .ne-box / .lb-box
   card already carries the brass rail + Fraunces title; here we swap the scrim
   for the pine gradient and left-anchor the card so tapping into a submenu
   feels like staying on the same screen, not opening a dialog. */
#quick-match, #bot-select, #match-menu, #match-lobby, #match-setup, #progress,
#leaderboard, #tournament-lobby {
  justify-content: flex-start;
  background:
    linear-gradient(100deg,
      rgba(6, 14, 9, 0.96) 0%,
      rgba(8, 18, 12, 0.9) 34%,
      rgba(10, 22, 15, 0.6) 68%,
      rgba(10, 22, 15, 0.42) 100%),
    radial-gradient(120% 90% at 30% 50%,
      rgba(0, 0, 0, 0) 45%, rgba(3, 8, 5, 0.7) 100%),
    var(--green-900);
}
#quick-match .ne-box, #bot-select .ne-box, #match-menu .ne-box,
#match-setup .ne-box, #progress .ne-box, #match-lobby .lb-box,
#leaderboard .lb-box, #tournament-lobby .lb-box {
  margin: auto auto auto 0;
  margin-left: max(env(safe-area-inset-left, 0px), 3vw);
  width: min(400px, 92vw);
  max-height: calc(100dvh - var(--s-5) * 2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Fraunces title reads as a screen heading, matching the landing wordmark. */
#quick-match .ne-box > h2, #bot-select .ne-box > h2, #match-menu .ne-box > h2,
#match-setup .ne-box > h2, #progress .ne-box > h2 {
  font-size: clamp(30px, 6vh, 40px); line-height: 1; margin-bottom: var(--s-3);
}
/* Back link sits at the very top of the card (like the Play picker). */
.ne-box > .menu-back, .lb-box > .menu-back { margin-top: calc(env(safe-area-inset-top, 0px)); }

/* Play-mode picker — broadcast rows: brass left rule + label/descriptor + caret,
   hairline separators (mirrors the landing's .menu-action). */
.pm-list { display: flex; flex-direction: column; }
.pm-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  position: relative;
  width: 100%;
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
  border: none;
  border-top: var(--border-hair);
  border-left: 3px solid var(--brass-soft, rgba(176, 141, 74, 0.5));
  border-radius: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pm-list .pm-item:last-child { border-bottom: var(--border-hair); }
.pm-item::after {
  content: "→";
  position: absolute;
  right: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--brass);
  opacity: 0.5;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.pm-item:hover, .pm-item:focus-visible {
  background: var(--w-05);
  border-left-color: var(--brass-bright, #cfa85e);
}
.pm-item:hover::after, .pm-item:focus-visible::after {
  transform: translateY(-50%) translateX(4px);
  opacity: 1;
}
.pm-item:hover .pm-label, .pm-item:focus-visible .pm-label { color: var(--brass-bright, #cfa85e); }
.pm-label { font-weight: var(--fw-med); font-size: var(--t-body); transition: color var(--dur-fast); }
.pm-sub { color: var(--text-dim); font-size: var(--t-cap); }

/* Add-course specifics */
.ac-box { width: min(420px, 92vw); }
#ac-search { margin-top: var(--s-1); }
#ac-results { max-height: 38vh; overflow-y: auto; margin: var(--s-3) 0 0; }
#ac-results .course-opt { margin: 6px 0; }
.ac-note { color: var(--w-85); font-size: var(--t-cap); padding: var(--s-3) var(--s-1); line-height: 1.5; }
#ac-progress {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--r-sm);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 26vh;
  overflow-y: auto;
  margin: var(--s-3) 0 0;
  padding: 0;
}
#ac-progress:not(:empty) { padding: var(--s-3); }

/* Auth specifics */
.auth-error { color: var(--status-error); font-size: var(--t-cap); margin-top: var(--s-2); min-height: 16px; }
.auth-error.hidden { display: none; }

.auth-age { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-3);
  font-size: var(--t-cap); color: var(--text-dim); line-height: 1.4; cursor: pointer; }
.auth-age input { margin-top: 2px; flex: 0 0 auto; }
.auth-age a { color: var(--accent-bright); }

.av-delete { display: block; margin: var(--s-3) auto 0; background: none; border: none;
  color: var(--status-error); font-size: var(--t-cap); text-decoration: underline;
  cursor: pointer; padding: var(--s-1); opacity: 0.85; }
.av-delete:hover { opacity: 1; }
.av-delete:disabled { opacity: 0.5; cursor: default; }
#auth-form.hidden, #auth-sent.hidden { display: none; }
#auth-sent .menu-btn { margin: var(--s-4) auto 0; }

/* ---- Admin settings panel --------------------------------- */
.admin-toggles { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-4) 0; }
.admin-toggle {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: var(--border-edge);
  border-radius: var(--r-sm);
  background: var(--w-05);
  color: var(--text-dim);
  font-size: var(--t-body);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform var(--dur-fast);
}
.admin-toggle .ic { font-size: 1.2em; }
.admin-toggle.active {
  color: var(--accent-bright);
  border-color: rgba(99, 185, 139, 0.5);
  background: rgba(99, 185, 139, 0.08);
}
.admin-toggle:active { transform: scale(0.99); }

/* ============================================================
   Desktop layout overrides (body.is-desktop) — home menu wider
   with more breathing room than the phone-stacked layout.
   ============================================================ */
body.is-desktop .menu-box {
  width: 440px;
  padding: var(--s-6) var(--s-6);
  margin-left: max(env(safe-area-inset-left, 0px), 7vw);
}
body.is-desktop .menu-box h1 { font-size: 84px; }
body.is-desktop #course-list { width: 340px; max-width: 70vw; }