/* ===========================
   Basetema og variabler
   =========================== */

:root {
  --bg: #141414;         /* fallback-bakgrunn */
  --panel: #1c1c1c;
  --text: #ffffff;
  --muted: #bdbdbd;
  --border: #2b2b2b;

  --accent: #7aa2f7;     /* endres pr. kategori via body[data-category] */
  --shadow: #1a1a1a;     /* endres pr. kategori */
  --chip-fg: #ffffff;    /* JS velger sort/hvit for kontrast i pillen */

  --adult-accent: #ce2424;   /* 18+ rød */
  --adult-shadow: #560f0f;   /* 18+ hard skygge */

  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;

  --card-w: min(900px, 92vw);

  /* Layout-tuning */
  --stage-gap: 8px;      /* avstand pille ↔ kort */
  --chip-h: 36px;        /* pillehøyde (sett 15px for mikropille) */
  --chip-pad-x: 14px;    /* pille-padding horisontalt */
}

/* ===========================
   Globalt
   =========================== */

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

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  line-height: 1.45;
}

img, svg { display: block; max-width: 100%; }
button, select, input { font: inherit; color: inherit; }

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

/* App-ramme: header | main | footer */
.app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ===========================
   Header
   =========================== */

.header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #161616, #121212 70%);
}

/* Fast luft mellom toppmeny og innhold på alle sider */
.stage { padding-top: 16px; } /* ~15px */

/* Logo øverst, midtstilt */
.hero-logo {
  display: grid;
  place-items: center;
  padding-bottom: var(--space-2);
}
.app-logo { height: 50px; width: auto; }
@media (max-width: 480px){ .app-logo { height: 42px; } }

/* Kontroller */
.controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  justify-items: center;
}
.control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.control-label { color: var(--muted); font-size: 14px; }

/* 18+ bryter */
.switch { display: inline-flex; align-items: center; gap: 10px; user-select: none; cursor: pointer; }
.switch input {
  appearance: none;
  width: 48px; height: 28px; border-radius: 999px;
  background: #2a2a2a; position: relative; outline: none;
  border: 1px solid var(--border);
  transition: background 120ms ease;
}
.switch input::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #e6e6e6; transition: transform 140ms ease;
}
.switch input:checked { background: var(--accent); border-color: color-mix(in oklab, var(--accent), #fff 15%); }
.switch input:checked::after { transform: translateX(20px); background: #0c0c0c; }
.switch .slider { display: none; }
.switch-label { font-size: 14px; color: var(--muted); }

/* Kategori select */
#categorySelect {
  background: #121212;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  min-width: 220px;
}

/* ===========================
   Main / Scene
   =========================== */

.stage {
  display: flex;                 /* toppjustert kolonne */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--stage-gap);         /* avstand pille ↔ kort */
  padding: 0 var(--space-5) var(--space-6);
}

/* Kategori-pille (kompakt i aksentfarge) */
.category-chip{
  margin-top: 20px;              /* dine justeringer beholdt */
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--chip-h);
  line-height: var(--chip-h);
  padding: 0 var(--chip-pad-x);
  border-radius: 9999px;
  max-width: 92vw;

  background: var(--accent);
  color: var(--chip-fg);
  border: 1px solid color-mix(in oklab, var(--accent), #000 35%);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Spørsmåls-kort */
.card {
  position: relative;
  width: var(--card-w);
  min-height: 220px;
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: clip;
  isolation: isolate;
}

/* Hard skygge i kategorifarge */
.card-shadow {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: 0 2px 0 0 var(--shadow), 0 6px 0 0 var(--shadow), 0 8px 0 0 var(--shadow);
  opacity: 0.85; mix-blend-mode: normal; z-index: 0;
}

/* Farget kant øverst */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--accent); z-index: 1;
}

.card-body { position: relative; z-index: 2; padding: clamp(18px, 4vw, 28px); }

