/* ═══════════════════════════════════════════════════════════════
   LUNDI · Kokomo — shared site layer
   Imports the design tokens, bridges legacy variables onto Lundi,
   and defines the components the site uses.
   Load this AFTER any legacy stylesheet so the bridge wins.
   ═══════════════════════════════════════════════════════════════ */

@import url("tokens.css");

/* ── Legacy → Lundi bridge ──────────────────────────────────────
   Old pages reference --ocean / --teal / --coral / --gold / --bg …
   in CSS and in inline JS styles. Remap them onto Lundi tokens so
   the whole site adopts the candy palette + dark theme for free.
   Also matches body.dark-mode so legacy vars re-resolve to the dark
   --lu-* values on game pages that toggle dark via the body class. */
:root, body.dark-mode {
  --ocean:       var(--lu-grape);     --ocean-dark:  var(--lu-grape-deep);
  --teal:        var(--lu-grass);     --teal-dark:   var(--lu-grass-deep);
  --teal-light:  var(--lu-bg-tint);
  --coral:       var(--lu-coral);     --coral-dark:  var(--lu-coral-deep);
  --gold:        var(--lu-sunny);     --gold-dark:   var(--lu-sunny-deep);
  --sand:        var(--lu-bg-tint);   --sand-dark:   var(--lu-line);
  --white:       var(--lu-surface);
  --bg:          var(--lu-bg);
  --fg:          var(--lu-ink);
  --muted:       var(--lu-ink-soft);
  --border:      var(--lu-line);
  --correct:     var(--lu-correct);
  --incorrect:   var(--lu-coral);
  --present:     var(--lu-present);
  --sky:         var(--lu-sky);
}

/* Dark theme: respond to BOTH the Lundi attribute and the legacy
   body.dark-mode class the games already toggle. */
:root[data-theme="dark"], .lu-dark, body.dark-mode {
  --lu-bg:        #100B24;
  --lu-bg-tint:   #1E1742;
  --lu-surface:   #271F52;
  --lu-surface-2: #322A63;
  --lu-ink:       #FFF3FB;
  --lu-ink-soft:  #C7BEEA;
  --lu-ink-faint: #968CC0;
  --lu-ink-accent:  #C7A6FF;
  --lu-ink-success: var(--lu-grass);
  --lu-ink-error:   var(--lu-coral);
  --lu-ink-reward:  var(--lu-sunny);
  --lu-ink-special: var(--lu-bubblegum);
  --lu-ink-sea:     #00C5A5;
  --lu-line:      #423873;
  --lu-shadow-color: #000000;
  --lu-absent:    #3A3A3C;
  --lu-link:      #C7A6FF;   /* sjá athugasemd við a-regluna hér að neðan */
  --lu-shadow-sm:  0 2px 0 rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.30);
  --lu-shadow-md:  0 4px 0 rgba(0,0,0,0.30), 0 10px 24px rgba(0,0,0,0.40);
  --lu-shadow-lg:  0 8px 0 rgba(0,0,0,0.30), 0 20px 48px rgba(0,0,0,0.50);
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--lu-font-ui);
  font-weight: 600;
  background: var(--lu-bg);
  color: var(--lu-ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--lu-dur) var(--lu-smooth), color var(--lu-dur) var(--lu-smooth);
}
h1, h2, h3, .lu-display { font-family: var(--lu-font-display); }
/* ── Hlekkjaliturinn ────────────────────────────────────────────
   MÆLING 22.8.2026: --lu-grape sem hlekkjalitur gaf 4,25:1 á --lu-bg í ljósu
   þema og 3,32:1 á --lu-surface í dökku. Hvort tveggja fellur á WCAG AA (4,5:1).
   Ástæðan er sú að vörumerkjalitirnir eru VILJANDI þeir sömu í báðum þemum
   (sjá athugasemdina við --lu-on-brand í tokens.css), og einn fastur litur
   getur ekki borið sig bæði á hvítu og á #271F52.
   Þess vegna er hlekkjaliturinn EINI vörumerkjaliturinn sem fylgir þemanu:
     ljóst  #7B3FCB (= --lu-grape-deep, enginn nýr litur)  6,15:1 og 5,81:1
     dökkt  #C7A6FF (ljós blær af sama fjólubláa)          7,35:1 og 9,43:1
   Sami tóki er notaður fyrir .legal-section a og fyrir heimildahlekkina sem
   voru harðkóðaðir á --lu-grass-deep (3,17:1 í ljósu þema). */
