/* ============================================================
   klirr.co — designsystem
   Mörkt tema är standard; ljust tema via [data-theme="light"].
   Typografi: Familjen Grotesk (lokal, variabel 400–700).
   Principer: ring-shadow-kanter, radier 8–24 px, max två
   pastellaccenter per sektion (guld + mynta / korall).
   ============================================================ */

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('/assets/fonts/FamiljenGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('/assets/fonts/FamiljenGrotesk-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Mörk "skandinavisk natt" — egna ytor, inte inverterad ljus */
  --bg0: #0c0f14;
  --bg1: #12161e;
  --bg2: #1a202b;
  --bg3: #232b39;
  --ring: rgba(255, 255, 255, 0.09);
  --ring-strong: rgba(255, 255, 255, 0.16);
  --text: #eef0eb;
  --muted: #a3abb9;
  --heading: #f7f4ec;

  --gold: #e2b04f;          /* klirr — myntguld */
  --gold-strong: #f0c96e;
  --gold-ink: #e8c06a;      /* länk/accenttext på mörk yta */
  --gold-deep: #3c2e0c;
  --on-gold: #221a06;
  --gold-surface: #2b2312;  /* mörk pastellpar till guld */

  --mint: #85d9c6;
  --mint-ink: #9be3d2;
  --mint-surface: #12302b;

  --coral-ink: #ffa9a3;
  --coral-surface: #331715;

  --success: #46c98f;
  --danger: #e06158;
  --danger-surface: #341715;
  --warn: #e2b04f;

  --shadow-card: 0 0 0 1px var(--ring);
  --shadow-pop: 0 0 0 1px var(--ring), 0 18px 48px rgba(0, 0, 0, 0.45);

  --font: 'Familjen Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 24px;

  --maxw: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
}

[data-theme="light"] {
  --bg0: #faf8f3;
  --bg1: #ffffff;
  --bg2: #f2efe7;
  --bg3: #e9e5d9;
  --ring: rgb(224, 226, 232);
  --ring-strong: #c7cad5;
  --text: #1c1c1e;
  --muted: #555a6a;
  --heading: #17150f;

  --gold: #d9a63e;
  --gold-ink: #7c5c10;
  --gold-deep: #43310b;
  --on-gold: #221a06;
  --gold-surface: #f7e9c8;

  --mint: #187574;
  --mint-ink: #10605f;
  --mint-surface: #d6f5ef;

  --coral-ink: #8f1f16;
  --coral-surface: #ffd9d4;

  --success: #078a5b;
  --danger: #b3261e;
  --danger-surface: #fbd4d4;

  --shadow-card: 0 0 0 1px var(--ring);
  --shadow-pop: 0 0 0 1px var(--ring), 0 18px 44px rgba(28, 28, 30, 0.12);
}

/* ---------- Bas ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* hidden-attributet vinner alltid över display-regler på klasser */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg0);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.16px;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--heading);
  line-height: 1.14;
  font-weight: 620;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.25rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: -0.02em; }
h4 { font-size: 1.06rem; }

p { margin: 0 0 1em; }
a { color: var(--gold-ink); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
img { max-width: 100%; height: auto; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--ring); margin: 2rem 0; }

::selection { background: var(--gold); color: var(--on-gold); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--on-gold);
  border-radius: 0 0 var(--r-s) 0;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- RG-rad (sticky, fristående från navigering) ---------- */
