/* =====================================================================
   UTOPIA STORE — Trading-Card-Game-Seiten (z. B. Riftbound, Cyberpunk TCG)
   Enthält:
   1) die Spiel-Kacheln .tcg-promo (Startseite, Sammelkarten)
   2) die Gestaltung der Spiel-Landingpages wie riftbound.html und
      cyberpunk_tcg.html (ergänzt ankauf.css)
   Ein weiteres Spiel bekommt einfach eine eigene .tcg-theme-<spiel>-Klasse
   mit seinen Farben. Das Abzeichen im Hauptmenü (.nav-badge) steht in
   site-nav.css, weil das Menü auf jeder Seite vorkommt.
   Bewusst ohne :root-Variablen auf oberster Ebene, damit die Datei auf
   jeder Seite gefahrlos geladen werden kann.
   ===================================================================== */

/* ---------- Spielfarben ---------- */
.tcg-theme-riftbound {
  --tcg-a: #f07e02;            /* Riftbound-Orange aus dem Logo */
  --tcg-a-soft: rgba(240, 126, 2, .16);
  --tcg-a-line: rgba(240, 126, 2, .45);
  --tcg-b: #4f8cff;            /* kühles Hextech-Blau als Gegenpol */
  --tcg-b-soft: rgba(79, 140, 255, .14);
  --tcg-ink: #1a0d00;
}
.tcg-theme-cyberpunk {
  --tcg-a: #fcee09;            /* Cyberpunk-Gelb aus dem Logo */
  --tcg-a-soft: rgba(252, 238, 9, .13);
  --tcg-a-line: rgba(252, 238, 9, .45);
  --tcg-b: #00e5ff;            /* Neon-Cyan */
  --tcg-b-soft: rgba(0, 229, 255, .13);
  --tcg-c: #ff2a6d;            /* Neon-Magenta */
  --tcg-ink: #111100;
}

/* =====================================================================
   1) SPIEL-KACHELN (.tcg-promo)
   ===================================================================== */
.tcg-promo { padding: 3.4rem 0 1rem; position: relative; }
.tcg-promo-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
  gap: 2rem; align-items: end; margin-bottom: 1.6rem;
}
.tcg-promo-head h2 { margin: 0; }
.tcg-promo-head p { margin: 0; line-height: 1.55; color: rgba(255, 255, 255, .72) !important; }
.tcg-promo-kicker {
  color: #7ddc8c !important; text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 800; margin: 0 0 .35rem !important;
}

.tcg-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.tcg-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.8rem 1.8rem 1.6rem; min-height: 340px;
  border-radius: 20px; text-decoration: none; color: #fff;
  background: rgba(14, 18, 24, .82);
  border: 1px solid var(--tcg-a-line);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tcg-card::before {               /* Farbwolke im Hintergrund */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--tcg-a-soft), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, var(--tcg-b-soft), transparent 65%);
}
.tcg-card:hover, .tcg-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--tcg-a);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .45), 0 0 30px var(--tcg-a-soft);
}
.tcg-card:focus-visible { outline: 2px solid var(--tcg-a); outline-offset: 3px; }

.tcg-badge {
  position: absolute; top: 1.1rem; right: 1.1rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  padding: .32rem .7rem; border-radius: 999px;
  background: var(--tcg-a); color: var(--tcg-ink) !important;
  box-shadow: 0 0 18px var(--tcg-a-soft);
}
.tcg-logo {
  height: 120px; display: flex; align-items: center; justify-content: flex-start;
  margin: .4rem 0 .2rem;
}
.tcg-logo img {
  max-height: 100%; max-width: min(100%, 420px); width: auto; height: auto;
  object-fit: contain; filter: drop-shadow(0 0 16px var(--tcg-a-soft));
  transition: transform .35s ease;
}
.tcg-card:hover .tcg-logo img { transform: scale(1.04); }
.tcg-card h3 { margin: 0; font-size: 1.35rem; letter-spacing: .01em; }
.tcg-card p { margin: 0; line-height: 1.6; color: rgba(255, 255, 255, .78) !important; }
.tcg-points { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.tcg-points li {
  font-size: .82rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  color: #fff !important;
}
.tcg-cta {
  margin-top: auto; padding-top: .6rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; color: var(--tcg-a) !important;
}
.tcg-cta::after { content: '→'; transition: transform .2s ease; }
.tcg-card:hover .tcg-cta::after { transform: translateX(4px); }

/* Cyberpunk-Kachel: feines Raster wie ein Hologramm-Display */
.tcg-card.tcg-theme-cyberpunk::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 100%);
  mask-image: linear-gradient(135deg, transparent 30%, #000 100%);
}
/* Riftbound-Kachel: das Wirbel-Symbol dreht sich groß und leise im Hintergrund */
.tcg-card .tcg-swirl {
  position: absolute; z-index: -1; pointer-events: none;
  width: 340px; height: auto; right: -90px; bottom: -110px; opacity: .12;
  animation: tcg-spin 60s linear infinite;
}

