/* ── Fonts ────────────────────────────────────────────────── */
@font-face {
  font-family: "Wremena";
  src: url("/fonts/wremena/Wremena.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Wremena";
  src: url("/fonts/wremena/Wremena-Bold.woff2") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "Basteleur";
  src: url("/fonts/basteleur/Basteleur-Bold.woff2") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "Basteleur";
  src: url("/fonts/basteleur/Basteleur-Moonlight.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Gaeilge";
  src: url("/fonts/gaeilge/Gaeilge.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Distro";
  src: url("/fonts/distro/DISTROB_.woff") format("woff");
  font-weight: 700;
}
@font-face {
  font-family: "Gossip";
  src: url("/fonts/gossip/Gossip-MedSquare.woff2") format("woff2");
  font-weight: 400;
}

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

:root {
  /* ── Seasonal hue anchors (degrees, 0–360) ───────────────
     Change these to remap the entire palette for a season.   */
  --hue-spring: 95;   /* yellow-green */
  --hue-summer: 50;   /* golden */
  --hue-fall:   28;   /* warm orange-brown */
  --hue-winter: 210;  /* cool blue */

  /* ── Type framework ──────────────────────────────────────
     Swap these per-state to vary typography across seasons.  */
  --font-display:  "Gossip", monospace;
  --font-heading:  "Basteleur", "Wremena", sans-serif;
  --font-body:     "Wremena", system-ui, sans-serif;

  /* ── Sizing framework ────────────────────────────────────
     Adjust --size-scale per-state to vary the overall scale. */
  --size-scale: .9;
  --base-size:  calc(22px * var(--size-scale));

  /* ── Active state (driven by data-* attributes and JS) ───
     These three variables are the only knobs the rest of the
     palette consults.  CSS selectors and JS set them;
     everything else is derived automatically.               */
  --season-hue:      var(--hue-fall); /* overridden by [data-season] */
  --time-l-shift:    0%;              /* 0% day → -14% night (dark tones)  */
  --time-l-shift-bg: 0%;             /* 0% day →  -8% night (light tones) */
  --rank-sat:        1;              /* 0.2–1; set inline by JS            */

  /* ── Derived colour palette ──────────────────────────────
     All colours are computed from the three active-state vars
     above.  To add a new colour, express it in the same form:
       hsl(<hue>, calc(--rank-sat * <base-sat>%), calc(<base-l>% + <shift>))
                                                                            */
  --bark:    hsl(var(--season-hue), calc(var(--rank-sat) * 40%), calc(17% + var(--time-l-shift)));
  --acorn:   hsl(var(--season-hue), calc(var(--rank-sat) * 40%), calc(39% + var(--time-l-shift)));
  --leaf:    hsl(calc(var(--season-hue) + 116), calc(var(--rank-sat) * 26%), calc(38% + var(--time-l-shift)));
  --cream:   hsl(var(--season-hue), calc(var(--rank-sat) * 55%), calc(89% + var(--time-l-shift-bg)));
  --sky:     hsl(calc(var(--season-hue) + 180), calc(var(--rank-sat) * 45%), calc(87% + var(--time-l-shift-bg)));
  --text:    hsl(var(--season-hue), calc(var(--rank-sat) * 50%), calc(7%  + var(--time-l-shift)));
  --muted:   hsl(var(--season-hue), calc(var(--rank-sat) * 18%), calc(40% + var(--time-l-shift)));
  --border:  hsl(var(--season-hue), calc(var(--rank-sat) * 28%), calc(72% + var(--time-l-shift-bg)));
  --divider: hsl(var(--season-hue), calc(var(--rank-sat) * 22%), calc(87% + var(--time-l-shift-bg)));
  --surface: hsl(var(--season-hue), calc(var(--rank-sat) * 18%), calc(97% + var(--time-l-shift-bg)));

  /* ── Type scale — all relative to --base-size ────────── */
  --text-xs:   calc(var(--base-size) * 0.75);
  --text-sm:   calc(var(--base-size) * 0.875);
  --text-md:   calc(var(--base-size) * 1);
  --text-lg:   calc(var(--base-size) * 1.25);
  --text-xl:   calc(var(--base-size) * 1.6);

  /* ── Spacing scale ───────────────────────────────────── */
  --space-1: calc(var(--base-size) * 0.25);
  --space-2: calc(var(--base-size) * 0.5);
  --space-3: calc(var(--base-size) * 0.75);
  --space-4: calc(var(--base-size) * 1);
  --space-5: calc(var(--base-size) * 1.5);
  --space-6: calc(var(--base-size) * 2);
}

/* ── Season overrides ────────────────────────────────────────
   Each selector only needs to set --season-hue; the derived
   palette recalculates automatically.                        */
[data-season="spring"] { --season-hue: var(--hue-spring); }
[data-season="summer"] { --season-hue: var(--hue-summer); }
[data-season="fall"]   { --season-hue: var(--hue-fall); }
[data-season="winter"] { --season-hue: var(--hue-winter); }

/* ── Time-of-day overrides ───────────────────────────────── */
[data-time="day"] {
  --time-l-shift:    0%;
  --time-l-shift-bg: 0%;
}
[data-time="night"] {
  --time-l-shift:    -90%;
  --time-l-shift-bg:  -50%;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text);
  font-size: var(--base-size);
  line-height: 1.5;
}

/* ── App shell ────────────────────────────────────────────── */
#app {
  display: grid;
  grid-template-rows: 1fr;
  height: 100%;
}

/* ── Typography ───────────────────────────────────────────── */
h1 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--bark); text-transform: uppercase; letter-spacing: 0.04em; }
h2 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--bark); text-transform: uppercase; letter-spacing: 0.04em; }
p  { color: var(--muted); }