.rg-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg1);
  border-bottom: 2px solid var(--gold);
  font-size: 0.8rem;
  line-height: 1.35;
}
.rg-bar__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 7px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.rg-bar__msg { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rg-bar__badge { color: var(--coral-ink); flex-shrink: 0; }
.rg-bar__text { margin: 0; color: var(--muted); }
.rg-bar__text strong { color: var(--text); }
.rg-bar__geo { white-space: nowrap; }
.rg-bar__links { display: flex; gap: 4px; flex-wrap: wrap; }
.rg-bar__links a {
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--ring);
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.rg-bar__links a:hover { box-shadow: 0 0 0 1px var(--gold); color: var(--gold-ink); }
.rg-bar__license { margin: 0; color: var(--muted); font-size: 0.72rem; }
.rg-bar__logos { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.rg-bar__logos a { display: inline-flex; align-items: center; opacity: 0.92; }
.rg-bar__logos a:hover { opacity: 1; }
.rg-logo { display: block; height: 16px; width: auto; }
.rg-bar__logos a[title^="Spelinspektionen"] .rg-logo { height: 26px; }

/* Vita monokroma RG-logotyper: inverteras i ljust tema via CSS (original röras ej). */
[data-theme="light"] .rg-logo--mono { filter: invert(1); }
[data-theme="light"] .rg-bar__logos a[title^="Spelinspektionen"] .rg-logo {
  filter: drop-shadow(0 0 1px rgba(28, 28, 30, 0.35));
}

/* ---------- Sidhuvud / navigering ---------- */
.site-header {
  background: var(--bg0);
  border-bottom: 1px solid var(--ring);
}
.site-header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header__brand { text-decoration: none; flex-shrink: 0; }

.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand__coin { flex-shrink: 0; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.site-header__brand:hover .brand__coin { transform: rotateY(180deg); }
.brand__word {
  font-size: 1.5rem;
  font-weight: 680;
  letter-spacing: -0.045em;
  color: var(--heading);
}
.brand__tld { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.04em; color: var(--muted); }

.site-nav { display: flex; gap: 2px; margin-inline: auto; }
.site-nav a {
  padding: 8px 13px;
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--muted);
  font-weight: 520;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--heading); background: var(--bg2); }
.site-nav a[aria-current="page"] { color: var(--heading); background: var(--bg2); box-shadow: 0 0 0 1px var(--ring); }

.site-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--ring);
}
.theme-toggle:hover { box-shadow: 0 0 0 1px var(--gold); color: var(--gold-ink); }
.theme-toggle__icon--sun { display: none; }
[data-theme="light"] .theme-toggle__icon--sun { display: block; }
[data-theme="light"] .theme-toggle__icon--moon { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 0;
  border-radius: var(--r-s);
  background: var(--bg2);
  box-shadow: 0 0 0 1px var(--ring);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Gräns-remsa (inloggad) ---------- */
.limit-strip {
  background: var(--bg1);
  border-bottom: 1px solid var(--ring);
  padding: 8px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  justify-content: center;
  font-size: 0.8rem;
}
.limit-strip--warn { background: var(--coral-surface); color: var(--coral-ink); }
.limit-strip--warn p { margin: 0; }
.limit-strip__label { color: var(--muted); font-weight: 560; }
.limit-strip__link { white-space: nowrap; }
.limit-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--ring);
  background: var(--bg2);
}
.limit-chip--warn { box-shadow: 0 0 0 1px var(--danger); }
.limit-chip__label { color: var(--muted); }
.limit-chip__bar {
  width: 54px;
  height: 5px;
  border-radius: 3px;
  background: var(--bg3);
  overflow: hidden;
}
.limit-chip__bar i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.limit-chip--warn .limit-chip__bar i { background: var(--danger); }
.limit-chip__value { font-variant-numeric: tabular-nums; }

/* ---------- Knappar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-s);
  border: 0;
  font: 600 0.95rem/1.3 var(--font);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--gold); color: var(--on-gold); box-shadow: 0 0 0 1px var(--gold-deep) inset; }
.btn--primary:hover { background: var(--gold-strong, #f0c96e); color: var(--on-gold); }
.btn--outline { background: transparent; color: var(--text); box-shadow: 0 0 0 1px var(--ring-strong); }
.btn--outline:hover { box-shadow: 0 0 0 1px var(--gold); color: var(--gold-ink); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--bg2); color: var(--heading); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(1.08); }
.btn--mint { background: var(--mint-surface); color: var(--mint-ink); box-shadow: 0 0 0 1px var(--ring); }
.btn--mint:hover { box-shadow: 0 0 0 1px var(--mint); }
.btn--small { padding: 6px 13px; font-size: 0.82rem; }
.btn--big { padding: 14px 28px; font-size: 1.05rem; border-radius: var(--r-m); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Sektioner / kort ---------- */
.main { min-height: 55vh; }
.section { padding-block: clamp(40px, 7vw, 84px); }
.section--tight { padding-block: clamp(24px, 4vw, 48px); }
.section__head { max-width: 640px; margin-bottom: clamp(20px, 4vw, 40px); }
.section__kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-ink);
  margin-bottom: 10px;
}
.section__kicker--gold { color: var(--gold-ink); }
.section__lead { font-size: 1.1rem; color: var(--muted); }

.card {
  background: var(--bg1);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: clamp(18px, 3vw, 28px);
}
.card--raised { background: var(--bg2); }
.card--mint { background: var(--mint-surface); box-shadow: none; }
.card--gold { background: var(--gold-surface); box-shadow: none; }
.card--coral { background: var(--coral-surface); box-shadow: none; }
.card--mint h2, .card--mint h3 { color: var(--mint-ink); }
.card--gold h2, .card--gold h3 { color: var(--gold-ink); }
.card--coral h2, .card--coral h3, .card--coral a { color: var(--coral-ink); }

.grid { display: grid; gap: clamp(14px, 2.5vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 10vw, 120px);
  background:
    radial-gradient(1100px 480px at 82% -10%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 65%),
    radial-gradient(700px 420px at -8% 110%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 60%),
    var(--bg0);
}
.hero::before {
  /* fotobakgrund (Midjourney): mynt till höger, textzon till vänster hålls ren */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, var(--bg0) 98%),
    linear-gradient(90deg, var(--bg0) 16%, color-mix(in srgb, var(--bg0) 55%, transparent) 46%, transparent 74%),
    url('/assets/img/bg/hero-dark.webp') right center / cover no-repeat;
}
[data-theme="light"] .hero::before {
  background:
    linear-gradient(180deg, transparent 55%, var(--bg0) 98%),
    linear-gradient(90deg, var(--bg0) 16%, color-mix(in srgb, var(--bg0) 55%, transparent) 46%, transparent 74%),
    url('/assets/img/bg/hero-light.webp') right center / cover no-repeat;
}
.hero::after {
  /* kornig textur ger djup utan tunga bilder */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: 40px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
.hero__title { margin-bottom: 0.4em; }
.hero__title em { font-style: normal; color: var(--gold-ink); }
.hero__lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; font-size: 0.82rem; color: var(--muted); }
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; }

