:root[data-mithrandir-theme="active"] {
  --game-page: var(--theme-page);
  --game-shell: var(--theme-surface);
  --game-shell-deep: var(--theme-surface-muted);
  --game-header: color-mix(in srgb, var(--theme-surface-raised) 94%, transparent);
  --game-subbar: color-mix(in srgb, var(--theme-surface-muted) 88%, transparent);
  --game-control: var(--theme-surface-raised);
  --game-control-border: var(--theme-border-strong);
  --game-text: var(--theme-text);
  --game-muted: var(--theme-text-muted);
  --game-overlay: color-mix(in srgb, var(--theme-navy-950) 92%, transparent);
  --game-overlay-text: #f7f9fc;
  --game-overlay-muted: rgba(247, 249, 252, 0.64);
  --game-felt-solitaire: #2f7565;
  --game-felt-euchre-center: #347967;
  --game-felt-euchre-edge: #1e5e52;
  --game-table-line: rgba(238, 226, 189, 0.28);
}

:root[data-mithrandir-theme="active"][data-theme="dark"] {
  --game-page: #071d1c;
  --game-shell: #0b2927;
  --game-shell-deep: #102f2c;
  --game-header: rgba(7, 23, 37, 0.76);
  --game-subbar: rgba(8, 26, 30, 0.7);
  --game-control: #173b3b;
  --game-control-border: rgba(238, 226, 189, 0.28);
  --game-text: #f7f9fc;
  --game-muted: rgba(255, 255, 255, 0.58);
  --game-overlay: rgba(7, 23, 37, 0.9);
  --game-overlay-text: var(--theme-maize-pale);
  --game-overlay-muted: rgba(255, 255, 255, 0.6);
  --game-felt-solitaire: #155247;
  --game-felt-euchre-center: #18574a;
  --game-felt-euchre-edge: #0a302d;
  --game-table-line: rgba(238, 226, 189, 0.14);
}

:root[data-mithrandir-theme="active"] body {
  background: var(--game-page);
  color: var(--game-text);
}

:root[data-mithrandir-theme="active"] .game-shell {
  color: var(--game-text);
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--theme-maize) 12%, transparent), transparent 26%),
    linear-gradient(145deg, var(--game-shell), var(--game-shell-deep) 72%);
}

:root[data-mithrandir-theme="active"] .game-header {
  border-color: color-mix(in srgb, var(--theme-maize) 34%, transparent);
  background: var(--game-header);
}

:root[data-mithrandir-theme="active"] .game-header h1 {
  color: var(--theme-accent-strong);
}

:root[data-mithrandir-theme="active"] .game-header p,
:root[data-mithrandir-theme="active"] .interaction-hint,
:root[data-mithrandir-theme="active"] .settings-note {
  color: var(--game-muted);
}

:root[data-mithrandir-theme="active"] .button {
  border-color: var(--game-control-border);
  background: color-mix(in srgb, var(--game-control) 94%, transparent);
  color: var(--game-text);
}

:root[data-mithrandir-theme="active"] .button:hover,
:root[data-mithrandir-theme="active"] .button:focus-visible {
  border-color: var(--theme-focus);
  background: var(--theme-focus-soft);
  color: var(--theme-text);
}

:root[data-mithrandir-theme="active"] .button.primary {
  border-color: var(--theme-focus);
  background: var(--theme-focus);
  color: var(--theme-navy-950);
}

:root[data-mithrandir-theme="active"] .control-bar,
:root[data-mithrandir-theme="active"] .euchre-settings {
  border-color: var(--theme-border);
  background: var(--game-subbar);
}

:root[data-mithrandir-theme="active"] .control-bar label,
:root[data-mithrandir-theme="active"] .euchre-settings label,
:root[data-mithrandir-theme="active"] .stick-control {
  color: var(--game-muted) !important;
}

:root[data-mithrandir-theme="active"] .control-bar select,
:root[data-mithrandir-theme="active"] .euchre-settings select,
:root[data-mithrandir-theme="active"] .euchre-settings input[type="number"],
:root[data-mithrandir-theme="active"] .game-dialog select,
:root[data-mithrandir-theme="active"] .game-dialog input[type="number"] {
  border-color: var(--game-control-border);
  background: var(--game-control);
  color: var(--game-text);
}

