/* BowlsSelect shared component foundation.
   Presentation only. Existing IDs, handlers, role visibility and data flows remain authoritative. */

html,
body {
  background: var(--bs-canvas) !important;
  color: var(--bs-text) !important;
  font: 16px/1.5 var(--bs-font);
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--bs-focus) !important;
  outline-offset: 4px !important;
}

button,
.btn,
.icon-btn,
.mini-btn,
.member-hub-logout,
.member-hub-cta {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
  color: var(--bs-text);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--bs-fast), border-color var(--bs-fast);
}

button:hover:not(:disabled),
.btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.mini-btn:hover:not(:disabled),
.member-hub-logout:hover:not(:disabled),
.member-hub-cta:hover:not(:disabled) {
  transform: none !important;
  border-color: var(--bs-muted);
  background: var(--bs-soft);
  box-shadow: none !important;
}

button:disabled,
.btn:disabled {
  cursor: default;
  opacity: .55;
}

.btn.primary,
.icon-btn.primary,
.mini-btn.primary,
button.primary,
.member-hub-cta {
  border-color: var(--bs-club) !important;
  background: var(--bs-club) !important;
  color: var(--bs-on-club) !important;
}

.btn.primary:hover:not(:disabled),
.icon-btn.primary:hover:not(:disabled),
.mini-btn.primary:hover:not(:disabled),
button.primary:hover:not(:disabled),
.member-hub-cta:hover:not(:disabled) {
  filter: brightness(1.15);
}

.btn.ghost,
.btn.quiet,
button.quiet {
  background: transparent;
}

.btn.danger,
.btn.warning,
button.warning {
  border-color: var(--bs-amber);
  background: var(--bs-amber-surface);
  color: var(--bs-amber);
}

input,
select,
textarea,
.search {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--bs-line) !important;
  border-radius: var(--bs-radius) !important;
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
}

h1,
h2,
h3 {
  margin: 0;
  color: inherit;
}

h1,
h2,
.panel h2,
.panel h3,
.stat-card strong,
.quick-card strong {
  font-family: var(--bs-display) !important;
}

h1 {
  font-size: 40px;
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -1.6px;
}

h2 {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.6px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.muted,
.panel p,
.pool-hint,
.practice-board-hint {
  color: var(--bs-muted) !important;
}

.panel,
.stat-card,
.quick-card,
.access-note,
.players-v2-notice,
.admin-note {
  border: 1px solid var(--bs-line) !important;
  border-radius: var(--bs-panel-radius) !important;
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
  box-shadow: var(--bs-shadow) !important;
}

.panel,
.stat-card {
  border-top: 3px solid var(--bs-club) !important;
}

.note,
.access-note,
.admin-note,
.players-v2-notice {
  border: 1px solid var(--bs-line) !important;
  border-radius: 6px !important;
  background: var(--bs-soft) !important;
  color: var(--bs-text) !important;
}

.note.amber,
.note.warning {
  border-color: var(--bs-amber) !important;
  background: var(--bs-amber-surface) !important;
  color: var(--bs-amber) !important;
}

.status,
.status-badge,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 5px;
  background: var(--bs-soft);
  color: var(--bs-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1px;
}

.status.good,
.status-badge.active,
.pill.good {
  background: var(--bs-success-surface) !important;
  color: var(--bs-success) !important;
}

.status.amber,
.status-badge.warning,
.pill.warning {
  background: var(--bs-amber-surface) !important;
  color: var(--bs-amber) !important;
}

.status.error,
.status-badge.revoked,
.status-badge.inactive {
  background: color-mix(in srgb, var(--bs-error) 14%, var(--bs-surface)) !important;
  color: var(--bs-error) !important;
}

.empty-state,
.meeting-empty {
  border: 1px dashed var(--bs-line) !important;
  border-radius: 10px !important;
  background: var(--bs-soft) !important;
  color: var(--bs-muted) !important;
}

.spinner {
  border-color: var(--bs-line) !important;
  border-top-color: var(--bs-club) !important;
}

.boot,
.bs-work-card {
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
}

/* Application shell and navigation. */
#app {
  max-width: 1680px;
  min-height: 85vh;
  margin: auto;
  container-type: inline-size;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-canvas) 83%, transparent), var(--bs-canvas) 850px), var(--bs-art) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, auto 1000px !important;
}

