/*
  jesaue.com — Nordisk designprofil
  Deles av alle spill under /spill/
  ─────────────────────────────────────────────
  Fargepalett hentet fra fjordbildet (bg.png):
    Nattehimmel    #0d1117  →  #131b27
    Fjordvann      #3d7a8a
    Nordlys gull   #c8a96e
    Aurora lilla   #6a3a8a
    Aurora magenta #c04878
    Ember/glød     #c86030
    Tåke/skyer     #8090a8
    Varm hvit      #f0ece4
*/

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Caveat:wght@400;700&family=Nunito:wght@400;600;700;800&family=Fredoka+One&display=swap');

/* ── CSS-variabler ── */
:root {
  /* Bakgrunner */
  --bg:           #0d1117;
  --bg2:          #080c12;
  --bg-card:      #131b27;
  --bg-card-hover:#1a2535;
  --surface:      #131b27;
  --deep:         #080c12;
  --card:         #131b27;

  /* Kanter */
  --border:       #243040;
  --gborder:      #2a3848;

  /* Tekst */
  --text:         #f0ece4;
  --txt:          #f0ece4;
  --text-dim:     #8090a8;
  --muted:        #8090a8;
  --sub:          rgba(240, 236, 228, 0.55);
  --cream:        #f0ece4;
  --white:        #f0ece4;

  /* Primær accent — gull (erstatter neon grønn) */
  --green:        #c8a96e;
  --green-faint:  rgba(200, 169, 110, 0.08);
  --gold:         #c8a96e;
  --warm:         #c8a96e;

  /* Sekundær accent — fjordteal */
  --teal:         #3d7a8a;
  --cyan:         #3d7a8a;
  --cyan-l:       #5a9aaa;

  /* Tertiær — nordlys */
  --purple:       #6a3a8a;
  --purple-l:     #9a6aba;
  --red:          #c04878;
  --coral:        #c86030;

  /* Glassmorphism */
  --glass:        rgba(19, 27, 39, 0.80);
  --glass2:       rgba(8, 12, 18, 0.90);

  /* Mid-toner (brukes i noen spill) */
  --mid:          #1e2d42;

  /* Fonter */
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-hand:    'Caveat', cursive;
  --font-game:    'Nunito', system-ui, sans-serif;
  --font-display: 'Fredoka One', cursive;
}

/* ── Reset og base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  min-height: 100dvh;
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

/* ── Delt topplinje for spill ── */
.game-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--glass2);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.game-header a.back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  letter-spacing: 0.03em;
  transition: color 0.15s;
}

.game-header a.back:hover { color: var(--gold); }

.game-header a.back::before {
  content: '←';
  font-size: 1rem;
}

.game-header .game-title {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  opacity: 0.7;
}

/* ── Delt footer ── */
.game-footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  opacity: 0.5;
}

.game-footer a {
  color: var(--gold);
  text-decoration: none;
}