/* CR0173 Option A: Harbour Atlas visual system for play and banker surfaces. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap");

:root {
  --ha-navy: #002b5c;
  --ha-ink: #0f172a;
  --ha-blue: #1a6fd1;
  --ha-blue-soft: #eff6ff;
  --ha-gold: #ffd700;
  --ha-shell: #f8fafc;
  --ha-white: #ffffff;
  --ha-line: #dbeafe;
  --ha-muted: #475569;
  --ha-green: #16a34a;
  --ha-red: #dc2626;
  --ha-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
  --ha-soft-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  --ha-map: url("assets/brand/web/jersey-silhouette.svg");
  --je-night: #050d1a;
  --je-deep: #0a1628;
  --je-navy: #002b5c;
  --je-blue: #1f7ae0;
  --je-gold: #ffd700;
  --je-gold-soft: #fff2a6;
  --je-bg: #f5f7fb;
  --je-line: #e4e9f2;
  --je-muted: #64748b;
  --je-green: #16a34a;
  --je-red: #dc2626;
  --je-amber: #f59e0b;
  --je-cyan: #06b6d4;
  --je-radius: 14px;
  --je-radius-lg: 22px;
  --je-shadow-card: 0 18px 46px rgba(15, 23, 42, 0.14);
  --je-shadow-pop: 0 26px 70px rgba(0, 43, 92, 0.24);
}

* {
  letter-spacing: 0 !important;
}

html {
  background: var(--ha-shell);
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--ha-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98) 52%, rgba(239, 246, 255, 0.96)) !important;
}

body:has(#map) {
  background: var(--ha-shell) !important;
}

body:has(.auth-card):not(:has(#map)) {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94)),
    var(--ha-map) center / cover no-repeat !important;
}

#map {
  background: #dbeafe !important;
}

.leaflet-control-container .leaflet-control,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: 8px !important;
  border: 1px solid var(--ha-line) !important;
  box-shadow: var(--ha-soft-shadow) !important;
}

#status-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--ha-navy) !important;
  border-bottom: 1px solid var(--ha-line) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

#status-bar.online {
  background: #ecfdf5 !important;
  color: #166534 !important;
}

#debug-box {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #dbeafe !important;
  border: 1px solid rgba(255, 215, 0, 0.22) !important;
  border-radius: 8px !important;
}

.hud-card,
.property-card,
.modal-card,
.panel-card,
.auth-card,
.card,
.team-card,
.stat-card,
.team-list,
.team-metrics-card,
.mini-card,
.step,
.trust,
#chat-window,
.hud-menu-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  color: var(--ha-ink) !important;
  border: 1px solid var(--ha-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--ha-soft-shadow) !important;
}

.auth-card,
.property-card,
.card,
.team-card,
.stat-card {
  border-top: 4px solid var(--ha-gold) !important;
}

#auth-overlay,
#device-overlay,
#kickoff-overlay,
#jail-overlay {
  background:
    linear-gradient(120deg, rgba(0, 43, 92, 0.94), rgba(26, 111, 209, 0.88)),
    var(--ha-map) center / cover no-repeat !important;
}

#auth-overlay h1,
#kickoff-overlay h1,
#device-overlay h1 {
  color: var(--ha-gold) !important;
  text-shadow: 0 2px 12px rgba(0, 43, 92, 0.35) !important;
}

h1,
h2,
h3,
.logo,
.team-info h3,
.team-card h3,
.panel-title,
.metric .value,
.stat-card .value {
  color: var(--ha-navy) !important;
}

p,
li,
.panel-subtitle,
.panel-body-text,
.metric .meta,
.stat-label,
.team-info p,
.team-card p,
.muted,
.app-install-detail {
  color: var(--ha-muted) !important;
}

.header,
.mobile-header,
.mobile-nav,
.topbar {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--ha-navy) !important;
  border-bottom: 1px solid var(--ha-line) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(14px);
}

.header *,
.mobile-header *,
.mobile-nav *,
.topbar * {
  color: inherit;
}

.mobile-nav .logo {
  color: var(--ha-navy) !important;
}

#login-screen {
  background:
    linear-gradient(120deg, rgba(0, 43, 92, 0.94), rgba(26, 111, 209, 0.88)),
    var(--ha-map) center / cover no-repeat !important;
}

#login-screen h1 {
  color: var(--ha-gold) !important;
  text-align: center;
  line-height: 1.1;
}

#login-screen .auth-card {
  width: min(360px, calc(100vw - 28px)) !important;
}

#login-screen .auth-card input {
  width: 100% !important;
  margin-bottom: 12px !important;
}

.tabs,
.bottom-nav {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: var(--ha-line) !important;
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.08) !important;
}

.tab,
.nav-item,
.bnav-item,
.hud-menu-item {
  color: var(--ha-muted) !important;
  border-radius: 8px !important;
}

.tab.active,
.nav-item.active,
.nav-item:hover,
.bnav-item.active,
.bnav-item:hover,
.hud-menu-item:hover {
  background: var(--ha-gold) !important;
  color: var(--ha-navy) !important;
}

.sidebar {
  background: rgba(255, 255, 255, 0.97) !important;
  color: var(--ha-ink) !important;
  border-right: 1px solid var(--ha-line) !important;
  box-shadow: var(--ha-shadow) !important;
}

.btn,
.btn-join,
.btn-buy,
.btn-card-ok,
.btn-submit,
.btn-action,
.btn-manage,
.mini-btn,
.hosted-perk-btn,
.hosted-option-btn,
.live-event-actions button,
button,
input,
select,
textarea {
  border-radius: 8px !important;
  font-family: inherit !important;
}

.btn,
.btn-join,
.btn-buy,
.btn-card-ok,
.btn-submit,
.btn-action,
.btn-manage,
.hosted-perk-btn.primary {
  background: var(--ha-gold) !important;
  color: var(--ha-navy) !important;
  border: 1px solid rgba(0, 43, 92, 0.12) !important;
  box-shadow: none !important;
}

.btn-money,
.btn-buy,
#chat-send {
  background: var(--ha-blue) !important;
  color: #ffffff !important;
}

.btn-jail,
.danger {
  background: var(--ha-red) !important;
  color: #ffffff !important;
}

.btn-unjail,
.option-btn.correct,
.hosted-option-btn.correct {
  background: #ecfdf5 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

.btn-ghost,
.mini-btn,
.hosted-perk-btn,
.live-event-actions button {
  background: var(--ha-white) !important;
  color: var(--ha-navy) !important;
  border: 1px solid var(--ha-line) !important;
}

.btn:hover,
.btn-join:hover,
.btn-buy:hover,
.btn-card-ok:hover,
.btn-submit:hover,
.btn-action:hover,
.btn-manage:hover,
.mini-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ha-soft-shadow) !important;
}

input,
select,
textarea,
#chat-input,
.hosted-photo-panel input[type="file"],
.hosted-photo-panel textarea {
  background: var(--ha-white) !important;
  color: var(--ha-ink) !important;
  border: 1px solid #cbd5e1 !important;
}

input:focus,
select:focus,
textarea:focus,
#chat-input:focus {
  outline: 3px solid rgba(26, 111, 209, 0.18) !important;
  border-color: var(--ha-blue) !important;
}

input::placeholder,
textarea::placeholder {
  color: #64748b !important;
}

#chat-trigger {
  background: var(--ha-navy) !important;
  color: var(--ha-gold) !important;
  border: 2px solid var(--ha-gold) !important;
  box-shadow: var(--ha-shadow) !important;
}

#chat-header,
.panel-header {
  background: var(--ha-navy) !important;
  color: var(--ha-gold) !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.28) !important;
}

.msg-ai {
  background: var(--ha-blue-soft) !important;
  color: var(--ha-ink) !important;
}

.msg-user {
  background: var(--ha-navy) !important;
  color: #ffffff !important;
}

.chance-bg,
.community-bg,
.special-card-ui {
  border-radius: 8px !important;
}

.chance-bg {
  background: var(--ha-blue) !important;
}

.community-bg {
  background: var(--ha-gold) !important;
  color: var(--ha-navy) !important;
}

.option-btn,
.hosted-option-btn {
  background: var(--ha-white) !important;
  color: var(--ha-ink) !important;
  border-color: var(--ha-line) !important;
}

.option-btn.wrong,
.hosted-option-btn.wrong {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

table,
th,
td {
  color: var(--ha-ink) !important;
  border-color: #e2e8f0 !important;
}

th {
  background: var(--ha-blue-soft) !important;
  color: var(--ha-navy) !important;
}

.registry-table th {
  background: var(--ha-navy) !important;
  color: var(--ha-white) !important;
}

.status-badge,
.status-chip,
.timed-trivia-pill,
.live-event-meta span {
  border-radius: 999px !important;
  background: var(--ha-blue-soft) !important;
  color: var(--ha-navy) !important;
  border: 1px solid var(--ha-line) !important;
}

.success {
  color: var(--ha-green) !important;
}

.error {
  color: var(--ha-red) !important;
}

.app-install-banner {
  background: linear-gradient(145deg, rgba(5, 13, 26, 0.96), rgba(0, 43, 92, 0.94)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 215, 0, 0.42) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
}

.app-install-title {
  color: var(--je-gold) !important;
}

.app-install-detail {
  color: rgba(248, 250, 252, 0.95) !important;
}

.app-install-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
}

.app-install-btn-primary {
  background: var(--je-gold) !important;
  color: #081225 !important;
  border-color: rgba(255, 215, 0, 0.9) !important;
}

@media (max-width: 768px) {
  .ui-overlay {
    top: calc(40px + env(safe-area-inset-top)) !important;
  }

  .hud-top {
    gap: 4px !important;
  }

  .hud-card {
    min-height: 34px;
    padding: 6px 8px !important;
    font-size: 0.62rem !important;
  }

  .action-container {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .property-card,
  .modal-card,
  .panel-card {
    max-width: calc(100vw - 24px) !important;
  }

  #chat-window {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
}

/* CR0173 polish iteration: richer game/admin/banker presentation, preserving behaviour. */
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 215, 0, 0.14), transparent 26%),
    linear-gradient(180deg, #f7f9fc, #eef3fa) !important;
  color: var(--ha-ink) !important;
}