:root { --lu-link: #7B3FCB; }
a { color: var(--lu-link); }
::selection { background: color-mix(in srgb, var(--lu-grape) 30%, transparent); }

/* ── App shell width ────────────────────────────────────────── */
.lu-wrap { max-width: 520px; margin: 0 auto; padding: 0 20px; }

/* ── Top bar / nav ──────────────────────────────────────────── */
.lu-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; max-width: 520px; margin: 0 auto; padding: 14px 20px;
}
.lu-topbar__brand {
  /* min-height, ekki fylling: hausinn er flex og hæsti hluturinn (.lu-icon-btn,
     42 px) ræður hæð stikunnar, svo 24 px hér stækkar smellsvæðið úr 22 px
     upp fyrir lágmark WCAG 2.5.8 án þess að stikan hreyfist. */
  display: flex; align-items: center; gap: 9px; min-height: 24px;
  font-family: var(--lu-font-display); font-weight: 700; font-size: 22px;
  color: var(--lu-ink); text-decoration: none; letter-spacing: -0.01em;
}
.lu-topbar__brand .dot { color: var(--lu-grape); }
.lu-topbar__right { display: flex; align-items: center; gap: 8px; }

/* Round icon button (theme toggle, account, etc.) */
.lu-icon-btn {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: none; cursor: pointer; padding: 0;
  background: var(--lu-surface); color: var(--lu-ink);
  border-radius: var(--lu-r-md); box-shadow: var(--lu-shadow-sm);
  transition: transform var(--lu-dur-fast) var(--lu-bounce), filter var(--lu-dur-fast);
}
.lu-icon-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.lu-icon-btn:active { transform: translateY(1px); }
.lu-icon-btn svg { width: 20px; height: 20px; }

/* Account pop-pill */
.lu-account {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--lu-surface); color: var(--lu-ink);
  border: none; cursor: pointer;
  font-family: var(--lu-font-display); font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: var(--lu-r-pill);
  box-shadow: 0 4px 0 var(--lu-line);
  transition: transform var(--lu-dur-fast) var(--lu-bounce), box-shadow var(--lu-dur-fast) var(--lu-bounce);
}
/* Mjóir símar: hausinn rúmist án þess að ýta síðunni til hliðar */
@media (max-width: 430px) {
  .lu-topbar { padding: 12px 12px; gap: 8px; }
  .lu-topbar__right { gap: 6px; }
  .lu-account { padding: 8px 12px; font-size: 13px; max-width: 46vw; }
  .lu-account #user-btn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 380px) {
  .lu-topbar__brand { font-size: 19px; }
  .lu-icon-btn { width: 38px; height: 38px; }
  .lu-account { padding: 7px 10px; gap: 5px; max-width: 38vw; }
  .lu-lang-link { padding: 4px 7px !important; font-size: 12px !important; }
}
/* Örsmáir skjáir (320px): aðgangshnappurinn sýnir aðeins táknið */
@media (max-width: 340px) {
  .lu-account #user-btn-text { display: none; }
  .lu-account { gap: 0; }
}
.lu-account:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--lu-line); }
.lu-account:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lu-line); }
.lu-account.logged-in { background: var(--lu-grape); color: #fff; box-shadow: 0 4px 0 var(--lu-grape-deep); }
.lu-account.logged-in:active { box-shadow: 0 2px 0 var(--lu-grape-deep); }
.lu-account svg { width: 16px; height: 16px; }

/* ── Hero ───────────────────────────────────────────────────── */
.lu-hero { text-align: center; padding: 16px 20px 8px; position: relative; }
.lu-hero__logo { height: 60px; }
/* swap wordmark by theme so it never sinks into the bg */
.lu-hero__logo--dark { display: none; }
:root[data-theme="dark"] .lu-hero__logo--light, body.dark-mode .lu-hero__logo--light { display: none; }
:root[data-theme="dark"] .lu-hero__logo--dark,  body.dark-mode .lu-hero__logo--dark  { display: inline-block; }
.lu-hero__tag {
  /* Notað bæði á <h1> (forsíðan og en.html, úttekt 24.7 A4) og <p> (veðurlínan),
     svo margin-bottom þarf að vera skýrt núll: h1 fær annars sjálfgefið 0.67em. */
  margin-top: 10px; margin-bottom: 0; font-family: var(--lu-font-ui); font-weight: 800;
  font-size: 13px; letter-spacing: 0.04em; color: var(--lu-ink-soft);
}
.lu-hero__mascot {
  width: 96px; height: 96px; display: inline-block; padding: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
              color-mix(in srgb, var(--lu-grape) 18%, var(--lu-surface)) 0%,
              color-mix(in srgb, var(--lu-grape) 10%, var(--lu-surface)) 100%);
  box-shadow: var(--lu-shadow-sm), inset 0 0 0 2px color-mix(in srgb, var(--lu-grape) 22%, transparent);
}