.topbar {
  height: auto !important;
  min-height: 72px;
  padding: 17px 30px 12px !important;
  gap: 18px !important;
  border-bottom: 1px solid var(--bs-line) !important;
  background: color-mix(in srgb, var(--bs-surface) 97%, transparent) !important;
  color: var(--bs-text) !important;
  box-shadow: 0 4px 18px #031a3320 !important;
}

.topbar::before {
  height: 4px !important;
  background: var(--bs-club) !important;
}

.brand-mark {
  width: 39px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.club-lockup {
  gap: 14px !important;
}

.club-lockup strong {
  color: var(--bs-text) !important;
  font: 750 28px/1 var(--bs-display) !important;
  letter-spacing: -1.15px !important;
}

.club-lockup small {
  color: var(--bs-muted) !important;
}

.main-nav {
  align-self: stretch;
  gap: 28px !important;
  padding: 0 30px !important;
  background: var(--bs-surface) !important;
  box-shadow: none !important;
}

.main-nav button {
  min-height: 46px !important;
  padding: 13px 0 !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bs-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.main-nav button::after {
  display: none !important;
}

.main-nav button.active,
.main-nav button:hover {
  background: transparent !important;
  color: var(--bs-text) !important;
}

.main-nav button.active {
  border-bottom-color: var(--bs-club) !important;
  font-weight: 700 !important;
}

.top-actions select {
  border-color: var(--bs-line) !important;
  border-radius: var(--bs-radius) !important;
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
}

#screenHost {
  max-width: none !important;
  padding: 24px 28px 12px !important;
}

/* Shared lawn-bowls hero/page-header treatment. */
.hero,
.page-head:not(.board-page-head),
.member-hub-intro {
  position: relative;
  isolation: isolate;
  display: block !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bs-club) 55%, var(--bs-line)) !important;
  border-radius: var(--bs-panel-radius) !important;
  background: linear-gradient(90deg, var(--bs-art-shade) 0%, color-mix(in srgb, var(--bs-art-shade) 92%, transparent) 30%, color-mix(in srgb, var(--bs-art-shade) 55%, transparent) 53%, #061b2b06 74%), var(--bs-art) !important;
  background-position: center 68% !important;
  background-size: cover !important;
  color: var(--bs-art-text) !important;
  box-shadow: 0 10px 28px #071c3526 !important;
}

.hero,
.member-hub-intro {
  min-height: 340px !important;
  margin-bottom: 24px !important;
  padding: 30px 34px !important;
  background-position: center 65% !important;
}

.page-head:not(.board-page-head) {
  min-height: 245px !important;
  margin-bottom: 18px !important;
  padding: 28px 30px !important;
}

.hero::before,
.page-head:not(.board-page-head)::before {
  display: none !important;
}

.hero::after,
.page-head:not(.board-page-head)::after,
.member-hub-intro::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--bs-club-secondary), var(--bs-club) 55%, transparent);
  content: "";
}

.hero > div {
  max-width: 57%;
}

.page-head:not(.board-page-head) > div:first-child {
  max-width: 65%;
}

.hero h1,
.member-hub-intro h1 {
  margin: 14px 0 12px !important;
  color: var(--bs-art-text) !important;
  font: 600 45px/1.08 var(--bs-display) !important;
  letter-spacing: -1.4px !important;
  text-shadow: 0 2px 10px #00121c3d !important;
}

.page-head:not(.board-page-head) h1 {
  color: var(--bs-art-text) !important;
  font: 650 38px/1.14 var(--bs-display) !important;
  letter-spacing: -1.2px !important;
  text-shadow: 0 2px 10px #00121c3d !important;
}