@keyframes tcg-spin { to { transform: rotate(360deg); } }

/* Kompakte Variante (z. B. auf der Sammelkarten-Seite) */
.tcg-promo--compact .tcg-card { min-height: 0; padding: 1.4rem 1.4rem 1.3rem; }
.tcg-promo--compact .tcg-logo { height: 84px; }

@media (max-width: 900px) {
  .tcg-promo-head { grid-template-columns: 1fr; gap: .8rem; }
  .tcg-promo-grid { grid-template-columns: 1fr; }
  .tcg-card { min-height: 0; }
}
@media (max-width: 560px) {
  .tcg-card { padding: 1.4rem 1.2rem 1.3rem; }
  .tcg-logo { height: 90px; }
}

/* =====================================================================
   2) LANDINGPAGES
   ===================================================================== */
.tcg-page .ak-section > h2 { color: var(--tcg-a); }
.tcg-page .ak-section > h2::before { background: var(--tcg-a); }
.tcg-page .ak-facts > div { border-left-color: var(--tcg-a); }
.tcg-page .ak-facts > div:hover { border-color: var(--tcg-a-line); background: var(--tcg-a-soft); }
.tcg-page .ak-facts dt { color: var(--tcg-a); }
.tcg-page .ak-list--yes li::before { color: var(--tcg-a); }
.tcg-page .ak-faq details[open] { border-color: var(--tcg-a-line); }
.tcg-page .ak-faq summary::after { color: var(--tcg-a); }
.tcg-page .ak-card--accent { border-color: var(--tcg-a-line); }
.tcg-page .ak-step::before { background: var(--tcg-a); color: var(--tcg-ink); }
.tcg-page .ak-crumbs a:hover { color: var(--tcg-a); }
.tcg-page .ak-related a:hover { color: var(--tcg-a); border-color: var(--tcg-a-line); }
.tcg-page .ak-final {
  background: linear-gradient(135deg, var(--tcg-a-soft), var(--tcg-b-soft));
  border-color: var(--tcg-a-line);
}
.tcg-page .ak-final h2 { color: var(--tcg-a); }
.tcg-page .ak-section p a, .tcg-page .ak-facts dd a, .tcg-page .ak-faq a { color: var(--tcg-a); }

/* Haupt-Knopf in Spielfarbe */
.btn.tcg-btn {
  background: var(--tcg-a); color: var(--tcg-ink); font-weight: 800;
  box-shadow: 0 0 22px var(--tcg-a-soft);
}
.btn.tcg-btn:hover { filter: brightness(1.08); box-shadow: 0 0 30px var(--tcg-a-line); }

/* ---------- Kopfbereich ---------- */
.tcg-hero { position: relative; padding: 3rem 0 3.5rem; overflow: hidden; }
.tcg-hero::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: -1;
  background:
    radial-gradient(45% 55% at 78% 45%, var(--tcg-a-soft), transparent 70%),
    radial-gradient(40% 50% at 15% 20%, var(--tcg-b-soft), transparent 70%);
  pointer-events: none;
}
.tcg-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.tcg-kicker {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 1rem; font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.tcg-kicker .tcg-flag {
  background: var(--tcg-a); color: var(--tcg-ink); border-radius: 999px;
  padding: .25rem .65rem; letter-spacing: .14em; font-weight: 800;
}
.tcg-hero h1 {
  font-size: clamp(34px, 5.6vw, 62px); line-height: 1.04; margin: 0 0 1rem;
  text-shadow: 0 0 22px var(--tcg-a-soft);
}
.tcg-hero h1 span {
  display: block; color: var(--tcg-a);
  font-size: clamp(18px, 2.3vw, 26px); line-height: 1.3; letter-spacing: .02em; margin-top: .5rem;
}
.tcg-lede { font-size: 1.12rem; line-height: 1.65; color: rgba(255, 255, 255, .78); max-width: 60ch; margin: 0; }
.tcg-page .ak-badges li { background: var(--tcg-a-soft); border-color: var(--tcg-a-line); }

.tcg-hero-art { display: flex; align-items: center; justify-content: center; position: relative; min-height: 280px; }
.tcg-hero-art img { width: 100%; height: auto; border-radius: 0; }

/* Riftbound: rotierender Wirbel mit Glut */
.tcg-theme-riftbound .tcg-hero-art::before {
  content: ''; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 126, 2, .35), transparent 65%);
  filter: blur(10px);
}
.tcg-theme-riftbound .tcg-hero-art img {
  max-width: 400px; position: relative;
  filter: drop-shadow(0 0 30px rgba(240, 126, 2, .45));
  animation: tcg-spin 80s linear infinite;
}