/* ── Lobby banner ─────────────────────────────────────────── */
.lobby-banner {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 13vw, 8rem);
  font-weight: 700;
  font-variant: small-caps;
  text-transform: uppercase;
  color: var(--bark);
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--space-2);
}

/* ── Forms ────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
input[type="number"] {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: var(--text-md);
  color: var(--text);
  transition: border-color 0.15s;
}
input:focus { outline: none; border-color: var(--acorn); }

label { display: block; margin-bottom: var(--space-1); font-size: var(--text-md); color: var(--muted); }
.field { margin-bottom: var(--space-4); }

/* ── Buttons ──────────────────────────────────────────────── */
button {
  cursor: pointer;
  border: none;
  padding: var(--space-2) var(--space-4);
  font-family: "Distro", var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  transition: opacity 0.15s;
  border-radius: 4px;
}
button:active { opacity: 0.75; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary   { background: var(--bark);  color: var(--cream); font-size: var(--text-lg); }
.btn-secondary { background: var(--acorn); color: #fff; }
.btn-ghost     { background: transparent; color: var(--bark); border: 1.5px solid var(--bark); }
.btn-full      { width: 100%; }

/* ── Card / panel ─────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  padding: var(--space-3);
  border-radius: 6px;
}
#gameover-modal h2 { font-family: "Distro", var(--font-heading); text-transform: none; letter-spacing: 0; }

/* ── Screen wrapper ───────────────────────────────────────── */
/* align-content:start keeps content anchored at top so nothing
   is clipped above the scroll origin on short viewports.      */
.screen {
  display: grid;
  align-content: start;
  padding: var(--space-3);
  overflow-y: auto;
}
.screen > .card { width: 100%; }

/* ── Map view ─────────────────────────────────────────────── */
#map-view {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100svh;
}
#map { min-height: 0; } /* prevent grid blowout */

/* ── Bottom bar ───────────────────────────────────────────── */
.bottom-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--divider);
  padding: var(--space-2) 0;
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
}
.bottom-bar button {
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  gap: var(--space-1);
  background: none;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: var(--space-1) 0;
  min-width: 0;
}
.bottom-bar button.active { color: var(--bark); }
.bottom-bar button span.icon { font-size: var(--text-lg); }

/* ── Notification / toast ─────────────────────────────────── */
#toast {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bark);
  color: var(--cream);
  padding: var(--space-2) var(--space-4);
  font-family: "Distro", var(--font-heading);
  font-size: var(--text-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  white-space: nowrap;
  max-width: 90vw;
  z-index: 999;
}
#toast.show  { opacity: 1; }
#toast.error { background: #7a1a1a; }


/* ── Top panel (popups, modals) ───────────────────────────── */
.top-panel {
  position: fixed;
  top: 4rem;
  left: 1rem;
  right: 1rem;
  z-index: 300;
  animation: panel-slide-in 0.25s ease forwards;
}
.top-panel.hidden { display: none !important; }
@keyframes panel-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Badge ────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  background: var(--leaf);
  color: #fff;
  border: 1px solid var(--leaf);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ── Auth card interior grid ──────────────────────────────── */
.auth-card {
  display: grid;
  gap: var(--space-4);
}
.auth-join-code { display: grid; gap: var(--space-2); }
.auth-login     { display: grid; gap: var(--space-3); }
.auth-register  { display: grid; gap: var(--space-3); }
.auth-step.hidden { display: none; }
.auth-checkbox  { display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
                  font-size: var(--text-sm); color: var(--bark); margin: var(--space-2) 0; }