h1,
h2,
.logo,
.auth-card h1,
.auth-card h2,
.header h1,
.stat-card .value,
.team-info h3,
.property-title,
.modal-card h2 {
  font-family: "Fraunces", Georgia, serif !important;
}

button,
input,
select,
textarea,
.btn,
.btn-join,
.btn-buy,
.btn-action,
.nav-item,
.bnav-item,
.tab {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}

body:has(#map) {
  background: #0b1730 !important;
}

#map {
  background:
    radial-gradient(circle at 40% 25%, rgba(31, 122, 224, 0.26), transparent 34%),
    linear-gradient(135deg, #0e2847, #d7e7f5) !important;
}

.leaflet-control-container .leaflet-control,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: 10px !important;
  border: 1px solid rgba(0, 43, 92, 0.16) !important;
  box-shadow: 0 14px 34px rgba(5, 13, 26, 0.22) !important;
}

.hud-card,
.property-card,
.modal-card,
.panel-card,
.auth-card,
.card,
.stat-card,
.team-card,
.team-list,
.booking-card,
.hosted-photo-panel,
.live-event-card,
.app-install-banner {
  border-radius: var(--je-radius) !important;
  border: 1px solid var(--je-line) !important;
  box-shadow: var(--je-shadow-card) !important;
}

