/* SizeDex theme + logo layer. Loaded after style.css. */
:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  background:#07111f;
}

/* Header logo */
.brand-lockup {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.brand-logo {
  display:block;
  width:clamp(180px,22vw,248px);
  height:auto;
  border-radius:12px;
  mix-blend-mode:multiply;
}
.brand-subtitle {
  margin:1px 0 0 3px !important;
  color:#73798a;
  font-size:10px !important;
  text-transform:uppercase;
  letter-spacing:.16em !important;
  font-weight:750;
  line-height:1.2;
}
.theme-toggle {
  position:relative;
  overflow:hidden;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.theme-toggle:active { transform:scale(.95); }
.theme-icon { font-size:18px; line-height:1; }

/* Smooth visual swap without animating gameplay dimensions. */
body,
.game-card,.leaderboard-card,.loading-card,.stage,
.round-result,.secondary,.icon-btn,.tiny-btn,
.leaderboard-form,.leaderboard-form input,.form-message,.modal,
.stats-grid div,.leaderboard-list li,.reveal-key {
  transition:background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

html[data-theme="dark"] body {
  color:#e8eef8;
  background:
    radial-gradient(circle at 8% 0%, rgba(82,95,255,.18), transparent 30rem),
    radial-gradient(circle at 92% 10%, rgba(0,199,230,.11), transparent 28rem),
    linear-gradient(180deg,#08111f 0%,#0b1524 55%,#0a1320 100%);
}

html[data-theme="dark"] .brand-logo {
  mix-blend-mode:normal;
  background:#fff;
  padding:3px 6px;
  border-radius:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
html[data-theme="dark"] .brand-subtitle { color:#8fa0b8; }

html[data-theme="dark"] .game-card,
html[data-theme="dark"] .leaderboard-card,
html[data-theme="dark"] .loading-card {
  border-color:rgba(148,163,184,.16);
  background:rgba(10,20,35,.90);
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}

html[data-theme="dark"] .progress div { background:#263449; }
html[data-theme="dark"] .progress div.done { background:linear-gradient(90deg,#7568ff,#00bad8); }
html[data-theme="dark"] .progress div.current { background:linear-gradient(90deg,#7568ff 50%,#263449 50%); }

html[data-theme="dark"] .game-head h1,
html[data-theme="dark"] .name-chip strong,
html[data-theme="dark"] .guess-value,
html[data-theme="dark"] .round-result strong,
html[data-theme="dark"] .final .score-big,
html[data-theme="dark"] .leaderboard-head strong,
html[data-theme="dark"] .leaderboard-empty strong,
html[data-theme="dark"] .form-title,
html[data-theme="dark"] .leaderboard-form label span,
html[data-theme="dark"] .stats-grid strong,
html[data-theme="dark"] .modal h2 {
  color:#eef4ff;
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .game-head p,
html[data-theme="dark"] .ratio-caption,
html[data-theme="dark"] .round-result span,
html[data-theme="dark"] .final-copy,
html[data-theme="dark"] .stats-grid span,
html[data-theme="dark"] .leaderboard-head span,
html[data-theme="dark"] .leaderboard-empty,
html[data-theme="dark"] .leaderboard-foot,
html[data-theme="dark"] .leaderboard-list .rank,
html[data-theme="dark"] .leaderboard-form p,
html[data-theme="dark"] .leaderboard-form small,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .loading-card p,
html[data-theme="dark"] .modal p,
html[data-theme="dark"] .modal li,
html[data-theme="dark"] .name-chip small {
  color:#91a0b5;
}

html[data-theme="dark"] .stage {
  border-color:rgba(148,163,184,.18);
  background:
    radial-gradient(circle at 50% 16%,rgba(117,104,255,.11),transparent 38%),
    linear-gradient(#0f1b2c 0 78%,#324158 78% 78.3%,#172437 78.3% 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .ground-line { background:#47556a; }
html[data-theme="dark"] .reference-img,
html[data-theme="dark"] .guess-img {
  filter:brightness(0) invert(.82) drop-shadow(0 8px 6px rgba(0,0,0,.28));
}
html[data-theme="dark"] .revealed .reference-img,
html[data-theme="dark"] .revealed .guess-img { filter:none; }
html[data-theme="dark"] .true-img {
  opacity:.64;
  filter:
    brightness(0) invert(.87)
    drop-shadow(2px 0 0 rgba(4,10,18,.92))
    drop-shadow(-2px 0 0 rgba(4,10,18,.92))
    drop-shadow(0 2px 0 rgba(4,10,18,.92))
    drop-shadow(0 -2px 0 rgba(4,10,18,.92))
    drop-shadow(0 0 6px rgba(0,0,0,.7));
}

html[data-theme="dark"] .reveal-key {
  color:#c4cfdf;
  background:rgba(17,30,49,.92);
  border-color:rgba(148,163,184,.19);
}
html[data-theme="dark"] .shadow-swatch {
  background:rgba(231,238,248,.70);
  border-color:#132238;
  box-shadow:0 0 0 1px #9eacc0;
}
html[data-theme="dark"] .offscreen-note {
  background:rgba(17,30,49,.94);
  border-color:rgba(148,163,184,.18);
  color:#b6c2d2;
}

html[data-theme="dark"] .slider { accent-color:#8175ff; }
html[data-theme="dark"] .slider::-webkit-slider-runnable-track { background:#2a3850; }
html[data-theme="dark"] .slider::-moz-range-track { background:#2a3850; }
html[data-theme="dark"] .slider::-webkit-slider-thumb {
  border-color:#0d1828;
  background:linear-gradient(135deg,#8175ff,#00c3dc);
  box-shadow:0 2px 9px rgba(0,0,0,.45);
}
html[data-theme="dark"] .slider::-moz-range-thumb {
  border-color:#0d1828;
  background:#8175ff;
}

html[data-theme="dark"] .primary {
  color:#fff;
  background:linear-gradient(135deg,#675bff,#009fbd);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .tiny-btn {
  color:#e7eef8;
  border-color:rgba(148,163,184,.19);
  background:rgba(17,30,49,.88);
}

html[data-theme="dark"] .round-result {
  background:linear-gradient(135deg,rgba(91,80,210,.18),rgba(0,145,174,.13));
  border-color:rgba(129,117,255,.28);
}
html[data-theme="dark"] .stats-grid div {
  background:linear-gradient(180deg,#132137,#101c2e);
  border-color:rgba(148,163,184,.10);
}

html[data-theme="dark"] .leaderboard-head,
html[data-theme="dark"] .leaderboard-foot {
  border-color:rgba(148,163,184,.12);
}
html[data-theme="dark"] .leaderboard-list li:nth-child(even) { background:#101d30; }
html[data-theme="dark"] .leaderboard-list li.gold {
  background:linear-gradient(90deg,rgba(111,86,0,.42),rgba(54,44,11,.30));
  color:#ffd96b;
}
html[data-theme="dark"] .leaderboard-list li.silver {
  background:linear-gradient(90deg,rgba(105,121,137,.27),rgba(45,57,72,.24));
  color:#d6e0ea;
}
html[data-theme="dark"] .leaderboard-list li.bronze {
  background:linear-gradient(90deg,rgba(137,76,43,.34),rgba(69,42,28,.24));
  color:#eab08a;
}

html[data-theme="dark"] .leaderboard-form {
  background:#0f1c2e;
  border-color:rgba(148,163,184,.16);
}
html[data-theme="dark"] .leaderboard-form input {
  color:#eef4ff;
  background:#0b1727;
  border-color:rgba(148,163,184,.20);
}
html[data-theme="dark"] .leaderboard-form input::placeholder { color:#687a93; }
html[data-theme="dark"] .form-message {
  background:#111f32;
  color:#c0ccdc;
}

html[data-theme="dark"] .modal {
  color:#eef4ff;
  background:#0d192a;
  box-shadow:0 28px 90px rgba(0,0,0,.55);
}
html[data-theme="dark"] .modal-backdrop { background:rgba(0,0,0,.66); }
html[data-theme="dark"] .loader,
html[data-theme="dark"] .mini-loader {
  border-color:#27364c;
  border-top-color:#8b80ff;
}

html[data-theme="dark"] footer { color:#8696ab !important; }

@media (hover:hover) and (pointer:fine) {
  html[data-theme="dark"] .secondary:hover,
  html[data-theme="dark"] .tiny-btn:hover,
  html[data-theme="dark"] .icon-btn:hover {
    border-color:rgba(129,117,255,.48);
    background:#16263d;
  }
}

@media (max-width:640px) {
  .brand-logo { width:158px; border-radius:10px; }
  .brand-subtitle { font-size:7.5px !important; letter-spacing:.11em !important; }
  html[data-theme="dark"] .brand-logo { padding:2px 4px; }
}

@media (max-width:380px) {
  .brand-logo { width:142px; }
  .brand-subtitle { display:none; }
}