/* Cyberpunk: Logo mit gelegentlichem Glitch */
.tcg-glitch { position: relative; width: 100%; max-width: 560px; }
.tcg-glitch img { position: relative; display: block; filter: drop-shadow(0 0 22px rgba(252, 238, 9, .35)); }
.tcg-glitch img + img,
.tcg-glitch img + img + img {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.tcg-glitch img:nth-child(2) { filter: drop-shadow(-4px 0 0 #00e5ff) brightness(1.2); animation: tcg-glitch-a 5s steps(1) infinite; }
.tcg-glitch img:nth-child(3) { filter: drop-shadow(4px 0 0 #ff2a6d) brightness(1.2); animation: tcg-glitch-b 5s steps(1) infinite; }

@keyframes tcg-glitch-a {
  0%, 86%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  87% { opacity: 1; transform: translate(-6px, 2px); clip-path: inset(10% 0 62% 0); }
  89% { opacity: 1; transform: translate(5px, -1px); clip-path: inset(55% 0 20% 0); }
  91% { opacity: 1; transform: translate(-3px, 0); clip-path: inset(30% 0 45% 0); }
  93% { opacity: 0; }
}
@keyframes tcg-glitch-b {
  0%, 87%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  88% { opacity: 1; transform: translate(6px, -2px); clip-path: inset(70% 0 5% 0); }
  90% { opacity: 1; transform: translate(-5px, 1px); clip-path: inset(5% 0 75% 0); }
  92% { opacity: 1; transform: translate(3px, 0); clip-path: inset(40% 0 35% 0); }
  94% { opacity: 0; }
}
.tcg-theme-cyberpunk.tcg-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(60% 70% at 75% 50%, #000, transparent 75%);
  mask-image: radial-gradient(60% 70% at 75% 50%, #000, transparent 75%);
}

/* ---------- Event-Bereich auf den Landingpages ---------- */
.tcg-events { padding: 0 0 1rem; }
.tcg-events .event-list { margin-top: 1.4rem; }
.tcg-events .tag { border-color: var(--tcg-a-line); color: var(--tcg-a); }
.tcg-events .more-btn { border-color: var(--tcg-a-line); color: #fff; }
.tcg-events-empty {
  grid-column: 1 / -1; margin: 0; padding: 1.6rem 1.5rem;
  border: 1px dashed var(--tcg-a-line); border-radius: 14px;
  background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .8); line-height: 1.6;
}
.tcg-events-empty strong { color: #fff; }
.tcg-events-empty a { color: var(--tcg-a); }
.tcg-events .event-content p { color: rgba(255, 255, 255, .78); }
.tcg-events .event-desc.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5;
  overflow: hidden;
}
.tcg-more {
  margin-top: .3rem; padding: .4rem .8rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .85rem; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--tcg-a-line);
  transition: background .2s ease, color .2s ease;
}
.tcg-more:hover, .tcg-more:focus-visible { color: var(--tcg-a); background: var(--tcg-a-soft); }

/* ---------- Markenhinweis ---------- */
.tcg-legal { font-size: .78rem; color: rgba(255, 255, 255, .45); line-height: 1.5; margin: 0 auto 2rem; }

@media (max-width: 900px) {
  .tcg-hero { padding-top: 1.5rem; }
  .tcg-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .tcg-hero-art { order: -1; min-height: 0; }
  .tcg-theme-riftbound .tcg-hero-art img { max-width: 220px; }
  .tcg-glitch { max-width: 420px; }
}
@media (max-width: 620px) {
  .tcg-page .ak-cta-row .btn { width: 100%; justify-content: center; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .tcg-card, .tcg-card .tcg-logo img, .tcg-cta::after { transition: none; }
  .tcg-card:hover { transform: none; }
  .tcg-card .tcg-swirl,
  .tcg-theme-riftbound .tcg-hero-art img,
  .tcg-glitch img:nth-child(2),
  .tcg-glitch img:nth-child(3) { animation: none; }
}