/* =============================================================
   THE UI LANGUAGE — one set of values, both surfaces.
   See UI-LANGUAGE.md (§6½) for what each of these means and why.

   Nothing in the game links this file yet: it is the reference the
   swatch page (public/ui-swatch.html) is built from, and the file
   index.html will import when the DOM pass lands. The canvas reads
   the SAME tokens at boot (readUiTokens), so a colour changed here
   changes the table too — that is the whole point of the exercise.
   ============================================================= */

:root {
  /* ---- text scale: the My Settings slider, up to 2x -------------- */
  --text-scale: 1;

  /* ---- surfaces -------------------------------------------------- */
  /* A "plate" is the dark rounded slab every control sits on. Quiet is
     for invitations (Move Here); the full weight is for decisions. */
  --ui-plate:        rgba(20, 20, 20, 0.85);
  /* A floating menu sits OVER cards you mustn't read through, so it is denser
     than a button resting on the felt. Two weights, and only two. */
  --ui-plate-strong: rgba(20, 20, 20, 0.92);
  --ui-plate-quiet:  rgba(20, 20, 20, 0.50);
  --ui-plate-hover:  rgba(62, 62, 62, 0.95);
  /* Pressed goes BRIGHTER than hover, not darker: these plates are already
     near-black, so there is no darker for a 130ms flash to be seen in. The
     plate also sinks a pixel and its label goes with it. */
  --ui-plate-press:  rgba(104, 104, 104, 0.96);
  --ui-panel-bg:     rgba(18, 26, 18, 0.97);
  --ui-scrim:        rgba(0, 0, 0, 0.55);

  /* ---- edges ----------------------------------------------------- */
  --ui-edge:         rgba(255, 255, 255, 0.80);
  --ui-edge-quiet:   rgba(255, 255, 255, 0.35);
  --ui-edge-w:       2px;

  /* ---- text ------------------------------------------------------ */
  --ui-text:         rgba(255, 255, 255, 0.95);
  --ui-text-dim:     rgba(255, 255, 255, 0.65);
  --ui-text-on-go:   #10241a;

  /* ---- the one accent: green means "this is the move" ------------ */
  --ui-go:           #2ecc71;
  --ui-go-hover:     #45dd85;
  --ui-go-press:     #25a25a;
  --ui-go-soft:      rgba(46, 204, 113, 0.18);

  /* ---- gold: the table's own voice, and its metal -----------------
     Two jobs, two values. The LAMP gold is the bright one players
     already know from a typed message and the celebration frame — it
     is text, and it is always somebody talking. The BRASS is the metal
     of the group bands on the felt (same ramp), and it frames things
     the table says rather than things you press. Green is a button,
     gold is the table. Never the other way round. */
  --ui-gold:         #f1c40f;   /* a player's own words */
  --ui-gold-soft:    rgba(241, 196, 15, 0.35);
  --ui-brass-dark:   #8f6216;
  --ui-brass:        #c9992e;
  --ui-brass-lit:    #e6c274;
  --ui-brass-light:  #fbeab6;
  --ui-wood:         rgba(38, 26, 14, 0.88);   /* the plaque behind the brass */

  /* ---- and the one warning: red means "this cannot be undone" ---- */
  --ui-stop:         #c0392b;
  --ui-stop-soft:    rgba(192, 57, 43, 0.18);

  /* ---- shape ----------------------------------------------------- */
  --ui-r-plate:      8px;    /* buttons, rows, pills on the felt */
  --ui-r-panel:      14px;   /* overlay panels */
  --ui-r-round:      999px;  /* switches, dots */

  /* ---- type: four steps, nothing in between ----------------------
     The steps are plain NUMBERS, and the pixel value is composed below.
     Canvas code can't evaluate a CSS calc(), so a token it has to read
     never contains one — it reads the number and does the multiply
     itself. Same rule for any token the felt needs. */
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ui-t-label-n:    13;   /* counts, captions */
  --ui-t-body-n:     15;   /* button labels, rows, status */
  --ui-t-title-n:    17;   /* primary actions, row names, drawer rows */
  --ui-t-heading-n:  22;   /* panel headings */
  --ui-t-display-n:  26;   /* the front door only — see below */
  --ui-t-label:      calc(var(--ui-t-label-n) * 1px * var(--text-scale));
  --ui-t-body:       calc(var(--ui-t-body-n) * 1px * var(--text-scale));
  --ui-t-title:      calc(var(--ui-t-title-n) * 1px * var(--text-scale));
  --ui-t-heading:    calc(var(--ui-t-heading-n) * 1px * var(--text-scale));
  /* DISPLAY is the fifth step and it has exactly one job: the join screen,
     which is the first thing anyone sees, is read across a room, and is often
     the moment someone decides whether this is for them. Nothing else may use
     it — a second caller means it isn't a display size, it's a title. */
  --ui-t-display:    calc(var(--ui-t-display-n) * 1px * var(--text-scale));

  /* ---- space ----------------------------------------------------- */
  --ui-s1: 4px;
  --ui-s2: 8px;
  --ui-s3: 12px;
  --ui-s4: 18px;

  /* ---- size: a finger is 44px, a menu row is roomier -------------- */
  --ui-tap-min:      44px;
  --ui-row-h:        54px;

  --ui-fade:         120ms;
}

