/* Phase 35D.2 — Haunted DLC image-backed visual theme.
   Uses real art assets instead of procedural placeholder shapes. This remains
   cosmetic only: no gameplay values, radar ranges, or player visibility change. */
:root,
html[data-theme="haunted"],
body[data-theme="haunted"],
html[data-admin-theme="haunted"],
body[data-admin-theme="haunted"] {
  --theme-bg-top: #111016;
  --theme-bg-bottom: #050507;
  --theme-panel: rgba(26, 24, 32, 0.94);
  --theme-panel-strong: rgba(10, 9, 13, 0.97);
  --theme-border: #6f607f;
  --theme-border-strong: #c9c2d7;
  --theme-primary: #8e63c7;
  --theme-primary-dark: #3a244f;
  --theme-secondary: #c9c2d7;
  --theme-danger: #9e4a64;
  --theme-success: #afc8b1;
  --theme-warning: #d9d0ae;
  --theme-text: #f0edf4;
  --theme-muted: #b9b1c3;
  --theme-shadow: rgba(5, 5, 7, 0.88);
  --haunted-purple-glow: rgba(142, 99, 199, 0.32);
}

html[data-theme="haunted"],
html[data-admin-theme="haunted"] {
  background: #050507;
}

body.theme-haunted,
body[data-theme="haunted"],
body[data-admin-theme="haunted"] {
  color: var(--theme-text);
  background:
    linear-gradient(180deg, rgba(5, 5, 7, 0.18), rgba(5, 5, 7, 0.84)),
    url("/assets/themes/haunted/haunted_desktop_background.png?v=35D8") center center / cover fixed no-repeat,
    #050507;
}

body.theme-haunted main,
body[data-theme="haunted"] main,
body[data-admin-theme="haunted"] main,
body.theme-haunted .admin-page,
body[data-admin-theme="haunted"] .admin-page,
body.theme-haunted .scoreboard-display,
body[data-theme="haunted"] .scoreboard-display {
  position: relative;
  z-index: 1;
}

body.theme-haunted .card,
body.theme-haunted .admin-card,
body.theme-haunted .team-score-panel,
body.theme-haunted .scoreboard-map-card,
body.theme-haunted .scoreboard-events-card,
body[data-theme="haunted"] .card,
body[data-admin-theme="haunted"] .card,
body[data-admin-theme="haunted"] .admin-section,
body[data-admin-theme="haunted"] .admin-panel {
  position: relative;
  overflow: hidden;
  color: var(--theme-text);
  background:
    linear-gradient(180deg, rgba(36, 33, 43, 0.95), rgba(10, 9, 13, 0.96));
  border-color: var(--theme-border);
  box-shadow: 7px 7px 0 var(--theme-shadow), 0 0 34px rgba(142, 99, 199, 0.20);
}

body.theme-haunted .card::before,
body[data-theme="haunted"] .card::before,
body[data-admin-theme="haunted"] .card::before,
body[data-admin-theme="haunted"] .admin-section::before,
body[data-admin-theme="haunted"] .admin-panel::before {
  content: "";
  position: absolute;
  inset: auto 10px 8px 10px;
  height: 42%;
  pointer-events: none;
  opacity: 0.15;
  background: url("/assets/themes/haunted/haunted_card_graveyard_silhouette.png?v=35D8") center bottom / 100% 100% no-repeat;
}

body.theme-haunted h1,
body.theme-haunted h2,
body.theme-haunted h3,
body[data-theme="haunted"] h1,
body[data-theme="haunted"] h2,
body[data-theme="haunted"] h3,
body[data-admin-theme="haunted"] h1,
body[data-admin-theme="haunted"] h2,
body[data-admin-theme="haunted"] h3 {
  color: #f0edf4;
  text-shadow: 0 0 18px rgba(142, 99, 199, 0.28);
}

body.theme-haunted a,
body.theme-haunted .big-link,
body[data-theme="haunted"] a,
body[data-theme="haunted"] .big-link,
body[data-admin-theme="haunted"] a,
body[data-admin-theme="haunted"] .big-link {
  color: #cdb7e8;
}