.hud-card,
.property-card,
.modal-card,
.panel-card,
.auth-card,
.card,
.stat-card,
.team-card,
.team-list {
  position: relative;
  overflow: hidden;
}

.card::before,
.stat-card::before,
.team-card::before,
.team-list::before,
.modal-card::before,
.panel-card::before,
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--je-gold), var(--je-cyan), var(--je-blue));
}

.hud-card {
  background: rgba(5, 13, 26, 0.84) !important;
  color: #ffffff !important;
  border-color: rgba(255, 215, 0, 0.18) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3) !important;
}

.hud-card .label,
.hud-label,
.hud-card small {
  color: rgba(255, 255, 255, 0.68) !important;
}

.hud-card .value,
.hud-value,
#money,
#net-worth,
#team-worth {
  color: var(--je-gold) !important;
  font-family: "JetBrains Mono", Consolas, monospace !important;
  font-variant-numeric: tabular-nums;
}

#status-bar {
  background: rgba(5, 13, 26, 0.92) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.18) !important;
  box-shadow: 0 12px 34px rgba(5, 13, 26, 0.24) !important;
}

#status-bar.online {
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.92), rgba(10, 22, 40, 0.92)) !important;
  color: #ffffff !important;
}

#staging-banner ~ #status-bar {
  top: 30px !important;
  z-index: 1000000 !important;
}