/* =============================================================
   ACTION — "do this now". The default control.
   ============================================================= */
.ui-btn {
  font-family: var(--ui-font);
  font-size: var(--ui-t-body);
  font-weight: 700;
  color: var(--ui-text);
  background: var(--ui-plate);
  border: var(--ui-edge-w) solid var(--ui-edge);
  border-radius: var(--ui-r-plate);
  min-height: var(--ui-tap-min);
  padding: 0 var(--ui-s4);
  cursor: pointer;
  transition: background var(--ui-fade), border-color var(--ui-fade), transform var(--ui-fade);
}
.ui-btn:hover:not([disabled])  { background: var(--ui-plate-hover); }
.ui-btn:active:not([disabled]) { background: var(--ui-plate-press); transform: translateY(1px); }
.ui-btn:focus-visible          { outline: 3px solid var(--ui-go); outline-offset: 2px; }
.ui-btn[disabled]              { opacity: 0.45; cursor: default; }

/* The one obvious action in a moment gets the green. Never two at once. */
.ui-btn.is-go {
  background: var(--ui-go);
  border-color: transparent;
  color: var(--ui-text-on-go);
  font-size: var(--ui-t-title);
}
.ui-btn.is-go:hover:not([disabled])  { background: var(--ui-go-hover); }
.ui-btn.is-go:active:not([disabled]) { background: var(--ui-go-press); }

/* An invitation rather than an intervention (Move Here on an empty chair). */
.ui-btn.is-quiet {
  background: var(--ui-plate-quiet);
  border-color: var(--ui-edge-quiet);
  border-width: 1.5px;
  font-weight: 400;
  color: var(--ui-text-dim);
}