body.theme-haunted button,
body.theme-haunted .button-link,
body[data-theme="haunted"] button,
body[data-theme="haunted"] .button-link,
body[data-admin-theme="haunted"] button,
body[data-admin-theme="haunted"] .button-link {
  border: 2px solid #050507;
  background:
    linear-gradient(180deg, rgba(201, 194, 215, 0.22), transparent 42%),
    linear-gradient(180deg, var(--theme-primary), var(--theme-primary-dark));
  color: #f7f3fb;
  box-shadow: 4px 4px 0 rgba(5, 5, 7, 0.92), 0 0 22px rgba(142, 99, 199, 0.20);
}

body.theme-haunted button:hover,
body.theme-haunted .button-link:hover,
body[data-theme="haunted"] button:hover,
body[data-theme="haunted"] .button-link:hover,
body[data-admin-theme="haunted"] button:hover,
body[data-admin-theme="haunted"] .button-link:hover {
  background:
    linear-gradient(180deg, rgba(240, 237, 244, 0.26), transparent 42%),
    linear-gradient(180deg, #a37ada, #432b5c);
}

body.theme-haunted select,
body.theme-haunted input,
body.theme-haunted textarea,
body[data-theme="haunted"] select,
body[data-theme="haunted"] input,
body[data-theme="haunted"] textarea,
body[data-admin-theme="haunted"] select,
body[data-admin-theme="haunted"] input,
body[data-admin-theme="haunted"] textarea {
  background: rgba(10, 9, 13, 0.92);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

body.theme-haunted .muted,
body[data-theme="haunted"] .muted,
body[data-admin-theme="haunted"] .muted {
  color: var(--theme-muted);
}

/* Phase 35D.7 — keep Haunted cards/panels on-theme across older admin/card classes. */
body.theme-haunted .card,
body.theme-haunted .wide-card,
body.theme-haunted .admin-card,
body.theme-haunted .admin-section,
body.theme-haunted .nested-admin-section,
body.theme-haunted .admin-status-card,
body.theme-haunted .profile-modal,
body.theme-haunted .join-qr-card,
body.theme-haunted .join-player-card,
body.theme-haunted .admin-panel,
body.theme-haunted .modal-backdrop .card,
body[data-theme="haunted"] .card,
body[data-theme="haunted"] .wide-card,
body[data-theme="haunted"] .admin-card,
body[data-theme="haunted"] .admin-section,
body[data-theme="haunted"] .nested-admin-section,
body[data-theme="haunted"] .admin-status-card,
body[data-theme="haunted"] .profile-modal,
body[data-theme="haunted"] .join-qr-card,
body[data-theme="haunted"] .join-player-card,
body[data-theme="haunted"] .admin-panel,
body[data-theme="haunted"] .modal-backdrop .card,
body[data-admin-theme="haunted"] .card,
body[data-admin-theme="haunted"] .wide-card,
body[data-admin-theme="haunted"] .admin-card,
body[data-admin-theme="haunted"] .admin-section,
body[data-admin-theme="haunted"] .nested-admin-section,
body[data-admin-theme="haunted"] .admin-status-card,
body[data-admin-theme="haunted"] .profile-modal,
body[data-admin-theme="haunted"] .join-qr-card,
body[data-admin-theme="haunted"] .join-player-card,
body[data-admin-theme="haunted"] .admin-panel,
body[data-admin-theme="haunted"] .modal-backdrop .card {
  position: relative;
  overflow: hidden;
  color: var(--theme-text) !important;
  background:
    linear-gradient(180deg, rgba(36, 33, 43, 0.96), rgba(10, 9, 13, 0.97)) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 7px 7px 0 var(--theme-shadow), 0 0 34px rgba(142, 99, 199, 0.20) !important;
}

body.theme-haunted .admin-tab-button,
body.theme-haunted .sub-tab-button,
body.theme-haunted .secondary,
body.theme-haunted .secondary-link,
body[data-theme="haunted"] .admin-tab-button,
body[data-theme="haunted"] .sub-tab-button,
body[data-theme="haunted"] .secondary,
body[data-theme="haunted"] .secondary-link,
body[data-admin-theme="haunted"] .admin-tab-button,
body[data-admin-theme="haunted"] .sub-tab-button,
body[data-admin-theme="haunted"] .secondary,
body[data-admin-theme="haunted"] .secondary-link {
  background: linear-gradient(180deg, rgba(48, 43, 59, 0.98), rgba(17, 15, 22, 0.98)) !important;
  border-color: rgba(201, 194, 215, 0.54) !important;
  color: var(--theme-text) !important;
  box-shadow: 3px 3px 0 rgba(5, 5, 7, 0.78), 0 0 18px rgba(142, 99, 199, 0.14) !important;
}

body.theme-haunted .admin-tab-button.active,
body.theme-haunted .sub-tab-button.active,
body[data-theme="haunted"] .admin-tab-button.active,
body[data-theme="haunted"] .sub-tab-button.active,
body[data-admin-theme="haunted"] .admin-tab-button.active,
body[data-admin-theme="haunted"] .sub-tab-button.active {
  background: linear-gradient(180deg, rgba(163, 122, 218, 0.98), rgba(58, 36, 79, 0.98)) !important;
  border-color: rgba(205, 183, 232, 0.90) !important;
  color: #f7f3fb !important;
}

body.theme-haunted .card::before,
body.theme-haunted .admin-card::before,
body.theme-haunted .admin-section::before,
body.theme-haunted .nested-admin-section::before,
body.theme-haunted .admin-status-card::before,
body.theme-haunted .profile-modal::before,
body.theme-haunted .join-qr-card::before,
body.theme-haunted .join-player-card::before,
body[data-theme="haunted"] .card::before,
body[data-theme="haunted"] .admin-card::before,
body[data-theme="haunted"] .admin-section::before,
body[data-theme="haunted"] .nested-admin-section::before,
body[data-theme="haunted"] .admin-status-card::before,
body[data-theme="haunted"] .profile-modal::before,
body[data-theme="haunted"] .join-qr-card::before,
body[data-theme="haunted"] .join-player-card::before,
body[data-admin-theme="haunted"] .card::before,
body[data-admin-theme="haunted"] .admin-card::before,
body[data-admin-theme="haunted"] .admin-section::before,
body[data-admin-theme="haunted"] .nested-admin-section::before,
body[data-admin-theme="haunted"] .admin-status-card::before,
body[data-admin-theme="haunted"] .profile-modal::before,
body[data-admin-theme="haunted"] .join-qr-card::before,
body[data-admin-theme="haunted"] .join-player-card::before {
  content: "";
  position: absolute;
  inset: auto 10px 8px 10px;
  height: 42%;
  pointer-events: none;
  opacity: 0.10;
  background: url("/assets/themes/haunted/haunted_card_graveyard_silhouette.png?v=35D8") center bottom / 100% 100% no-repeat;
}


/* Phase 35D.7 — final Haunted no-brown sweep for regular Windows pages.
   This catches older host/player/scoreboard classes that inherit the base
   brown palette from styles.css. */
body.theme-haunted :is(
  .card,
  .wide-card,
  .status,
  .team-card,
  .tag-card,
  .event-card,
  .objective-card,
  .admin-card,
  .admin-section,
  .nested-admin-section,
  .admin-panel,
  .admin-tabs,
  .admin-item,
  .admin-status-card,
  .team-admin-item,
  .ctf-setup-card,
  .ctf-setup-panel,
  .game-mode-settings-group,
  .map-panel,
  .map-status,
  .ready-requirements,
  .ready-requirements-panel,
  .join-qr-card,
  .join-player-card,
  .profile-modal,
  .profile-showcase-card,
  .profile-stat-card,
  .round-status-card,
  .round-timer-box,
  .team-roster-card,
  .team-score-panel,
  .team-score-box,
  .score-box-card,
  .scoreboard-map-card,
  .scoreboard-events-card,
  .scoreboard-event-strip,
  .scoreboard-controls-panel,
  .generic-scoreboard-header,
  .generic-team-card
),
body[data-theme="haunted"] :is(
  .card,
  .wide-card,
  .status,
  .team-card,
  .tag-card,
  .event-card,
  .objective-card,
  .admin-card,
  .admin-section,
  .nested-admin-section,
  .admin-panel,
  .admin-tabs,
  .admin-item,
  .admin-status-card,
  .team-admin-item,
  .ctf-setup-card,
  .ctf-setup-panel,
  .game-mode-settings-group,
  .map-panel,
  .map-status,
  .ready-requirements,
  .ready-requirements-panel,
  .join-qr-card,
  .join-player-card,
  .profile-modal,
  .profile-showcase-card,
  .profile-stat-card,
  .round-status-card,
  .round-timer-box,
  .team-roster-card,
  .team-score-panel,
  .team-score-box,
  .score-box-card,
  .scoreboard-map-card,
  .scoreboard-events-card,
  .scoreboard-event-strip,
  .scoreboard-controls-panel,
  .generic-scoreboard-header,
  .generic-team-card
),
body[data-admin-theme="haunted"] :is(
  .card,
  .wide-card,
  .status,
  .team-card,
  .tag-card,
  .event-card,
  .objective-card,
  .admin-card,
  .admin-section,
  .nested-admin-section,
  .admin-panel,
  .admin-tabs,
  .admin-item,
  .admin-status-card,
  .team-admin-item,
  .ctf-setup-card,
  .ctf-setup-panel,
  .game-mode-settings-group,
  .map-panel,
  .map-status,
  .ready-requirements,
  .ready-requirements-panel,
  .join-qr-card,
  .join-player-card,
  .profile-modal,
  .profile-showcase-card,
  .profile-stat-card,
  .round-status-card,
  .round-timer-box,
  .team-roster-card,
  .team-score-panel,
  .team-score-box,
  .score-box-card,
  .scoreboard-map-card,
  .scoreboard-events-card,
  .scoreboard-event-strip,
  .scoreboard-controls-panel,
  .generic-scoreboard-header,
  .generic-team-card
) {
  color: #f0edf4 !important;
  border-color: rgba(201, 194, 215, 0.58) !important;
  background:
    linear-gradient(180deg, rgba(40, 37, 48, 0.96), rgba(12, 11, 16, 0.97)) !important;
  box-shadow: 5px 5px 0 rgba(5, 5, 7, 0.78), 0 0 22px rgba(142, 99, 199, 0.16) !important;
}

body.theme-haunted :is(button, .button-link, .secondary, .secondary-link, .admin-tab-button, .sub-tab-button, .mini-button, .small-button, .primary-button, .ready-button),
body[data-theme="haunted"] :is(button, .button-link, .secondary, .secondary-link, .admin-tab-button, .sub-tab-button, .mini-button, .small-button, .primary-button, .ready-button),
body[data-admin-theme="haunted"] :is(button, .button-link, .secondary, .secondary-link, .admin-tab-button, .sub-tab-button, .mini-button, .small-button, .primary-button, .ready-button) {
  color: #f7f3fb !important;
  border: 2px solid #050507 !important;
  background:
    linear-gradient(180deg, rgba(240, 237, 244, 0.18), transparent 42%),
    linear-gradient(180deg, #8e63c7, #3a244f) !important;
  box-shadow: 5px 5px 0 rgba(5, 5, 7, 0.88), 0 0 22px rgba(142, 99, 199, 0.24) !important;
  text-shadow: none !important;
}

body.theme-haunted :is(input, select, textarea, .readonly-input),
body[data-theme="haunted"] :is(input, select, textarea, .readonly-input),
body[data-admin-theme="haunted"] :is(input, select, textarea, .readonly-input) {
  color: #f0edf4 !important;
  background: rgba(10, 9, 13, 0.94) !important;
  border-color: rgba(201, 194, 215, 0.58) !important;
}

body.theme-haunted :is(h1, h2, h3, a, .big-link, .score),
body[data-theme="haunted"] :is(h1, h2, h3, a, .big-link, .score),
body[data-admin-theme="haunted"] :is(h1, h2, h3, a, .big-link, .score) {
  color: #cdb7e8 !important;
}

body.theme-haunted :is(.muted, .field-help, .input-help, .map-help, .admin-item span, .tag-card span, .event-card span, .objective-card span),
body[data-theme="haunted"] :is(.muted, .field-help, .input-help, .map-help, .admin-item span, .tag-card span, .event-card span, .objective-card span),
body[data-admin-theme="haunted"] :is(.muted, .field-help, .input-help, .map-help, .admin-item span, .tag-card span, .event-card span, .objective-card span) {
  color: rgba(185, 177, 195, 0.94) !important;
}


/* Phase 35D.8 — hard no-brown Haunted Windows tokens.
   Older Phase 34J admin surfaces use --admin-panel-3 and card wash tokens.
   If Haunted does not define them, the default sepia/brown values bleed into
   nested panels such as Ready Requirements and Game Mode Settings. */
html[data-theme="haunted"],
html[data-admin-theme="haunted"],
body.theme-haunted,
body[data-theme="haunted"],
body[data-admin-theme="haunted"] {
  --admin-panel: rgba(16, 15, 21, 0.96) !important;
  --admin-panel-2: rgba(34, 31, 42, 0.94) !important;
  --admin-panel-3: rgba(48, 43, 59, 0.90) !important;
  --admin-card-wash: rgba(142, 99, 199, 0.14) !important;
  --admin-card-wash-2: rgba(205, 183, 232, 0.09) !important;
  --admin-card-border: rgba(201, 194, 215, 0.58) !important;
  --admin-card-shadow: rgba(5, 5, 7, 0.78) !important;
  --admin-accent: #8e63c7 !important;
  --admin-accent-2: #cdb7e8 !important;
  --admin-ink: #050507 !important;
  --admin-paper: #f0edf4 !important;
  --admin-text: #f0edf4 !important;
  --admin-muted: rgba(185, 177, 195, 0.94) !important;
}

body.theme-haunted .admin-page .game-mode-settings-fields,
body.theme-haunted .admin-page .game-mode-setting-field,
body.theme-haunted .admin-page .ready-requirements li,
body.theme-haunted .admin-page .admin-list,
body.theme-haunted .admin-page .join-player-row,
body[data-theme="haunted"] .admin-page .game-mode-settings-fields,
body[data-theme="haunted"] .admin-page .game-mode-setting-field,
body[data-theme="haunted"] .admin-page .ready-requirements li,
body[data-theme="haunted"] .admin-page .admin-list,
body[data-theme="haunted"] .admin-page .join-player-row,
body[data-admin-theme="haunted"] .admin-page .game-mode-settings-fields,
body[data-admin-theme="haunted"] .admin-page .game-mode-setting-field,
body[data-admin-theme="haunted"] .admin-page .ready-requirements li,
body[data-admin-theme="haunted"] .admin-page .admin-list,
body[data-admin-theme="haunted"] .admin-page .join-player-row {
  color: #f0edf4 !important;
  border-color: rgba(201, 194, 215, 0.58) !important;
  background: linear-gradient(180deg, rgba(48, 43, 59, 0.96), rgba(16, 15, 21, 0.97)) !important;
  box-shadow: 4px 4px 0 rgba(5, 5, 7, 0.72), 0 0 18px rgba(142, 99, 199, 0.14) !important;
}

body.theme-haunted .admin-page .requirement-met .requirement-icon,
body[data-theme="haunted"] .admin-page .requirement-met .requirement-icon,
body[data-admin-theme="haunted"] .admin-page .requirement-met .requirement-icon {
  background: #afc8b1 !important;
  color: #050507 !important;
  border-color: #050507 !important;
}

body.theme-haunted .admin-page .requirement-missing .requirement-icon,
body[data-theme="haunted"] .admin-page .requirement-missing .requirement-icon,
body[data-admin-theme="haunted"] .admin-page .requirement-missing .requirement-icon {
  background: #cdb7e8 !important;
  color: #050507 !important;
  border-color: #050507 !important;
}
