/* ===== Unified Side Menu (Account + Settings + Cloud) ===== */

.unified-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10040;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.unified-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

body.account-menu-open {
  overflow-x: hidden;
  touch-action: pan-y;
}

.unified-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: min(88vw, 420px);
  height: 100dvh;
  background: var(--panel);
  border-right: 1px solid var(--line);
  box-shadow: 14px 0 34px rgba(0, 0, 0, 0.35);
  z-index: 10041;
  transform: translateX(-104%);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.unified-menu.is-open {
  transform: translateX(0);
}

.unified-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* var(--safe-top-inset) (not raw env()) so the Kotlin-injected
     --android-safe-top resolves — Android WebView reports env() as 0. */
  padding: max(14px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 8px), calc(env(safe-area-inset-top, 0px) + 8px)) 14px 10px;
  border-bottom: 1px solid var(--line);
}

.unified-menu-header h2 {
  margin: 0;
  font-size: calc(var(--text-2xl) + var(--font-size-step));
}

.unified-menu-header-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.unified-menu-close {
  min-width: calc(38px + var(--font-grow));
  min-height: calc(38px + var(--font-grow));
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18px + var(--font-size-step));
  line-height: 1;
  flex-shrink: 0;
}

.unified-menu-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Bottom padding so the last menu item (Legal links) doesn't land under
     the Android nav bar. The drawer is 100dvh tall, so scrolled content
     can reach the viewport bottom on Android where env() is 0. */
  padding: 0 0 var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px));
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
}

.unified-menu-section {
  flex-shrink: 0;
  padding: 0 0 14px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}

.unified-menu-section:last-child {
  border-bottom: none;
}

.unified-menu-section-title {
  font-size: calc(var(--text-xs) + var(--font-size-step));
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 12px 14px 10px;
  margin: 0 0 12px;
  display: block;
  flex-shrink: 0;
  background: rgba(0,0,0,0.05);
  border-bottom: 1px solid var(--line);
}
.unified-menu-section:first-child .unified-menu-section-title {
  padding-top: 14px;
}

.account-delete-link {
  text-align: center;
  text-decoration: none;
  color: var(--danger, #c0392b);
  border-color: rgba(192, 57, 43, 0.35);
}
.account-delete-link:hover {
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.55);
}

.unified-menu .cloud-row {
  margin: 0;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}

.unified-menu .cloud-row + .cloud-row {
  padding-top: 8px;
}

.unified-menu .cloud-row .btn,
.unified-menu .cloud-row input,
.unified-menu .cloud-row select {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}

/* Snapshot picker — force the select back to a normal-height dropdown.
   The earlier #cloudSnapshotSelect rule in utilities.css padded it
   generously when it lived in the gear-icon panel and another stack
   was stretching it inside the side menu. Constrain explicitly. */
.unified-menu #cloudSnapshotSelect {
  height: var(--touch-min, 44px);
  min-height: 0;
  max-height: var(--touch-min, 44px);
  padding: 6px 10px;
  line-height: 1.2;
  appearance: auto;
  -webkit-appearance: menulist;
}

.unified-menu #cloudJoinCode {
  max-height: 80px;
  min-height: 38px;
  resize: none;
}

/* Inline join-code row — input + Join + QR side by side */
.cloud-join-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0 12px 8px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.cloud-join-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  box-sizing: border-box;
}

.cloud-join-row .btn {
  flex-shrink: 0;
  padding: 8px 10px;
  white-space: nowrap;
  width: auto;
  min-width: 0;
}

/* Session row — Leave button alone (Create Live Session was removed).
   Keep the row as a column so the Leave button stretches full-width like
   every other pill in the side menu. */
.unified-menu .cloud-row.cloud-row-session #cloudLeaveBtn {
  width: 100%;
  white-space: nowrap;
}
.unified-menu .cloud-control,
.unified-menu .cloud-control-compact {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 0 10px;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.unified-menu .cloud-control-compact .cloud-row {
  flex-shrink: 0;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.account-side-cloud-control {
  margin-top: 0;
  margin: 0;
  padding: 8px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ===== Mobile Optimizations for Unified Menu ===== */
@media (max-width: 480px) {
  .unified-menu {
    width: 100%;
  }

  .unified-menu-header {
    padding: max(10px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 6px), calc(env(safe-area-inset-top, 0px) + 6px)) 10px 8px;
  }

  .unified-menu-header h2 {
    font-size: calc(var(--text-xl) + var(--font-size-step));
  }

  .unified-menu .cloud-row {
    padding: 6px 10px;
    gap: 4px;
  }
  .unified-menu-section-title {
    padding: 8px 10px 4px;
    font-size: calc(var(--text-xs) + var(--font-size-step));
  }
}
/* (Moved) Duplicate .header-course-control rules removed; canonical
   versions live in scorecard.css. */

.course-picker {
  position: relative;
}

.course-picker-wrap {
  margin-top: 6px;
}

.course-source-control {
  margin-bottom: 2px;
}

.course-source-control .hcp-mode-btn-group {
  width: 100%;
}

.course-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(24, 120, 206, 0.35);
  border-radius: 999px;
  background: rgba(24, 120, 206, 0.14);
  color: var(--ink);
  font-weight: 700;
}

.course-picker-input-wrap {
  position: relative;
}

.course-picker-input-wrap .course-picker-search {
  padding-right: 44px;
}

.course-picker-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 34px;
  min-width: 34px;
  height: calc(var(--touch-min) - 8px);
  min-height: calc(var(--touch-min) - 8px);
  padding: 0;
  border-radius: var(--radius-sm);
}