/* ── Stat chips row ─────────────────────────────────────────── */
.lu-stats {
  max-width: 520px; margin: 8px auto 4px; padding: 0 20px;
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.lu-stats .lu-chip { font-size: 14px; }

/* ── Section title ──────────────────────────────────────────── */
.lu-section-title {
  max-width: 520px; margin: 26px auto 12px; padding: 0 20px;
  font-family: var(--lu-font-display); font-weight: 700; font-size: 22px;
  color: var(--lu-ink); display: flex; align-items: center; gap: 8px;
}

/* ── Game tile cards (home) ─────────────────────────────────── */
.lu-games { max-width: 520px; margin: 0 auto 22px; padding: 0 20px; display: flex; flex-direction: column; gap: 14px; }
/* Borðtölva: leikjalistinn í tveimur/þremur dálkum í stað eins langs dálks.
   Section-titlar fylgja breiddinni svo fyrirsögn og spjöld byrji á sömu línu. */
@media (min-width: 900px) {
  .lu-games { max-width: 880px; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .lu-section-title { max-width: 880px; }
}
@media (min-width: 1280px) {
  .lu-games { max-width: 1240px; grid-template-columns: 1fr 1fr 1fr; }
  .lu-section-title { max-width: 1240px; }
}
.lu-game {
  display: flex; align-items: center; gap: 16px;
  background: var(--lu-surface); text-decoration: none; color: var(--lu-ink);
  border-radius: var(--lu-r-lg); padding: 16px 18px;
  box-shadow: 0 6px 0 var(--card-deep, var(--lu-line)), var(--lu-shadow-sm);
  transition: transform var(--lu-dur-fast) var(--lu-bounce), box-shadow var(--lu-dur-fast) var(--lu-bounce);
}
.lu-game:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--card-deep, var(--lu-line)), var(--lu-shadow-md); }
.lu-game:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--card-deep, var(--lu-line)), var(--lu-shadow-sm); }
.lu-game__icon {
  width: 56px; height: 56px; border-radius: var(--lu-r-md); flex-shrink: 0;
  display: grid; place-items: center; background: var(--card-color, var(--lu-grape));
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.14);
}
.lu-game__icon img { width: 34px; height: 34px; }
.lu-game__info { flex: 1; min-width: 0; }
.lu-game__info h2 { font-family: var(--lu-font-display); font-weight: 600; font-size: 18px; margin: 0 0 2px; color: var(--lu-ink); }
.lu-game__info p { font-family: var(--lu-font-ui); font-size: 12.5px; font-weight: 700; color: var(--lu-ink-soft); margin: 0; }
.lu-game__go {
  width: 40px; height: 40px; border-radius: var(--lu-r-pill); flex-shrink: 0;
  display: grid; place-items: center; font-size: 17px; font-weight: 900;
  /* Örin var alltaf hvít: 2,33:1 á sky og 2,10:1 á grass (úttekt 24.7, A1).
     Erfir nú blek litarins; sjá --lu-*-ink í css/tokens.css. */
  color: var(--card-ink, var(--lu-grape-ink));
  background: var(--card-color, var(--lu-grape)); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.16);
}
/* per-game colors */
.lu-game.g-sky   { --card-color: var(--lu-sky);   --card-deep: var(--lu-sky-deep);   --card-ink: var(--lu-sky-ink); }
.lu-game.g-grape { --card-color: var(--lu-grape); --card-deep: var(--lu-grape-deep); --card-ink: var(--lu-grape-ink); }
.lu-game.g-grass { --card-color: var(--lu-grass); --card-deep: var(--lu-grass-deep); --card-ink: var(--lu-grass-ink); }
.lu-game.g-sunny { --card-color: var(--lu-sunny); --card-deep: var(--lu-sunny-deep); --card-ink: var(--lu-sunny-ink); }
.lu-game.g-coral { --card-color: var(--lu-coral); --card-deep: var(--lu-coral-deep); --card-ink: var(--lu-coral-ink); }
.lu-game.g-bubblegum { --card-color: var(--lu-bubblegum); --card-deep: var(--lu-bubblegum-deep); --card-ink: var(--lu-bubblegum-ink); }

