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

/*
 * ── Enjeu design system: print-and-play light, paper and gold ──
 *
 * See DESIGN.md. The scene is a child at a table in daylight with printed
 * cards, so the PAGE is bright paper and the CARDS are exactly what the
 * printer will produce: white faces, black frames, six flat face colours.
 * Nothing on screen should look better than it will on paper.
 *
 * Motif: the bet. Pips (round dots), chips, and a card turned sideways.
 * Panels carry a hard 3px bottom edge (a card lying on the table), no
 * blur, no glass. Ease-out only.
 *
 * This site carries its own tokens and does not link the CDN base.css.
 * That is the sanctioned dialect, recorded in docs/design/dialects.md.
 */

:root {
  /* The six face colours. Used on cards, figures and the element cycle;
     every one is paired with a sigil on the card, never colour alone. */
  --fire:  #dc2626;
  --water: #2563eb;
  --earth: #16a34a;
  --wind:  #64748b;
  --extra: #ffffff;
  --boss:  #111111;
  --gold:  #eab308;
  --gold-bright: #facc15;
  --gold-deep: #a16207;       /* gold as TEXT on paper: 5.6:1, the fill is 1.9:1 */

  --accent: var(--gold);
  --accent-bright: var(--gold-bright);
  --accent-deep: var(--gold-deep);

  /* Paper surfaces */
  --bg:           #f6f3eb;
  --surface-1:    #fffdf8;
  --surface-2:    #f0ebde;
  --surface-sunk: #e8e2d2;
  --border:        #ddd6c3;
  --border-strong: #a89d80;

  /* Ink: warm near-black, never #000 on the page (the cards use #111 on purpose) */
  --text-primary:   #1c1917;
  --text-secondary: #44403c;
  --text-muted:     #625c52;   /* 5.9:1 on --surface-1 */
  --text-on-accent: #1c1917;

  --danger: #b91c1c;
  --danger-hover: #dc2626;
  --ok: #15803d;
  --surface-toast: #1c1917;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.78rem; --text-sm: 0.9rem; --text-base: 1rem;
  --text-lg: 1.15rem; --text-xl: 1.45rem; --text-2xl: 1.9rem; --text-3xl: 2.5rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;

  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms; --dur: 200ms;

  --control-height: 44px;
  --control-height-sm: 36px;

  /* A card lying on the table: a hard bottom edge, no blur. */
  --table-edge: 0 3px 0 var(--border-strong);

  --z-sticky-header: 200;
  --z-modal: 400;
  --z-toast: 500;
}

/* ── Header skin (the one sanctioned site-local header CSS: tokens only) ── */
html:not([data-theme]) .header-bar[data-header-skin="custom"] {
  --header-bg-start: #2b2416;
  --header-bg-mid:   #18140d;
  --header-bg-end:   #0b0906;
  --header-accent:   #facc15;
}

[hidden] { display: none !important; }

html { height: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font);
  background: var(--bg);
  min-height: 100%;
  color: var(--text-primary);
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
body.modal-open { overflow: hidden; }

main#main { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.view-root { flex: 1; display: flex; flex-direction: column; }

