/* ================================================================
   Kippi v2.0 — Forside-stiler
   ================================================================ */

/* ─── Header ──────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(7, 14, 27, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Toppliste-snarvei ───────────────────────────────────── */
.lb-nav-link {
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--t-fast);
  padding: 4px;
}
.lb-nav-link:hover { opacity: 1; }

/* ─── Bell-ikon ───────────────────────────────────────────── */
.invite-bell { position: relative; }
.invite-bell.hidden { display: none; }

.invite-bell__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(124,106,247,0.14);
  border: 1px solid rgba(124,106,247,0.3);
  border-radius: 50%;
  cursor: pointer;
  color: #a78bfa;
  transition: background 0.15s;
  animation: bell-ring 0.6s ease 0.3s both;
}
.invite-bell__btn svg { width: 18px; height: 18px; }
.invite-bell__btn:hover { background: rgba(124,106,247,0.26); }

@keyframes bell-ring {
  0%, 100% { transform: rotate(0); }
  20%       { transform: rotate(-18deg); }
  40%       { transform: rotate(18deg); }
  60%       { transform: rotate(-10deg); }
  80%       { transform: rotate(10deg); }
}

.invite-bell__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border: 2px solid var(--bg, #070e1b);
  border-radius: 50%;
}
.invite-bell__badge.hidden { display: none; }

/* ─── Invite toast ────────────────────────────────────────── */
.invite-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(420px, calc(100vw - 32px));
  background: #0e1a2e;
  border: 1px solid rgba(124,106,247,0.4);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,106,247,0.15);
  animation: toast-in 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.invite-toast.hidden { display: none; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.invite-toast__body { flex: 1; min-width: 0; }

.invite-toast__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e8edf5;
  line-height: 1.3;
  margin-bottom: 3px;
}

.invite-toast__timer {
  font-size: 0.78rem;
  color: #8892aa;
  font-variant-numeric: tabular-nums;
}

.invite-toast__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.invite-toast__accept {
  background: #7c6af7;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.invite-toast__accept:hover { opacity: 0.88; }

.invite-toast__decline {
  background: transparent;
  color: #6b7a99;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.invite-toast__decline:hover { color: #e8edf5; }

/* ─── Logo ────────────────────────────────────────────────── */
.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity var(--t-fast) var(--ease);
}

.logo--sm { font-size: 1.1rem; }
.logo:hover { opacity: 0.75; }
.logo-k { color: inherit; }

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: var(--s20) 0 var(--s16);
  text-align: center;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  background:
    radial-gradient(ellipse 65% 55% at 50% 38%, rgba(108, 95, 255, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 35% 28% at 72% 55%, rgba(244, 114, 182, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 30% 25% at 28% 55%, rgba(52, 211, 153, 0.07) 0%, transparent 65%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: var(--s4);
  opacity: 0.85;
}

.hero__title {
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.06;
  background: linear-gradient(145deg, #ffffff 0%, #d8b4fe 45%, #f9a8d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--s5);
}

.hero__sub {
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hero__streak {
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 6px;
  color: #22c55e;
}
.hero__streak[data-state="warning"],
.hero__streak[data-state="danger"] {
  color: #f59e0b;
}

/* ─── Spillseksjon ────────────────────────────────────────── */
.games-section {
  padding: var(--s4) 0 var(--s20);
}

.section-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s8);
}

/* ─── VM-promo (over fanene) ──────────────────────────────── */
.game-promo {
  margin-bottom: var(--s5);
}
.game-promo .game-card {
  display: flex;
}

/* ─── Kategorifaner ───────────────────────────────────────── */
.game-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--s6);
}

.game-tab {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.game-tab--active {
  background: rgba(108, 95, 255, 0.20);
  border-color: rgba(108, 95, 255, 0.55);
  color: #c4b5fd;
}

.game-tab:hover:not(.game-tab--active) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-1);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ─── Synlighetsregler for faner ──────────────────────────── */
/* Alle kort med data-tab er skjult som standard */
.games-grid [data-tab] { display: none; }

/* Vis riktige kort basert på aktiv fane */
.games-grid[data-active-tab="alene"]  [data-tab~="alene"]  { display: flex; }
.games-grid[data-active-tab="samen"]  [data-tab~="samen"]  { display: flex; }

/* ─── Spillgrid ───────────────────────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}

@media (max-width: 920px) {
  .games-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .games-grid {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
}

/* ─── Spillkort (base) ────────────────────────────────────── */
.game-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.game-card:hover {
  transform: translateY(-6px);
  border-color: var(--card-color);
  box-shadow: 0 12px 40px var(--card-glow), 0 0 0 1px var(--card-color);
}

/* Visuell header på kortet */
.game-card__visual {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.88);
  position: relative;
  overflow: hidden;
}