/* ── Full-width pop link (CTAs) ─────────────────────────────── */
.lu-cta { max-width: 520px; margin: 0 auto 12px; padding: 0 20px; }
.lu-cta .lu-btn { width: 100%; font-size: 17px; padding: 16px; }

/* (Merkin voru hér: .lu-badges, .bcard, .medal og fylgihlutir, um 75 línur.
   Tekin út 26.8.2026 að ákvörðun Lilju; rökin standa í js/gamification.js.
   .c-fill-* fór með þeim, því eini notandinn var framvindusláin í læstu merki.
   .c-sky-fjölskyldan hér á eftir stendur: hún er ekki merkjaefni. Hún á sér
   reyndar engan notanda heldur og er eldri en þessi lota, svo hún bíður þess
   að vera skoðuð með öðru ónotuðu CSS-i en er ekki sópað hér inn.) */

.c-sky{--c:var(--lu-sky);--cd:var(--lu-sky-deep);} .c-grass{--c:var(--lu-grass);--cd:var(--lu-grass-deep);}
.c-sunny{--c:var(--lu-sunny);--cd:var(--lu-sunny-deep);} .c-coral{--c:var(--lu-coral);--cd:var(--lu-coral-deep);}
.c-grape{--c:var(--lu-grape);--cd:var(--lu-grape-deep);} .c-bubblegum{--c:var(--lu-bubblegum);--cd:var(--lu-bubblegum-deep);}

.confetti-bit { position: fixed; z-index: 9999; pointer-events: none; will-change: transform, opacity;
  animation: confetti-fly 0.95s cubic-bezier(0.18, 0.7, 0.4, 1) forwards; }
@keyframes confetti-fly {
  0%   { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 150px)) rotate(var(--rot)); opacity: 0; }
}

/* ── Leaderboard ────────────────────────────────────────────── */
.lu-leaderboard { max-width: 520px; margin: 0 auto 28px; padding: 0 20px; }
.lb-empty { text-align: center; color: var(--lu-ink-soft); font-weight: 700; padding: 22px; background: var(--lu-surface); border-radius: var(--lu-r-lg); box-shadow: var(--lu-shadow-sm); }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--lu-surface); border-radius: var(--lu-r-md); margin-bottom: 8px; box-shadow: var(--lu-shadow-sm); }
.lb-rank { font-family: var(--lu-font-display); font-weight: 700; font-size: 18px; color: var(--lu-grape); min-width: 32px; text-align: center; }
.lb-name { flex: 1; font-weight: 800; font-size: 15px; color: var(--lu-ink); }
.lb-points { font-family: var(--lu-font-display); font-weight: 700; color: var(--lu-grass-deep); font-size: 15px; }

/* ── Footer ─────────────────────────────────────────────────── */
.lu-footer { text-align: center; padding: 28px 20px 40px; font-size: 12px; color: var(--lu-ink-soft); font-weight: 700; }
.lu-footer a { color: var(--lu-ink-soft); }

/* ── Modal ──────────────────────────────────────────────────── */
.lu-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--lu-ink) 55%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lu-modal {
  background: var(--lu-surface); color: var(--lu-ink);
  border-radius: var(--lu-r-xl); padding: 30px; max-width: 400px; width: 100%;
  text-align: center; box-shadow: var(--lu-shadow-lg);
  animation: lu-pop-in var(--lu-dur) var(--lu-bounce-big) both;
}
.lu-modal h2 { font-family: var(--lu-font-display); font-weight: 700; font-size: 26px; color: var(--lu-ink); margin: 0 0 12px; }
.lu-modal p { font-family: var(--lu-font-ui); font-weight: 600; color: var(--lu-ink-soft); font-size: 14px; line-height: 1.5; }
.lu-modal__mark { font-size: 44px; line-height: 1; margin-bottom: 6px; }

/* Inputs */
.lu-field { margin-bottom: 12px; text-align: left; }
.lu-input {
  width: 100%; background: var(--lu-surface-2); color: var(--lu-ink);
  border: 2px solid var(--lu-line); border-radius: var(--lu-r-md);
  padding: 13px 15px; font-family: var(--lu-font-ui); font-size: 16px; font-weight: 700; outline: none;
  transition: border-color var(--lu-dur-fast), box-shadow var(--lu-dur-fast);
}
.lu-input::placeholder { color: var(--lu-ink-faint); }
.lu-input:focus { border-color: var(--lu-grape); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lu-grape) 22%, transparent); }

