/* AI Gaming Pro – Startseite
   Design-Vorlage: design-reference.png (1672×941)
   Goldtöne: #D6A44D  #FFE6A6  #916023 */

:root {
  --gold-1: #d6a44d;
  --gold-2: #ffe6a6;
  --gold-3: #916023;
  --card-w: clamp(272px, 42vw, 440px);
  --card-gap: 40px;
  --card-radius: 30px;
  --card-radius-inner: 26px;
  --lift: 240ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  height: 100%;
  background: #050403;
}
body {
  min-height: 100%;
  /* Hintergrund direkt auf body: vermeidet die Z-Index-Kollision mit
     html/body-Farbhintergruenden (negatives z-index waere verdeckt) */
  background: #050403 url("assets/background.jpg") center / cover no-repeat fixed;
  color: var(--gold-2);
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: hidden;
}

/* ---------- Bühne ---------- */
.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(28px, 10vh, 120px);
}

/* ---------- Logo ---------- */
.logo {
  text-align: center;
}
.logo img {
  display: block;
  width: clamp(260px, 34vw, 520px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(214, 164, 77, 0.28));
}

/* ---------- Zeile (Scrollbereich) ---------- */
.row-wrap {
  position: relative;
  width: 100%;
  margin-top: clamp(18px, 5vh, 64px);
  flex: 1;
  display: flex;
  align-items: center;
}

.card-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--card-gap);
  align-items: center; /* Karten behalten ihr 440:235-Format, werden nicht gestreckt */
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* sanftes Einrasten */
  scroll-snap-type: x proximity;
  /* Innenabstand: Schatten + 5%-Skalierung dürfen nirgends clipped werden */
  padding: 56px max(8vw, calc(var(--card-w) / 2)) 72px;
  margin-bottom: clamp(0px, 4vh, 36px);
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 164, 77, 0.45) transparent;
}
.card-row::-webkit-scrollbar { height: 8px; }
.card-row::-webkit-scrollbar-track { background: transparent; }
.card-row::-webkit-scrollbar-thumb {
  background: rgba(214, 164, 77, 0.45);
  border-radius: 4px;
}
.card-row:focus { outline: none; }
.card-row:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Wenige Karten: zentriert (robustes Muster, kein safe-center-Fallback nötig) */
.card-row > :first-child { margin-left: auto; }
.card-row > :last-child { margin-right: auto; }
/* Bei Overflow fließt die Reihe normal vom Rand */
.card-row.is-overflow > :first-child { margin-left: 0; }
.card-row.is-overflow > :last-child { margin-right: 0; }

/* ---------- Pfeile ---------- */
.nav-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 52px;
  height: 76px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 1;
  color: var(--gold-2);
  background: rgba(10, 8, 5, 0.45);
  border: 1px solid rgba(214, 164, 77, 0.55);
  border-radius: 14px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.nav-arrow:hover:not(:disabled) {
  background: rgba(214, 164, 77, 0.22);
  border-color: var(--gold-1);
}
.nav-arrow:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
}
.nav-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}
.nav-arrow--left { left: clamp(6px, 1.5vw, 24px); }
.nav-arrow--right { right: clamp(6px, 1.5vw, 24px); }
/* Pfeile erscheinen nur, wenn die Reihe wirklich overflowt (Klasse von main.js) */
.row-wrap.is-overflow .nav-arrow { display: flex; }

/* ---------- Spielkarte (wiederverwendbare Komponente) ---------- */
.game-card {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  aspect-ratio: 440 / 235;
  border-radius: var(--card-radius);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* WICHTIG: % -Padding wuerde gegen die Breite der Scroll-Row (Containing
     Block) aufgeloesen, nicht gegen die Karte -> mit calc() an --card-w binden */
  padding: calc(var(--card-w) * 0.05) calc(var(--card-w) * 0.06);
  text-decoration: none;
  color: inherit;
  /* dunkles, halbtransparentes Glas mit diagonaler Reflexion */
  background:
    linear-gradient(115deg,
      rgba(255, 230, 166, 0.14) 0%,
      rgba(255, 230, 166, 0.045) 22%,
      rgba(0, 0, 0, 0) 38%),
    linear-gradient(150deg,
      rgba(24, 19, 12, 0.78) 0%,
      rgba(12, 10, 7, 0.66) 45%,
      rgba(20, 15, 8, 0.74) 100%);
  /* feine äußere Goldkontur */
  border: 1px solid rgba(214, 164, 77, 0.9);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(214, 164, 77, 0.16),
    inset 0 1px 0 rgba(255, 230, 166, 0.22);
  /* zweite (innere) Goldkontur */
  outline: 1px solid rgba(145, 96, 35, 0.85);
  outline-offset: -6px;
  /* Heben/Vergrößern per transform – keine Layoutverschiebung */
  transform: translateY(0) scale(1);
  transition:
    transform var(--lift) ease,
    box-shadow var(--lift) ease,
    border-color var(--lift) ease;
  will-change: transform;
}
/* zusätzlicher Lichtschein oben, der beim Hover aufleuchtet */
.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(90% 55% at 50% -12%,
      rgba(255, 230, 166, 0.20) 0%,
      rgba(255, 230, 166, 0.05) 45%,
      rgba(0, 0, 0, 0) 70%);
  opacity: 0.7;
  transition: opacity var(--lift) ease;
  pointer-events: none;
}

@media (hover: hover) {
  .game-card:hover {
    transform: translateY(-6px) scale(1.05);
    border-color: var(--gold-2);
    box-shadow:
      0 22px 44px rgba(0, 0, 0, 0.6),
      0 0 34px rgba(214, 164, 77, 0.42),
      inset 0 1px 0 rgba(255, 230, 166, 0.35);
  }
  .game-card:hover::before { opacity: 1; }
}

