/* A board game table: deep felt underneath, parchment cards laid on top, one amber accent for the
   thing you are meant to press. Phone first — 375 px is the design width, and nothing here needs a
   pointer. Dark is the only mode; the table is always the table. */

:root {
  /* The table */
  --felt: #0e2c1c;
  --felt-deep: #071a10;
  --felt-edge: #1c4630;

  /* The cards laid on it */
  --parchment: #f3e7cf;
  --parchment-sunk: #e7d6b4;
  --parchment-edge: #c8ab77;

  /* Ink and accent */
  --ink: #241d14;
  --ink-soft: #6d6047;
  --amber: #e0912b;
  --amber-deep: #a35f0d;
  --danger: #b3261e;

  /* Seat colors, in seat order — the same six the engine hands out. */
  --p0: #e63946;
  --p1: #1d4ed8;
  --p2: #f59e0b;
  --p3: #ffffff;
  --p4: #16a34a;
  --p5: #7c3aed;

  --radius: 14px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 24px rgba(0, 0, 0, .38);

  --font-ui: -apple-system, 'Segoe UI', system-ui, Roboto, sans-serif;
  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font: 16px/1.5 var(--font-ui);
  color: var(--parchment);
  background-color: var(--felt);
  /* A lamp over the table, and the weave of the felt under it. */
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 236, 190, .12), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 100% 100%, 4px 4px;
}

/* --- layout ---------------------------------------------------------------------------------- */

.screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
  padding:
    calc(24px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right))
    calc(32px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
}

.screen-home { justify-content: center; min-height: 100dvh; gap: 26px; }

.stack { display: flex; flex-direction: column; gap: 12px; }

/* --- type ------------------------------------------------------------------------------------ */

.brand { text-align: center; }

.brand-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--parchment);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.brand-pitch {
  margin: 10px auto 0;
  max-width: 20rem;
  color: rgba(243, 231, 207, .78);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: .06em;
  color: var(--parchment);
  text-decoration: none;
}

.panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
}

.eyebrow {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.hint { margin: 0; font-size: .87rem; color: var(--ink-soft); }
.hint-center { text-align: center; }

.footnote {
  margin: 0;
  text-align: center;
  font-size: .8rem;
  color: rgba(243, 231, 207, .5);
}

/* --- panel ----------------------------------------------------------------------------------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--parchment-edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f7eeda, var(--parchment) 55%, var(--parchment-sunk));
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* --- controls -------------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease, opacity .15s ease;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }

.btn-primary {
  border-color: var(--amber-deep);
  background: linear-gradient(180deg, #efa945, var(--amber) 60%, #cf7d18);
  color: #2a1a03;
  box-shadow: 0 2px 0 var(--amber-deep);
}

.btn-primary:disabled { box-shadow: none; }

.btn-ghost {
  border-color: var(--parchment-edge);
  background: rgba(255, 255, 255, .35);
  font-weight: 500;
  color: var(--ink-soft);
}

.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--parchment-edge);
  border-radius: 10px;
  background: #fffaf0;
  font: inherit;
  font-size: 1rem; /* never below 16px: iOS zooms the page on focus otherwise */
  color: var(--ink);
}

.input::placeholder { color: #b3a488; }

.input-code {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .32em;
  text-align: center;
  text-transform: uppercase;
}

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* --- home ------------------------------------------------------------------------------------ */

.home-actions { gap: 12px; }

.join-form { display: flex; gap: 10px; }
.join-form .input { flex: 1 1 auto; min-width: 0; }
.join-form .btn { flex: 0 0 auto; }

.rule-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  color: var(--ink-soft);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.rule-or::before, .rule-or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--parchment-edge);
}

/* --- lobby ----------------------------------------------------------------------------------- */

.lobby-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* The signature: the join code as six tiles pushed across the table. */
.code-panel { align-items: center; text-align: center; }

/* Six equal tiles, sized off the panel so they still fit a 320 px phone. */
.code-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 300px;
}

.code-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--parchment-edge);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffaf0, #ecdcbc);
  box-shadow: 0 3px 0 rgba(140, 112, 62, .35), 0 6px 10px rgba(0, 0, 0, .18);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 6vw, 1.75rem);
  color: var(--ink);
}

.code-tile:nth-child(odd) { transform: rotate(-1.2deg); }
.code-tile:nth-child(even) { transform: rotate(1.4deg); }

.seats { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.seat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid rgba(200, 171, 119, .55);
  border-radius: 10px;
  background: rgba(255, 255, 255, .35);
}