/* ── Toast ──────────────────────────────────────────────────── */
.lu-toast {
  position: fixed; top: 18px; left: 50%;
  transform: translateX(-50%) translateY(-90px);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--lu-ink); color: var(--lu-bg);
  padding: 13px 22px; border-radius: var(--lu-r-pill);
  font-family: var(--lu-font-display); font-weight: 600; font-size: 15px;
  z-index: 300; box-shadow: var(--lu-shadow-md); pointer-events: none;
  transition: transform var(--lu-dur) var(--lu-bounce-big);
}
.lu-toast.visible { transform: translateX(-50%) translateY(0); }

/* ── Toast, sameiginlegur (UI-lota 25.8.2026, §7) ───────────────
   FJÖRUTÍU síður skrifuðu sinn eigin `.toast` og hann var nánast sami hluturinn
   í hvert sinn: sama staðsetning, sama umbreyting, sama letur. Rekið mældist í
   fjórum eigindum og TVÖ AF ÞVÍ VORU GALLAR en ekki smekkur:

     z-index    29 síður í 200, ÁTTA í 2000 og tvær í 100. Lagskipting verkefnisins
                (sjá validate_lagskipting) segir sigurglugga í 400, svo toast í 2000
                lá OFAN Á sigurglugganum á þessum átta.
     pointer-events  aðeins TVÆR síður settu none. Á hinum 38 gleypti tilkynning
                sem svífur yfir borðinu smelli sem áttu að lenda á borðinu.

   Hitt var venjulegt rek: top 72/70/80, padding 12px 22px eða þrjú önnur gildi,
   font-weight 700/600/800, border-radius pill eða 8px. Ríkjandi gildið vinnur.

   Klasinn heitir `.toast` en ekki `.lu-toast` VILJANDI: þá heldur öll núverandi
   uppsetning sér og yfirfærslan er hrein eyðing á síðunni sjálfri. `.lu-toast`
   hér að ofan stendur áfram fyrir nýjar síður sem vilja stærra letur og skugga. */
.toast {
  position: fixed; top: 72px; left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--lu-ink); color: var(--lu-bg);
  padding: 12px 22px; border-radius: var(--lu-r-pill);
  font-family: var(--lu-font-display); font-weight: 700;
  max-width: 90vw; text-align: center;
  z-index: 200; pointer-events: none;
  transition: transform var(--lu-dur) var(--lu-smooth);
}
.toast.visible { transform: translateX(-50%) translateY(0); }

/* ── Verð á hnappi (UI-lota 25.8.2026, ákvörðun Lilju) ──────────
   Þrjátíu hnappar segja hvað aðgerðin kostar: „Vísbending (10 pálmar)". Sá texti
   KEMST EKKI á eina línu þegar þrír til fjórir hnappar deila 360 px skjá, svo
   hann brotnaði og hnappurinn teygðist. Mælt: raðirnar fóru úr 39-58 px í 58-74.

   Hvorki orðalag né letur leysir það. Án sviga brotnar hann enn á fjórum af fimm,
   og 11 px letur (sem er of lítið fyrir unglinga hvort eð er) dugir ekki heldur.
   Plássið er einfaldlega ekki til.

   Þess vegna fer verðið á SÍNA EIGIN LÍNU VILJANDI, minna og undir heitinu. Þá
   les hnappurinn eins og einhver hafi ætlað sér tvær línur, en ekki eins og
   textinn hafi rekist á vegg. Liturinn er sá sami (currentColor): deyfing á
   verði væri nákvæmlega mistökin sem þessi lota var að laga annars staðar. */
.verd {
  display: block;
  font-size: .82em;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
}