/* Myntgrafik i hero */
.hero__art { position: relative; min-height: 260px; }
.coin {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--gold) 88%, #fff 12%), var(--gold) 55%, color-mix(in srgb, var(--gold) 70%, #000 30%));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold-deep) 60%, transparent), 0 14px 34px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  color: var(--gold-deep);
  font-weight: 700;
  animation: coin-bob 7s ease-in-out infinite;
}
.coin::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--gold-deep) 55%, transparent); }
.coin--1 { width: 150px; height: 150px; top: 4%; right: 16%; font-size: 2rem; }
.coin--2 { width: 96px; height: 96px; bottom: 12%; right: 46%; font-size: 1.3rem; animation-delay: -2.4s; }
.coin--3 { width: 64px; height: 64px; bottom: 34%; right: 2%; font-size: 0.95rem; animation-delay: -4.6s; }
@keyframes coin-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}

/* ---------- Spelkort ---------- */
.game-card {
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.game-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--gold), 0 16px 36px rgba(0, 0, 0, 0.25); }
.game-card__art {
  /* matchar omslagsbildernas naturliga format (326×235) — ingen beskärning */
  aspect-ratio: 326 / 235;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--bg2), var(--bg3));
  border-bottom: 1px solid var(--ring);
  overflow: hidden;
}
.game-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.game-card:hover .game-card__art img { transform: scale(1.04); }
.game-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.game-card__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; }
.game-card__body h3 { margin: 0; }
.game-card__body p { color: var(--muted); margin: 0; flex: 1; }
.game-card__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 620;
  box-shadow: 0 0 0 1px var(--ring);
  color: var(--muted);
}
.badge--rtp { background: var(--mint-surface); color: var(--mint-ink); box-shadow: none; }
.badge--gold { background: var(--gold-surface); color: var(--gold-ink); box-shadow: none; }
.badge--coral { background: var(--coral-surface); color: var(--coral-ink); box-shadow: none; }

/* ---------- Formulär ---------- */
.form { display: grid; gap: 16px; }
.form--narrow { max-width: 460px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 580; font-size: 0.92rem; }
.field__hint { font-size: 0.8rem; color: var(--muted); }
.field__error { font-size: 0.82rem; color: var(--danger); font-weight: 560; }
.input, select.input, textarea.input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-s);
  border: 0;
  box-shadow: 0 0 0 1px var(--ring-strong);
  background: var(--bg1);
  color: var(--text);
  font: 400 1rem/1.4 var(--font);
}
.input:focus { outline: none; box-shadow: 0 0 0 2px var(--gold); }
.input[aria-invalid="true"] { box-shadow: 0 0 0 1.5px var(--danger); }
textarea.input { min-height: 130px; resize: vertical; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }

.alert {
  padding: 14px 16px;
  border-radius: var(--r-m);
  font-size: 0.94rem;
}
.alert--error { background: var(--danger-surface); color: var(--coral-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
.alert--success { background: var(--mint-surface); color: var(--mint-ink); }
.alert--info { background: var(--bg2); box-shadow: 0 0 0 1px var(--ring); color: var(--text); }
.alert p:last-child { margin-bottom: 0; }

/* ---------- Tabeller ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-m); box-shadow: var(--shadow-card); }
table.table { width: 100%; border-collapse: collapse; background: var(--bg1); font-size: 0.92rem; }
.table th, .table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--ring); vertical-align: top; }
.table th { font-weight: 640; color: var(--heading); background: var(--bg2); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td { color: var(--text); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Progress ---------- */
.progress { display: grid; gap: 6px; }
.progress__head { display: flex; justify-content: space-between; font-size: 0.86rem; gap: 10px; }
.progress__head span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); }
.progress__bar { height: 9px; border-radius: 5px; background: var(--bg3); overflow: hidden; box-shadow: 0 0 0 1px var(--ring); }
.progress__bar i { display: block; height: 100%; border-radius: 5px; background: var(--gold); transition: width 0.4s; }
.progress--warn .progress__bar i { background: var(--danger); }

/* ---------- Modaler (age-gate, reality check, cookies) ---------- */
.age-gate, .reality-check {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg0) 78%, transparent);
  backdrop-filter: blur(10px);
}
.age-gate__card, .reality-check__card {
  max-width: 480px;
  width: 100%;
  background: var(--bg1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  padding: clamp(24px, 4vw, 36px);
  text-align: center;
}
.age-gate__badge { color: var(--gold); margin-bottom: 10px; }
.age-gate__actions, .reality-check__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 20px 0 6px; }
.age-gate__help { font-size: 0.84rem; color: var(--muted); margin: 14px 0 0; }
.reality-check__stats { font-size: 1.02rem; }