.seat-swatch {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(36, 29, 20, .35);
  border-radius: 5px;
  background: var(--seat-color, var(--ink-soft));
}

.seat-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.seat-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(36, 29, 20, .25);
}

.seat-dot-on { background: #2f9e4f; box-shadow: 0 0 0 3px rgba(47, 158, 79, .18); }

.seat-kick {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1rem;
  color: var(--danger);
  cursor: pointer;
}

.seat-kick:active { background: rgba(179, 38, 30, .12); }

.seat-kick-slot { flex: 0 0 auto; width: 44px; margin-right: -6px; }

/* --- small parts ----------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(36, 29, 20, .1);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.chip-accent { background: rgba(224, 145, 43, .22); color: var(--amber-deep); }
.chip-you { background: rgba(36, 29, 20, .82); color: var(--parchment); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--felt-edge);
  border-radius: 999px;
  background: rgba(7, 26, 16, .55);
  font-size: .78rem;
  color: rgba(243, 231, 207, .8);
  white-space: nowrap;
}

.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill-open .pill-dot { background: #4ade80; }
.pill-connecting .pill-dot { background: var(--amber); animation: pulse 1.2s ease-in-out infinite; }
.pill-closed .pill-dot { background: #ef7a6d; }

@keyframes pulse { 50% { opacity: .25; } }

/* Bottom sheet — the table's action drawer (used from the game screen). */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 80dvh;
  overflow-y: auto;
  padding:
    18px calc(18px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  border-top: 1px solid var(--parchment-edge);
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #f7eeda, var(--parchment) 40%);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .45);
  color: var(--ink);
}

/* --- board ----------------------------------------------------------------------------------- */

/* The island. Every shape inside is drawn by src/client/board.ts with its own paint attributes, so
   the board renders the same in a file as it does here; these rules cover only the two things CSS
   is better at — reacting to touch, and drawing the eye to where you are meant to tap. */
.board {
  display: block;
  width: 100%;
  /* Replaced with `none` by attachZoom once you are zoomed in and there is somewhere to pan to. */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* The tap target itself is transparent and generous; the ring beside it is what you see. The
   `hit-hint` class is only a hook for tests and future styling — `hint` is taken by small print. */
.board .hit { cursor: pointer; outline: none; }
.board .hit:focus-visible { outline: 3px solid var(--parchment); }

.board .hint-ring { animation: hint-pulse 1.5s ease-in-out infinite; }

@keyframes hint-pulse { 50% { opacity: .3; } }

/* --- toasts ---------------------------------------------------------------------------------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(23rem, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  padding: 12px 14px;
  border: 1px solid var(--felt-edge);
  border-radius: 10px;
  background: rgba(9, 30, 19, .96);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  font-size: .9rem;
  color: var(--parchment);
  animation: toast-in .18s ease-out;
}

.toast-error { border-color: rgba(179, 38, 30, .8); color: #ffd9d4; }
.toast-out { opacity: 0; transition: opacity .2s ease; }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- the game screen -------------------------------------------------------------------------- */

/* One column, thumb-first: the island on top, the table under it, your own hand below that, and
   what you may do right now held against the bottom edge. */
.game {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 27rem;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top)) 10px 0;
}

/* Pushes the action bar to the bottom edge on a screen the table does not fill. */
.act-spacer { flex: 1 1 auto; }

/* --- top bar --- */

.topbar { display: flex; flex-direction: column; gap: 3px; padding: 0 4px; }

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
}

.turn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--parchment);
}

.turn.is-mine { color: var(--amber); }

.steps { margin: 0; font-size: .85rem; color: rgba(243, 231, 207, .72); }

.sdot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--seat-color, var(--parchment));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}

.sdot.is-table { background: rgba(243, 231, 207, .45); }

/* Two dice, drawn as pips — the one thing on this screen that came off a real table. */
.dice { display: inline-flex; gap: 6px; }