.hero > div > p:not(.eyebrow),
.member-hub-intro > p:not(.eyebrow) {
  max-width: 410px !important;
  color: color-mix(in srgb, var(--bs-art-text) 84%, transparent) !important;
  font-size: 14px !important;
}

.page-head:not(.board-page-head) p {
  margin-top: 8px !important;
  color: color-mix(in srgb, var(--bs-art-text) 84%, transparent) !important;
  font-size: 13px !important;
}

.hero .eyebrow,
.page-head:not(.board-page-head) .eyebrow,
.member-hub-intro .eyebrow {
  margin-bottom: 9px !important;
  color: color-mix(in srgb, var(--bs-art-text) 82%, transparent) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
}

.hero-actions {
  margin-top: 22px !important;
}

.hero-actions .btn {
  padding: 12px 21px !important;
  border-color: var(--bs-art-text) !important;
  background: var(--bs-art-text) !important;
  color: var(--bs-club) !important;
}

.hero-emblem {
  width: 58px !important;
  height: 64px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

/* Setup-supplied emblems keep their original aspect ratio and fail to a name/letter. */
.brand-mark:has(.club-emblem-image),
.hero-emblem:has(.club-emblem-image),
.board-emblem:has(.club-emblem-image) {
  background: transparent !important;
}

.club-emblem-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
}

.club-emblem-has-white-background {
  isolation: isolate;
}

.club-emblem-has-white-background .club-emblem-image {
  mix-blend-mode: multiply;
}

.club-emblem-background-removed {
  mix-blend-mode: normal !important;
}

/* Locked post-login Member Hub: frame the original images without changing them. */
.member-hub {
  min-height: 100vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bs-canvas) 83%, transparent), var(--bs-canvas) 850px), var(--bs-art) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, auto 1000px !important;
  color: var(--bs-text) !important;
}

.member-hub-topbar {
  border-bottom: 1px solid var(--bs-line) !important;
  background: color-mix(in srgb, var(--bs-surface) 97%, transparent) !important;
}

.member-hub-wordmark,
.member-hub-user strong {
  color: var(--bs-text) !important;
}

.member-hub-user span,
.member-hub-user small {
  color: var(--bs-muted) !important;
}

.member-hub-logout {
  border-color: var(--bs-line) !important;
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
}

.member-hub-card {
  overflow: hidden;
  border: 1px solid var(--bs-line) !important;
  border-top: 3px solid var(--bs-club) !important;
  border-radius: var(--bs-panel-radius) !important;
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
  box-shadow: 0 7px 20px #0b1f3a09 !important;
}

.member-hub-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain !important;
  background: var(--bs-soft) !important;
  filter: none !important;
}

.member-hub-card-body {
  color: var(--bs-text) !important;
}

.member-hub-card-body > p:not(.eyebrow) {
  color: var(--bs-muted) !important;
}

/* Authentication uses the same restrained surface and photo language. */
.auth-view {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bs-canvas) 86%, transparent), var(--bs-canvas)), var(--bs-art) !important;
  background-position: center !important;
  background-size: cover !important;
}

.auth-entry-shell {
  border: 1px solid var(--bs-line) !important;
  border-radius: var(--bs-panel-radius) !important;
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
  box-shadow: 0 24px 80px #0005 !important;
}

.auth-entry-brand,
.auth-signup-card,
.auth-entry-login {
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
}

.auth-entry-brand {
  border-top: 4px solid var(--bs-club);
  border-bottom: 1px solid var(--bs-line);
}

.auth-entry-actions,
.auth-signup-card {
  border-color: var(--bs-line) !important;
}

.auth-entry-wordmark,
.auth-entry-brand h1,
.auth-signup-card h3,
.auth-entry-login h2 {
  color: var(--bs-text) !important;
}

.auth-entry-brand > p,
.auth-entry-invite,
.auth-signup-card > p:not(.eyebrow),
.auth-signup-card small {
  color: var(--bs-muted) !important;
}

.auth-entry-pills span {
  border: 1px solid var(--bs-line) !important;
  border-radius: 5px !important;
  background: var(--bs-soft) !important;
  color: var(--bs-text) !important;
}