.cookie-banner {
  position: fixed;
  z-index: 110;
  inset-inline: 0;
  bottom: 0;
  padding: 14px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cookie-banner__card {
  pointer-events: auto;
  max-width: 720px;
  background: var(--bg1);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-pop);
  padding: 20px 24px;
}
.cookie-banner__card h2 { font-size: 1.05rem; margin-bottom: 6px; }
.cookie-banner__card p { font-size: 0.88rem; color: var(--muted); margin-bottom: 12px; }
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Brödsmulor / innehållsförteckning / juridik ---------- */
.crumbs { font-size: 0.82rem; margin: 18px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: 6px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-ink); text-decoration: underline; }

.legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.legal__toc {
  position: sticky;
  top: 76px;
  background: var(--bg1);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  padding: 18px;
  font-size: 0.86rem;
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.legal__toc h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 10px; }
.legal__toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal__toc a {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
}
.legal__toc a:hover { background: var(--bg2); color: var(--heading); }
.legal__meta { font-size: 0.84rem; color: var(--muted); margin-bottom: 22px; }
.legal__meta strong { color: var(--text); }

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.2em; padding-top: 0.4em; }
.prose h3 { margin-top: 1.6em; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 84px; }
.prose li { margin-bottom: 0.35em; }
.prose table.table { font-size: 0.86rem; }

/* ---------- Accordion (FAQ) ---------- */
.acc { display: grid; gap: 10px; }
.acc details {
  background: var(--bg1);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.acc summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 1.3rem; color: var(--gold-ink); flex-shrink: 0; transition: transform 0.2s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details > div { padding: 0 20px 18px; color: var(--muted); }
.acc details > div p:last-child { margin-bottom: 0; }

/* ---------- Konto ---------- */
.account { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(20px, 3.5vw, 44px); align-items: start; }
.account__nav {
  display: grid;
  gap: 4px;
  background: var(--bg1);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  padding: 12px;
  position: sticky;
  top: 76px;
}
.account__nav a { padding: 9px 12px; border-radius: var(--r-s); text-decoration: none; color: var(--muted); font-weight: 540; font-size: 0.94rem; }
.account__nav a:hover { background: var(--bg2); color: var(--heading); }
.account__nav a[aria-current="page"] { background: var(--gold-surface); color: var(--gold-ink); }
.account__balance { font-size: 1.9rem; font-weight: 680; letter-spacing: -0.02em; color: var(--heading); }

/* ---------- Fotsidfot ---------- */
.site-footer {
  margin-top: clamp(40px, 7vw, 80px);
  background: var(--bg1);
  border-top: 1px solid var(--ring);
  font-size: 0.88rem;
}
.site-footer__inner { max-width: var(--maxw); margin-inline: auto; padding: clamp(32px, 5vw, 56px) var(--gutter) 24px; }
.site-footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.site-footer__heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); margin-bottom: 12px; }
.site-footer__col p { color: var(--muted); }
.site-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; color: var(--muted); }
.site-footer__rg-note { display: flex; gap: 10px; align-items: flex-start; }
.site-footer__rg-note .badge-21 { color: var(--coral-ink); flex-shrink: 0; margin-top: 2px; }
.site-footer__pay, .site-footer__security { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--ring); }
.site-footer__pay p, .site-footer__security p { color: var(--muted); margin: 0; }
.site-footer__paynote { margin-top: 10px !important; font-size: 0.8rem; }
.pay-logos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 6px; }
.logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 8px 14px;
  border-radius: var(--r-s);
  /* mörk platta i båda teman → vita/färgade logotyper alltid läsbara */
  background: #141a24;
  box-shadow: 0 0 0 1px var(--ring);
}
.logo-chip img { display: block; height: 20px; width: auto; }
.site-footer__security .logo-chip { margin-right: 10px; }
.site-footer__security .logo-chip img { height: 16px; }
.site-footer__bottom { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--ring); color: var(--muted); font-size: 0.8rem; }
.site-footer__bottom p { margin: 0; }

