/* Shared theme for the homepage, public histories and signed-in pages. */
.theme-toggle {
  flex-shrink:0;
  border:1px solid var(--control-edge);
  background:var(--control-fill)
}

.theme-toggle:hover {
  border-color:var(--control-edge-hover)
}

.theme-toggle .theme-sun {
  display:none
}

[data-theme=dark] .theme-toggle .theme-moon {
  display:none
}

[data-theme=dark] .theme-toggle .theme-sun {
  display:block
}

[data-theme=dark] {
  color-scheme:dark;
  --bg:#0a1120;
  --ink:#eef3fb;
  --muted:#a3b0c6;
  --muted-light:#8794ac;
  --line:#223049;
  --blue:#68acff;
  --green:#3ccf8e;
  --text-2:#aab6ca;
  --text-3:#8492aa;
  --text-4:#5f6c84;
  --positive:#3ccf8e;
  --negative:#ff5d72;
  --surface:#121c2e;
  --surface-raised:#19263b;
  --border:#24324a;
  /* Midnight smoked glass: a soft tonal fall-off, a faint upper edge and a
     quiet drop. Opaque enough that every figure stays crisp. */
  --glass-fill:linear-gradient(180deg,#17233acc 0%,#111b2ec2 100%);
  --glass-edge:#a6bde814;
  --glass-edge-strong:#a6bde826;
  --glass-highlight:inset 0 1px 0 #ffffff0d;
  --glass-shadow:0 1px 1px #00000033,0 24px 48px -28px #000000b3;
  --dialog-fill:#111a2b;
  --segment-track:#ffffff06;
  --segment-active:#ffffff14;
  --row-hover:#9db6e60d;
  --row-focus:#9db6e614;
  --control-fill:#ffffff08;
  --control-fill-hover:#ffffff10;
  --control-edge:#a6bde81f;
  --control-edge-hover:#a6bde838;
  --focus-ring:#7cb4ff;
  --header-glass:linear-gradient(180deg,#0a1120eb,#0a1120c2);
  --header-fade:#0a1120c2;
  --sheen-fill:#b9d0ff17;
  --sheen-edge:#d6e4ff8c;
  --nav-glide:#ffffff0d;
  --row-light:#b9d0ff1c;
  /* Kept low enough that the brightest palette colour leaves text contrast intact. */
  --art-wash:.2;
  --art-edge:.6;
  --tint-strength:.34;
  --glow:#172b4bb3;
  --glow-rgb:23 43 75;
  --glow-alpha:.7;
  --glow-deep-rgb:27 33 78;
  --glow-deep-alpha:.45
}

[data-theme=dark] body {
  background:radial-gradient(ellipse 60% 50% at 8% 92%,#101c3166,transparent 70%),linear-gradient(160deg,#0b1222,#0b1323 60%,#0a1120)
}

[data-theme=dark] .track-layout>aside {
  background:linear-gradient(145deg,var(--surface),#182840)
}

[data-theme=dark] :is(.empty-card) {
  background:#13243a;
  border-color:var(--border)
}

[data-theme=dark] :is(.dialog-close,.clear-search) {
  background:var(--surface-raised);
  border-color:#456180;
  color:var(--ink)
}

[data-theme=dark] :is(.text-link,.history-empty strong) {
  color:#d1def3
}

[data-theme=dark] :is(.track-layout>aside p,.confirm-row p,.page-heading p,.muted,.field-label,.login-intro p,.login-card p,.resolved-game p,.empty-card p) {
  color:#aabbd6
}

[data-theme=dark] :is(.eyebrow,.compare-selects label,.compare-table th,.comparison-legend,.search-status,.compare-bars>div>span,.page-loading,.help-text,.card-game-link span,.card-metrics span,.card-bottom,.remove-game,.game-stat>span,.game-stat small,.history-heading p,.game-meta,.history-empty,.page-footer-note) {
  color:#96a9c7
}

[data-theme=dark] :is(.search-input kbd) {
  background:#1d2b42;
  color:#b5c6e0;
  border-color:var(--border)
}

[data-theme=dark] :is(.compare-table th,.compare-table td,.resolved-game,.confirm-row,.card-bottom) {
  border-color:var(--border)
}

[data-theme=dark] .history-svg text {
  fill:#9aafcf
}

[data-theme=dark] .history-svg line {
  stroke:#293a55
}

[data-theme=dark] .history-svg .ccu-line {
  stroke:#5ca9ff
}

[data-theme=dark] .history-svg .visit-days~.ccu-line {
  stroke:var(--muted-light)
}

[data-theme=dark] .history-svg .visit-day-scale text {
  fill:var(--blue)
}

[data-theme=dark] .history-svg #chart-cursor {
  stroke:#8da9d1
}

[data-theme=dark] .history-svg #chart-point {
  stroke:var(--surface)
}

[data-theme=dark] .feedback.success {
  color:#55d8a4
}

[data-theme=dark] .feedback.error {
  color:#ff869b
}

[data-theme=dark] .game-stat strong em {
  color:#a5b7d1
}

[data-theme=dark] .skip-link {
  background:var(--surface);
  color:var(--ink)
}

[data-theme=dark] dialog::backdrop {
  background:#020710b8
}

[data-theme=dark] input::placeholder {
  color:#8499b9
}

@media(max-width:1100px) and (min-width:681px) {
  .site-header {
    gap:22px
  }
  .desktop-nav {
    gap:20px
  }
  .header-actions {
    gap:9px
  }
}

@media(max-width:680px) {
  .theme-toggle {
    width:34px;
    height:36px
  }
  .site-header {
    gap:10px
  }
  .header-actions {
    gap:5px
  }
}

@media(max-width:420px) {
  .site-header {
    flex-wrap:wrap;
    height:auto;
    min-height:82px;
    padding-block:17px;
    row-gap:12px
  }
  .site-header .header-actions {
    display:contents
  }
  .site-header .brand {
    margin-right:auto
  }
}
/* One compact navigation and footer across every page. */
.footer-links {
  display:flex;
  gap:20px;
  flex-wrap:wrap
}

.site-footer {
  justify-content:center;
  gap:18px
}

@media(min-width:981px) {
  .site-header {
    gap:clamp(24px,3vw,52px)
  }
  .desktop-nav {
    gap:clamp(20px,2.5vw,34px)
  }
}

@media(max-width:1050px) {
  .site-header {
    height:auto;
    min-height:108px;
    flex-wrap:wrap;
    column-gap:14px;
    row-gap:0;
    padding-top:18px;
    padding-bottom:10px
  }
  .desktop-nav {
    display:flex;
    order:3;
    flex-basis:100%;
    gap:28px
  }
  .desktop-nav .nav-link {
    padding:12px 0
  }
  .header-actions {
    gap:8px
  }
}

@media(max-width:440px) {
  .header-actions .search-button {
    display:inline-flex;
    width:40px;
    min-width:40px;
    height:40px
  }
  .brand {
    font-size:25px
  }
  .brand img {
    width:34px
  }
  .site-footer {
    font-size:10px
  }
  .footer-links {
    gap:16px
  }
}
.nav-link[aria-current="page"]:after {
  transform:scaleX(1)
}
button.text-link {
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer
}

button.text-link:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.header-actions .search-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  flex-shrink:0
}

/* The account link (Login, My Games) shows at every width: no rule may hide
   it. Below the desktop header it is no taller than its row, so the header's
   height is what it was without it. */
@media(max-width:980px) {
  .site-header .button-quiet {
    min-height:43px
  }
}

/* Phones: the header CTA hides and the wrapped navigation keeps a 12px gap
   below the brand row. The account link has one width for both labels, so
   the row does not move when the label changes. My Games is the exception:
   it hides its own account link (the hidden attribute), which leaves room
   for the CTA, the only link to its add box; there it shows without its
   arrow. Kept last so the result does not depend on which stylesheet order
   the entry page used. */
@media(max-width:680px) {
  .site-header .header-cta {
    display:none
  }
  .site-header .button-quiet {
    width:85px;
    min-width:0;
    min-height:40px;
    padding-inline:0;
    font-size:12px
  }
  .site-header {
    gap:12px
  }
  .site-header #account-link[hidden] ~ .header-cta {
    display:inline-flex;
    min-height:38px;
    padding:0 13px;
    font-size:12px
  }
  .site-header #account-link[hidden] ~ .header-cta span {
    display:none
  }
}

/* Small phones: My Games' Track a Game button is tighter (under 360px, where
   the row's gaps are 5px, it gives up side padding rather than lean on the
   theme toggle), and under 344px it hides again, because it cannot share one
   row with the brand, the search and the theme toggle there. */
@media(max-width:389px) {
  .site-header #account-link[hidden] ~ .header-cta {
    margin-left:-4px;
    padding:0 8px;
    font-size:11px
  }
}
@media(max-width:359px) {
  .site-header #account-link[hidden] ~ .header-cta {
    margin-left:0;
    padding:0 6px
  }
}
@media(max-width:343px) {
  .site-header #account-link[hidden] ~ .header-cta {
    display:none
  }
}

/* The narrowest phones: a tighter account link keeps the brand row one row. */
@media(max-width:359px) {
  .site-header .button-quiet {
    width:68px;
    font-size:11px
  }
  .site-header {
    column-gap:5px
  }
}