/* Tables and dialogs share one quiet surface hierarchy. */
.table-wrap {
  border-radius: var(--bs-panel-radius);
  background: var(--bs-surface);
}

.data-table {
  color: var(--bs-text);
}

.data-table th {
  border-bottom-color: var(--bs-line) !important;
  background: var(--bs-soft) !important;
  color: var(--bs-muted) !important;
}

.data-table td {
  border-bottom-color: var(--bs-line) !important;
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--bs-soft) 70%, var(--bs-surface)) !important;
}

.modal-back {
  background: #061523b3 !important;
  backdrop-filter: blur(3px) !important;
}

.modal {
  width: min(600px, calc(100vw - 32px));
  max-height: 90vh;
  padding: 28px;
  border: 1px solid var(--bs-line) !important;
  border-top: 4px solid var(--bs-club) !important;
  border-radius: 12px !important;
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
  box-shadow: 0 24px 80px #0005 !important;
}

.modal h2 {
  color: var(--bs-text) !important;
  font-size: 24px;
}

.modal p {
  color: var(--bs-muted);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

@container (max-width: 1100px) {
  .main-nav {
    gap: 20px !important;
  }

  .hero,
  .page-head:not(.board-page-head),
  .member-hub-intro {
    background-position: 62% center !important;
  }

  .hero > div {
    max-width: 62%;
  }

  .page-head:not(.board-page-head) > div:first-child {
    max-width: 68%;
  }
}

@container (max-width: 760px) {
  .topbar {
    padding: 17px 16px 10px !important;
  }

  .club-lockup {
    gap: 8px !important;
  }

  .club-lockup strong {
    font-size: 24px !important;
  }

  .main-nav {
    gap: 0 20px !important;
    padding: 0 16px !important;
  }

  .main-nav button {
    min-height: 46px !important;
    font-size: 13px !important;
  }

  #screenHost {
    padding: 18px 12px 10px !important;
  }

  .hero,
  .page-head:not(.board-page-head),
  .member-hub-intro {
    min-height: 0 !important;
    padding: 20px 18px !important;
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--bs-art-shade) 95%, transparent), color-mix(in srgb, var(--bs-art-shade) 80%, transparent) 48%, color-mix(in srgb, var(--bs-art-shade) 35%, transparent)), var(--bs-art) !important;
    background-position: 70% center !important;
  }

  .hero,
  .member-hub-intro {
    padding-bottom: 135px !important;
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-art-shade) 96%, transparent) 0%, color-mix(in srgb, var(--bs-art-shade) 86%, transparent) 48%, transparent 85%), var(--bs-art) !important;
    background-position: 75% bottom !important;
  }

  .hero > div,
  .page-head:not(.board-page-head) > div:first-child {
    max-width: 100% !important;
  }

  .hero h1,
  .member-hub-intro h1 {
    max-width: 290px !important;
    font-size: 37px !important;
  }

  .page-head:not(.board-page-head) h1 {
    font-size: 30px !important;
  }

  .hero-emblem {
    width: 49px !important;
    height: 54px !important;
  }

  .member-hub-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1400px) {
  .topbar {
    gap: 10px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .club-lockup {
    min-width: 202px !important;
  }

  .main-nav {
    gap: 16px !important;
  }

  .main-nav button {
    font-size: 13px !important;
  }

  .top-actions {
    min-width: 0 !important;
    gap: 5px !important;
  }

  .top-actions #competitionSelect {
    width: 148px !important;
    min-width: 0 !important;
  }

  .top-actions #appearanceSelect {
    width: 92px !important;
    min-width: 0 !important;
  }

  .top-actions #viewModeSelect {
    width: 112px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  .modal {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: 100%;
    margin: 0;
    padding: 22px;
    border-radius: 0 !important;
  }

  .modal-actions .btn,
  .modal-actions button {
    flex: 1;
  }
}