/* ---------- Spel-UI ---------- */
.game-shell { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.game-panel {
  background: var(--bg1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: clamp(18px, 3vw, 30px);
}
.game-panel--felt { background: linear-gradient(160deg, var(--mint-surface), var(--bg2)); }

.game-hud { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 0.9rem; }
.game-hud__balance { font-size: 1.25rem; font-weight: 680; color: var(--heading); font-variant-numeric: tabular-nums; }
.game-hud__mode { display: inline-flex; gap: 6px; }

.mode-pill {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 620;
  cursor: pointer;
  border: 0;
  background: var(--bg2);
  color: var(--muted);
  box-shadow: 0 0 0 1px var(--ring);
}
.mode-pill[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); box-shadow: none; }

.bet-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.bet-controls .input { width: 110px; text-align: center; }

/* Slots */
.slot-reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  background: var(--bg0);
  border-radius: var(--r-l);
  box-shadow: inset 0 0 0 1px var(--ring), inset 0 10px 30px rgba(0, 0, 0, 0.4);
}
.slot-reel {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  font-size: clamp(2.6rem, 7vw, 4rem);
  background: var(--bg1);
  border-radius: var(--r-m);
  box-shadow: 0 0 0 1px var(--ring);
  overflow: hidden;
}
.slot-reel svg { width: clamp(42px, 46%, 76px); height: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.slot-reel.is-spinning { animation: reel-blur 0.12s linear infinite; }
@keyframes reel-blur {
  0% { filter: blur(0); transform: translateY(-4px); }
  50% { filter: blur(2px); transform: translateY(4px); }
  100% { filter: blur(0); transform: translateY(-4px); }
}
.slot-msg { min-height: 1.6em; text-align: center; font-weight: 640; margin-top: 14px; }
.slot-msg.is-win { color: var(--success); }

/* Roulette */
.roulette-wheel-wrap { display: grid; place-items: center; padding: 10px 0 18px; }
.roulette-wheel { border-radius: 50%; box-shadow: 0 0 0 6px var(--bg3), 0 0 0 7px var(--ring), 0 16px 40px rgba(0,0,0,.35); }
.roulette-result { text-align: center; font-weight: 640; min-height: 1.6em; margin-top: 10px; }
.roulette-bets { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-top: 14px; }
.bet-spot {
  padding: 10px 6px;
  border-radius: var(--r-s);
  border: 0;
  cursor: pointer;
  font: 600 0.85rem var(--font);
  background: var(--bg2);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--ring);
}
.bet-spot[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.bet-spot--red { background: #a3312b; color: #fff; }
.bet-spot--black { background: #14181f; color: #fff; box-shadow: 0 0 0 1px var(--ring-strong); }
.bet-spot--red[aria-pressed="true"], .bet-spot--black[aria-pressed="true"] { outline: 3px solid var(--gold); }

/* Blackjack */
.bj-table { display: grid; gap: 18px; }
.bj-hand { min-height: 108px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bj-hand__label { width: 100%; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
.playing-card {
  width: 68px;
  height: 96px;
  border-radius: 8px;
  background: #fdfcf7;
  color: #16181d;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.25rem;
  position: relative;
  animation: card-deal 0.3s ease-out;
}
.playing-card--red { color: #b3261e; }
.playing-card--back {
  background: repeating-linear-gradient(45deg, var(--gold-deep), var(--gold-deep) 6px, #57431a 6px, #57431a 12px);
  color: transparent;
}
@keyframes card-deal { from { transform: translateY(-14px) scale(0.92); opacity: 0; } }

.game-info h2 { font-size: 1.2rem; }
.game-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 0.92rem; margin: 0 0 1em; }
.game-info dt { color: var(--muted); }
.game-info dd { margin: 0; font-weight: 580; }

/* ---------- Självtest ---------- */
.quiz { max-width: 640px; }
.quiz__q { font-size: 1.15rem; font-weight: 620; margin-bottom: 16px; }
.quiz__options { display: grid; gap: 8px; }
.quiz__options .btn { justify-content: flex-start; text-align: left; }
.quiz__progress { font-size: 0.82rem; color: var(--muted); margin-bottom: 14px; }
.quiz__result-score { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; }

/* ---------- Spelbibliotek ---------- */
.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 20px;
}
.catalog-filters__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-filters__search { max-width: 240px; margin-left: auto; }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(164px, 100%), 1fr));
  gap: 14px;
}
.lib-card {
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.18s, box-shadow 0.18s;
}
.lib-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--gold), 0 0 24px color-mix(in srgb, var(--gold) 26%, transparent), 0 12px 26px rgba(0, 0, 0, 0.3);
  color: var(--text);
}
.lib-card__cover { position: relative; display: block; aspect-ratio: 326 / 235; overflow: hidden; }
.lib-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.lib-card:hover .lib-card__cover img { transform: scale(1.05); }
.lib-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s;
  background: color-mix(in srgb, var(--bg0) 45%, transparent);
}
.lib-card__play-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font: 650 0.9rem var(--font);
  background: var(--gold);
  color: var(--on-gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.lib-card:hover .lib-card__play, .lib-card:focus-visible .lib-card__play { opacity: 1; }
.lib-card__body { display: grid; gap: 6px; padding: 10px 12px 12px; }
.lib-card__title { font-weight: 620; font-size: 0.92rem; line-height: 1.25; }
.lib-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lib-card__meta .badge { font-size: 0.68rem; padding: 2px 8px; }
.lib-card__type { font-size: 0.72rem; color: var(--muted); }
.catalog-empty { color: var(--muted); padding: 30px 0; text-align: center; }

/* Spelfönster (launcher): här startar spelet — gäster möts av inloggningskrav */
.game-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg0);
  box-shadow: var(--shadow-card);
}
.game-frame__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(14px) brightness(0.5) saturate(1.1);
  transform: scale(1.12);
}
.game-frame__inner {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}
.game-frame__card {
  max-width: 420px;
  background: color-mix(in srgb, var(--bg1) 88%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-pop);
  padding: clamp(20px, 3vw, 32px);
}
.game-frame__lock {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--on-gold);
}
.game-frame__card h2 { font-size: 1.25rem; margin-bottom: 6px; }
.game-frame__card p { font-size: 0.9rem; color: var(--muted); }
.game-frame__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.game-frame__note { font-size: 0.76rem !important; margin: 14px 0 0 !important; }

