/* Modern theme: the default dark-mode companion to modern light.
   CSS-only, scoped to the shared DOM so game logic stays untouched. */

html[data-theme="modern"] {
  color-scheme: dark;
  --bg: #080A10;
  --card: #111722;
  --ink: #F4F7FB;
  --muted: #B2BDCC;
  --faint: #7F8CA3;
  --border: #283347;
  --border-strong: #5A6880;
  --accent: #8EA2FF;
  --accent-strong: #A7B5FF;
  --green: #35D978;  --green-ink: #86F6B6;
  --yellow: #F2C94C; --yellow-ink: #FFE39B;
  --orange: #F7903D; --orange-ink: #FFC18C;
  --red: #FF6259;    --red-ink: #FFA19B;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.22);
  --shadow-lg: 0 18px 48px -18px rgba(0,0,0,0.72), 0 4px 18px rgba(0,0,0,0.38);
}

html[data-theme="modern"] body {
  background:
    radial-gradient(circle at 20% -10%, rgba(142,162,255,0.22), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(53,217,120,0.12), transparent 28%),
    linear-gradient(180deg, #080A10 0%, #0B0F17 58%, #07090E 100%);
}

html[data-theme="modern"] .brand-mark {
  background: linear-gradient(135deg, #F7903D, #35D978 52%, #8EA2FF);
  box-shadow: 0 0 24px rgba(142,162,255,0.24);
}

html[data-theme="modern"] .theme-select,
html[data-theme="modern"] .card,
html[data-theme="modern"] #coach-callout {
  background: rgba(17,23,34,0.94);
  border-color: var(--border);
}

html[data-theme="modern"] .theme-select {
  color: var(--muted);
}

html[data-theme="modern"] .btn-primary {
  background: #F4F7FB;
  color: #080A10;
}

html[data-theme="modern"] .btn-primary:hover {
  background: #FFFFFF;
}

html[data-theme="modern"] .btn-secondary,
html[data-theme="modern"] .seg,
html[data-theme="modern"] .chip {
  color: var(--ink);
  border-color: var(--border);
}

html[data-theme="modern"] .diff-grid {
  background: #0B0F17;
}

html[data-theme="modern"] .seg {
  background: #151B28;
  color: var(--ink);
}

html[data-theme="modern"] .seg.active {
  background: #273154;
  border-color: rgba(142,162,255,0.65);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

html[data-theme="modern"] .btn-secondary,
html[data-theme="modern"] .chip {
  background: rgba(255,255,255,0.055);
}

html[data-theme="modern"] .home-links .link-btn,
html[data-theme="modern"] .link-btn {
  color: #AFC1FF;
}

html[data-theme="modern"] .compare {
  background: #07090E;
  border-color: var(--border);
}

html[data-theme="modern"] .swatch {
  border-color: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.26);
}

html[data-theme="modern"] input[type="range"]::-webkit-slider-runnable-track {
  background-color: #20283A;
  border-color: #37445D;
}

html[data-theme="modern"] input[type="range"]::-moz-range-track {
  background-color: #20283A;
  border-color: #37445D;
}

html[data-theme="modern"] input[type="range"]::-webkit-slider-thumb {
  background: #F4F7FB;
  border-color: rgba(0,0,0,0.2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.28), 0 0 0 5px rgba(142,162,255,0.16);
}

html[data-theme="modern"] input[type="range"]::-moz-range-thumb {
  background: #F4F7FB;
  border-color: rgba(0,0,0,0.2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.28), 0 0 0 5px rgba(142,162,255,0.16);
}

html[data-theme="modern"] .rr-score,
html[data-theme="modern"] .avg,
html[data-theme="modern"] .next-roll .led {
  color: var(--ink);
}

html[data-theme="modern"] .share-card {
  background: #0A0D13;
  border-color: #1E2636;
}

html[data-theme="modern"] .fr-img {
  border-color: rgba(255,255,255,0.16);
}

html[data-theme="modern"] .fr-score {
  background: rgba(0,0,0,0.78);
}

html[data-theme="modern"] #coach-spot {
  outline-color: var(--accent);
  box-shadow: 0 0 0 9999px rgba(3,5,10,0.72);
}

html[data-theme="modern"] #coach-callout::before {
  background: #111722;
  border-color: var(--border);
}