@media (pointer: coarse) {
  button,
  .btn,
  .icon-btn,
  .mini-btn {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Current Home-story copy remains theme-aware in the canonical shared layer. */
html[data-theme="dark"] .home-brand-story h2,
html[data-theme="dark"] .home-product-wordmark {
  color: var(--bs-text);
}

html[data-theme="dark"] .home-brand-story h2 span {
  color: var(--bs-success);
}

/* Approved whole-product makeover: shared shell, data pages and responsive
   presentation. Selection Board geometry and working surfaces are intentionally
   excluded; their existing stylesheet remains authoritative. */
#screenHost > .screen:not(#screen-board) {
  --bs-radius: 6px;
  --bs-panel-radius: 9px;
  --bs-line: #c9d8e5;
  --bs-shadow: 0 8px 24px #001c3612, 0 1px 2px #001c3614;
}

html[data-theme="dark"] #screenHost > .screen:not(#screen-board) {
  --bs-surface: #071f34;
  --bs-soft: #0c2942;
  --bs-text: #f4f8fc;
  --bs-muted: #b5c9dc;
  --bs-line: #24506f;
  --bs-shadow: 0 10px 30px #0007, 0 1px 1px #ffffff0b;
}

html[data-theme="dark"] #app:has(#screenHost > .screen:not(#screen-board).active) {
  background-color: #001426 !important;
}

#screenHost > .screen:not(#screen-board) .btn.primary,
#screenHost > .screen:not(#screen-board) button.primary,
#screenHost > .screen:not(#screen-board) .mini-btn.primary {
  border-color: var(--bs-action) !important;
  background: var(--bs-action) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--bs-action) 32%, transparent) !important;
}

#screenHost > .screen:not(#screen-board) .btn.primary:hover:not(:disabled),
#screenHost > .screen:not(#screen-board) button.primary:hover:not(:disabled) {
  border-color: var(--bs-action-hover) !important;
  background: var(--bs-action-hover) !important;
}

#screenHost > .screen:not(#screen-board) .eyebrow {
  color: var(--bs-gold);
}

#screenHost > .screen:not(#screen-board) .page-head {
  min-height: 168px !important;
  padding: 26px 30px !important;
  border-color: var(--bs-line) !important;
  background-image: linear-gradient(90deg, #001a32f5 0%, #001a32dc 32%, #001a3270 56%, transparent 78%), var(--bs-art) !important;
  background-position: center 64% !important;
  box-shadow: none !important;
}

#screenHost > .screen:not(#screen-board) .page-head h1 {
  max-width: 740px;
  margin: 3px 0 7px !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.05 !important;
}

#screenHost > .screen:not(#screen-board) .page-head p:not(.eyebrow) {
  max-width: 610px;
  margin: 0 !important;
  color: #f0f6fb !important;
  font-size: 14px !important;
  line-height: 1.5;
}

.players-v2-head-actions,
#screen-access > .page-head > .btn {
  position: absolute;
  z-index: 2;
  left: 30px;
  bottom: 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#screen-roster .players-v2-head,
#screen-access > .page-head {
  padding-bottom: 82px !important;
}

.players-v2-head-actions .btn,
#screen-access > .page-head > .btn {
  min-height: 38px;
  padding: 7px 12px;
  border-color: #ffffff70 !important;
  background: #001c36c7 !important;
  color: #fff !important;
  font-size: 11px;
}

.players-v2-head-actions .btn.primary,
#screen-access > .page-head > .btn.primary {
  border-color: var(--bs-action) !important;
  background: var(--bs-action) !important;
}

.players-v2-tabs,
.practice-v1-tabs {
  display: flex;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  margin: 10px 0;
  padding: 3px;
  overflow-x: auto;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
}

.players-v2-tabs button,
.practice-v1-tabs .btn {
  min-width: 132px;
  min-height: 40px;
  padding: 8px 14px;
  border: 0 !important;
  background: transparent !important;
  color: var(--bs-text) !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.players-v2-tabs button.active,
.practice-v1-tabs .btn.primary {
  background: var(--bs-action) !important;
  color: #fff !important;
}

#screen-roster .players-v2-stats,
#screen-rankings .stat-grid,
#screen-home .stat-grid {
  gap: 10px;
  margin: 10px 0 14px;
}