@media (max-width: 640px) {
  .catalog-filters__search { max-width: none; margin-left: 0; width: 100%; }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }
}

/* Rullande omslagsremsa (startsidan) */
.cover-strip {
  margin-top: 22px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cover-strip__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: cover-strip 36s linear infinite;
}
.cover-strip:hover .cover-strip__track { animation-play-state: paused; }
.cover-strip__track a { flex-shrink: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--ring); transition: box-shadow 0.2s; }
.cover-strip__track a:hover { box-shadow: 0 0 0 1px var(--gold), 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent); }
.cover-strip__track img { display: block; height: 108px; width: auto; }
@keyframes cover-strip { to { transform: translateX(-50%); } }

/* ---------- Casino-atmosfär ---------- */

/* Guldskimmer i rubriker */
.hero__title em {
  background: linear-gradient(100deg, var(--gold-ink) 20%, #fff3c4 42%, var(--gold) 55%, var(--gold-ink) 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4.5s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }
[data-theme="light"] .hero__title em {
  background-image: linear-gradient(100deg, #43310b 20%, #a97d1e 42%, #8a6a1f 55%, #43310b 80%);
  background-size: 250% 100%;
}

/* Svävande kortkostymer i heron */
.hero__suits { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__suits span {
  position: absolute;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.06;
  animation: suit-drift 16s ease-in-out infinite;
}
.hero__suits span:nth-child(1) { top: 8%; left: 4%; animation-delay: 0s; }
.hero__suits span:nth-child(2) { top: 58%; left: 14%; font-size: clamp(3rem, 6vw, 5rem); animation-delay: -4s; }
.hero__suits span:nth-child(3) { top: 16%; right: 38%; font-size: clamp(2.5rem, 5vw, 4rem); animation-delay: -8s; }
.hero__suits span:nth-child(4) { bottom: 6%; right: 4%; animation-delay: -12s; }
@keyframes suit-drift {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-26px) rotate(6deg); }
}
[data-theme="light"] .hero__suits span { opacity: 0.09; color: var(--gold-deep); }

/* Kortsolfjäder + markstapel i hero-scenen */
.card-fan { position: absolute; bottom: 0; left: 6%; width: 190px; height: 145px; }
.card-fan .playing-card {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 82px;
  height: 116px;
  font-size: 1.5rem;
  transform-origin: 50% 120%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 10px 26px rgba(0, 0, 0, 0.4);
  animation: none;
}
.card-fan .playing-card:nth-child(1) { transform: translateX(-72%) rotate(-26deg); }
.card-fan .playing-card:nth-child(2) { transform: translateX(-50%) rotate(-2deg); }
.card-fan .playing-card:nth-child(3) { transform: translateX(-26%) rotate(23deg); }
.card-fan:hover .playing-card:nth-child(1) { transform: translateX(-80%) rotate(-33deg); }
.card-fan:hover .playing-card:nth-child(3) { transform: translateX(-18%) rotate(30deg); }
.card-fan .playing-card { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Markstapel sedd från sidan: randiga kanter + ovalt topplock */
.chip-stack { position: absolute; bottom: 2%; right: 7%; display: grid; justify-items: center; }
.chip-stack::before {
  content: '';
  width: 62px;
  height: 22px;
  border-radius: 50%;
  background: #b3362e;
  box-shadow: inset 0 0 0 3px #f2ecdc, inset 0 0 0 7px #b3362e, 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-bottom: -8px;
  z-index: 2;
}
.chip-stack i {
  width: 62px;
  height: 13px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--chip, #b3362e) 0 9px, #f2ecdc 9px 13px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.chip-stack i + i { margin-top: -2px; }
.chip-stack i:nth-child(1) { --chip: #b3362e; transform: translateX(2px); }
.chip-stack i:nth-child(2) { --chip: #1c5c46; transform: translateX(-2px); }
.chip-stack i:nth-child(3) { --chip: #23324d; transform: translateX(1px); }
.chip-stack i:nth-child(4) { --chip: #8a6a1f; }

/* Jackpottskylt med jagande ljus */
.jackpot-sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 clamp(20px, 3vw, 32px);
  padding: 14px 22px;
  border-radius: var(--r-l);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, var(--bg1)), var(--bg1));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), 0 0 34px color-mix(in srgb, var(--gold) 14%, transparent);
  text-align: center;
}
.jackpot-sign p { margin: 0; font-size: 0.98rem; }
.jackpot-sign strong { color: var(--gold-ink); }
.jackpot-sign__bells { display: inline-flex; gap: 2px; vertical-align: -3px; }
.paytable-icons { display: inline-flex; gap: 3px; vertical-align: -4px; margin-right: 4px; }
.jackpot-sign__bulbs {
  flex: 1 1 60px;
  max-width: 180px;
  height: 8px;
  background-image: radial-gradient(circle, var(--gold) 2.6px, transparent 3.4px);
  background-size: 16px 8px;
  background-position: 0 50%;
  animation: bulbs 0.9s steps(2) infinite;
  opacity: 0.9;
}
@keyframes bulbs { to { background-position: 16px 50%; } }

/* Grönt kasinofilt under spelkorten */
.felt-stage {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(20px, 3.5vw, 36px);
  background:
    radial-gradient(130% 140% at 50% -10%, rgba(23, 74, 57, 0.78), rgba(10, 38, 29, 0.9) 72%),
    url('/assets/img/bg/felt.webp') center / cover,
    radial-gradient(130% 140% at 50% -10%, #1a5240, #0d2f24 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 0 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--ring);
}
.felt-stage::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: calc(var(--r-xl) - 8px);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  pointer-events: none;
}
.felt-stage .game-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.35); }
.felt-stage .game-card:hover {
  box-shadow: 0 0 0 1px var(--gold), 0 0 30px color-mix(in srgb, var(--gold) 30%, transparent), 0 18px 38px rgba(0, 0, 0, 0.4);
}

/* Guldkort med sidenfoto (bonus) */
.card--gold-photo {
  background:
    linear-gradient(90deg, var(--gold-surface) 36%, color-mix(in srgb, var(--gold-surface) 78%, transparent) 60%, color-mix(in srgb, var(--gold-surface) 34%, transparent)),
    url('/assets/img/bg/bonus-gold.webp') right center / cover no-repeat,
    var(--gold-surface);
}

/* Ambient kasinobord bakom spelsidorna (endast mörkt tema) */
body[data-game]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('/assets/img/bg/table.webp') center / cover no-repeat;
  opacity: 0.2;
}
[data-theme="light"] body[data-game]::before { display: none; }

/* Guldknapp med ljussvep */
.btn--primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--gold-strong), var(--gold));
}
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
}
.btn--primary:hover::after { animation: sheen 0.7s ease; }
@keyframes sheen { to { left: 135%; } }