:root[data-mithrandir-theme="active"] .control-bar select:focus,
:root[data-mithrandir-theme="active"] .euchre-settings select:focus,
:root[data-mithrandir-theme="active"] .euchre-settings input[type="number"]:focus {
  border-color: var(--theme-focus);
  outline-color: color-mix(in srgb, var(--theme-focus) 34%, transparent);
}

:root[data-mithrandir-theme="active"] .status-bar,
:root[data-mithrandir-theme="active"] .match-bar {
  border-color: var(--theme-border);
  background: color-mix(in srgb, var(--game-subbar) 92%, transparent);
}

:root[data-mithrandir-theme="active"] .status-bar span,
:root[data-mithrandir-theme="active"] .match-bar span {
  color: var(--game-muted);
}

:root[data-mithrandir-theme="active"] .status-bar strong,
:root[data-mithrandir-theme="active"] .match-bar strong,
:root[data-mithrandir-theme="active"] .trick-side {
  color: var(--theme-accent-strong) !important;
}

:root[data-mithrandir-theme="active"] .table-surface {
  background-color: var(--game-felt-solitaire);
  background-image:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px),
    linear-gradient(rgba(4, 30, 27, 0.1), rgba(4, 30, 27, 0.1));
}

:root[data-mithrandir-theme="active"] .euchre-table {
  background:
    radial-gradient(
      ellipse at center,
      var(--game-felt-euchre-center) 0,
      color-mix(in srgb, var(--game-felt-euchre-center) 78%, var(--game-felt-euchre-edge)) 54%,
      var(--game-felt-euchre-edge) 100%
    );
}

:root[data-mithrandir-theme="active"] .euchre-table::before {
  border-color: var(--game-table-line);
}

:root[data-mithrandir-theme="active"] .seat-heading,
:root[data-mithrandir-theme="active"] .table-message,
:root[data-mithrandir-theme="active"] .up-card-slot strong,
:root[data-mithrandir-theme="active"] .books-area h3 {
  background: var(--game-overlay);
  color: var(--game-overlay-text);
}

:root[data-mithrandir-theme="active"] .seat-status,
:root[data-mithrandir-theme="active"] .up-card-slot small,
:root[data-mithrandir-theme="active"] .books-area h3 {
  color: var(--game-overlay-muted);
}

:root[data-mithrandir-theme="active"] .table-message {
  border-color: color-mix(in srgb, var(--theme-focus) 54%, transparent);
}

:root[data-mithrandir-theme="active"] .toast,
:root[data-mithrandir-theme="active"] .game-dialog,
:root[data-mithrandir-theme="active"] .debug-panel,
:root[data-mithrandir-theme="active"] .win-message {
  border-color: var(--theme-focus);
  background: var(--game-overlay);
  color: var(--game-overlay-text);
}

:root[data-mithrandir-theme="active"] .game-dialog h2,
:root[data-mithrandir-theme="active"] .result-score strong {
  color: var(--game-overlay-text);
}

:root[data-mithrandir-theme="active"] .game-dialog p,
:root[data-mithrandir-theme="active"] .game-dialog label,
:root[data-mithrandir-theme="active"] .toggle-row small {
  color: var(--game-overlay-muted);
}

:root[data-mithrandir-theme="active"] .result-score span,
:root[data-mithrandir-theme="active"] .toggle-row {
  border-color: color-mix(in srgb, var(--game-overlay-text) 16%, transparent);
  background: color-mix(in srgb, var(--game-overlay-text) 7%, transparent);
}

:root[data-mithrandir-theme="active"][data-theme="light"] .foundation-pile.is-empty {
  border-color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.12);
}

:root[data-mithrandir-theme="active"][data-theme="light"] .empty-king {
  border-color: rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.42);
}

@media (min-width: 1001px) {
  :root[data-mithrandir-theme="active"] .site-rail {
    display: flex !important;
  }

  :root[data-mithrandir-theme="active"] .game-shell {
    margin-left: 248px !important;
  }
}

@media (max-width: 1000px) {
  :root[data-mithrandir-theme="active"] .site-rail {
    display: block !important;
  }

  :root[data-mithrandir-theme="active"] .game-shell {
    margin-left: 0 !important;
  }
}