.auth-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bark); }
.btn-sm         { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); }
.settings-row   { display: flex; justify-content: space-between; align-items: center;
                  padding: var(--space-3) 0; border-bottom: 1px solid var(--divider); }
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: var(--text-sm); color: var(--bark); opacity: 0.7; }
.settings-value { font-weight: 600; }

/* Passphrase input with overlaid toggle button */
.passphrase-wrap {
  position: relative;
}
.passphrase-wrap input {
  padding-right: var(--space-6);
}
.btn-icon {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

/* ── Lobby card interior grid ─────────────────────────────── */
.lobby-card {
  display: grid;
  grid-template-areas:
    "greeting"
    "active-games"
    "divider"
    "actions"
    "completed-games";
  gap: var(--space-4);
}
.lobby-card > .lobby-greeting        { grid-area: greeting; }
.lobby-card > .lobby-active-games    { grid-area: active-games; }
.lobby-card > .lobby-divider         { grid-area: divider; }
.lobby-divider                       { border: none; border-top: 1px solid var(--divider); }
.lobby-card > .lobby-actions         { grid-area: actions; display: grid; gap: var(--space-3); }
.lobby-card > .lobby-completed-games { grid-area: completed-games; }

/* ── Clickable join code ──────────────────────────────────── */
code.copy-code-btn {
  cursor: pointer;
  border-bottom: 1px dashed var(--muted);
  color: var(--acorn);
}
code.copy-code-btn:hover { color: var(--bark); border-bottom-color: var(--bark); }

/* ── Scores panel ─────────────────────────────────────────── */
#scores-panel {
  position: fixed;
  top: 0.3rem;
  left: 0.3rem;
  right: 0.3rem;
  bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}
#scores-panel > .lookout-tab-content {
  grid-row: 3;
  grid-column: 1;
}
.scores-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
}
.scores-close { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }

.scores-body {
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.scores-awards {
  padding: var(--space-3) 0;
  text-align: center;
}

.scores-stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  color: var(--muted);
  padding: var(--space-3) 0;
}

/* Ranked score rows — background set inline by JS; padding added here */
.scores-body > div > .score-row {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* Player name: truncate with ellipsis; min-width:0 lets 1fr actually shrink */
.score-row .player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Activity log ─────────────────────────────────────────── */
.activity-log {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-xs);
}
.activity-log h2 { margin: 0; }
.activity-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
}

/* ── Lookout tabs ────────────────────────────────────────── */
.lookout-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--divider);
}
.lookout-tab {
  background: none;
  border: none;
  padding: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.lookout-tab.active {
  color: var(--bark);
  border-bottom-color: var(--bark);
}
.lookout-tab-content {
  overflow-y: auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
}
.lookout-tab-content[data-tab="activity"] {
  display: grid;
  grid-template-rows: 1fr auto;
}
.activity-feed {
  overflow-y: auto;
  min-height: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-xs);
  align-content: start;
}
.chat-input-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--divider);
}
.chat-input-bar input {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border, var(--divider));
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  min-width: 0;
}
.activity-chat {
  color: #c9b800;
}
[data-time="day"] .activity-chat {
  color: #c0392b;
}
.activity-chat strong {
  font-weight: 700;
  margin-right: var(--space-1);
}

/* ── Rules page ───────────────────────────────────────────── */
.rules-body { display: grid; gap: var(--space-2); }
.rules-body h2 { margin-top: var(--space-2); }
.rules-body ul { padding-left: 1.2rem; }

/* ── Scoreboard row ───────────────────────────────────────── */
.score-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--divider);
}
.score-row:last-child { border-bottom: none; }

/* ── Game row (active-games-list) — responsive grid ─────── */
.score-row--game {
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "name  enter enter"
    "meta  code  code";
}
.score-row--game .enter-game-btn { grid-area: enter; justify-self: end; }
.score-row--game .game-name  { grid-area: name; font-family: var(--font-heading); font-weight: 700; font-size: calc(var(--text-md) * 1.4); }
.score-row--game .game-meta  { grid-area: meta; font-size: var(--text-md); color: var(--muted); white-space: nowrap; }
.score-row--game .game-code  { grid-area: code; font-size: var(--text-sm); white-space: nowrap; }

@media (max-width: 480px) {
  .score-row--game {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "enter"
      "meta"
      "code";
  }
  .score-row--game .enter-game-btn { width: 100%; }
}

/* ── Utility ──────────────────────────────────────────────── */
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mt-3 { margin-top: var(--space-5); }
.text-center { text-align: center; }
.text-muted { color: var(--muted); font-size: var(--text-sm); }
.gap { gap: var(--space-3); }
.hidden { display: none !important; }