/* Spelbordet på spelsidorna: djupare filt + guldkant */
.game-panel--felt {
  background:
    radial-gradient(130% 140% at 50% -10%, rgba(23, 74, 57, 0.78), rgba(10, 38, 29, 0.9) 75%),
    url('/assets/img/bg/felt.webp') center / cover,
    radial-gradient(130% 140% at 50% -10%, #1a5240, #0d2f24 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 0 70px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--ring);
  position: relative;
}
.game-panel--felt::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: calc(var(--r-xl) - 8px);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  pointer-events: none;
}
.game-panel--felt > * { position: relative; }
.game-panel--felt, .game-panel--felt .game-hud__balance { color: #eef4ee; }
.game-panel--felt .game-hud__balance { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.game-panel--felt .slot-msg { color: #dfe9df; }
.game-panel--felt .slot-msg.is-win { color: #7fe3ab; }
.game-panel--felt .roulette-result { color: #dfe9df; }
.game-panel--felt .bet-controls label, .game-panel--felt .bet-controls span { color: #c8d6c8; }
.game-panel--felt .bj-hand__label { color: #a9bfa9; }
.game-panel--felt .mode-pill { background: rgba(0, 0, 0, 0.3); color: #c8d6c8; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.game-panel--felt .mode-pill[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }

@media (max-width: 860px) {
  .card-fan, .chip-stack { display: none; }
}

/* ---------- Div. ---------- */
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 1em; list-style: none; }
.pill-list li { padding: 6px 14px; border-radius: 999px; background: var(--bg2); box-shadow: 0 0 0 1px var(--ring); font-size: 0.85rem; }

.notice-rg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--coral-surface);
  color: var(--coral-ink);
  border-radius: var(--r-m);
  padding: 14px 16px;
  font-size: 0.9rem;
}
.notice-rg .badge-21 { flex-shrink: 0; margin-top: 1px; }
.notice-rg p { margin: 0; }
.notice-rg a { color: inherit; font-weight: 620; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Detaljer & mikrointeraktioner ---------- */

/* Vinstlinje över hjulen */
.slot-reels { position: relative; }
.slot-reels::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 65%, transparent) 12%, color-mix(in srgb, var(--gold) 65%, transparent) 88%, transparent);
  pointer-events: none;
  z-index: 1;
}
.slot-reels::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -3px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-left-color: var(--gold);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Vinnande hjul pulserar */
.slot-reel.is-win { animation: reel-win 0.5s ease-in-out 3; }
@keyframes reel-win {
  0%, 100% { box-shadow: 0 0 0 1px var(--ring); }
  50% { box-shadow: 0 0 0 2px var(--gold), 0 0 26px color-mix(in srgb, var(--gold) 55%, transparent); }
}

/* Myntregn vid jackpott */
.coin-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.coin-rain i {
  position: absolute;
  top: -30px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #f7dc9a, var(--gold) 60%, #a87f24);
  box-shadow: inset 0 0 0 1.5px rgba(60, 46, 12, 0.5);
  animation: coin-fall 1.6s cubic-bezier(0.3, 0, 0.8, 1) forwards;
}
@keyframes coin-fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(120vh) rotate(540deg); opacity: 0.9; }
}

/* Saldo-tick vid vinst/förlust */
.game-hud__balance { transition: color 0.25s; }
.game-hud__balance.tick-up { color: var(--success) !important; }
.game-hud__balance.tick-down { color: var(--danger) !important; }

/* Roulette: resultathistorik */
.roulette-history { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0 0; min-height: 30px; }
.roulette-history i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 650 0.72rem var(--font);
  color: #fff;
  background: #14181f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  font-style: normal;
}
.roulette-history i.is-red { background: #a3312b; }
.roulette-history i.is-green { background: #0f7a4d; }
.roulette-history i:first-child { box-shadow: 0 0 0 2px var(--gold); }

/* Spelkort med hörnindex */
.playing-card { padding: 5px; }
.pc-corner {
  position: absolute;
  top: 5px;
  left: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.05;
}
.pc-corner--br { top: auto; left: auto; right: 6px; bottom: 5px; transform: rotate(180deg); }
.pc-pip { font-size: 1.7rem; line-height: 1; }
.playing-card--back .pc-corner, .playing-card--back .pc-pip { visibility: hidden; }

/* Cookie-inställningar: växlare i stället för kryssrutor */
.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 44px !important;
  height: 24px !important;
  margin-top: 0 !important;
  border-radius: 999px;
  background: var(--bg3);
  box-shadow: inset 0 0 0 1px var(--ring-strong);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.2s, background 0.2s;
}
.switch:checked { background: var(--gold); box-shadow: none; }
.switch:checked::after { transform: translateX(20px); background: var(--on-gold); }
.switch:disabled { opacity: 0.55; cursor: not-allowed; }
.switch:disabled:checked { background: var(--success); }
.switch:disabled:checked::after { background: #fff; }

/* Lösenordsfält: visa/dölj + styrkemätare */
.pw-field { position: relative; }
.pw-field .input { padding-right: 74px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  border: 0;
  background: var(--bg2);
  color: var(--muted);
  font: 600 0.72rem var(--font);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.pw-toggle:hover { color: var(--heading); }
.pw-meter { display: flex; gap: 4px; margin-top: 6px; }
.pw-meter i { height: 4px; flex: 1; border-radius: 2px; background: var(--bg3); transition: background 0.25s; }
.pw-meter.s1 i:nth-child(-n+1) { background: var(--danger); }
.pw-meter.s2 i:nth-child(-n+2) { background: var(--warn); }
.pw-meter.s3 i:nth-child(-n+3) { background: var(--success); }
.pw-meter.s4 i { background: var(--success); }

/* Aktiv rubrik i juridiska innehållsförteckningar (scrollspy) */
.legal__toc a.is-active { background: var(--gold-surface); color: var(--gold-ink); }

/* Till toppen-knapp */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--bg2);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--ring), 0 8px 22px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { box-shadow: 0 0 0 1px var(--gold), 0 8px 22px rgba(0, 0, 0, 0.3); color: var(--gold-ink); }

/* 404 */
.error-page { text-align: center; padding-block: clamp(48px, 10vw, 110px); }
.error-page__code {
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(100deg, var(--gold-ink) 20%, #fff3c4 45%, var(--gold-ink) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
.error-page__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* Rullningslist i sidans färger */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 6px; border: 3px solid var(--bg0); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--gold) 45%, var(--bg3)); }
html { scrollbar-color: var(--bg3) var(--bg0); scrollbar-width: thin; }