#staging-banner ~ .ui-overlay {
  top: calc(64px + env(safe-area-inset-top)) !important;
}

.action-container,
.property-card,
.modal-card,
.panel-card {
  background: rgba(255, 255, 255, 0.98) !important;
  color: var(--ha-ink) !important;
  border-color: rgba(0, 43, 92, 0.12) !important;
}

.action-container::before,
.property-card::before,
.panel-card::before {
  background: linear-gradient(90deg, var(--je-gold), var(--je-cyan));
}

#login-screen,
body:has(.auth-card):not(:has(#map)) {
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 215, 0, 0.22), transparent 26%),
    radial-gradient(circle at 76% 30%, rgba(6, 182, 212, 0.18), transparent 24%),
    linear-gradient(135deg, var(--je-night), var(--je-navy) 58%, var(--je-deep)),
    var(--ha-map) center / cover no-repeat !important;
  color: #ffffff !important;
}

#login-screen .auth-card,
body:has(.auth-card):not(:has(#map)) .auth-card {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--je-radius-lg) !important;
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px) !important;
}

#login-screen .auth-card h1,
#login-screen .auth-card h2,
#login-screen .auth-card .logo,
body:has(.auth-card):not(:has(#map)) .auth-card h1,
body:has(.auth-card):not(:has(#map)) .auth-card h2,
body:has(.auth-card):not(:has(#map)) .auth-card .logo {
  color: #ffffff !important;
}

#login-screen .auth-card input,
#login-screen .auth-card select,
body:has(.auth-card):not(:has(#map)) .auth-card input,
body:has(.auth-card):not(:has(#map)) .auth-card select {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#login-screen .auth-card input::placeholder,
body:has(.auth-card):not(:has(#map)) .auth-card input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

.sidebar,
.mobile-header,
.bottom-nav,
.header {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 215, 0, 0.18), transparent 30%),
    linear-gradient(180deg, var(--je-night), var(--je-deep)) !important;
  color: #ffffff !important;
  border-color: rgba(255, 215, 0, 0.16) !important;
  box-shadow: 16px 0 46px rgba(5, 13, 26, 0.26) !important;
}

.header {
  box-shadow: 0 16px 42px rgba(5, 13, 26, 0.18) !important;
}

.sidebar .logo,
.mobile-header .logo,
.mobile-nav .logo,
.header h1 {
  color: #ffffff !important;
}

.mobile-header i,
.header h1 i {
  color: var(--je-gold) !important;
}

.nav-item,
.bnav-item,
.tab {
  color: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid transparent !important;
}

.nav-item.active,
.nav-item:hover,
.bnav-item.active,
.bnav-item:hover,
.tab.active,
.tabs .tab.active {
  background: rgba(255, 215, 0, 0.14) !important;
  color: var(--je-gold) !important;
  border-color: rgba(255, 215, 0, 0.18) !important;
}

.tabs {
  background: rgba(5, 13, 26, 0.94) !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.16) !important;
}

.content,
main {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 215, 0, 0.14), transparent 26%),
    linear-gradient(180deg, #f7f9fc, #eef3fa) !important;
}

.card,
.stat-card,
.team-card,
.team-list,
.booking-card {
  background: rgba(255, 255, 255, 0.98) !important;
  color: var(--ha-ink) !important;
  border-color: var(--je-line) !important;
}

.stat-card .value,
.team-stat-val,
.price,
.worth,
.balance,
#pot-value,
.tx-amount {
  font-family: "JetBrains Mono", Consolas, monospace !important;
  font-variant-numeric: tabular-nums;
}

.stat-card .value,
.team-info h3,
.card h2,
.card h3,
.modal-card h2,
.property-title {
  color: var(--je-navy) !important;
}

.card p,
.team-info p,
.muted,
.notes,
.meta {
  color: var(--je-muted) !important;
}

#pot-value,
.tx-amount.positive,
.tx-amount.pos,
.success {
  color: var(--je-green) !important;
}

.tx-amount.negative,
.tx-amount.neg,
.error,
.danger {
  color: var(--je-red) !important;
}

.btn,
.btn-join,
.btn-buy,
.btn-card-ok,
.btn-submit,
.btn-action,
.btn-manage,
.hosted-perk-btn.primary,
.app-install-btn-primary {
  background: linear-gradient(180deg, var(--je-gold), #efbf2e) !important;
  color: var(--je-night) !important;
  border: 1px solid rgba(5, 13, 26, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px rgba(0, 43, 92, 0.12) !important;
}

.btn-money,
.btn-buy,
#chat-send {
  background: linear-gradient(180deg, var(--je-blue), #155fb4) !important;
  color: #ffffff !important;
}

.btn-jail,
.danger {
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  color: #ffffff !important;
}

.btn-ghost,
.mini-btn,
.hosted-perk-btn,
.live-event-actions button,
.app-install-btn {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--je-navy) !important;
  border: 1px solid rgba(0, 43, 92, 0.16) !important;
}

input,
select,
textarea,
#chat-input,
.hosted-photo-panel input[type="file"],
.hosted-photo-panel textarea {
  border-radius: 10px !important;
  background: #ffffff !important;
  border-color: #d7e0ec !important;
}

input:focus,
select:focus,
textarea:focus,
#chat-input:focus {
  outline: 3px solid rgba(255, 215, 0, 0.22) !important;
  border-color: var(--je-blue) !important;
}

.status-badge,
.status-chip,
.timed-trivia-pill,
.live-event-meta span {
  background: rgba(31, 122, 224, 0.1) !important;
  border: 1px solid rgba(31, 122, 224, 0.18) !important;
  color: var(--je-navy) !important;
  font-weight: 800 !important;
}

.fp-icon,
.tx-token {
  border-color: var(--je-gold) !important;
  box-shadow: 0 14px 28px rgba(5, 13, 26, 0.28) !important;
}

#chat-trigger {
  background: var(--je-night) !important;
  color: var(--je-gold) !important;
  border: 2px solid var(--je-gold) !important;
  box-shadow: 0 18px 44px rgba(5, 13, 26, 0.38) !important;
}

#chat-header,
.panel-header {
  background: linear-gradient(90deg, var(--je-night), var(--je-navy)) !important;
  color: var(--je-gold) !important;
}

body:has(#leader-container),
body:has(#hof-container) {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 215, 0, 0.2), transparent 28%),
    linear-gradient(135deg, var(--je-night), var(--je-navy) 56%, var(--je-deep)) !important;
  color: #ffffff !important;
}

#leader-container,
#hof-container,
.leaderboard {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--je-radius-lg) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(14px) !important;
}

body:has(#leader-container) h1,
body:has(#hof-container) h1,
body:has(#leader-container) .team-info h3,
body:has(#hof-container) .team-info h3,
body:has(#leader-container) .worth,
body:has(#hof-container) .worth {
  color: var(--je-gold) !important;
}

/* CR0173 consistency pass: align reset/admin/player panels with the same blue/gold shell. */
html body:not(:has(#map)) {
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 215, 0, 0.2), transparent 26%),
    radial-gradient(circle at 76% 30%, rgba(6, 182, 212, 0.16), transparent 24%),
    linear-gradient(135deg, #071326 0%, #0e2847 48%, #071326 100%) !important;
  color: #ffffff !important;
}

.reset-card,
body:not(:has(#map)) .reset-card,
body:not(:has(#map)) .auth-card {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-top: 5px solid var(--je-gold) !important;
  border-radius: var(--je-radius) !important;
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(18px) !important;
}

.reset-card .logo,
.reset-card label,
.reset-card a,
body:not(:has(#map)) .auth-card .logo,
body:not(:has(#map)) .auth-card label,
body:not(:has(#map)) .auth-card a {
  color: var(--je-gold) !important;
}

.reset-card .lede,
.reset-card p {
  color: rgba(255, 255, 255, 0.76) !important;
}

.reset-card input,
body:not(:has(#map)) .auth-card input,
body:not(:has(#map)) .auth-card select {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.reset-card input::placeholder,
body:not(:has(#map)) .auth-card input::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

body:not(:has(#map)) .mobile-nav,
body:not(:has(#map)) .sidebar,
body:not(:has(#map)) .bottom-nav,
body:not(:has(#map)) .header,
body:not(:has(#map)) .topbar {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 215, 0, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(5, 13, 26, 0.98), rgba(0, 43, 92, 0.96)) !important;
  color: #ffffff !important;
  border-color: rgba(255, 215, 0, 0.18) !important;
}

body:not(:has(#map)) .logo {
  color: var(--je-gold) !important;
}

@media (max-width: 768px) {
  .hud-card {
    min-height: 36px !important;
    border-radius: 12px !important;
  }

  .action-container,
  .property-card,
  .modal-card,
  .panel-card,
  .auth-card {
    border-radius: 16px !important;
  }

  .content,
  main {
    background: linear-gradient(180deg, #f8fafc, #eef3fa) !important;
  }

  .sidebar {
    width: min(88vw, 390px) !important;
  }
}

/* CR0173 staging polish: keep auth/reset/banker shells full-bleed and mobile-safe. */
html {
  min-height: 100%;
  min-width: 0 !important;
  overflow-x: hidden !important;
  background: #071326 !important;
}

body {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body:not(:has(#map)) {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 215, 0, 0.2), transparent 26%),
    radial-gradient(circle at 76% 30%, rgba(6, 182, 212, 0.16), transparent 24%),
    linear-gradient(135deg, #071326 0%, #0e2847 48%, #071326 100%) !important;
}

body:not(:has(#map)) *,
body:not(:has(#map)) *::before,
body:not(:has(#map)) *::after {
  box-sizing: border-box;
  min-width: 0;
}

#login-screen {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  overflow-y: auto !important;
  padding: 28px 16px !important;
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 215, 0, 0.22), transparent 26%),
    radial-gradient(circle at 76% 30%, rgba(6, 182, 212, 0.18), transparent 24%),
    linear-gradient(135deg, #071326 0%, #0e2847 48%, #071326 100%) !important;
}

#login-screen h1 {
  color: #ffffff !important;
  font-family: "Fraunces", Georgia, serif !important;
  text-align: center !important;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

#login-screen .auth-card,
.reset-card {
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  margin-inline: auto !important;
}

#login-screen .auth-card input,
#login-screen .auth-card button,
.reset-card input,
.reset-card button {
  width: 100% !important;
  max-width: 100% !important;
}

.reset-card {
  overflow: visible !important;
}

.reset-card .lede,
.reset-card .message,
.reset-card a,
#login-screen .auth-card,
#login-screen h1 {
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  body:has(.reset-card) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 88px 16px 32px !important;
    overflow-x: hidden !important;
  }

  body:not(:has(#map)) {
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .reset-card {
    width: min(100%, 360px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding: 26px 16px !important;
    transform: none !important;
  }

  .reset-card .lede {
    font-size: 0.92rem !important;
  }

  .reset-card .lede,
  .reset-card .message,
  .reset-card .link-btn {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .reset-card .message {
    font-size: 0.8rem !important;
  }

  .reset-card button,
  .reset-card .btn-submit {
    white-space: normal !important;
    line-height: 1.15 !important;
    font-size: clamp(0.9rem, 3.8vw, 1rem) !important;
    overflow-wrap: anywhere !important;
  }

  .reset-card {
    box-sizing: border-box !important;
    inline-size: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    max-inline-size: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: 16px !important;
    flex: 0 0 auto !important;
  }

  @supports (width: 100dvw) {
    .reset-card {
      inline-size: calc(100dvw - 32px) !important;
      width: calc(100dvw - 32px) !important;
      max-inline-size: calc(100dvw - 32px) !important;
      max-width: calc(100dvw - 32px) !important;
    }
  }

  #login-screen {
    justify-content: flex-start !important;
    padding-top: 96px !important;
  }
}

/* CR0173 theme pass: keep dark-shell page titles gold and readable. */
body:not(:has(#map)) .content > .header h1,
body:not(:has(#map)) .content > h1,
body:not(:has(#map)) .content > h2,
body:not(:has(#map)) .content > section > h1,
body:not(:has(#map)) .content > section > h2,
body:not(:has(#map)) .content > div:not(.card):not(.stat-card):not(.team-card):not(.team-list):not(.booking-card):not(.settings-card):not(.modal-content):not(.modal-card) > h1,
body:not(:has(#map)) .content > div:not(.card):not(.stat-card):not(.team-card):not(.team-list):not(.booking-card):not(.settings-card):not(.modal-content):not(.modal-card) > h2,
body:not(:has(#map)) main > h1,
body:not(:has(#map)) main > h2 {
  color: var(--je-gold) !important;
  opacity: 1 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38) !important;
}

body:not(:has(#map)) .content > p,
body:not(:has(#map)) main > p,
body:not(:has(#map)) .team-grid > p,
body:not(:has(#map)) #teams-container > p,
body:not(:has(#map)) #team-list > p {
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 1 !important;
}

body:has(#leader-container) #page-title,
body:has(#hof-container) #page-title,
body:has(#leader-container) .container > h1,
body:has(#hof-container) .container > h1 {
  color: var(--je-gold) !important;
  opacity: 1 !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.4) !important;
}

body:has(#leader-container) #leader-container,
body:has(#leader-container) .leaderboard,
body:has(#hof-container) #hof-container {
  color: #ffffff !important;
}

body:has(#leader-container) .team-name,
body:has(#hof-container) .team-name,
body:has(#leader-container) .team-info h3,
body:has(#hof-container) .team-info h3 {
  color: #ffffff !important;
  opacity: 1 !important;
}

body:has(#leader-container) .stats-row,
body:has(#hof-container) .stats-row,
body:has(#leader-container) #leader-container > p,
body:has(#hof-container) #hof-container > p {
  color: rgba(255, 255, 255, 0.78) !important;
  opacity: 1 !important;
}

body:has(#leader-container) .token,
body:has(#hof-container) .token {
  color: var(--je-gold) !important;
}

.price-cta {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 215, 0, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(5, 13, 26, 0.98), rgba(0, 43, 92, 0.96)) !important;
  border-color: rgba(255, 215, 0, 0.24) !important;
  color: #ffffff !important;
}

.price-cta h3 {
  color: var(--je-gold-soft) !important;
  opacity: 1 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
}

.price-cta p {
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
}

.price-cta .price-val {
  color: var(--je-gold) !important;
  opacity: 1 !important;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.28) !important;
}

/* CR0173 landing readability closeout. */
body:not(:has(#map)) .hero h1 {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 8px 32px rgba(0, 0, 0, 0.42) !important;
}

body:not(:has(#map)) .hero p {
  color: rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.36) !important;
}

body:not(:has(#map)) .hero .hero-strapline {
  color: var(--je-gold) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

.price-cta h3[style],
.price-cta h3 {
  color: #fff6c7 !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  opacity: 1 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42) !important;
}

.price-cta p[style],
.price-cta p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22) !important;
}

/* CR0173 theme closeout: standalone pages and light cards. */
body:not(:has(#map)) .content-section > h1,
body:not(:has(#map)) .content-section > h2 {
  color: var(--je-gold) !important;
  opacity: 1 !important;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.48) !important;
}

body:not(:has(#map)) .rule-card,
body:not(:has(#map)) .faq-section {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  color: var(--je-night) !important;
  border: 1px solid var(--je-line) !important;
  border-left: 5px solid var(--je-gold) !important;
  border-radius: var(--je-radius) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

body:not(:has(#map)) .rule-card h2,
body:not(:has(#map)) .faq-section h2,
body:not(:has(#map)) .faq-section h3 {
  color: var(--je-navy) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body:not(:has(#map)) .rule-card p,
body:not(:has(#map)) .rule-card li,
body:not(:has(#map)) .faq-section p,
body:not(:has(#map)) .faq-section li {
  color: var(--je-muted) !important;
  opacity: 1 !important;
}

body:not(:has(#map)) .rule-card .highlight {
  color: #1d4f8e !important;
}

body:not(:has(#map)) .settings-card h1,
body:not(:has(#map)) .settings-card h2,
body:not(:has(#map)) .settings-card h3 {
  color: var(--je-navy) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body:not(:has(#map)) .settings-card label {
  color: #43678f !important;
  opacity: 1 !important;
}