:root {
  --cb-bg: #0f1720;
  --cb-surface: #182634;
  --cb-surface-2: #223347;
  --cb-tile-border: var(--cb-surface-2);
  --cb-text: #eef3f8;
  --cb-text-dim: #9fb0c0;
  --cb-accent: #ffb84d;
  --cb-accent-text: #1a1300;
  --cb-marked: #2f9e6e;
  --cb-danger: #e2604f;
  --cb-radius: 14px;
}

@media (prefers-color-scheme: light) {
  :root {
    --cb-bg: #f4f6f9;
    --cb-surface: #ffffff;
    --cb-surface-2: #eef2f6;
    /* Distinct from --cb-surface-2 on purpose: that token sits too close to
       both white tiles and the page background to read as a border there. */
    --cb-tile-border: #d3dce4;
    --cb-text: #16212c;
    --cb-text-dim: #5b6b7a;
    --cb-accent: #e08b1f;
    --cb-accent-text: #ffffff;
    --cb-marked: #1f8f5f;
    --cb-danger: #c94a3a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--cb-bg);
  color: var(--cb-text);
  min-height: 100vh;
}

.cb-screen { display: none; }
.cb-screen.cb-visible { display: block; }

/* --- Entry screen --- */

#screenEntry {
  display: none;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#screenEntry.cb-visible { display: flex; }

.cb-card {
  width: 100%;
  max-width: 420px;
  background: var(--cb-surface);
  border-radius: var(--cb-radius);
  padding: 28px 24px;
}

.cb-card h1 { margin: 0 0 4px; font-size: 1.6rem; }
.cb-tagline { margin: 0 0 24px; color: var(--cb-text-dim); }

.cb-field {
  display: block;
  margin-bottom: 18px;
}
.cb-field > span:first-child { display: block; font-weight: 600; margin-bottom: 2px; }
.cb-hint { display: block; font-size: 0.8rem; color: var(--cb-text-dim); margin-bottom: 8px; }

.cb-field input[type="text"],
.cb-field input[type="number"],
.cb-field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--cb-tile-border);
  background: var(--cb-surface-2);
  color: var(--cb-text);
  font-size: 1rem;
}

.cb-seed-row { display: flex; gap: 8px; }
.cb-seed-row input { flex: 1; }

.cb-boardset-actions, .cb-boardset-create {
  display: flex;
  gap: 8px;
  margin: -8px 0 18px;
}
.cb-boardset-actions button, .cb-boardset-create button { flex: 1; font-size: 0.85rem; padding: 8px 6px; }

.cb-btn-primary {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--cb-accent);
  color: var(--cb-accent-text);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.cb-btn-ghost {
  padding: 10px 14px;
  border: 1px solid var(--cb-tile-border);
  border-radius: 10px;
  background: transparent;
  color: var(--cb-text);
  cursor: pointer;
  font-size: 0.95rem;
}

.cb-btn-danger { color: var(--cb-danger); border-color: var(--cb-danger); }

/* The ghost button, worn by an <a>. Everything above assumes a <button>, which comes
   with centred text and no underline for free; a link does not. Kept on the shared
   class rather than a new one so the guide link is the same object as its neighbours
   in the footer, not a lookalike. */
.cb-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

/* Quieter than the buttons around it: this is a way out of the app, not a move within
   it. Dimmed text and a softer border, until you reach for it. */
.cb-guide-link {
  color: var(--cb-text-dim);
  border-color: var(--cb-tile-border);
}
.cb-guide-link:hover,
.cb-guide-link:focus-visible {
  color: var(--cb-text);
  border-color: var(--cb-text-dim);
}

/* Top right on both screens — where a reader looks for help before they look anywhere
   else (Joakim, 2026-08-16). Small and quiet, but the first thing in the corner.
   10px of vertical padding, not 9: at 0.85rem the smaller value lands the button on
   42px, and a thumb in a moving car deserves the full 44. */
.cb-guide-link {
  font-size: 0.85rem;
  padding: 10px 14px;
  white-space: nowrap;
}