/* ---------- Responsivt ---------- */
@media (max-width: 1023px) {
  .rg-bar__license { display: none; }
  .legal { grid-template-columns: 1fr; }
  .legal__toc { position: static; max-height: none; }
  .game-shell { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 80;
    flex-direction: column;
    background: var(--bg1);
    border-bottom: 1px solid var(--ring);
    padding: 10px var(--gutter) 16px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.25);
  }
  .site-header { position: relative; }
  .site-nav.is-open { display: flex; }
  .nav-toggle { display: flex; }
  .site-header__actions .btn--ghost { display: none; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { display: none; }
  .account { grid-template-columns: 1fr; }
  .account__nav { position: static; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

@media (max-width: 640px) {
  .site-header__inner { gap: 10px; }
  .site-header__actions { gap: 6px; }
  .site-header__actions .btn--primary { padding: 8px 12px; font-size: 0.8rem; }
  .theme-toggle, .nav-toggle { width: 36px; height: 36px; }
  .brand__word, .brand__tld { font-size: 1.3rem; }
  .rg-bar__inner { gap: 4px 10px; padding-block: 6px; }
  .rg-bar { font-size: 0.72rem; }
  .rg-bar__logos { gap: 8px; }
  .rg-bar__logos .rg-logo { height: 14px; width: auto; }
  .rg-bar__geo { display: none; }
  .btn--big { width: 100%; }
  .limit-strip { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .limit-strip::-webkit-scrollbar { display: none; }
  .limit-chip { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .rg-bar, .site-header, .site-footer, .cookie-banner, .limit-strip { display: none; }
}