.course-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-alt);
  z-index: 85;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.course-options {
  max-height: min(46vh, 280px);
  overflow-y: auto;
}

.course-option {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(168, 179, 191, 0.22);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  cursor: pointer;
}

.course-option:last-child {
  border-bottom: none;
}

.course-option:hover,
.course-option:focus-visible,
.course-option.is-selected {
  background: rgba(74, 158, 255, 0.2);
}

.course-no-results {
  padding: 10px 12px;
  color: var(--muted);
}
.course-picker-attribution {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.3;
}.course-picker-attribution a {
  color: inherit;
  text-decoration: underline;
}

/* (Moved) Duplicate copies of .header-options-panel, .scorecard-options-panel,
   #scorecardOptionsPanel, .scorecard-options-controls, .header-cloud-row,
   #parBadge, etc. that used to live here have been removed. The canonical
   rules live in header.css (header chrome) and scorecard.css (scorecard
   options panel + controls + par badge). Keeping the duplicates here was
   masking the real cascade and silently divergent margin values (e.g.
   margin: 12px 0 0 vs the intended margin: 0). */

/* =========================================================================
   Game Visibility panel — list of per-game toggles in the side menu so
   users can trim the games launcher to just the games they actually play.
   ========================================================================= */

/* Font size row in App Options — styled as a single unified subsection
   "card" so the label and the three pill buttons read as one control,
   visually subordinate to the APP OPTIONS section title above. */
.unified-menu .menu-font-size-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel-solid, var(--panel));
  box-sizing: border-box;
  width: calc(100% - 24px);
}

.unified-menu .menu-font-size-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.unified-menu .menu-font-size-buttons {
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 100%;
}

.unified-menu .menu-font-size-buttons .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* Single Light/Dark toggle button — sits below the THEME label, spans the
   row width, mirrors the .font-size-btn visual treatment so the App Options
   section reads as a uniform set of controls. The sun/moon icon and label
   ("Light mode" / "Dark mode") both swap based on data-theme via the rules
   in ui-polish.css and the data-theme-toggle-label updater in index.js. */
.unified-menu .menu-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
}

.unified-menu .menu-theme-toggle svg {
  flex-shrink: 0;
}

.unified-menu .menu-theme-toggle-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Utilities panel inside the side menu — narrower margins than the bare
   .game-options-panel default so the action buttons stay full-width inside
   the menu. */
.unified-menu .utilities-menu-panel {
  padding: 10px 12px 12px;
  margin: 0 12px 12px;
}

.unified-menu .utilities-menu-sources {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.unified-menu .utilities-menu-sources a {
  color: var(--accent, #1f9d55);
}

/* Build version — a dev sanity check, surfaced only here in Utilities. */
.unified-menu .utilities-menu-version {
  margin-top: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Account ID — copyable Firebase uid for comping by UID. Section is shown only
   when signed in (non-anonymous), toggled by js/init/account-id.js. */
.unified-menu .account-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unified-menu .account-id-value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs, 11px);
  color: var(--ink, currentColor);
  background: var(--surface-2, rgba(127, 127, 127, 0.12));
  border: 1px solid var(--border, rgba(127, 127, 127, 0.28));
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

.unified-menu .account-id-copy-btn {
  flex: 0 0 auto;
}

/* Account ID block lives under Utilities (just above the version line). Small
   top gap to separate it from the Data Sources block above it. */
.unified-menu .utilities-menu-account-id {
  margin-top: 10px;
}

.unified-menu .utilities-menu-account-id-label {
  margin-bottom: 4px;
  color: var(--muted);
}

/* Collapse-toggle buttons in the side menu (Cloud Options, Game Visibility,
   etc.) — same shape and width as the pill buttons in .cloud-row so the
   whole side menu reads as a single column of consistent controls. */
.unified-menu .unified-menu-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: calc(100% - 24px);
  margin: 10px 12px;
  box-sizing: border-box;
}

.unified-menu .unified-menu-collapse-btn + .game-options-panel {
  margin: 0 12px 12px;
}

.unified-menu .game-visibility-panel {
  padding: 4px 14px 14px;
  margin: 0 12px 12px;
}

.unified-menu .game-visibility-help {
  margin: 2px 0 10px;
  color: var(--muted);
}

.game-visibility-summary {
  margin-left: 8px;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--text-xs);
}

.game-visibility-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-visibility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel-solid, var(--panel));
  cursor: pointer;
  user-select: none;
  min-height: var(--touch-min, 44px);
  box-sizing: border-box;
}

.game-visibility-row:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css.
   (Duplicate options-panel rules that were also in this section now live
   in junk.css alongside their base styles.)
   ========================================================================= */

/* Light mode: subtle grey shells and a darker-grey left-edge accent on each
   section so the menu has depth without reading as blue. Text stays in the
   neutral ink/muted colors. */
:root[data-theme="light"] .unified-menu-section {
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.05), rgba(71, 85, 105, 0.015));
  border-left: 3px solid rgba(71, 85, 105, 0.28);
  border-bottom-color: rgba(71, 85, 105, 0.14);
}

:root[data-theme="light"] .unified-menu-section-title {
  background: rgba(71, 85, 105, 0.1);
  border-bottom-color: rgba(71, 85, 105, 0.18);
}

:root[data-theme="light"] .game-visibility-row {
  background: #f4f7fb;
  border-color: rgba(29, 78, 216, 0.18);
}

:root[data-theme="light"] .menu-font-size-row {
  background: #f4f7fb;
  border-color: rgba(29, 78, 216, 0.18);
}