a { color: var(--accent-deep); }
a:hover { color: var(--text-primary); }
code { font-family: var(--mono); font-size: 0.92em; background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
strong { font-weight: 700; }

/* ── Layout ────────────────────────────────────────────────── */
.container {
  max-width: 980px; width: 100%; margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
  flex: 1;
}
.container--wide { max-width: 1200px; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack--tight { gap: var(--space-4); }
.stack--loose { gap: var(--space-8); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.kicker {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Panel: the one structural primitive ───────────────────── */
.panel {
  position: relative;
  background: var(--surface-1);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--table-edge);
}
.panel--sunk { background: var(--surface-2); border-color: var(--border); box-shadow: none; }
.panel--tight { padding: var(--space-4); }
.panel__title { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.panel__lead { color: var(--text-secondary); max-width: 62ch; }
.panel--accent { border-color: var(--gold-deep); box-shadow: 0 3px 0 var(--gold-deep); }
.panel--danger { border-color: var(--danger); box-shadow: 0 3px 0 var(--danger); }

/* ── Header nav tabs (site-owned control inside .header-actions) ─ */
.sk-nav {
  display: flex; gap: var(--space-1); min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.sk-nav::-webkit-scrollbar { display: none; }
.sk-tab {
  flex: 0 0 auto;
  min-height: var(--header-control-h, 40px);
  padding: 0 var(--space-3);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255,255,255,0.92);
  font: inherit; font-size: var(--text-sm); font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.sk-tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sk-tab[aria-selected="true"] {
  background: var(--gold); color: #1c1917; border-color: var(--gold);
}
.sk-tab svg { width: 16px; height: 16px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--text-sm); font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--border-strong);
  background: var(--surface-1); color: var(--text-primary);
  box-shadow: var(--table-edge);
  transition: background-color var(--dur) var(--ease-out), color var(--dur), border-color var(--dur),
              transform var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border-strong); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn--sm { min-height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--text-base); }
.btn--block { width: 100%; }
.btn--icon { min-width: var(--control-height); padding: 0; }
.btn--primary { background: var(--gold); border-color: var(--gold-deep); color: var(--text-on-accent); box-shadow: 0 3px 0 var(--gold-deep); }
.btn--primary:hover { background: var(--gold-bright); }
.btn--primary:active { box-shadow: 0 1px 0 var(--gold-deep); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text-primary); }
.btn--ghost:active { transform: none; box-shadow: none; }
.btn--danger { background: var(--danger); border-color: #7f1d1d; color: #fff; box-shadow: 0 3px 0 #7f1d1d; }
.btn--danger:hover { background: var(--danger-hover); }
.btn--fire  { --chip: var(--fire); }
.btn--water { --chip: var(--water); }
.btn--earth { --chip: var(--earth); }
.btn--wind  { --chip: var(--wind); }
.btn[aria-pressed="true"], .btn.is-on {
  background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary);
  box-shadow: 0 3px 0 #000;
}
.btn .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--chip, currentColor); border: 1.5px solid rgba(0,0,0,0.25); }

/* Chip toggles (filters) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 2px solid var(--border-strong); background: var(--surface-1);
  font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary);
  transition: background-color var(--dur) var(--ease-out), color var(--dur);
}
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"] { background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip, var(--text-muted)); border: 1px solid rgba(0,0,0,0.25); }

/* Segmented control (die, mode) */
.seg { display: inline-flex; border: 2px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-1); }
.seg button {
  min-height: var(--control-height-sm); padding: 0 12px; border: 0; background: transparent;
  font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; color: var(--text-secondary);
  border-right: 2px solid var(--border);
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--text-primary); color: var(--surface-1); }

/* The language toggle in the header. The .seg control above re-dressed for the
   dark gradient, on the same rules as .sk-tab: translucent white, gold when it
   is the one in use, the kit's control height so it lines up with the tabs and
   the home button. It has to come AFTER the .seg block and not beside .sk-tab,
   where it was first written: `.seg--lang button[aria-pressed="true"]` and
   `.seg button[aria-pressed="true"]` have identical specificity, so the one
   further down the file is the one that paints, and the toggle rendered in the
   panel's dark ink on the dark header instead of gold. */
.seg--lang {
  flex: 0 0 auto;
  border-color: rgba(255,255,255,0.18);
  background: transparent;
  align-self: center;
}
.seg--lang button {
  min-height: var(--header-control-h, 40px);
  padding: 0 10px;
  color: rgba(255,255,255,0.92);
  font-size: var(--text-xs); letter-spacing: 0.04em;
  border-right-color: rgba(255,255,255,0.18);
}
.seg--lang button:hover { background: rgba(255,255,255,0.1); color: #fff; }
.seg--lang button[aria-pressed="true"] { background: var(--gold); color: #1c1917; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
.field input[type="number"], .field select {
  min-height: var(--control-height-sm); padding: 0 10px; border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-1); font: inherit; color: var(--text-primary);
}
.field input[type="range"] { accent-color: var(--gold-deep); }

/* ── Pips (the bet / check vocabulary, reused in copy) ─────── */
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: inline-block; }
.pips i.off { background: transparent; border: 1.5px solid currentColor; opacity: 0.4; }
/* The check, on the same traffic light the card is printed with. The colour
   comes from face.js (riskDots) as --risk, so the page cannot teach one ramp
   while the paper prints another. Count still carries the whole meaning. */
