/* dm-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}

/* dm-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
}

/* dm-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/dm-sans-v17-latin-600.woff2') format('woff2');
}

/* dm-mono-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/dm-mono-v16-latin-regular.woff2') format('woff2');
}

/* dm-mono-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/dm-mono-v16-latin-500.woff2') format('woff2');
}



/* ── Reset & Variablen ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root,
[data-theme="dark"] {
  --bg:        #0a0c0f;
  --bg2:       #262c35;
  --bg3:       #1a1e28;
  --border:    #1f2430;
  --border2:   #2a3040;
  --text:      #dde1ea;
  --muted:     #5a6278;
  --shadow:    rgba(0,0,0,.4);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.1);
  --header-bg: rgba(255,255,255,0.05);
  --logo-sub:  #aeaeae;
  --stats-text: #d7d7d7;
}

[data-theme="light"] {
  --bg:        #f4f5f7;
  --bg2:       #ffffff;
  --bg3:       #eaecf0;
  --border:    #dde0e8;
  --border2:   #c8ccd8;
  --text:      #1a1d26;
  --muted:     #7a8099;
  --shadow:    rgba(0,0,0,.08);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.05);
  --header-bg: rgba(255,255,255,0.65);
  --logo-sub:  var(--muted);
  --stats-text: var(--muted);
}

:root {
  /* ── Store-Farben — hier nach Belieben anpassen ── */
  --accent: #4a9eff;
  --steam:  rgb(26, 159, 255);
  --gog:    #9f4dff;
  --epic:   #f05030;

  --mono:   'DM Mono', monospace;
  --sans:   'DM Sans', sans-serif;
  --radius: 8px;
}

html { background: var(--bg); color: var(--text); font-family: var(--sans); }
body { min-height: 100vh; transition: background .2s, color .2s; }


/* ── Header (Desktop: einzeilig) ─────────────────────── */
/*
  Struktur im HTML:
    <header>
      <div class="logo-wrap">…</div>       ← links
      <div class="header-right">…</div>    ← Mitte/rechts (Stats + Suche)
      <button id="theme-toggle">…</button> ← ganz rechts
    </header>
*/
header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background .2s;
  padding: 0 1.5rem;
  height: 56px;
  display: flex; align-items: center; gap: 1rem;
}

.logo-wrap { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.logo      { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .2em; color: var(--text); }
.logo-sub  { font-family: var(--mono); font-size: .55rem; letter-spacing: .15em; color: var(--logo-sub); }

/* Mitte: Stats + Suche wachsen in den verfügbaren Platz */
.header-right {
  display: flex; align-items: center; gap: .875rem;
  flex: 1;
  justify-content: flex-end;
}

/* Toggle: eigenständiges flex-Kind, bleibt immer ganz rechts */

/* SVG-Icons als inline Data-URLs — Mond & Sonne aus dark-mode.svg */
:root {
  --icon-moon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="198.43" height="198.43" viewBox="0 0 198.43 198.43"><path fill="%23d7d7d7" d="M194.547 96.126c0 54.368-44.071 98.421-98.424 98.421-41.338 0-76.734-25.485-91.318-61.623-3.395-8.409 3.019-17.424 12.088-17.406h.181c54.37 0 98.424-44.071 98.424-98.423v-.203c-.018-9.068 8.995-15.483 17.405-12.091 36.133 14.576 61.644 49.974 61.644 91.325"/></svg>');
  --icon-sun:  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="198.43" height="198.43" viewBox="0 0 198.43 198.43"><g fill="%237a8099"><circle cx="98.5" cy="99.133" r="45"/><path d="M98.5 39.136c8.284 0 15-6.717 15-15v-5.332c0-8.284-6.716-15-15-15s-15 6.716-15 15v5.332c0 8.283 6.716 15 15 15M38.5 99.136c0-8.284-6.716-15-15-15h-5.332c-8.284 0-15 6.716-15 15s6.716 15 15 15H23.5c8.284 0 15-6.717 15-15M178.832 84.136H173.5c-8.284 0-15 6.716-15 15s6.716 15 15 15h5.332c8.284 0 15-6.717 15-15s-6.716-15-15-15M98.5 159.136c-8.284 0-15 6.716-15 15v5.331c0 8.284 6.716 15.001 15 15.001s15-6.717 15-15.001v-5.331c0-8.284-6.716-15-15-15M161.729 57.122l3.77-3.771c5.855-5.858 5.855-15.356-.003-21.213s-15.354-5.855-21.214.002l-3.771 3.771c-5.856 5.858-5.854 15.356.003 21.213s15.353 5.857 21.215-.002M35.272 57.122c5.857 5.857 15.353 5.861 21.214.002 5.858-5.856 5.859-15.354.003-21.213l-3.77-3.771c-5.858-5.858-15.355-5.859-21.214-.002-5.858 5.856-5.859 15.354-.003 21.213zM161.729 141.148c-5.858-5.858-15.355-5.859-21.215-.002-5.859 5.856-5.859 15.354-.003 21.213l3.771 3.771c5.857 5.857 15.353 5.861 21.214.002 5.858-5.856 5.858-15.354.003-21.213zM35.272 141.148l-3.77 3.771c-5.856 5.858-5.855 15.356.003 21.213 5.857 5.856 15.353 5.857 21.214-.002l3.77-3.771c5.856-5.858 5.855-15.356-.003-21.213s-15.355-5.855-21.214.002"/></g></svg>');
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
  order: 2;
}
.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Die Schiene */
.theme-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /*transition: background .3s;*/
  background: var(--bg2);
}