.die {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 7px;
  background: linear-gradient(160deg, #fffaf0, #e7d6b4);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}

.pip { border-radius: 50%; background: transparent; }
.pip.is-on { background: var(--ink); }

/* --- board --- */

/* The island keeps its own aspect ratio; the cap only bites on a short screen. */
.board-wrap { margin: 0 -4px; }
.board-wrap > .board { max-height: 37dvh; }

/* --- the other players --- */

.opps {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 4px 4px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.opps::-webkit-scrollbar { display: none; }

.opp {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  width: 146px;
  padding: 6px 8px;
  border: 1px solid rgba(200, 171, 119, .28);
  border-left: 4px solid var(--seat-color);
  border-radius: 12px;
  background: rgba(243, 231, 207, .07);
  scroll-snap-align: start;
}

.opp.is-current {
  border-color: rgba(224, 145, 43, .7);
  border-left-color: var(--seat-color);
  background: rgba(243, 231, 207, .16);
}

.opp.is-away { opacity: .45; }

.opp-head { display: flex; align-items: center; gap: 5px; }

.opp-name {
  overflow: hidden;
  font-size: .88rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opp .chip { padding: 2px 6px; background: rgba(243, 231, 207, .16); font-size: .58rem; color: rgba(243, 231, 207, .8); }
.opp .chip-you { background: var(--parchment); color: var(--ink); }
.opp .chip-accent { background: rgba(224, 145, 43, .24); color: #f0b45f; }

.opp-score { display: flex; align-items: baseline; gap: 5px; }

.opp-vp { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; }

/* Always rendered, empty or not, so the four numbers below line up across the strip. */
.opp-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 15px;
  overflow: hidden;
}

.opp-vp-label {
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243, 231, 207, .55);
}

.badge {
  flex: 0 0 auto;
  padding: 1px 5px;
  white-space: nowrap;
  border-radius: 4px;
  background: rgba(224, 145, 43, .22);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f0b45f;
}

.opp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }

.stat { display: flex; flex-direction: column; align-items: center; }
.stat-value { font-size: .85rem; font-weight: 600; line-height: 1.2; }

.stat-label {
  font-size: .52rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(243, 231, 207, .5);
}

/* --- my hand --- */

.hand { gap: 8px; padding: 10px 11px; }

.hand-res { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

.rescard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  padding: 10px 2px 5px;
  overflow: hidden;
  border: 1px solid var(--parchment-edge);
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 2px 0 rgba(140, 112, 62, .28);
}

.rescard-band { position: absolute; top: 0; right: 0; left: 0; height: 6px; background: var(--res); }
.rescard-count { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; color: var(--ink); }

.rescard-name {
  font-size: .52rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rescard.is-empty { opacity: .4; box-shadow: none; }

.hand-dev { display: flex; flex-wrap: wrap; gap: 6px; }

.devtile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--parchment-edge);
  border-radius: 8px;
  background: rgba(255, 255, 255, .45);
  font: inherit;
  font-size: .8rem;
  color: var(--ink-soft);
}

.devtile.is-live {
  border-color: var(--amber-deep);
  background: linear-gradient(180deg, #fbe3bd, #f3d29a);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.devtile-count { font-weight: 700; }

.devtile-new {
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--ink);
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--parchment);
}

/* --- the action bar --- */

.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 -10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--felt-edge);
  background: linear-gradient(180deg, rgba(7, 26, 16, .82), var(--felt-deep) 45%);
}

.act-buy { display: flex; align-items: center; gap: 6px; }

.act-eyebrow { flex: 0 0 auto; color: rgba(243, 231, 207, .5); }

.act-main { display: flex; gap: 8px; }

.actionbar .btn {
  border-color: rgba(200, 171, 119, .5);
  background: rgba(243, 231, 207, .1);
  font-size: .9rem;
  color: var(--parchment);
}

.actionbar .btn-buy { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 4px; font-size: .78rem; }
.actionbar .btn-wide { flex: 1 1 auto; }

.actionbar .btn-ghost {
  background: transparent;
  font-weight: 500;
  color: rgba(243, 231, 207, .72);
}

.actionbar .btn-primary {
  border-color: var(--amber-deep);
  background: linear-gradient(180deg, #efa945, var(--amber) 60%, #cf7d18);
  color: #2a1a03;
  box-shadow: 0 2px 0 var(--amber-deep);
}

.badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(224, 145, 43, .22);
}

/* An open offer, once its sheet is out of the way. */
.tradepill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--felt-edge);
  border-radius: 999px;
  background: rgba(7, 26, 16, .6);
  font: inherit;
  font-size: .82rem;
  text-align: left;
  color: rgba(243, 231, 207, .85);
  cursor: pointer;
}

/* The answered pill is a way back into the sheet, not a receipt: quieter, still a button. */
.tradepill.is-quiet { color: rgba(243, 231, 207, .62); }

.tradepill-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }

/* --- sheets --- */

.sheet-layer { position: fixed; inset: 0; z-index: 30; }

.scrim { position: absolute; inset: 0; background: rgba(4, 14, 9, .62); }