/* ── Gluggi, sameiginlegur (UI-lota 25.8.2026, §7) ──────────────
   44 síður skrifuðu sína eigin `.modal-overlay` og 52 sína eigin `.modal`.
   Yfirlögnin var nær samhljóða: position, inset, align-items, justify-content
   og z-index stóðu EINS á öllum 44 og aðeins bakgrunnurinn var skrifaður á
   fimm vegu (sami rgba-litur, fimm stafsetningar).

   `display` ER VILJANDI EKKI HÉR. Síðurnar bera TVÖ ólík mynstur og hvorugt er
   rangt: 37 hafa `display:flex` í stílnum og `style="display:none"` á hverjum
   glugga fyrir sig, en sjö hafa `display:none` í stílnum og kveikja á honum
   með JS. Ef sameiginlega reglan setti `flex` opnuðust ALLIR gluggar þeirra
   sjö við hleðslu. Ástandið er því áfram á síðunni þar til show/hide-vélin
   sjálf er sameinuð, sem er stærra verk en þetta.

   Gluggabúturinn sjálfur ber RÍKJANDI gildin. Síða sem þarf annað (t.d. 16px
   fyllingu fyrir þéttara efni) skrifar ÞÁ EINU LÍNU, ekki átta. */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
}
.modal {
  background: var(--lu-surface);
  padding: 28px; border-radius: var(--lu-r-xl);
  max-width: 380px; width: 100%;
  box-shadow: var(--lu-shadow-lg);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   Game surfaces — clue strip, keyboard, crossword, salat
   (target the existing markup classes used by the games)
   ═══════════════════════════════════════════════════════════════ */

/* Clue strip — owns its game color */
.lu-clue {
  display: flex; align-items: center; gap: 13px;
  background: var(--game-color, var(--lu-sky)); color: var(--game-ink, var(--lu-sky-ink));
  border-radius: var(--lu-r-md); padding: 13px 18px;
  font-family: var(--lu-font-ui); font-weight: 700; font-size: 15px;
  box-shadow: var(--lu-shadow-sm);
}
.lu-clue__num {
  flex: none; min-width: 30px; height: 30px; padding: 0 9px;
  display: grid; place-items: center; border-radius: var(--lu-r-pill);
  background: rgba(255,255,255,0.22);
  font-family: var(--lu-font-display); font-weight: 700; font-size: 12px;
}

/* Keyboard (Orðagisk) — restyle existing .key / .keyboard markup */
.keyboard .key, .lu-kbd__key {
  background: var(--lu-surface-2); color: var(--lu-ink);
  border: none; border-radius: var(--lu-r-sm);
  font-family: var(--lu-font-display); font-weight: 600;
  box-shadow: 0 3px 0 var(--lu-line); cursor: pointer; user-select: none;
  transition: transform var(--lu-dur-fast) var(--lu-bounce), box-shadow var(--lu-dur-fast), background var(--lu-dur-fast);
}
.keyboard .key:active, .lu-kbd__key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lu-line); }
.keyboard .key.correct,  .key.is-correct { background: var(--lu-correct); color:var(--lu-correct-ink); box-shadow: 0 3px 0 var(--lu-grass-deep); }
.keyboard .key.present,  .key.is-present { background: var(--lu-present); color:var(--lu-present-ink); box-shadow: 0 3px 0 var(--lu-sunny-deep); }
.keyboard .key.absent,   .key.is-absent  { background: var(--lu-absent);  color:var(--lu-absent-ink); box-shadow: 0 3px 0 rgba(0,0,0,0.20); }

/* Crossword cells (shared) */
.xw-active   { background: var(--lu-sunny) !important; }
.xw-focus    { box-shadow: inset 0 0 0 3px var(--lu-sky) !important; }

/* ── Dark-mode definition ───────────────────────────────────────
   Surfaces sit close to the bg in dark; add a hairline so cards,
   chips and rows separate cleanly and feel raised. */
:root[data-theme="dark"] .lu-game,
:root[data-theme="dark"] .lu-chip,
:root[data-theme="dark"] .lu-card,
:root[data-theme="dark"] .lb-row,
:root[data-theme="dark"] .lb-empty,
:root[data-theme="dark"] .lu-modal,
:root[data-theme="dark"] .lu-icon-btn,
:root[data-theme="dark"] .lu-input,
body.dark-mode .lu-game,
body.dark-mode .lu-chip,
body.dark-mode .lu-card,
body.dark-mode .lb-row,
body.dark-mode .lb-empty,
body.dark-mode .lu-modal,
body.dark-mode .lu-icon-btn,
body.dark-mode .lu-input {
  border: 1px solid var(--lu-line);
}
/* keep the game cards' colored under-edge as the dominant accent */
:root[data-theme="dark"] .lu-game,
body.dark-mode .lu-game { border-color: color-mix(in srgb, var(--card-deep, var(--lu-line)) 55%, var(--lu-line)); }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Keypt þemu úr pálmabúðinni (breyta aðeins highlight-litum, óhætt fyrir allan vefinn) ── */
body[data-shop-theme="theme_sunset"] {
  --lu-grape: #FF7A59; --lu-grape-deep: #E85D3D;
  --lu-grass: #FFB037; --lu-grass-deep: #F59E0B;
}
body[data-shop-theme="theme_forest"] {
  --lu-grape: #2E7D52; --lu-grape-deep: #1F5E3C;
  --lu-grass: #7BC47F; --lu-grass-deep: #5AA85F;
}

