/*
 * Grayscale arcade dark theme with restrained warm action accents.
 *
 * This stylesheet is intentionally loaded after the dashboard and account
 * styles so it can recolor existing surfaces without changing layout or UX.
 */

html[data-theme="dark"] {
  background: #181818 !important;
}

body[data-theme="dark"] {
  --arcade-bg: #181818;
  --arcade-panel: rgba(36, 36, 36, 0.94);
  --arcade-panel-raised: rgba(43, 43, 43, 0.96);
  --arcade-panel-hover: rgba(50, 50, 50, 0.98);
  --arcade-border: rgba(255, 255, 255, 0.16);
  --arcade-border-soft: rgba(255, 255, 255, 0.1);
  --arcade-border-strong: rgba(255, 255, 255, 0.28);
  --arcade-ivory: #ededed;
  --arcade-ivory-strong: #ffffff;
  --arcade-muted: #b1b1b1;
  --arcade-dim: #888888;
  --arcade-copper: #b17d4b;
  --arcade-amber: #d1a05f;
  --arcade-oxblood: #71362f;
  --arcade-oxblood-soft: rgba(113, 54, 47, 0.54);
  --arcade-action-border: rgba(174, 125, 76, 0.3);
  --arcade-action-border-soft: rgba(174, 125, 76, 0.2);
  --arcade-action-border-strong: rgba(204, 151, 91, 0.58);

  /* Restore the existing dashboard system to neutral grayscale surfaces. */
  --daylight-bg: var(--arcade-bg);
  --daylight-surface: #242424;
  --daylight-surface-subtle: #2b2b2b;
  --daylight-surface-blue: #323232;
  --daylight-ink: var(--arcade-ivory);
  --daylight-ink-strong: var(--arcade-ivory-strong);
  --daylight-muted: var(--arcade-muted);
  --daylight-dim: var(--arcade-dim);
  --daylight-border: #484848;
  --daylight-border-soft: #353535;
  --daylight-primary: #d7d7d7;
  --daylight-primary-hover: #ffffff;
  --daylight-shadow: 0 5px 14px rgba(0, 0, 0, 0.24),
    0 1px 2px rgba(0, 0, 0, 0.28);
  --mono-bg: var(--daylight-bg);
  --mono-panel: var(--daylight-surface);
  --mono-card: var(--daylight-surface);
  --mono-card-raised: var(--daylight-surface-subtle);
  --mono-border: var(--daylight-border);
  --mono-border-soft: var(--daylight-border-soft);
  --mono-text: var(--daylight-ink);
  --mono-muted: var(--daylight-muted);
  --mono-dim: var(--daylight-dim);

  color: var(--arcade-ivory);
  background-color: var(--arcade-bg) !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(18, 18, 18, 0.84) 0%,
      rgba(18, 18, 18, 0.9) 58%,
      rgba(18, 18, 18, 0.96) 100%
    ),
    url("/assets/dashboard-arcade-background-v1.png?v=arcade-background-20260825") !important;
  background-attachment: fixed !important;
  background-blend-mode: normal, luminosity !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

/* Keep the existing grayscale dashboard in front of a quiet interactive field. */
body[data-theme="dark"] .dashboard-three-layer {
  display: block !important;
  opacity: 0.38;
}

body[data-theme="dark"] .dashboard-main {
  background: rgba(18, 18, 18, 0.42) !important;
}

body[data-theme="dark"] .dashboard-rail {
  border-left-color: var(--arcade-border-soft);
  background: rgba(18, 18, 18, 0.36);
}

body[data-theme="dark"] .dashboard-header h1,
body[data-theme="dark"] .section-heading h2,
body[data-theme="dark"] .rail-card-heading h2,
body[data-theme="dark"] .party-queue h2,
body[data-theme="dark"] .queue-group-heading h3,
body[data-theme="dark"] .channel-copy h2,
body[data-theme="dark"] .group-copy h3,
body[data-theme="dark"] .favorite-streamer .top-stream-info h3,
body[data-theme="dark"] .top-streams-title {
  color: var(--arcade-ivory-strong) !important;
}

body[data-theme="dark"] .section-heading-icon,
body[data-theme="dark"] .rail-heading-label > i,
body[data-theme="dark"] .queue-heading-icon,
body[data-theme="dark"] .section-link:hover,
body[data-theme="dark"] .section-link:focus-visible,
body[data-theme="dark"] .section-link i {
  color: #d7d7d7 !important;
}