.sheet { max-width: 27rem; margin: 0 auto; animation: sheet-in .2s ease-out; }

@keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } }

.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sheet-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.sheet-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -8px -8px 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.btn-small { min-height: 44px; padding: 8px 14px; font-size: .85rem; }

/* The one button a sheet is really about, kept in view while its dials scroll behind it. The
   negative margins mirror the sheet's own padding, so the fade covers the full width and reaches
   the bottom edge instead of leaving a row peeking out underneath. */
.sheet-foot {
  position: sticky;
  bottom: calc(-18px - env(safe-area-inset-bottom));
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin:
    0 calc(-18px - env(safe-area-inset-right)) calc(-18px - env(safe-area-inset-bottom))
    calc(-18px - env(safe-area-inset-left));
  padding:
    14px calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom))
    calc(18px + env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(243, 231, 207, 0), var(--parchment) 34%);
}

/* --- dials and pickers --- */

.stepper-list { display: flex; flex-direction: column; gap: 6px; }
.stepper { display: flex; align-items: center; gap: 8px; }

.step-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--parchment-edge);
  border-radius: 10px;
  background: #fffaf0;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.step-btn:disabled { opacity: .3; cursor: default; }

.stepper-face {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(200, 171, 119, .5);
  border-radius: 10px;
  background: rgba(255, 255, 255, .4);
}

.stepper.is-set .stepper-face { border-color: var(--res); background: #fffaf0; }

.stepper-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 4px;
  background: var(--res);
}

.stepper-name { flex: 1 1 auto; font-size: .85rem; color: var(--ink); }
.stepper-note { font-size: .72rem; color: var(--ink-soft); }
.stepper-value { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-grid .rchoice:last-child { grid-column: 1 / -1; }

.rchoice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--parchment-edge);
  border-radius: 10px;
  background: rgba(255, 255, 255, .45);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.rchoice.is-on {
  border-color: var(--amber-deep);
  background: linear-gradient(180deg, #fbe3bd, #f3d29a);
  font-weight: 600;
}

.rchoice-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 4px;
  background: var(--res);
}

/* --- rows in sheets --- */

.btn.pick-row { justify-content: flex-start; gap: 10px; }

.pick-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(200, 171, 119, .55);
  border-radius: 10px;
  background: rgba(255, 255, 255, .35);
}

.score-row.is-winner { border-color: var(--amber-deep); background: linear-gradient(180deg, #fbe3bd, #f3d29a); }
.score-vp { font-family: var(--font-display); font-size: 1.35rem; }

.loglist {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 58dvh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.logline { display: flex; align-items: flex-start; gap: 9px; font-size: .85rem; color: var(--ink); }
.logline .sdot { margin-top: 5px; }
.logline-text { flex: 1 1 auto; }

/* --- trade --- */

.tabs { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(36, 29, 20, .09); }

.tab {
  flex: 1 1 0;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.tab.is-on { background: #fffaf0; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); color: var(--ink); }

.bank-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(200, 171, 119, .5);
  border-radius: 12px;
  background: rgba(255, 255, 255, .4);
}

.bank-give { margin: 0; font-size: .9rem; font-weight: 600; }
.bank-wants { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

.wantbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 7px 2px;
  border: 1px solid var(--parchment-edge);
  border-radius: 8px;
  background: #fffaf0;
  font: inherit;
  font-size: .52rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}

.wantbtn:disabled { opacity: .28; cursor: default; }
.wantbtn-swatch { width: 16px; height: 16px; border-radius: 4px; background: var(--res); }

.answers { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.answer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px 8px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(200, 171, 119, .5);
  border-radius: 10px;
  background: rgba(255, 255, 255, .4);
}

.answer-name { font-size: .9rem; font-weight: 600; }
.answer-said { grid-column: 2 / -1; font-size: .8rem; color: var(--ink-soft); }

.deal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.deal-side {
  padding: 10px;
  border: 1px solid rgba(200, 171, 119, .5);
  border-radius: 12px;
  background: rgba(255, 255, 255, .4);
}

.deal-what { margin: 5px 0 0; font-family: var(--font-display); font-size: 1.05rem; }
.deal-actions { display: flex; gap: 8px; }
.deal-actions .btn { flex: 1 1 auto; padding: 12px 10px; font-size: .9rem; white-space: nowrap; }

/* Reopened to be changed: the answer that stands right now wears a ring. */
.deal-actions .btn.is-on { box-shadow: 0 0 0 2px var(--amber); }