/* ═══════════════════════════════════════════════════════════════
   TILFINNINGASTÖÐUR LUNDA (UI-lota 25.8.2026, §8)

   Teikningin er EIN og hún breytist ekki hér. Það sem breytist er HREYFINGIN,
   og hún ein ber tilfinninguna. Það er líka eina leiðin sem stendur til boða:
   grafíkin er hönnuð af Kokomo og ekki samin í kóða.

   ÁÐUR bar hetjumyndin á forsíðunni `lu-anim-bob`, sem er 2,4 sekúndna vipp
   sem gengur AÐ EILÍFU. Lundi var því alltaf jafn spenntur, hvort sem notandinn
   var að klára sigurgöngu eða opna síðuna í fyrsta sinn. Sífelld hreyfing er
   ekki persónuleiki heldur suð: hún hættir að merkja neitt af því hún merkir
   alltaf það sama.

   NÚ er hvíldarstaðan RÓ: hægur andardráttur og blikk með margra sekúndna
   millibili. Hreyfing sem sést er þá VIÐBURÐUR og segir eitthvað.

     ro        andardráttur og blikk. Sjálfgefið, alls staðar.
     fagnar    hopp, einu sinni. Þegar dagsþraut klárast eða þrep opnast.
     hvetur    halli fram og til baka, einu sinni. Eftir rangt svar.
     ringlast  hægt vagg í lykkju. Villusíðan, þar sem hann er villtur líka.

   Stöðurnar standa á `data-lundi` en ekki klasa, því þetta ER ástandsvél og
   aðeins ein staða getur verið í gangi. js/lundi.js sér um skiptin.
   ═══════════════════════════════════════════════════════════════ */
[data-lundi] { transform-origin: 50% 88%; will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
    /* RÓ: andardráttur (4,6 s) og blikk sem kemur sjaldan. Tvær lykkjur af ólíkri
       lengd svo blikkið lendi ekki alltaf á sama stað í andardrættinum. */
    [data-lundi="ro"] { animation: lundi-andi 4.6s var(--lu-smooth) infinite; }
    /* Blikkið liggur á BARNINU en ekki sama hlut og andardrátturinn, því einn
       hlutur getur aðeins borið eina animation-eiginleikaröð. Standi data-lundi
       beint á myndinni (t.d. á ensku forsíðunni) andar hún bara, og það er í
       lagi: andardrátturinn einn dugir til að hann virki lifandi. */
    [data-lundi="ro"] > img { animation: lundi-blikk 7s ease-in-out infinite; transform-origin: 50% 88%; }

    [data-lundi="fagnar"]   { animation: lundi-fagnar 900ms var(--lu-bounce-big) 1; }
    [data-lundi="hvetur"]   { animation: lundi-hvetur 700ms var(--lu-bounce) 1; }
    [data-lundi="ringlast"] { animation: lundi-ringlast 3.4s var(--lu-smooth) infinite; }
}

@keyframes lundi-andi {
    0%, 100% { transform: translateY(0)    scaleY(1);     }
    50%      { transform: translateY(-1.5px) scaleY(0.985); }
}
@keyframes lundi-blikk {
    0%, 91%, 100% { transform: scaleY(1); }
    93%           { transform: scaleY(0.93) scaleX(1.02); }
    95%           { transform: scaleY(1); }
}
/* Þrjú hopp sem lækka: sá sem fagnar hættir ekki í einu vetfangi. */
@keyframes lundi-fagnar {
    0%   { transform: translateY(0)     rotate(0);      }
    18%  { transform: translateY(-13px) rotate(-7deg);  }
    36%  { transform: translateY(0)     rotate(0);      }
    54%  { transform: translateY(-8px)  rotate(5deg);   }
    72%  { transform: translateY(0)     rotate(0);      }
    86%  { transform: translateY(-3px)  rotate(-2deg);  }
    100% { transform: translateY(0)     rotate(0);      }
}
/* Halli fram og til baka: „prófaðu aftur", ekki „þú tapaðir". */
@keyframes lundi-hvetur {
    0%, 100% { transform: rotate(0)      translateY(0);    }
    25%      { transform: rotate(-9deg)  translateY(-2px); }
    60%      { transform: rotate(7deg)   translateY(-1px); }
    85%      { transform: rotate(-3deg)  translateY(0);    }
}
/* Hægt vagg, eins og sá sem veit ekki alveg hvert hann á að fara. */
@keyframes lundi-ringlast {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg);  }
}