.game-card:focus-visible {
  transform: translateY(-6px) scale(1.05);
  border-color: var(--gold-2);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.6),
    0 0 34px rgba(214, 164, 77, 0.45),
    inset 0 1px 0 rgba(255, 230, 166, 0.35);
  outline: 2px solid var(--gold-2);
  outline-offset: 8px;
}
.game-card:focus-visible::before { opacity: 1; }

/* ---------- Karteninhalte ---------- */
.card-title,
.card-title-text {
  width: 78%;
  max-width: 100%;
  height: auto;
  pointer-events: none;
}
.card-title {
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(214, 164, 77, 0.35));
}
/* Standard: goldener Text, wenn kein Schriftzug-Bild hinterlegt ist */
.card-title-text {
  font-size: clamp(20px, 2.3vw, 30px);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--gold-1);
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-1) 55%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(214, 164, 77, 0.3));
}

.card-icon-box {
  flex: 1 1 0%; /* Basis 0: Icon-Flaeche nimmt nur den Restplatz der Karte, sprengt nie das Format */
  width: 72%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.card-icon {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}

/* ---------- Badge: noch nicht verfügbar ---------- */
.card-badge {
  position: absolute;
  right: 5.5%;
  bottom: 5%;
  font-family: Georgia, serif;
  font-size: clamp(10px, 0.95vw, 13px);
  letter-spacing: 0.08em;
  color: rgba(255, 230, 166, 0.75);
  border: 1px solid rgba(214, 164, 77, 0.5);
  border-radius: 999px;
  padding: 3px 12px 4px;
  background: rgba(8, 6, 4, 0.55);
  pointer-events: none;
}
.game-card.is-disabled {
  cursor: default;
}

/* ---------- Copyright unten links ---------- */
.copyright {
  position: fixed;
  left: clamp(12px, 2vw, 36px);
  bottom: clamp(10px, 2vh, 26px);
  z-index: 4;
}
.copyright img {
  display: block;
  width: clamp(120px, 13vw, 230px);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 0 8px rgba(214, 164, 77, 0.25));
}

.noscript {
  position: fixed;
  inset: auto 0 40% 0;
  text-align: center;
  color: var(--gold-2);
  padding: 0 24px;
}

/* ---------- Mobile / kleine Bildschirme ---------- */
@media (max-width: 720px) {
  :root {
    --card-w: min(78vw, 360px);
    --card-gap: 24px;
    --card-radius: 24px;
    --card-radius-inner: 20px;
  }
  .stage { padding-top: 20px; }
  .logo img { width: min(64vw, 300px); }
  .card-row {
    padding: 44px max(16px, calc((100vw - var(--card-w)) / 2 + 12px)) 56px;
  }
  .nav-arrow { width: 44px; height: 64px; font-size: 32px; }
  /* Copyright kleiner halten, damit es auf keinen Fall überlappen kann */
  .copyright { bottom: 8px; }
  .copyright img { width: clamp(96px, 30vw, 150px); }
  /* Kartenreihe lässt unten genug Luft für den Copyright-Bereich */
  .stage { padding-bottom: clamp(52px, 9vh, 84px); }
}

/* ---------- Musikschalter unten rechts ---------- */
.music-toggle {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  width: 56px;
  height: 56px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(214, 164, 77, 0.55);
  background:
    linear-gradient(160deg, rgba(255, 230, 166, 0.09) 0%, rgba(214, 164, 77, 0.05) 40%, rgba(0, 0, 0, 0) 70%),
    rgba(10, 8, 5, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 230, 166, 0.18);
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition:
    transform var(--lift) ease,
    box-shadow var(--lift) ease,
    border-color var(--lift) ease;
}
.music-toggle img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0.55;
  filter: saturate(0.85) brightness(0.75) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  transition: opacity var(--lift) ease, filter var(--lift) ease;
  pointer-events: none;
}
/* Musik AN: Symbol leuchtet golden, Schlag verschwindet */
.music-toggle.is-on img {
  opacity: 1;
  filter: saturate(1.15) brightness(1.08) drop-shadow(0 0 8px rgba(214, 164, 77, 0.85));
}
.music-toggle.is-on::after { opacity: 0; }
/* Musik AUS: goldener diagonaler Strich als CSS-Overlay */
.music-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 145%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(214, 164, 77, 0.1), var(--gold-2) 30%, var(--gold-2) 70%, rgba(214, 164, 77, 0.1));
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0.95;
  transition: opacity var(--lift) ease;
  pointer-events: none;
}
@media (hover: hover) {
  .music-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    border-color: var(--gold-2);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.55),
      0 0 22px rgba(214, 164, 77, 0.4),
      inset 0 1px 0 rgba(255, 230, 166, 0.3);
  }
}
.music-toggle:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}

/* ---------- Mobile: Schalter 16px vom Rand (Safe Area) ---------- */
@media (max-width: 720px) {
  .music-toggle {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .game-card,
  .game-card::before,
  .nav-arrow,
  .music-toggle,
  .music-toggle img {
    transition: none !important;
  }
  .game-card:hover,
  .game-card:focus-visible,
  .music-toggle:hover {
    transform: none;
  }
  .card-row {
    scroll-behavior: auto;
  }
  /* Fokus bleibt deutlich sichtbar */
  .game-card:focus-visible {
    outline: 3px solid var(--gold-2);
    outline-offset: 6px;
  }
}