#screen-roster .players-v2-stat,
#screen-rankings .stat-card,
#screen-home .stat-card {
  min-height: 94px;
  padding: 14px 16px;
  border: 1px solid var(--bs-line) !important;
  border-radius: var(--bs-panel-radius) !important;
  background: color-mix(in srgb, var(--bs-surface) 96%, transparent) !important;
  box-shadow: none !important;
}

#screen-roster .players-v2-stat strong,
#screen-rankings .stat-card strong,
#screen-home .stat-card strong {
  font-size: 25px;
  line-height: 1.1;
}

#screen-roster .roster-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px auto auto;
  align-items: end;
  gap: 8px;
  margin: 10px 0;
  padding: 9px;
  border-top-width: 1px !important;
  box-shadow: none !important;
}

#screen-roster .roster-toolbar label {
  display: grid;
  gap: 3px;
  color: var(--bs-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#screen-roster .roster-toolbar :is(input,select,.btn) {
  min-height: 38px;
  font-size: 11px;
}

#screen-roster .players-v2-table-panel,
#screen-rankings .ranking-panel,
#screen-access > .panel:first-of-type {
  overflow: hidden;
  padding: 0;
  border-top-width: 1px !important;
  box-shadow: none !important;
}

#screenHost > .screen:not(#screen-board) .data-table th {
  padding: 9px 11px;
  background: color-mix(in srgb, var(--bs-soft) 84%, var(--bs-surface)) !important;
  font-size: 9px;
  letter-spacing: .06em;
  white-space: nowrap;
}

#screenHost > .screen:not(#screen-board) .data-table td {
  padding: 9px 11px;
  font-size: 11px;
}

#screenHost > .screen:not(#screen-board) .player-cell strong {
  font-size: 12px;
}

#screenHost > .screen:not(#screen-board) .mini-btn {
  min-height: 32px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 9px;
}

#screen-rankings .page-head {
  padding-bottom: 26px !important;
}

#screen-rankings .ranking-filters {
  position: static;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 150px) minmax(200px, 1fr) auto;
  gap: 7px;
  width: 100%;
  margin-top: 24px;
}

#screen-rankings .ranking-filters :is(select,input,.btn) {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border-color: #ffffff5c !important;
  background: #001b34db !important;
  color: #fff !important;
  font-size: 10px;
}

#screen-rankings .ranking-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-top-width: 1px !important;
  box-shadow: none !important;
}

#screen-rankings .rating-guide-v2 {
  gap: 7px;
  margin: 10px 0;
}

#screen-rankings .guide-chip {
  min-height: 34px;
  border-radius: 5px;
  font-size: 9px;
}

#screen-rankings .ranking-table tbody tr.rating-dominating {
  background: color-mix(in srgb, var(--bs-success) 13%, var(--bs-surface));
}

#screen-rankings .ranking-table tbody tr.rating-steady {
  background: color-mix(in srgb, var(--bs-amber) 10%, var(--bs-surface));
}

#screen-home .hero {
  min-height: 335px !important;
  background-image: linear-gradient(90deg, #001a32f5 0%, #001a32cf 31%, #001a324f 57%, transparent 77%), var(--bs-art) !important;
  box-shadow: none !important;
}

#screen-home .hero h1 {
  max-width: 760px;
  font-size: clamp(38px, 4vw, 58px) !important;
}

#screen-home .hero-emblem {
  margin-top: 18px;
}

#screen-home .home-grid {
  gap: 16px;
}

#screen-home .home-grid > .panel {
  border-top-width: 1px !important;
  box-shadow: none !important;
}

#screen-access .access-note,
#screen-setup .panel {
  border-top-width: 1px !important;
  box-shadow: none !important;
}

#screen-access .competition-access-grid {
  gap: 5px;
}

#screen-access .competition-access-item select {
  min-height: 36px;
  font-size: 10px;
}

#screen-setup .setup-grid {
  gap: 14px;
}

#screen-setup .setup-grid > .panel {
  padding: 20px;
}

