/* ══════════════════════════════════════════════════
   ARCADO - DEN GEMENSAMMA GRUNDEN, laddad av alla sidor
   ══════════════════════════════════════════════════
   Sajten kandes som flera sajter for att den var det: tre morka bakgrunder
   (#07070f, #0d0d14, #0c0c14), egna kopior av varje farg pa varje sida, och
   forstasidans lila sken och tonade rubriker bara pa forstasidan. Samma sorts
   drift som menyn och nivatrappan hade - och samma losning: ett stalle.

   Allt har ar FORSTASIDANS varden. En sida far ha egna UNDANTAG (buildern
   har tydligare kanter i sitt tata verktyg) men aldrig en egen kopia av det
   som star har.

   Anvandning: <link rel="stylesheet" href="/arcado.css"> FORE sidans <style>,
               sa sidans egna regler vinner dar de ska. */

:root {
  --bg: #07070f;
  --surface: #0f0f1a;
  --surface2: #13131f;     /* kort och paneler */
  --surface3: #1a1a2e;     /* upphojt i ett kort: brickor, baksidor */
  --border: #1e1e35;
  --line: #1e1e35;         /* samma som --border; guiden och Players kallar den line */
  --accent: #6c63ff;
  --accent2: #ff6b6b;
  --green: #00d4aa;
  --gold: #ffd700;
  --text: #f0f0ff;
  --muted: #6b6b9a;
  --dim: #4a4a70;
}

/* DET LILA SKENET, uppifran - forstasidans. Fast mot skarmen, sa det ligger
   kvar nar man rullar.
   z-index -1 och INTE ett overlagg: sidans bakgrund (body) ritas pa canvasen,
   skenet ovanpa den och allt innehall ovanpa skenet. Forut lag det som
   body::after pa forstasidan och tonade darmed aven text och knappar lila. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(108, 99, 255, 0.08) 0%, transparent 70%);
}

/* DEN TONADE RUBRIKEN - vitt mot lavendel. En per sida: sidans huvudrubrik.
   Anvands den overallt slutar den kannas som nagot. */
.a-rubrik {
  background: linear-gradient(180deg, #fff 0%, rgba(200, 195, 255, 0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* FLIKRADEN - samma som katalogens (games.html, 2026-09-28): en ram, den valda
   fylld ljus. Familjesidan och spelarkortet anvander den har sedan 2026-09-29,
   sa att samma sorts flikar ser likadana ut overallt. Knapparna far klassen
   .aktiv (eller aria-selected="true") nar de ar valda. */
.a-flikar { display: inline-flex; gap: 4px; padding: 5px; border-radius: 16px; flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.a-flikar > button, .a-flikar > a { border: 0; margin: 0; border-radius: 11px; padding: 9px 20px; cursor: pointer;
  background: none; font: 700 14px 'Plus Jakarta Sans', sans-serif; color: rgba(255, 255, 255, 0.55);
  white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
.a-flikar > button:hover, .a-flikar > a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.a-flikar > .aktiv, .a-flikar > [aria-selected="true"] { background: #f0f0ff; color: #0b0b16;
  box-shadow: 0 4px 18px rgba(108, 99, 255, 0.25); }
.a-flikar > button:focus-visible, .a-flikar > a:focus-visible { outline: 2px solid #6c63ff; outline-offset: 2px; }
@media (max-width: 480px) { .a-flikar > button, .a-flikar > a { padding: 8px 10px; font-size: 13.5px; } }