.question-text {
  font-size: clamp(22px, 4.2vw, 36px);
  font-weight: 650;
  letter-spacing: 0.2px;
  line-height: 1.25;
  text-wrap: balance;
}

/* Navigasjon + teller */
.navigation {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  width: var(--card-w);
  margin: var(--space-3) auto 0;
}
.question-counter { text-align: center; color: var(--muted); font-size: 14px; }

/* Knapper */
.btn {
  appearance: none; border: 1px solid var(--border); background: #181818; color: var(--text);
  padding: 10px 14px; border-radius: var(--radius-md); cursor: pointer;
  transition: transform 100ms ease, background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: #1f1f1f; border-color: color-mix(in oklab, var(--border), var(--accent) 35%); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Footer */
.footer {
  padding: var(--space-4) var(--space-5) var(--space-6);
  color: var(--muted); text-align: center;
  border-top: 1px solid var(--border); background: #111;
}
.hint { font-size: 13px; }

/* ===========================
   Kategori-aksenter (farger for kort/kanter/pille/skygge)
   + bakgrunnstint (body background-color) med smooth fade
   =========================== */

/* Felles dark-theme baseline */
body.theme-dark {
  /* Nøytral dybde oppå selve bakgrunnsfargen (endres ikke) */
  background-image:
    radial-gradient(1000px 700px at 50% -200px, rgba(255,255,255,0.04), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.14));
  /* Bakgrunnsfargen hentes fra --bg-tint (settes pr. kategori under) */
  background-color: var(--bg-tint, var(--bg));
  transition: background-color 420ms ease;
}

/* Standard aksent+skygge + en litt mørk tint basert på aksent */
body.theme-dark { --accent: #7aa2f7; --shadow: #1b2a4a; --bg-tint: #10131a; }

/* Kategori-spesifikke farger */
body.theme-dark[data-category="18+"] {
  --accent: var(--adult-accent);
  --shadow: var(--adult-shadow);
  --bg-tint: #160707;  /* dyp mørkerød */
}
body.theme-dark[data-category="Generelt"] {
  --accent: #9aa4b2;  --shadow: #2a2f36;  --bg-tint: #101214;
}
body.theme-dark[data-category="Hverdagsvaner"] {
  --accent: #7bd389;  --shadow: #1f3a25;  --bg-tint: #0b1510;
}
body.theme-dark[data-category="Venner og relasjoner"] {
  --accent: #f38ba8;  --shadow: #471e2a;  --bg-tint: #2a1016;
}
body.theme-dark[data-category="Familie og oppvekst"] {
  --accent: #fab387;  --shadow: #4a2f1d;  --bg-tint: #1e1209;
}
body.theme-dark[data-category="Skole og jobb"] {
  --accent: #89b4fa;  --shadow: #1b2c4a;  --bg-tint: #0c1424;
}
body.theme-dark[data-category="Fritid og interesser"] {
  --accent: #94e2d5;  --shadow: #1a3c37;  --bg-tint: #0a1c1c;
}
body.theme-dark[data-category="Teknologi og dingser"] {
  --accent: #cba6f7;  --shadow: #3a2450;  --bg-tint: #1b1026;
}
body.theme-dark[data-category="Pinlige øyeblikk"] {
  --accent: #f9e2af;  --shadow: #4a4020;  --bg-tint: #1a1709;
}

/* Mye animasjon? Respekter redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
  body.theme-dark { transition: none !important; }
}

/* ===========================
   Respons
   =========================== */

@media (min-width: 760px) {
  .controls { grid-template-columns: auto auto; align-items: center; }
}
@media (max-width: 480px) {
  .navigation { grid-template-columns: 1fr; gap: var(--space-2); }
  .navigation .btn { width: 100%; }
  .question-counter { order: -1; }
}

/* Subtil hover på kortet */
.card:hover { border-color: color-mix(in oklab, var(--border), var(--accent) 25%); }