#screen-setup .form-grid {
  gap: 12px;
}

#screen-setup .setup-competition {
  padding: 14px 0;
}

.app-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 78px;
  margin-top: 28px;
  padding: 16px 28px;
  border-top: 1px solid var(--bs-line);
  background: color-mix(in srgb, var(--bs-canvas) 92%, var(--bs-surface));
  color: var(--bs-muted);
  font-size: 11px;
}

.app-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-footer-brand .product-brand-mark {
  width: 30px;
  height: 34px;
}

.app-footer-brand strong,
.app-footer-brand small {
  display: block;
}

.app-footer-brand strong {
  color: var(--bs-text);
  font-size: 12px;
}

.app-footer nav {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.app-footer a {
  color: var(--bs-text);
  text-decoration: none;
}

#screen-roster .players-v2-head-actions {
  position: static;
  margin-top: 16px;
}

#screen-access > .page-head > .btn {
  position: static;
  margin-top: 16px;
}

#screen-roster .players-v2-head {
  padding-bottom: 26px !important;
}

#screen-access > .page-head {
  padding-bottom: 26px !important;
}

#screen-rankings .page-head {
  min-height: 220px !important;
  padding-bottom: 26px !important;
}

#app:has(#screen-board.active) .app-footer {
  display: none;
}

@media (max-width: 1400px) {
  .club-lockup {
    min-width: 185px !important;
  }

  .club-lockup strong {
    font-size: 20px !important;
  }

  .main-nav {
    gap: 10px !important;
    padding: 0 12px !important;
  }

  .main-nav button,
  .top-actions select,
  .top-actions button {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .top-actions #competitionSelect {
    width: 145px;
  }

  .top-actions #appearanceSelect {
    width: 82px;
  }

  .top-actions #viewModeSelect {
    width: 94px;
  }
}

@media (max-width: 1180px) {
  #screen-rankings .ranking-filters {
    grid-template-columns: repeat(4, minmax(115px, 1fr));
  }

  #screen-rankings .ranking-filters .search {
    grid-column: 1 / -2;
  }

  #screen-roster .roster-toolbar {
    grid-template-columns: minmax(220px, 1fr) 170px auto;
  }

  #screen-roster .roster-toolbar #rosterClearFilters {
    grid-column: -2 / -1;
  }
}

@container (max-width: 760px) {
  #screenHost > .screen:not(#screen-board) .page-head {
    min-height: 188px !important;
    padding: 18px 16px 82px !important;
    background-image: linear-gradient(180deg, #001a32f2 0%, #001a32cd 55%, #001a3261 100%), var(--bs-art) !important;
    background-position: 72% center !important;
  }

  #screenHost > .screen:not(#screen-board) .page-head h1 {
    font-size: 29px !important;
  }

  .players-v2-head-actions,
  #screen-access > .page-head > .btn {
    right: 16px;
    bottom: 16px;
    left: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .players-v2-head-actions .btn,
  #screen-access > .page-head > .btn {
    flex: 0 0 auto;
  }

  #screen-roster .players-v2-tabs {
    width: 100%;
  }

  #screen-roster .players-v2-tabs button {
    min-width: 118px;
  }

  #screen-roster .roster-toolbar,
  #screen-rankings .ranking-filters {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  #screen-rankings .page-head {
    padding-bottom: 18px !important;
  }

  #screen-rankings .ranking-filters {
    margin-top: 16px;
  }

  #screen-rankings .ranking-filters .search {
    grid-column: 1 / -1;
  }

  #screen-roster .roster-toolbar .search {
    grid-column: 1 / -1;
  }

  #screen-home .hero {
    min-height: 420px !important;
    padding: 24px 18px 170px !important;
  }

  #screen-home .hero > div {
    max-width: 100%;
  }

  #screen-home .hero h1 {
    font-size: 38px !important;
  }

  .app-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .app-footer nav {
    justify-content: center;
  }
}