.game-card__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}

.game-card__visual svg {
  width: 54px;
  height: 54px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.6));
  transition: transform var(--t-base) var(--ease);
}

.game-card:hover .game-card__visual svg {
  transform: scale(1.1) translateY(-2px);
}

/* Kortinnhold */
.game-card__body {
  padding: var(--s5) var(--s6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.game-card__body h3 {
  font-size: 1.2rem;
  color: var(--text-1);
}

.game-card__body p {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
}

/* Kortbunn */
.game-card__foot {
  padding: var(--s4) var(--s6);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--card-color, var(--primary));
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--s2);
  transition: gap var(--t-fast) var(--ease);
}

.game-card:hover .game-card__foot {
  gap: var(--s3);
}

/* ─── Kortvarianter ───────────────────────────────────────── */
.game-card--koblinger {
  --card-color: #a78bfa;
  --card-glow:  rgba(167,139,250,0.25);
}
.game-card--koblinger .game-card__visual {
  background: linear-gradient(145deg, #0d0a1f 0%, #1e1040 50%, #2e1a6b 100%);
}
.badge--koblinger { color: #c4b5fd; background: rgba(167,139,250,0.15); }

/* Streak-chip i kortfoten */
.koblinger-streak {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fdba74;
  background: rgba(251,146,60,0.15);
  border: 1px solid rgba(251,146,60,0.25);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Spilt-i-dag-tilstand */
.koblinger-card--done .game-card__foot {
  color: #86efac;
}

.game-card--vm {
  --card-color: #4ade80;
  --card-glow:  rgba(74, 222, 128, 0.28);
}
.game-card--vm .game-card__visual {
  background: linear-gradient(145deg, #021a09 0%, #064e1e 50%, #15803d 100%);
  color: #4ade80;
}
.badge--vm {
  color: #86efac;
  background: rgba(74, 222, 128, 0.15);
}

.game-card--quiz {
  --card-color: #6c5fff;
  --card-glow:  rgba(108, 95, 255, 0.22);
}
.game-card--quiz .game-card__visual {
  background: linear-gradient(145deg, #1a1040 0%, #2d1f7a 55%, #5c4ef0 100%);
}

.game-card--ruter {
  --card-color: #0ea5e9;
  --card-glow:  rgba(14, 165, 233, 0.22);
}
.game-card--ruter .game-card__visual {
  background: linear-gradient(145deg, #051828 0%, #0f3460 55%, #0ea5e9 100%);
}

.game-card--ordjakt {
  --card-color: #22c55e;
  --card-glow:  rgba(34, 197, 94, 0.22);
}
.game-card--ordjakt .game-card__visual {
  background: linear-gradient(145deg, #051a0e 0%, #0f4d2a 55%, #22c55e 100%);
}

.game-card--blackjack {
  --card-color: #f59e0b;
  --card-glow:  rgba(245, 158, 11, 0.22);
  --card-bg:    #1c1108;
}
.game-card--blackjack .game-card__visual {
  background: linear-gradient(145deg, #1c1108 0%, #6b3a0f 55%, #f59e0b 100%);
}

.game-card--skyve {
  --card-color: #f43f5e;
  --card-glow:  rgba(244, 63, 94, 0.22);
}
.game-card--skyve .game-card__visual {
  background: linear-gradient(145deg, #1a0810 0%, #6b1a2e 55%, #f43f5e 100%);
}

.game-card--barn {
  --card-color: #a855f7;
  --card-glow:  rgba(168, 85, 247, 0.22);
}
.game-card--barn .game-card__visual {
  background: linear-gradient(145deg, #180838 0%, #5b1d91 55%, #a855f7 100%);
}

.game-card--wordle {
  --card-color: #34d399;
  --card-glow:  rgba(52, 211, 153, 0.22);
}
.game-card--wordle .game-card__visual {
  background: linear-gradient(145deg, #031a10 0%, #065f46 55%, #34d399 100%);
}

.game-card--poker {
  --card-color: #f97316;
  --card-glow:  rgba(249, 115, 22, 0.22);
}
.game-card--poker .game-card__visual {
  background: linear-gradient(145deg, #1a0d03 0%, #7c2d12 55%, #f97316 100%);
}

.game-card--sudoku {
  --card-color: #a78bfa;
  --card-glow:  rgba(167, 139, 250, 0.22);
}
.game-card--sudoku .game-card__visual {
  background: linear-gradient(145deg, #0d0a1f 0%, #2e1a6b 55%, #6c5fff 100%);
}

.game-card--geografi {
  --card-color: #22d3ee;
  --card-glow:  rgba(34, 211, 238, 0.22);
}
.game-card--geografi .game-card__visual {
  background: linear-gradient(145deg, #051a20 0%, #0e4a5a 55%, #0891b2 100%);
  color: #22d3ee;
}
.badge--geografi { color: #67e8f9; background: rgba(34, 211, 238, 0.15); }

.game-card--2048 {
  --card-color: #fb923c;
  --card-glow:  rgba(251, 146, 60, 0.22);
}
.game-card--2048 .game-card__visual {
  background: linear-gradient(145deg, #1a0d00 0%, #6b2d04 55%, #c2410c 100%);
}

/* ─── Badge-varianter ─────────────────────────────────────── */
.badge--quiz      { color: #9b8fff; background: rgba(108, 95, 255, 0.14); }
.badge--ruter     { color: #38bdf8; background: rgba(56, 189, 248, 0.14); }
.badge--ordjakt   { color: #4ade80; background: rgba(74, 222, 128, 0.14); }
.badge--blackjack { color: #fbbf24; background: rgba(251, 191, 36, 0.14); }
.badge--skyve     { color: #fb7185; background: rgba(251, 113, 133, 0.14); }
.badge--barn      { color: #c084fc; background: rgba(192, 132, 252, 0.14); }
.badge--wordle    { color: #34d399; background: rgba(52, 211, 153, 0.14); }
.badge--poker     { color: #f97316; background: rgba(249, 115, 22, 0.14); }
.badge--sudoku    { color: #a78bfa; background: rgba(167, 139, 250, 0.14); }
.badge--2048      { color: #fb923c; background: rgba(251, 146, 60, 0.14); }
.badge--krypto    { color: #4ade80; background: rgba(74, 222, 128, 0.14); }

.game-card--krypto { --card-color: #4ade80; --card-glow: rgba(74,222,128,0.2); }
.game-card--krypto .game-card__visual {
  background: linear-gradient(145deg, #051a0f 0%, #0a3d20 55%, #166534 100%);
}

.game-card--kjeder {
  --card-color: #10b981;
  --card-glow:  rgba(16,185,129,0.22);
}
.game-card--kjeder .game-card__visual {
  background: linear-gradient(145deg, #001a0f 0%, #065f3a 55%, #059669 100%);
}
.badge--kjeder { color: #6ee7b7; background: rgba(16,185,129,0.14); }

.game-card--kodeknekker {
  --card-color: #06b6d4;
  --card-glow:  rgba(6,182,212,0.22);
}
.game-card--kodeknekker .game-card__visual {
  background: linear-gradient(145deg, #001a1f 0%, #044d5e 55%, #0891b2 100%);
}
.badge--kodeknekker { color: #22d3ee; background: rgba(6,182,212,0.14); }

.game-card--fire-i-rad {
  --card-color: #fbbf24;
  --card-glow:  rgba(251,191,36,0.22);
}
.game-card--fire-i-rad .game-card__visual {
  background: linear-gradient(145deg, #1a1000 0%, #5a3d00 55%, #b45309 100%);
}
.badge--fire-i-rad { color: #fde68a; background: rgba(251,191,36,0.14); }

.game-card--chess {
  --card-color: #a3c4f3;
  --card-glow:  rgba(163,196,243,0.2);
}
.game-card--chess .game-card__visual {
  background: linear-gradient(145deg, #0a1020 0%, #1e3a5f 55%, #2d5f8a 100%);
  color: #a3c4f3;
}
.badge--chess { color: #bdd7f5; background: rgba(163,196,243,0.14); }

.game-card--flow {
  --card-color: #14b8a6;
  --card-glow:  rgba(20,184,166,0.22);
}
.game-card--flow .game-card__visual {
  background: linear-gradient(145deg, #001a18 0%, #064e3b 55%, #0f766e 100%);
}
.badge--flow { color: #2dd4bf; background: rgba(20,184,166,0.14); }

.game-card--huske {
  --card-color: #f472b6;
  --card-glow:  rgba(244,114,182,0.22);
}
.game-card--huske .game-card__visual {
  background: linear-gradient(145deg, #1a0010 0%, #6b0038 55%, #be185d 100%);
}
.badge--huske { color: #f9a8d4; background: rgba(244,114,182,0.14); }

.game-card--lightsout {
  --card-color: #fbbf24;
  --card-glow:  rgba(251,191,36,0.22);
}
.game-card--lightsout .game-card__visual {
  background: linear-gradient(145deg, #1a1200 0%, #5c3d00 55%, #b45309 100%);
}
.badge--lightsout { color: #fcd34d; background: rgba(251,191,36,0.14); }

/* ─── VM-ribbon ───────────────────────────────────────────── */
.vm-ribbon {
  border-top: 1px solid rgba(34, 197, 94, 0.22);
  border-bottom: 1px solid rgba(34, 197, 94, 0.22);
  padding: var(--s3) 0;
  text-align: center;
  background: rgba(34, 197, 94, 0.04);
}

.vm-ribbon.hidden { display: none; }

.vm-ribbon__link {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(74, 222, 128, 0.9);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.vm-ribbon__link:hover { color: #86efac; }

/* ─── Innloggingsgate ─────────────────────────────────────── */
.login-gate {
  padding: var(--s12) 0 var(--s20);
  text-align: center;
}

.login-gate__inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s5);
}

.login-gate__emblem {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 0 32px rgba(167, 139, 250, 0.5));
}

.login-gate__emblem svg {
  width: 100%;
  height: 100%;
}

.login-gate__title {
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 0%, #d8b4fe 60%, #f9a8d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-gate__copy {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 340px;
}

.login-gate__cta {
  font-size: 1rem;
  padding: 0.85em 2.2em;
  margin-top: var(--s2);
}

/* ─── Gate: spillpiller ───────────────────────────────────── */
.gate-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  max-width: 460px;
}

.gate-pill {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  padding: 5px 12px;
  white-space: nowrap;
}

/* ─── Gate: verdipunkter ──────────────────────────────────── */
.gate-perks {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  text-align: left;
  font-size: 0.9rem;
  color: var(--text-2);
  width: 100%;
  max-width: 260px;
}

.gate-perks li {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.gate-perk__icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--s8) 0;
  margin-top: var(--s8);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.site-footer__inner p {
  font-size: 0.8rem;
  color: var(--text-3);
}

.site-footer__links {
  display: flex;
  gap: var(--s4);
}

.footer-text-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-text-btn:hover {
  color: var(--text-2);
}

/* ── Info-modaler ──────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  backdrop-filter: blur(6px);
}

.modal-backdrop.hidden { display: none; }

.info-modal-card {
  background: var(--surface, #0f1d35);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 480px;
  width: 100%;
  max-height: 85dvh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.info-modal-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.info-modal-topline h2 {
  font-size: 1.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent, #a78bfa), var(--accent2, #f472b6));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.info-modal-close {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-3, rgba(247,249,255,0.45));
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.info-modal-close:hover { color: var(--text, #f7f9ff); }

.info-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-modal-body section h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2, rgba(247,249,255,0.65));
  margin-bottom: 6px;
}

.info-modal-body section p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text, #f7f9ff);
}

.info-modal-body section p + p {
  margin-top: 6px;
}

.info-modal-body a {
  color: var(--accent, #a78bfa);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 480px) {
  .hero { padding: var(--s16) 0 var(--s12); }

  .site-footer__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--s2);
  }
}

/* ─── Aktive lobbyer-banner ─────────────────────────────────────── */
.lobby-banner.hidden { display: none; }
.lobby-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(124,106,247,.1);
  border: 1px solid rgba(124,106,247,.28);
  border-radius: 10px;
  padding: 11px 16px;
  margin-bottom: 20px;
  text-decoration: none;
  transition: background .18s, border-color .18s;
}
.lobby-banner:hover {
  background: rgba(124,106,247,.18);
  border-color: rgba(124,106,247,.5);
}
.lobby-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
  animation: lb-pulse 2s ease-in-out infinite;
}
@keyframes lb-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}
.lobby-banner__text {
  flex: 1;
  font-size: .88rem;
  font-weight: 600;
  color: #c4b5fd;
}
.lobby-banner__arrow {
  color: rgba(196,181,253,.5);
  font-size: .9rem;
  flex-shrink: 0;
}

/* ── Kippi Flip ────────────────────────────────────────────── */
.game-card--flip {
  --card-color: #2dd4bf;
  --card-glow:  rgba(45,212,191,0.22);
}
.game-card--flip .game-card__visual {
  background: linear-gradient(145deg, #030f1c 0%, #0b2840 55%, #0d9488 100%);
}
.badge--flip { color: #5eead4; background: rgba(45,212,191,0.12); }

/* ── Kippi Tower ───────────────────────────────────────────── */
.game-card--tower {
  --card-color: #a78bfa;
  --card-glow:  rgba(108,95,255,0.26);
}
.game-card--tower .game-card__visual {
  background: linear-gradient(145deg, #0a0718 0%, #1e1260 55%, #6c5fff 100%);
}
.badge--tower { color: #c4b5fd; background: rgba(108,95,255,0.14); }