body[data-theme="dark"] :is(
    .category-search-control,
    .streamer-search-control
  ) {
  border-color: var(--arcade-border-soft) !important;
  background: var(--arcade-panel) !important;
  color: var(--arcade-ivory) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

body[data-theme="dark"] :is(
    .theme-toggle,
    .dashboard-profile-link,
    .dashboard-remote-button,
    .secondary-button,
    .icon-button
  ) {
  border-color: var(--arcade-action-border-soft) !important;
  background: var(--arcade-panel) !important;
  color: var(--arcade-ivory) !important;
  box-shadow: inset 0 1px rgba(255, 246, 230, 0.025);
}

body[data-theme="dark"] :is(
    .theme-toggle,
    .dashboard-profile-link,
    .dashboard-remote-button,
    .secondary-button:not(.queue-clear-button),
    .icon-button
  ) > i {
  color: var(--arcade-copper) !important;
}

body[data-theme="dark"] :is(
    .theme-toggle,
    .dashboard-profile-link,
    .dashboard-remote-button,
    .secondary-button,
    .icon-button
  ):is(:hover, :focus-visible) {
  border-color: var(--arcade-action-border-strong) !important;
  background: var(--arcade-panel-hover) !important;
  color: var(--arcade-ivory-strong) !important;
  box-shadow: 0 0 0 3px rgba(177, 125, 75, 0.08) !important;
}

body[data-theme="dark"] :is(
    .category-search-control,
    .streamer-search-control
  ):focus-within {
  border-color: var(--arcade-border-strong) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}

body[data-theme="dark"] :is(
    .category-search-control,
    .streamer-search-control
  ) :is(input, button) {
  color: var(--arcade-ivory);
}

body[data-theme="dark"] :is(
    .category-search-control,
    .streamer-search-control
  ) input::placeholder {
  color: var(--arcade-dim);
}

body[data-theme="dark"] #twitchCategories .category-card,
body[data-theme="dark"] #twitchCategories .category-card[data-carousel-active="true"],
body[data-theme="dark"] .party-queue .artist,
body[data-theme="dark"] .queue-group-empty {
  border-color: var(--arcade-border-soft) !important;
  background: var(--arcade-panel) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    0 5px 14px rgba(0, 0, 0, 0.21) !important;
}

body[data-theme="dark"] #twitchCategories .category-card:is(
    :hover,
    :focus-visible,
    :focus-within
  ) {
  border-color: #707070 !important;
  background: var(--arcade-panel-hover) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

body[data-theme="dark"] #twitchCategories .category-card.is-selected,
body[data-theme="dark"]
  #twitchCategories
  .category-card[data-carousel-active="true"].is-selected {
  border-color: #d7d7d7 !important;
  background: #383838 !important;
  box-shadow:
    0 0 0 1px rgba(215, 215, 215, 0.16),
    0 9px 20px rgba(0, 0, 0, 0.28) !important;
}

body[data-theme="dark"] .category-browse-button {
  border-color: var(--arcade-action-border) !important;
  background: rgba(31, 31, 31, 0.9) !important;
  color: var(--arcade-ivory) !important;
}

body[data-theme="dark"] .category-browse-button:is(:hover, :focus-visible),
body[data-theme="dark"]
  #twitchCategories
  .category-card.is-selected
  .category-browse-button {
  border-color: var(--arcade-copper) !important;
  background: rgba(113, 54, 47, 0.72) !important;
  color: var(--arcade-ivory-strong) !important;
  box-shadow: 0 3px 10px rgba(70, 34, 28, 0.22) !important;
}

body[data-theme="dark"] .dashboard-launch-slot .launch-center:has(> .launch-mode-toggle[hidden]) {
  background: linear-gradient(180deg, rgba(53, 37, 28, 0.96), rgba(24, 18, 15, 0.98));
  box-shadow:
    inset 0 1px rgba(255, 238, 211, 0.045),
    0 7px 16px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(177, 125, 75, 0.07);
}

body[data-theme="dark"]
  .dashboard-launch-slot
  .launch-center:has(> .launch-mode-toggle[hidden])
  :is(.launch-button, #launchWatchParty.launch-button) {
  border-color: rgba(193, 130, 73, 0.48) !important;
  background: linear-gradient(180deg, rgba(103, 47, 38, 0.74), rgba(42, 25, 20, 0.96)) !important;
  color: var(--arcade-ivory-strong) !important;
  box-shadow:
    inset 0 1px rgba(255, 240, 218, 0.06),
    0 7px 16px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(209, 160, 95, 0.09),
    0 0 18px rgba(177, 92, 52, 0.09) !important;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

body[data-theme="dark"]
  .dashboard-launch-slot
  .launch-center:has(> .launch-mode-toggle[hidden])
  .launch-button
  .fa-play {
  border-color: rgba(224, 175, 111, 0.54);
  background: linear-gradient(145deg, rgba(137, 73, 54, 0.98), rgba(58, 35, 28, 0.98));
  color: var(--arcade-ivory-strong);
  box-shadow:
    inset 0 1px rgba(255, 244, 226, 0.12),
    0 0 10px rgba(177, 125, 75, 0.12);
}

body[data-theme="dark"]
  .dashboard-launch-slot
  .launch-center:has(> .launch-mode-toggle[hidden])
  #launchWatchParty.launch-button:is(:hover, :focus-visible),
body[data-theme="dark"]
  .dashboard-launch-slot
  .launch-center:has(> .launch-mode-toggle[hidden]):hover
  #launchWatchParty.launch-button {
  border-color: rgba(226, 171, 105, 0.86) !important;
  background: linear-gradient(
    110deg,
    rgba(82, 39, 31, 0.98) 0%,
    rgba(137, 74, 50, 0.98) 48%,
    rgba(67, 35, 28, 0.98) 100%
  ) !important;
  box-shadow:
    inset 0 1px rgba(255, 244, 226, 0.14),
    0 6px 14px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(226, 171, 105, 0.24),
    0 0 24px rgba(177, 92, 52, 0.28) !important;
  transform: translateY(-1px) scale(1.02);
}

body[data-theme="dark"]
  .dashboard-launch-slot
  .launch-center:has(> .launch-mode-toggle[hidden])
  #launchWatchParty.launch-button:is(:hover, :focus-visible)
  .fa-play,
body[data-theme="dark"]
  .dashboard-launch-slot
  .launch-center:has(> .launch-mode-toggle[hidden]):hover
  #launchWatchParty.launch-button
  .fa-play {
  border-color: rgba(244, 197, 126, 0.82);
  background: linear-gradient(
    145deg,
    rgba(161, 90, 58, 0.99),
    rgba(75, 42, 32, 0.99)
  );
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 0 16px rgba(209, 160, 95, 0.22);
  color: #fff8eb;
  transform: scale(1.03);
}

body[data-theme="dark"] :is(
    .support-link,
    .social-link,
    .group-card,
    .group-card.live48-preset-card,
    .group-card.pcl-preset-card,
    .quick-add-card
  ) {
  border-color: var(--arcade-border-soft) !important;
  background: var(--arcade-panel) !important;
  color: var(--arcade-ivory) !important;
}

body[data-theme="dark"] :is(
    .support-link,
    .social-link,
    .group-card,
    .quick-add-card
  ):is(:hover, :focus-within) {
  border-color: var(--arcade-border) !important;
  background: var(--arcade-panel-raised) !important;
}

body[data-theme="dark"] .favorites-sign-in-prompt {
  border-color: var(--arcade-border-strong) !important;
  background:
    radial-gradient(circle at 50% -6%, rgba(255, 255, 255, 0.05), transparent 42%),
    linear-gradient(155deg, rgba(36, 36, 36, 0.98), rgba(18, 18, 18, 0.99)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 14px 26px rgba(0, 0, 0, 0.2) !important;
  color: var(--arcade-ivory) !important;
}

body[data-theme="dark"] .favorites-sign-in-prompt::before {
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .favorites-sign-in-prompt::after {
  background: rgba(255, 255, 255, 0.035);
}

body[data-theme="dark"] .favorites-sign-in-star {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(145deg, rgba(78, 78, 78, 0.74), rgba(40, 40, 40, 0.84));
  color: var(--arcade-ivory-strong);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .favorites-sign-in-orbit {
  border-color: var(--arcade-border);
  background: #303030;
  color: var(--arcade-ivory);
}

body[data-theme="dark"] .favorites-sign-in-kicker,
body[data-theme="dark"] .favorites-sign-in-secondary,
body[data-theme="dark"] #favorite-streamers.is-signed-out [data-dashboard-favorites-link] {
  color: var(--arcade-muted);
}

body[data-theme="dark"] .favorites-sign-in-copy h3 {
  color: var(--arcade-ivory-strong);
}

body[data-theme="dark"] .favorites-sign-in-copy p,
body[data-theme="dark"] :is(.support-card-copy p, .group-copy p, .quick-add-card p) {
  color: var(--arcade-muted);
}

body[data-theme="dark"] .favorites-sign-in-primary {
  border-color: #e6cda8;
  background: linear-gradient(180deg, #f2e1c8 0%, #d7b98f 100%);
  color: #2b1c14;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.58),
    0 8px 18px rgba(68, 39, 24, 0.25);
}

body[data-theme="dark"] .favorites-sign-in-primary:is(:hover, :focus-visible) {
  border-color: #f6e6cd;
  background: #f6e6cd;
  color: #20130d;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.72),
    0 10px 24px rgba(88, 49, 29, 0.3);
}

body[data-theme="dark"] :is(.group-icon, .live48-preset-icon, .pcl-preset-icon) {
  border-color: var(--arcade-border) !important;
  background: #303030 !important;
  color: #d7d7d7 !important;
}

body[data-theme="dark"] :is(.group-join, .pcl-preset-card-action, .quick-add-action) {
  border-color: var(--arcade-action-border) !important;
  background: rgba(61, 43, 31, 0.9) !important;
  color: var(--arcade-ivory) !important;
}

body[data-theme="dark"] :is(.group-join, .pcl-preset-card-action, .quick-add-action):is(
    :hover,
    :focus-visible
  ) {
  border-color: var(--arcade-action-border-strong) !important;
  background: rgba(86, 52, 35, 0.94) !important;
}

body[data-theme="dark"] :is(.queue-clear-button, .remove-stream-btn) {
  border-color: rgba(148, 68, 59, 0.48) !important;
  background: rgba(82, 35, 31, 0.66) !important;
  color: #e9b0a8 !important;
}

body[data-theme="dark"] :is(.queue-clear-button, .remove-stream-btn):is(
    :hover,
    :focus-visible
  ) {
  border-color: rgba(178, 84, 71, 0.68) !important;
  background: rgba(104, 43, 37, 0.82) !important;
  color: #ffd0c8 !important;
}

body[data-theme="dark"] :is(a, button, input):focus-visible {
  outline-color: var(--arcade-amber);
}

/* Make the primary launch action's hover state unmistakably interactive without
   changing its layout footprint or click target. */
body[data-theme="dark"]
  .dashboard-launch-slot
  .launch-center:has(> .launch-mode-toggle[hidden])
  #launchWatchParty.launch-button:hover,
body[data-theme="dark"]
  .dashboard-launch-slot
  .launch-center:has(> .launch-mode-toggle[hidden])
  #launchWatchParty.launch-button:focus-visible {
  transform: translateY(-2px) scale(1.06) !important;
}

/* Keep the category rail controls in their existing positions, but give both
   directions a high-contrast hit target that reads clearly against the artwork. */
body[data-theme="dark"] .twitch-categories-shell .category-picker-control {
  width: 48px;
  height: 48px;
  border: 2px solid #101010 !important;
  background: #f2f2f0 !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.9),
    0 5px 16px rgba(0, 0, 0, 0.38);
  color: #121212 !important;
  opacity: 1;
}

body[data-theme="dark"] .twitch-categories-shell .category-picker-control i {
  font-size: 18px;
}

body[data-theme="dark"] .twitch-categories-shell .category-picker-control::before {
  position: absolute;
  inset: -5px;
  border: 1px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.88);
  border-right-color: rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.26);
  content: "";
  opacity: 0.94;
  pointer-events: none;
  transform-origin: center;
  animation: category-picker-glow-ring 5.2s linear infinite;
  transition: opacity 180ms ease, box-shadow 180ms ease;
}

body[data-theme="dark"]
  .twitch-categories-shell
  .category-picker-control:is(:hover, :focus-visible):not(:disabled) {
  border-color: #000 !important;
  background: #fff !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.96),
    0 7px 20px rgba(0, 0, 0, 0.46),
    0 0 0 3px rgba(255, 255, 255, 0.24);
  color: #000 !important;
  transform: translateY(-50%) scale(1.1);
}

body[data-theme="dark"]
  .twitch-categories-shell
  .category-picker-control:is(:hover, :focus-visible):not(:disabled)::before {
  border-color: transparent;
  border-top-color: rgba(255, 255, 255, 0.98);
  border-right-color: rgba(255, 255, 255, 0.52);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.34);
  opacity: 1;
}

body[data-theme="dark"]
  .twitch-categories-shell
  .category-picker-control:disabled {
  background: #e2e2df !important;
  color: #2b2b2b !important;
  opacity: 0.62;
}

body[data-theme="dark"]
  .twitch-categories-shell
  .category-picker-control:disabled::before {
  opacity: 0.46;
}

@keyframes category-picker-glow-ring {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  body[data-theme="dark"] .twitch-categories-shell .category-picker-control {
    width: 40px;
    height: 40px;
  }

  body[data-theme="dark"] .twitch-categories-shell .category-picker-control i {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="dark"] .twitch-categories-shell .category-picker-control::before {
    transition: none;
  }
}

@media (max-width: 760px) {
  body[data-theme="dark"] {
    /* Keep the generated scene responsive while preserving its edge lighting. */
    background-size: 100% 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="dark"] {
    background-attachment: scroll !important;
  }

  body[data-theme="dark"] .dashboard-three-layer {
    opacity: 0.2;
  }

  body[data-theme="dark"] .twitch-categories-shell .category-picker-control::before {
    animation: none;
    transition: none;
  }
}