/* ═══════════════════════════════════════════════════════════════
   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. */
:root {
  --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: #8A7FB5;
  --lu-line:      #423873;
  --lu-shadow-color: #000000;
  --lu-absent:    #4A4170;
  --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); }
a { color: var(--lu-grape); }
::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 {
  display: flex; align-items: center; gap: 9px;
  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);
}
.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 {
  margin-top: 10px; 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; }
.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; color: #fff;
  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); }
.lu-game.g-grape { --card-color: var(--lu-grape); --card-deep: var(--lu-grape-deep); }
.lu-game.g-grass { --card-color: var(--lu-grass); --card-deep: var(--lu-grass-deep); }
.lu-game.g-sunny { --card-color: var(--lu-sunny); --card-deep: var(--lu-sunny-deep); }
.lu-game.g-coral { --card-color: var(--lu-coral); --card-deep: var(--lu-coral-deep); }
.lu-game.g-sunny .lu-game__go { color: var(--lu-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; }

/* ── Badges ─────────────────────────────────────────────────── */
.lu-badges {
  max-width: 520px; margin: 0 auto 28px; padding: 0 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px;
}
.lu-badges .badge-item, .badge-item {
  aspect-ratio: 1; border-radius: var(--lu-r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--lu-surface); box-shadow: var(--lu-shadow-sm);
  border: 2px solid transparent; padding: 10px 6px; gap: 5px;
  transition: transform var(--lu-dur-fast) var(--lu-bounce);
}
.badge-item img { width: 48px; height: 48px; object-fit: contain; }
.badge-item .badge-label { font-family: var(--lu-font-ui); font-size: 9.5px; font-weight: 800; color: var(--lu-ink-soft); text-align: center; line-height: 1.2; }
.badge-item.locked { opacity: 0.32; filter: grayscale(0.4); }
.badge-item.earned { border-color: var(--lu-sunny); background: var(--lu-bg-tint); }
.badge-item.earned .badge-label { color: var(--lu-ink); }
.badge-item:hover { transform: translateY(-2px) scale(1.03); }

/* ── 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); }

/* ═══════════════════════════════════════════════════════════════
   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: #fff;
  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: #fff; box-shadow: 0 3px 0 var(--lu-grass-deep); }
.keyboard .key.present,  .key.is-present { background: var(--lu-present); color: var(--lu-ink); box-shadow: 0 3px 0 var(--lu-sunny-deep); }
.keyboard .key.absent,   .key.is-absent  { background: var(--lu-absent);  color: #fff; 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,
:root[data-theme="dark"] .badge-item,
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,
body.dark-mode .badge-item {
  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)); }
/* locked badges shouldn't vanish into the dark bg */
:root[data-theme="dark"] .badge-item.locked,
body.dark-mode .badge-item.locked { opacity: 0.6; filter: grayscale(0.2); }
:root[data-theme="dark"] .badge-item.earned,
body.dark-mode .badge-item.earned { border-color: var(--lu-sunny); background: var(--lu-surface-2); }

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