/* On the title row itself, not floating above it. A button hovering over the heading
   read as unattached to anything (Joakim, 2026-08-16); on the line it belongs to the
   title, which is what it is - the way into this screen's documentation. */
.cb-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cb-title-row h1 { margin: 0; }

/* The guide sits level with the "Seed:" line, the score below it - so the right edge
   reads help-then-score, and the button lines up with the header rather than hovering
   over it. Same relationship as the title row on the entry screen. */
.cb-board-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.cb-footnote {
  margin: 20px 0 0;
  font-size: 0.75rem;
  color: var(--cb-text-dim);
  text-align: center;
}

/* --- Board screen --- */

#screenBoard { padding: 16px; max-width: 520px; margin: 0 auto; }

/* Top-aligned, not centred: the right column is taller than it used to be now that it
   carries the guide, and centring it left the button floating between the header's
   lines instead of level with the first one. */
.cb-board-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.cb-board-seed, .cb-board-player, .cb-board-set { font-size: 0.85rem; color: var(--cb-text-dim); }
.cb-board-seed strong, .cb-board-player strong, .cb-board-set strong { color: var(--cb-text); }

.cb-score { text-align: right; }
.cb-score-value { font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--cb-accent); }
.cb-score-label { font-size: 0.75rem; color: var(--cb-text-dim); }

.cb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cb-tile {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
  border: 1px solid var(--cb-tile-border);
  background: var(--cb-surface);
  color: var(--cb-text);
  cursor: pointer;
  padding: 4px;
  text-align: center;
  transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cb-tile:active { transform: scale(0.96); }

.cb-tile-icon { font-size: 3.4rem; line-height: 1; }
.cb-tile-name { font-size: 0.68rem; line-height: 1.1; }
.cb-tile-points { font-size: 0.62rem; color: var(--cb-text-dim); }

.cb-tile.cb-marked {
  background: var(--cb-marked);
  border-color: var(--cb-marked);
  color: #fff;
}
.cb-tile.cb-marked .cb-tile-points { color: rgba(255,255,255,0.85); }

.cb-tile.cb-glow {
  box-shadow: 0 0 0 3px var(--cb-accent), 0 0 18px 2px var(--cb-accent);
}

.cb-board-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}
.cb-board-footer button { flex: 1 1 auto; min-width: 120px; font-size: 0.85rem; }

.cb-toast {
  position: fixed;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  background: var(--cb-accent);
  color: var(--cb-accent-text);
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: bottom 0.3s ease;
}
.cb-toast.cb-toast-visible { bottom: 24px; }

/* --- Editor screen --- */

#screenEditor { padding: 24px 16px 60px; }

.cb-editor-card { max-width: 480px; margin: 0 auto; }

.cb-editor-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 20px;
}

.cb-editor-row {
  display: grid;
  grid-template-columns: 48px 1fr 64px;
  gap: 8px;
  align-items: center;
}

.cb-editor-icon-btn {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--cb-tile-border);
  background: var(--cb-surface-2);
  cursor: pointer;
}

.cb-editor-name-input, .cb-editor-points-input {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--cb-tile-border);
  background: var(--cb-surface-2);
  color: var(--cb-text);
  font-size: 0.9rem;
  width: 100%;
}
.cb-editor-points-input { text-align: center; }

.cb-editor-footer {
  display: flex;
  gap: 10px;
}
.cb-editor-footer button { flex: 1; }

/* --- Icon picker overlay --- */

.cb-icon-picker {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.cb-icon-picker.cb-visible { display: flex; }

.cb-icon-picker-inner {
  background: var(--cb-surface);
  border-radius: var(--cb-radius);
  padding: 16px;
  max-width: 420px;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.cb-icon-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 10px;
}
.cb-icon-picker-header button { padding: 4px 10px; }

.cb-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  overflow-y: auto;
}

.cb-icon-choice {
  aspect-ratio: 1;
  font-size: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--cb-tile-border);
  background: var(--cb-surface-2);
  cursor: pointer;
}
.cb-icon-choice:active { transform: scale(0.92); }