.pips--risk i { background: var(--risk, currentColor); border: 1.5px solid rgba(28,25,23,0.35); }

/* ── Shared card-and-figure primitives ─────────────────────── */
/* Used by BOTH Learn and Play, which is why they are here and not in either
   view's stylesheet: .action-card is a card you can click, .figure is a
   brick-built stand-in, .die-face is a die, .ladder is the checks table. A copy
   in learn.css and another in play.css would drift on the first edit. */
.action-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-3); }
.action-card { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 10px; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; transition: transform var(--dur) var(--ease-out); }
.action-card svg { width: 100%; height: auto; filter: drop-shadow(0 2px 0 var(--border-strong)); }
.action-card:hover:not(:disabled) { transform: translateY(-4px); }
.action-card:disabled,
.action-card[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.action-card[aria-pressed="true"] { outline: 3px solid var(--gold-deep); outline-offset: 2px; border-radius: 10px; }

.figure { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.figure svg { width: 120px; height: 120px; }
.figure b { font-size: var(--text-sm); }
.figure span { font-size: var(--text-xs); color: var(--text-muted); }
.figure.is-hit svg { animation: shake 400ms var(--ease-out); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.die-face { width: 64px; height: 64px; display: grid; place-items: center; border: 3px solid var(--text-primary); border-radius: 14px; font-size: 28px; font-weight: 900; background: var(--surface-1); box-shadow: var(--table-edge); font-variant-numeric: tabular-nums; }
.die-face.is-rolling { animation: wobble 500ms var(--ease-out); }
@keyframes wobble { 0% { transform: rotate(-12deg) scale(0.9); } 60% { transform: rotate(8deg) scale(1.05); } 100% { transform: none; } }

.ladder { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ladder th, .ladder td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.ladder th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.ladder td:first-child, .ladder th:first-child { text-align: left; font-weight: 700; }
.ladder tr.is-mine td { background: var(--surface-2); font-weight: 800; }
.table-wrap { overflow-x: auto; }

/* Per-view blocks live in learn.css, browse.css and play.css. One view per
   file, so a change to the tutorial cannot reach the runner. */

/* ── Balance view ──────────────────────────────────────────── */
.bal-grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.bal-grid th, .bal-grid td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: right; }
.bal-grid th:first-child, .bal-grid td:first-child { text-align: left; }
.bal-grid th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.bal-grid td.best { font-weight: 900; background: #fef9c3; }
.progress { height: 8px; background: var(--surface-sunk); border-radius: 999px; overflow: hidden; border: 1px solid var(--border-strong); }
.progress i { display: block; height: 100%; background: var(--gold); transition: width 200ms; }

/* ── Modal ─────────────────────────────────────────────────── */
.modal[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal__backdrop { position: absolute; inset: 0; background: rgba(28, 25, 23, 0.55); }
.modal__dialog {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(100%, 560px); max-height: min(90vh, 720px); overflow: hidden;
  background: var(--surface-1); border: 2px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 6px 0 var(--border-strong), 0 24px 48px rgba(28,25,23,0.25);
}
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 2px solid var(--border); }
.modal__header h2 { font-size: var(--text-lg); font-weight: 800; }
.modal__body { padding: var(--space-6); overflow: auto; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-toast);
  max-width: min(360px, calc(100vw - var(--space-8)));
  background: var(--surface-toast); color: #fff; border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 600;
  pointer-events: none; transform: translateY(8px); opacity: 0;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.toast.visible { opacity: 1; transform: translateY(0); }

/* ── Focus, skip link, motion ───────────────────────────────── */
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.skip-link {
  position: absolute; top: -100%; left: var(--space-4); z-index: 1000;
  padding: var(--space-2) var(--space-4); background: var(--gold); color: var(--text-on-accent);
  font-weight: 700; font-size: var(--text-sm); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; transition: top var(--dur);
}
.skip-link:focus { top: 0; }
.is-flash { animation: flash 1.2s var(--ease-out); }
@keyframes flash { 0% { box-shadow: 0 0 0 4px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 600px) {
  .container { padding: var(--space-6) var(--space-4) var(--space-8); }
  .toast { left: var(--space-4); right: var(--space-4); max-width: none; }
}