/* Tákn Kokomo (assets/tak/*.svg): eigin grafík í stað emoji, fyrirmæli Lilju 21.8.2026.
   Fylgja leturstærðinni og sitja rétt í línu hvar sem þau standa í texta. */
.tak { height: 1em; width: auto; vertical-align: -0.12em; display: inline-block; }
.tak--stor { height: 1.35em; vertical-align: -0.25em; }

/* ── Algengar spurningar: sýnilegi textinn á bak við FAQ-skemað ──────────────
   Skemað sjálft krefst þess að svörin standi á síðunni (Google hafnar annars
   merkingunni), og þau eru um leið það sem svarvélar vitna í. Kaflinn situr
   neðst á síðunni og truflar ekki leikinn. Sýnileikaúttekt 21.8.2026. */
.lu-faq {
    max-width: 560px;
    margin: 26px auto 0;
    padding: 18px 16px 34px;
    border-top: 1px solid var(--lu-line);
}
.lu-faq h2 {
    font-family: var(--lu-font-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 12px;
    color: var(--lu-ink);
}
.lu-faq dl { margin: 0; }
.lu-faq dt {
    font-family: var(--lu-font-display);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--lu-ink);
    margin: 16px 0 4px;
}
.lu-faq dt:first-of-type { margin-top: 0; }
.lu-faq dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--lu-ink-soft);
}

/* ── Efni sem stendur í hreinu HTML svo skriðlar sjái það ───────────────────
   Leikirnir teiknast með JS og skriðlar sem keyra ekki kóða sáu því nánast
   ekkert. Efnið stendur núna í HTML-inu og JS skiptir því út við hleðslu.
   Sýnileikaúttekt 21.8.2026. */
.lu-efni {
    max-width: 560px;
    margin: 22px auto 0;
    padding: 0 16px;
}
.lu-efni h2 {
    font-family: var(--lu-font-display);
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--lu-ink);
}
.lu-efni ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.75;
    color: var(--lu-ink-soft);
}
/* Svarbútarnir: einn kafli á leikjasíðu, 130 til 170 orð. --lu-ink-soft mælist
   5,30:1 í ljósu þema og 10,94:1 í dökku, hvort tveggja stenst AA. Ekki nota
   --lu-ink-faint hér, hann mældist 2,3:1 og fellur. */
.lu-svarbutur p {
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.75;
    color: var(--lu-ink-soft);
}
.lu-svarbutur p:last-child { margin-bottom: 0; }
/* Tölublokkin á forsíðunni notar sömu typografíu og svarbútarnir. */
.lu-tolur p {
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.75;
    color: var(--lu-ink-soft);
}
.lu-tolur p:last-child { margin-bottom: 0; }
.lu-tolur b { color: var(--lu-ink); font-weight: 800; }
.stod-listi { display: flex; flex-direction: column; gap: 10px; }
.stod-stokkur {
    background: var(--lu-surface);
    border-radius: var(--lu-r-lg, 18px);
    box-shadow: var(--lu-shadow-sm);
    padding: 13px 15px;
}
.stod-stokkur h2 {
    font-family: var(--lu-font-display);
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 3px;
    color: var(--lu-ink);
}
.stod-stokkur .stod-lys,
.stod-stokkur .stod-ord {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--lu-ink-soft);
    margin: 0;
}
.stod-stokkur .stod-ord { margin-top: 6px; }
.stod-stokkur .stod-ord b { color: var(--lu-ink); }

/* Ferskleikalína: „Síðast uppfært". Sýnilegt ferskleikamerki sem svarar til
   dateModified í skemanu (mæling 22.8.2026: engin síða bar dagsetningu).
   Lágstemmt, situr neðst við FAQ-kaflann. */
.ferskt {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lu-ink-soft);
    margin: 18px auto 0;
    max-width: 560px;
    padding: 0 16px;
    text-align: center;
}
.ferskt time { font-variant-numeric: tabular-nums; }