/* The founder's original website image, softly blended into the app header. */
#screen-home .hero,
#screenHost > .screen:not(#screen-board) .page-head,
#screenHost > #screen-board > .board-page-head,
.member-hub-intro {
  background: #001a32 !important;
}
#screen-home .hero::before,
#screenHost > .screen:not(#screen-board) .page-head::before,
#screenHost > #screen-board > .board-page-head::before,
.member-hub-intro::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: -14% 0 auto auto;
  height: 125%;
  width: auto;
  aspect-ratio: 937 / 588;
  background: var(--bs-art) center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 30%);
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}
@container (max-width: 760px) {
  #screen-home .hero::before,
  #screenHost > .screen:not(#screen-board) .page-head::before,
#screenHost > #screen-board > .board-page-head::before,
  .member-hub-intro::before {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    mask-image: linear-gradient(180deg, transparent, #000 38%);
  }
  #screen-home .hero { min-height: 540px !important; }
}

/* Frame Board artwork without changing its dimensions or action layout. */
#screenHost > #screen-board > .board-page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#screenHost > #screen-board > .board-page-head::before { opacity: .7; }
@container (max-width: 760px) {
  #screenHost > #screen-board > .board-page-head::before { opacity: .28; }
}

/* Mobile visual fixes — 2026-09-14.
   Source implementation: ca8cce669bba054d4c3be61503b13cad172dc342.
   Presentation only: mobile hero contrast and Our People action containment. */
@container (max-width: 760px) {
  #screen-home .hero::before,
  #screenHost > .screen:not(#screen-board) .page-head::before,
  .member-hub-intro::before {
    opacity: .5 !important;
  }

  #screenHost > #screen-roster.screen .players-v2-head {
    padding-bottom: 18px !important;
  }

  #screen-roster .players-v2-head-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 14px !important;
    overflow: visible !important;
  }

  #screen-roster .players-v2-head-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }
}

/* Mobile Member Hub contrast repair — 2026-09-14.
   Preserve the founder's real white bowl image, but keep white copy readable
   when the bright bowl sits directly behind the mobile headline. */
@media (max-width: 760px) {
  .member-hub-intro::before {
    opacity: .27 !important;
    filter: brightness(.56) saturate(.88) !important;
  }

  .member-hub-intro .eyebrow,
  .member-hub-intro h1,
  .member-hub-intro > p:not(.eyebrow) {
    text-shadow: 0 2px 8px #001629, 0 0 18px #001629 !important;
  }
}

/* Mobile Member Hub contrast repair — 2026-09-14.
   Preserve the founder's real white bowl image, but keep white copy readable
   when the bright bowl sits directly behind the mobile headline. */
@media (max-width: 760px) {
  .member-hub-intro::before {
    opacity: .27 !important;
    filter: brightness(.56) saturate(.88) !important;
  }

  .member-hub-intro .eyebrow,
  .member-hub-intro h1,
  .member-hub-intro > p:not(.eyebrow) {
    text-shadow: 0 2px 8px #001629, 0 0 18px #001629 !important;
  }
}

/* Mobile Member Hub contrast repair — 2026-09-14.
   Preserve the founder's real white bowl image, but keep white copy readable
   when the bright bowl sits directly behind the mobile headline. */
@media (max-width: 760px) {
  .member-hub-intro::before {
    opacity: .27 !important;
    filter: brightness(.56) saturate(.88) !important;
  }

  .member-hub-intro .eyebrow,
  .member-hub-intro h1,
  .member-hub-intro > p:not(.eyebrow) {
    text-shadow: 0 2px 8px #001629, 0 0 18px #001629 !important;
  }
}

/* Mobile Member Hub contrast repair — 2026-09-14.
   Preserve the founder's real white bowl image, but keep white copy readable
   when the bright bowl sits directly behind the mobile headline. */
@media (max-width: 760px) {
  .member-hub-intro::before {
    opacity: .27 !important;
    filter: brightness(.56) saturate(.88) !important;
  }

  .member-hub-intro .eyebrow,
  .member-hub-intro h1,
  .member-hub-intro > p:not(.eyebrow) {
    text-shadow: 0 2px 8px #001629, 0 0 18px #001629 !important;
  }
}