/* Cannot be undone: Remove Player, Remove All Cards. Always confirmed. */
.ui-btn.is-stop {
  border-color: var(--ui-stop);
  color: #ffd9d3;
  background: var(--ui-stop-soft);
}
.ui-btn.is-stop:hover:not([disabled]) { background: var(--ui-stop); color: #fff; }

/* =============================================================
   OPTION ROWS — the three menu controls. Same row, three jobs,
   each with a mark on the right that says which job it is.
   ============================================================= */
.ui-option {
  display: flex;
  align-items: center;
  gap: var(--ui-s3);
  width: 100%;
  min-height: var(--ui-row-h);
  padding: var(--ui-s3) var(--ui-s4);
  margin-bottom: var(--ui-s2);
  text-align: left;
  font-family: var(--ui-font);
  color: var(--ui-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ui-r-plate);
  cursor: pointer;
  transition: background var(--ui-fade), border-color var(--ui-fade);
}
.ui-option:hover:not([disabled])  { background: rgba(255, 255, 255, 0.14); }
.ui-option:active:not([disabled]) { background: rgba(255, 255, 255, 0.20); }
.ui-option[disabled]              { opacity: 0.45; cursor: default; }
.ui-option:focus-visible          { outline: 3px solid var(--ui-go); outline-offset: 2px; }
.ui-option .ui-option-text { flex: 1; }
.ui-option .ui-name {
  display: block;
  font-size: var(--ui-t-title);
  font-weight: 700;
}
.ui-option .ui-desc {
  display: block;
  margin-top: var(--ui-s1);
  font-size: var(--ui-t-label);
  color: var(--ui-text-dim);
  line-height: 1.35;
}

/* ---- pick one of these (Select Game, table layout) --------------- */
.ui-option.as-choice .ui-mark {
  width: 24px; height: 24px; flex: 0 0 24px;
  border: 2px solid var(--ui-edge-quiet);
  border-radius: var(--ui-r-round);
  position: relative;
}
.ui-option.as-choice.is-selected {
  border-color: var(--ui-go);
  background: var(--ui-go-soft);
}
.ui-option.as-choice.is-selected .ui-mark { border-color: var(--ui-go); }
.ui-option.as-choice.is-selected .ui-mark::after {
  content: ''; position: absolute; inset: 4px;
  background: var(--ui-go); border-radius: var(--ui-r-round);
}

/* ---- on or off, independently (Card Snapping, Legacy Controls) --- */
.ui-option.as-switch .ui-mark {
  width: 52px; height: 30px; flex: 0 0 52px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--ui-r-round);
  position: relative;
  transition: background var(--ui-fade);
}
.ui-option.as-switch .ui-mark::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: var(--ui-r-round);
  background: #fff;
  transition: transform var(--ui-fade);
}
.ui-option.as-switch.is-on .ui-mark { background: var(--ui-go); }
.ui-option.as-switch.is-on .ui-mark::after { transform: translateX(22px); }

/* ---- opens another panel (Card Design, Text Size) ---------------- */
.ui-option.as-drill .ui-mark {
  flex: 0 0 auto;
  font-size: var(--ui-t-heading);
  color: var(--ui-text-dim);
}

/* =============================================================
   PANELS & PILLS
   ============================================================= */
.ui-panel {
  background: var(--ui-panel-bg);
  border-radius: var(--ui-r-panel);
  padding: var(--ui-s4);
  color: var(--ui-text);
  font-family: var(--ui-font);
}
.ui-panel h2 {
  margin: 0 0 var(--ui-s2);
  font-size: var(--ui-t-heading);
}
.ui-panel > p {
  margin: 0 0 var(--ui-s4);
  font-size: var(--ui-t-body);
  color: var(--ui-text-dim);
}
/* A player's own words, wherever they appear: the table message, an
   announcement, a name in a celebration. Gold is the voice. */
.ui-voice {
  color: var(--ui-gold);
  font-family: var(--ui-font);
  font-weight: 600;
}

/* STATUS — what the table is saying: THE PLAQUE. Never clickable, so it takes
   none of a button's cues — fully rounded rather than the button's softened
   rectangle, brass rather than white, no hover and no press. Lit along the top
   edge and shadowed below so it reads as a small engraved nameplate sitting on
   the table, which is the one thing a flat rectangle could never say.
   (Chosen 2026-09-27 from three candidates; the other two are in the swatch
   page's history, not here.) */
.ui-pill {
  display: inline-block;
  padding: var(--ui-s2) var(--ui-s3);
  border-radius: var(--ui-r-round);
  background: linear-gradient(rgba(60, 42, 20, 0.92), rgba(28, 18, 9, 0.94));
  color: var(--ui-brass-light);
  font-family: var(--ui-font);
  font-size: var(--ui-t-body);
  font-weight: 700;
  border: 2px solid var(--ui-brass);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.45),
              inset 0 -2px 6px rgba(0, 0, 0, 0.55),
              0 3px 8px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
/* It's your move — the table leaning toward you. Brighter metal and a warm
   glow rather than green: green belongs to the button you press. */
.ui-pill.is-mine {
  color: #fff8e1;
  border-color: var(--ui-gold);
  box-shadow: 0 0 18px var(--ui-gold-soft), inset 0 1px 0 rgba(255, 245, 210, 0.5);
}
.ui-pill.is-stop { border-color: var(--ui-stop); color: #ffd9d3; }