/* Der Knopf — zeigt Mond-Icon im Dark Mode */
/* Der Knopf — zeigt Sonnen-Icon links (Light = unchecked) */
.theme-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  border-radius: calc(var(--radius) - 2px);
  background-image: var(--icon-sun);
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--border); /* Hintergrund Sonne */
  transition: transform .3s;
}

/* Checked = Dark Mode → Knopf rechts, Mond-Icon */
.theme-switch input:checked + .theme-slider::before {
  transform: translateX(22px);
  background-image: var(--icon-moon);
  background-color: #0a0c0f; /* Hintergrund Mond */
}


/* ── Stats-Bar (inkl. klickbare Store-Filter) ─────── */
#stats-bar {
  font-family: var(--mono);
  font-size: .7rem;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat-total {
  padding: 0.5rem;
  color: var(--stats-text);
}
.stat-total strong { font-weight: 500; }

.stat-store-btn {
  font-family: var(--mono);
  font-size: .7rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--stats-text);
  padding: .5rem;
  transition: color .15s, background .15s;
  position: relative;
}

.stat-store-btn::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 100%;
  width: 5rem;
  height: 100%;
  pointer-events: none;
  transition: color .15s, background .15s;
}

.stat-store-btn:hover { color: var(--text); }
.stat-store-btn strong { font-weight: 500; }

/* Aktiver Zustand + Hover je Store */
.stat-store-btn.steam:hover, .stat-store-btn.active.steam { background: color-mix(in srgb, var(--steam) 12%, transparent); color: var(--steam); }
.stat-store-btn.gog:hover,   .stat-store-btn.active.gog   { background: color-mix(in srgb, var(--gog)   12%, transparent); color: var(--gog);   }
.stat-store-btn.epic:hover,  .stat-store-btn.active.epic  { background: color-mix(in srgb, var(--epic)  12%, transparent); color: var(--epic);  }

/* Epic ist der letzte Button — :before zieht den Hintergrund bis zum rechten Rand der Stats-Bar */
.stat-store-btn.epic:hover::before,
.stat-store-btn.active.epic::before {
  background: color-mix(in srgb, var(--epic) 12%, transparent);
}


/* ── Suchfeld ─────────────────────────────────────── */
.filter-wrap { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

#search {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono); font-size: .7rem;
  padding: 0.5rem 1rem;
  outline: none; width: 180px;
  /*transition: border-color .15s;*/
}
#search:focus { border-color: var(--accent); }
#search::placeholder { color: var(--muted); }


/* ── Header Responsive ───────────────────────────────── */

/* Zweizeilig: ≤ 700px
   Zeile 1: Logo (links) + Toggle (rechts)
   Zeile 2: Stats-Bar + Suche (volle Breite)          */
@media (max-width: 700px) {
  header {
    height: auto;
    flex-wrap: wrap;
    padding: .5rem 1rem;
    gap: .4rem;
  }

  .logo-wrap    { order: 1; flex: 1; }
  #theme-toggle { order: 2; }

  .header-right {
    order: 3;
    width: 100%;
    flex: none;
    justify-content: flex-start;
    gap: .5rem;
    flex-wrap: nowrap;
  }

  #stats-bar {
    flex: 1;
    min-width: 0;
  }

  #search { width: 130px; }
}

/* Nur Suche: ≤ 480px — Stats-Bar ausblenden */
@media (max-width: 480px) {
  #stats-bar   { display: none; }
  .filter-wrap { flex: 1; }
  #search      { width: 100%; }
}


/* ── Grid ────────────────────────────────────────────── */
main { padding: 1.25rem 1.5rem; }

.game-grid {
  display: grid;
  /* min(420px, 100%) verhindert horizontalen Overflow auf schmalen Screens */
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: 1rem;
  max-width: 1900px;
  margin: 0 auto;
}

@media (max-width: 700px) {
  main { padding: 1rem; }
}


/* ── Game Card ───────────────────────────────────────── */
.game-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem;
  /*transition: border-color .15s;*/
}
.game-card:hover { border-color: var(--border2); }

.game-thumb {
  width: 120px; height: auto; object-fit: cover; aspect-ratio: 16/8;
  border-radius: 4px; flex-shrink: 0;
  background: var(--border);
}
.game-thumb-ph {
  width: 120px; height: auto; flex-shrink: 0; aspect-ratio: 16/8;
  background: var(--bg3); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}

/* Kompaktere Card auf kleinen Screens */
@media (max-width: 480px) {
  .game-card { gap: .5rem; padding: .5rem; }
  .game-thumb,
  .game-thumb-ph { width: 80px; }
  .game-title    { font-size: .875rem; }
}

.game-info { flex: 1; min-width: 0; }
.game-title {
  font-size: 1rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .6rem;
}

.badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.badge {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 3px;
}
.badge a { text-decoration: none; color: inherit; }
.badge-gog   { background: color-mix(in srgb, var(--gog)   12%, transparent); color: var(--gog);   border: 1px solid color-mix(in srgb, var(--gog)   25%, transparent); }
.badge-steam { background: color-mix(in srgb, var(--steam) 12%, transparent); color: var(--steam); border: 1px solid color-mix(in srgb, var(--steam) 25%, transparent); }
.badge-epic  { background: color-mix(in srgb, var(--epic)  12%, transparent); color: var(--epic);  border: 1px solid color-mix(in srgb, var(--epic)  25%, transparent); }
.badge-multi { background: color-mix(in srgb, var(--text)  8%,  transparent); color: var(--muted); border: 1px solid var(--border2); }


/* ── Utility ─────────────────────────────────────────── */
.empty   { text-align: center; color: var(--muted); font-size: .85rem; padding: 4rem; }
.loading { text-align: center; color: var(--muted); font-family: var(--mono); font-size: .75rem; padding: 4rem; }