/* The Cursed Throne — "the referee's ledger by candlelight"
 * Aged parchment surfaces, warm ink, antique gold for royalty,
 * wax-seal red for danger/corruption, sickly moss-green Graveyard. */

:root {
  /* neutral parchment ramp (warm) */
  --p-0:  #fbf6e9;   /* lightest */
  --p-1:  #f4ecd6;   /* base surface */
  --p-2:  #ece0c0;   /* raised */
  --p-3:  #e0d0a8;
  --p-4:  #cdb98c;   /* hairline / border strong */
  --line: #d8c6a0;   /* hairline subtle */

  /* ink ramp */
  --ink:      #2a2014;  /* primary text (warm near-black) */
  --ink-soft: #5b4c38;  /* secondary text */
  --ink-faint:#897a63;  /* tertiary / disabled */

  /* semantic accents */
  --gold:      #a8842c;  --gold-bright: #c79a3a;  --gold-soft: #e8d49a;
  --wax:       #8c2f23;  --wax-bright:  #a8392a;  --wax-soft: #e3b9af;
  --moss:      #5a6e3a;  --moss-bright: #74903f;  --moss-deep: #3c4a26;
  --loyal:     #3f6b4a;

  /* surfaces by role */
  --surface:   var(--p-1);
  --raised:    var(--p-0);
  --sunk:      var(--p-2);

  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* radii (varied by role) */
  --r-pill: 999px; --r-btn: 7px; --r-card: 11px; --r-panel: 14px; --r-tag: 5px;

  /* elevation (soft, layered) */
  --e1: 0 1px 1px rgba(42,32,20,.08), 0 1px 3px rgba(42,32,20,.07);
  --e2: 0 2px 4px rgba(42,32,20,.10), 0 6px 16px rgba(42,32,20,.10);
  --e3: 0 8px 18px rgba(42,32,20,.16), 0 24px 56px rgba(42,32,20,.22);

  /* type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* V3b dark stage */
  --bg-deep:   #0c0a08;
  --bg-mid:    #14100c;
  --bg-glow:   #1e1812;
  --on-dark:   #e8dcc4;
  --on-dark-soft: #a89880;
  --on-dark-faint: #6e6250;
  --card-glow: 0 0 0 1px rgba(168,132,44,.22), 0 16px 48px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--on-dark);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -15%, rgba(140,47,35,.22), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 80%, rgba(107,36,32,.18), transparent 50%),
    radial-gradient(ellipse 70% 45% at 0% 60%, rgba(168,132,44,.12), transparent 45%),
    repeating-linear-gradient(
      125deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,.012) 2px,
      rgba(255,255,255,.012) 3px
    ),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.15; color: var(--on-dark); }
.app .panel h1, .app .panel h2, .app .panel h3,
.v3b-hero h1, .v3b-kingdom__title, .v3b-panel h2 { color: var(--ink); }
h1 { font-size: 34px; letter-spacing: -0.01em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
.eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.muted { color: var(--on-dark-soft); }
.faint { color: var(--on-dark-faint); }
.panel .muted, .panel .faint, .v3b-panel .muted, .v3b-panel .faint,
.modal .muted, .modal .faint { color: var(--ink-soft); }
.panel .faint, .v3b-panel .faint, .modal .faint { color: var(--ink-faint); }
.eyebrow--gold { color: var(--gold-bright); }
.eyebrow--light { color: rgba(251,246,233,.75); letter-spacing: .14em; }

/* double-hairline rule under section titles — signature detail */
.rule {
  border: 0; height: 0; margin: var(--s3) 0 var(--s5);
  border-top: 1.5px solid var(--p-4);
  box-shadow: 0 3px 0 -1.5px var(--line);
}

/* ---------- layout shell ---------- */
.app { max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s5) max(var(--s8), calc(72px + env(safe-area-inset-bottom))); }
@media (min-width: 920px) {
  .app { padding-bottom: var(--s8); }
  .turn-dock { display: none !important; }
}
.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2);
}
.brand { display: flex; align-items: baseline; gap: var(--s3); }
.brand .seal {
  font-family: var(--serif); color: var(--wax);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  border: 1.5px solid var(--wax); border-radius: var(--r-pill);
  padding: 3px 11px; transform: rotate(-3deg); white-space: nowrap;
}
.grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 920px) { .grid-main { grid-template-columns: 1.55fr 1fr; align-items: start; } }

/* ---------- panels / cards ---------- */
.panel {
  background: var(--raised);
  border: 1px solid rgba(168,132,44,.35);
  border-radius: var(--r-panel);
  box-shadow: var(--card-glow);
  padding: var(--s5);
  color: var(--ink);
}
.panel + .panel { margin-top: var(--s5); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

/* ---------- trackers bar ---------- */
.trackers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.tracker {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s3) var(--s4); box-shadow: var(--e1);
}
.tracker .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.tracker .v { font-family: var(--serif); font-size: 26px; line-height: 1.1; margin-top: 2px; }
.tracker.danger { border-color: var(--wax-soft); }
.tracker.danger .v { color: var(--wax); }
.tracker.gold .v { color: var(--gold); }
.tracker.active { border-color: var(--gold); box-shadow: var(--e1), 0 0 0 1px var(--gold-soft) inset; }

/* corruption vial — signature detail */
.vial { margin-top: var(--s2); height: 8px; border-radius: var(--r-pill); background: var(--p-2); overflow: hidden; border: 1px solid var(--p-4); }
.vial > span { display: block; height: 100%; background: linear-gradient(90deg, var(--wax), var(--wax-bright)); transition: width .25s ease-out; }
.vial.warn > span { background: linear-gradient(90deg, var(--wax-bright), #c0432f); }

/* ---------- buttons (clear hierarchy: primary / secondary / ghost / danger) ---------- */
.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  border-radius: var(--r-btn); padding: 9px 15px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  transition: transform .12s ease-out, background .15s, box-shadow .15s, border-color .15s;
  min-height: 40px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--p-0); box-shadow: var(--e1); }
.btn-primary:hover { background: #3a2c1b; }
.btn-secondary { background: var(--p-2); border-color: var(--p-4); color: var(--ink); }
.btn-secondary:hover { background: var(--p-3); }
.btn-ghost { color: var(--ink-soft); }
.btn-ghost:hover { background: var(--p-2); color: var(--ink); }
.btn-gold { background: var(--gold); color: #2a2014; box-shadow: var(--e1); }
.btn-gold:hover { background: var(--gold-bright); }
.btn-danger { background: var(--wax); color: var(--p-0); }
.btn-danger:hover { background: var(--wax-bright); }
.btn-sm { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Play / Test mode toggle (topbar) */
.mode-toggle { border: 1px solid var(--p-4); background: var(--p-1); color: var(--ink-soft); font-weight: 700; border-radius: var(--r-pill); }
.mode-toggle:hover { background: var(--p-2); }
.mode-toggle.on { background: var(--ink); color: var(--p-0); border-color: var(--ink); }
.mode-toggle::before { content: "● "; color: var(--ink-faint); font-size: 10px; }
.mode-toggle.on::before { content: "● "; color: var(--gold-bright); }

/* tiny round +/- steppers */
.step { width: 30px; height: 30px; padding: 0; border-radius: var(--r-pill);
  border: 1px solid var(--p-4); background: var(--p-1); color: var(--ink); font-weight: 700; cursor: pointer; font-size: 16px; }
.step:hover { background: var(--p-2); }

/* ---------- forms ---------- */
label.field { display: block; margin-bottom: var(--s4); }
label.field > .lbl { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: var(--s2); }
input[type="text"], input[type="number"], select, textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--p-0); border: 1px solid var(--p-4); border-radius: var(--r-btn);
  padding: 9px 11px; min-height: 40px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
textarea { min-height: 64px; resize: vertical; }
.seg { display: inline-flex; border: 1px solid var(--p-4); border-radius: var(--r-pill); overflow: hidden; background: var(--p-1); }
.seg button { border: 0; background: transparent; padding: 9px 18px; font-weight: 700; cursor: pointer; color: var(--ink-soft); font-family: var(--serif); font-size: 17px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--p-0); }
.seg-sm button { padding: 6px 14px; font-size: 14px; }

/* seat rows (Human/Bot) on the setup names step */
.seat-row { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.seat-row input { flex: 1; }
.bot-controls { padding: var(--s2) 0; }

/* ---------- tags / chips ---------- */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  border-radius: var(--r-tag); padding: 2px 8px; background: var(--p-2); color: var(--ink-soft); border: 1px solid var(--line); }
.tag.gold { background: var(--gold-soft); color: #6a5212; border-color: #d8bd6e; }
.tag.wax { background: var(--wax-soft); color: #6e201a; border-color: #d49a8f; }
.tag.moss { background: #d9e0c4; color: var(--moss-deep); border-color: #b9c79a; }

/* ---------- board ---------- */
.board { position: relative; }
.board-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
  grid-template-areas:
    ".       .        scrolls  ."
    ".       .        college  ."
    "tavern  market   throne   barracks"; }
.gy-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s3); }
.gy-row .loc { grid-column: 1 / 5; }

.loc {
  background: var(--p-0); border: 1px solid var(--p-4); border-radius: var(--r-card);
  padding: var(--s3); box-shadow: var(--e1); min-height: 92px; display: flex; flex-direction: column; gap: var(--s1);
}
.loc[data-id="scrolls"]  { grid-area: scrolls; }
.loc[data-id="college"]  { grid-area: college; }
.loc[data-id="tavern"]   { grid-area: tavern; }
.loc[data-id="market"]   { grid-area: market; }
.loc[data-id="throne"]   { grid-area: throne; }
.loc[data-id="barracks"] { grid-area: barracks; }
.loc .loc-name { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.loc .loc-theme { font-size: 11px; color: var(--ink-faint); }
.loc .tokens { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.loc.throne { border-color: var(--gold); background: linear-gradient(180deg, #fdf7e3, #f4e8c4); box-shadow: var(--e2); }
.loc.throne .loc-name { color: var(--gold); }
.loc.connector { border-color: var(--p-4); background: linear-gradient(180deg, #fdfaf0, var(--p-0)); }
.loc.danger { border-color: var(--moss); background: linear-gradient(180deg, #e7ead7, #d6dcbf); }
.loc.danger .loc-name { color: var(--moss-deep); }
.loc .conn { font-size: 10px; color: var(--ink-faint); }

/* legal-move affordance */
.loc.legal { cursor: pointer; border-color: var(--gold); border-style: dashed; }
.loc.legal:hover { background: #fdf3d6; box-shadow: var(--e2); transform: translateY(-1px); }
.loc.legal { transition: transform .12s ease-out, box-shadow .15s, background .15s; }
.move-here { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }

/* ---- V3b kingdom board (board.js) — portrait card, mini location stubs ---- */
.board-panel { padding-bottom: var(--s4); }
.board-panel .panel-head h2 { font-family: var(--serif); letter-spacing: 0.02em; }
.map-wrap {
  width: 100%; max-width: 440px; margin: 0 auto;
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), var(--e2);
  background: #f4ecd6;
}
svg.map { width: 100%; height: auto; display: block; vertical-align: top; }
svg.map-v3b { aspect-ratio: 1200 / 800; }
svg.map-v3b--layered { background: #1c140c; }
.map-bg { pointer-events: none; }
.map-node .legal-ring { animation: mapdash 7s linear infinite; }
.map-node .legal-halo { animation: maphalo 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.map-node .token-active { animation: maphalo 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.route-live { animation: routeflow 1.2s linear infinite; }
.map-node.legal { cursor: pointer; }
.map-node.legal:hover { filter: drop-shadow(0 0 9px rgba(199,154,58,.85)); }
.map-node.legal:active { filter: drop-shadow(0 0 5px rgba(199,154,58,.55)); }
.map-node.legal:focus { outline: none; }
.map-node.legal:focus-visible { filter: drop-shadow(0 0 8px rgba(232,212,154,.95)); }
@keyframes mapdash { to { stroke-dashoffset: -40; } }
@keyframes maphalo { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes routeflow { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) {
  .map-node .legal-ring, .map-node .legal-halo, .map-node .token-active, .route-live { animation: none; }
}

/* location actions panel */
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); align-items: start; }
.act-grid .btn { width: 100%; }
.act-hint { font-size: 12px; color: var(--ink-faint); margin: 4px 0 8px; }
.reminder { margin-top: var(--s4); background: var(--wax-soft); border: 1px solid #d49a8f; color: #6e201a;
  border-radius: var(--r-tag); padding: 10px 12px; font-size: 13px; display: flex; align-items: center; gap: var(--s3); justify-content: space-between; }

/* vote tally rows */
.vote-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 6px 10px; background: var(--p-1); border: 1px solid var(--line); border-radius: var(--r-tag); }
.vote-row .btn-row { gap: 6px; flex-wrap: nowrap; }

/* player token */
.token { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
  background: var(--p-2); border: 1px solid var(--p-4); border-radius: var(--r-pill); padding: 1px 8px 1px 4px; }
.token .dot { width: 14px; height: 14px; border-radius: var(--r-pill); display: inline-grid; place-items: center;
  font-size: 9px; color: #fff; font-weight: 800; }
.token.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.token.elim { opacity: .45; text-decoration: line-through; }

/* ---------- player table ---------- */
/* wrap on the *container* width (auto-fit), not the viewport — the court can sit
   in a narrow right-hand column on desktop, where 2 forced columns would crush the cards */
.players { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.pcard { background: var(--p-0); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); box-shadow: var(--e1); }
.pcard.active { border-color: var(--gold); box-shadow: var(--e2); }
.pcard.elim { opacity: .55; }
.pcard .ptop { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.pcard .pname { font-family: var(--serif); font-size: 19px; font-weight: 600; display: flex; align-items: center; gap: var(--s2); }
.pcard .prole { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.pstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.pstat { background: var(--p-1); border: 1px solid var(--line); border-radius: var(--r-tag); padding: 5px 8px; text-align: center; }
.pstat .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.pstat .v { font-family: var(--serif); font-size: 19px; }
.pstat .stepper { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 3px; }
.pmeta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }

/* ---------- log ---------- */
.log { max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.log .entry { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.log .entry:last-child { border-bottom: 0; }
.log .when { color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.log .entry.corruption .what { color: var(--wax); font-weight: 600; }
.log .entry.system .what { color: var(--gold); font-weight: 600; }
.log .entry.note .what { color: var(--ink-soft); font-style: italic; }
.log-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.log-filter { font-size: 12px; padding: 4px 10px; opacity: .75; }
.log-filter.on { opacity: 1; background: var(--wax-soft); border-color: var(--wax); }
.log-kind { font-size: 10px; text-transform: uppercase; opacity: .65; margin-left: 4px; }
.host-wait-banner { background: var(--wax-soft); border: 1px solid #d49a8f; color: #6e201a;
  padding: 10px 14px; border-radius: var(--r); font-size: 14px; margin: 12px 0; line-height: 1.45; }
.hand-limit-banner { background: linear-gradient(90deg, #6e201a, #8c2f23); color: #fff;
  padding: 12px 16px; border-radius: var(--r); margin-bottom: var(--s4); font-size: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hand-limit-banner .btn { flex-shrink: 0; }
.private-note-banner { background: var(--gold-soft); border: 1px solid var(--gold); padding: 10px 12px;
  border-radius: var(--r); font-size: 13px; margin-bottom: 12px; line-height: 1.45; }
.lobby-list .lobby-player { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.lobby-list .lobby-player .btn { margin-left: auto; min-width: 28px; padding: 2px 8px; }
.spectator-banner { background: var(--ink); color: #e6dcc0; padding: 10px 14px; border-radius: var(--r);
  font-size: 14px; margin-bottom: var(--s4); line-height: 1.45; }

/* ---------- role card art (V3b poker 5:7) ---------- */
.role-card {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--e2);
  background: var(--p-0);
}
.role-card--stub {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--e1);
}
.role-card--thumb {
  width: 44px;
  max-width: 44px;
  flex: 0 0 44px;
  border-radius: 6px;
  box-shadow: var(--e1);
}
.role-card--pick { max-width: 260px; margin: 0 auto; }
.role-card--private { max-width: 220px; margin: 0 auto; }
.role-card--back { width: 92px; max-width: 26vw; flex: 0 0 auto; }
.role-card-fallback {
  display: inline-block;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
}
.role-card-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
}
.role-card-pick {
  background: var(--p-0);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s3);
  text-align: center;
}
.role-card-pick.active { border-color: var(--gold); box-shadow: var(--e2); }
.role-card-pick--disabled { opacity: .72; }
.role-card-actions { margin-top: var(--s3); display: grid; gap: var(--s2); }
.role-card-backs {
  display: flex;
  gap: var(--s3);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--s4) 0 var(--s2);
}
.prole-with-card {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: 2px;
}
.modal--roles { max-width: min(96vw, 940px); }

/* ---------- modal / cover screens (pass-and-play) ---------- */
.scrim { position: fixed; inset: 0; background: rgba(20,14,6,.55); display: flex; overflow-y: auto; padding: var(--s5); z-index: 50; }
.modal { margin: auto; background: var(--raised); border: 1px solid var(--p-4); border-radius: var(--r-panel); box-shadow: var(--e3); max-width: 560px; width: 100%; padding: var(--s6); }
.cover { text-align: center; }
.cover .seal-big { width: 84px; height: 84px; margin: 0 auto var(--s4); border-radius: var(--r-pill);
  background: radial-gradient(circle at 35% 30%, var(--wax-bright), var(--wax)); display: grid; place-items: center;
  color: var(--gold-soft); font-family: var(--serif); font-size: 34px; box-shadow: var(--e2); border: 2px solid #6e201a; }

/* empty state */
.empty { text-align: center; padding: var(--s7) var(--s5); color: var(--ink-soft); }

.hidden { display: none !important; }
.spacer { flex: 1; }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.win-banner { background: var(--ink); color: var(--p-0); border-radius: var(--r-card); padding: var(--s4) var(--s5); margin-bottom: var(--s5); display: flex; align-items: center; gap: var(--s4); box-shadow: var(--e2); }
.win-banner.loyal { background: var(--loyal); }
.win-banner.cursed { background: var(--wax); }
.win-banner h2 { color: var(--p-0); }

.toast { position: fixed; left: 50%; bottom: max(72px, calc(56px + env(safe-area-inset-bottom))); transform: translateX(-50%);
  background: var(--ink); border: 1px solid var(--p-4); color: var(--p-0); padding: 12px 18px;
  border-radius: 12px; font-weight: 600; z-index: 60; box-shadow: var(--e3); max-width: min(92vw, 420px); text-align: center; }

/* ---------- Phase 13: mobile turn dock & safe areas ---------- */
.turn-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(12,10,8,.94) 18%, var(--bg-deep) 40%);
  border-top: 1px solid rgba(168,132,44,.28);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.turn-dock-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.turn-dock .turn-meta { flex: 1; min-width: 140px; }
.turn-dock .turn-title { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--on-dark); }
.turn-dock .turn-sub { font-size: 12px; color: var(--on-dark-soft); margin-top: 2px; }
.turn-dock .turn-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.turn-dock .chip {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--p-2); border: 1px solid var(--p-4); color: var(--ink-soft);
}
.turn-dock .chip.ok { background: #e6efe0; border-color: #b8cfa8; color: var(--moss-deep); }
.turn-dock .chip.warn { background: var(--wax-soft); border-color: #d9a59c; color: var(--wax); }
.turn-dock .btn { min-height: 44px; }
.turn-dock .turn-parley { display: flex; gap: 4px; align-items: center; }
.turn-dock .turn-parley .btn { min-width: 44px; padding: 0 10px; font-size: 16px; }
.spectator-dock { background: var(--ink); border-top-color: #3a3530; }
.spectator-dock .turn-title, .spectator-dock .turn-sub { color: #e6dcc0; }
.spectator-dock .turn-sub { opacity: .85; }
.spectator-act-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
.spectator-act-list li { margin: 4px 0; }
.spectator-panel .panel-head h2 { font-size: 17px; }
.wait-banner {
  background: var(--parchment); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 14px; margin-bottom: 12px; font-size: 14px; color: var(--ink-soft); text-align: center;
}

.role-ability-row .btn-secondary { border-color: var(--ink-soft); }
.role-ability-row .act-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

@media (max-width: 919px) {
  .app { padding-left: max(var(--s4), env(safe-area-inset-left)); padding-right: max(var(--s4), env(safe-area-inset-right)); }
  .btn, .step { min-height: 44px; }
  .map-wrap { max-width: none; }
  .map-wrap svg { touch-action: manipulation; }
  .map-node.legal { min-width: 44px; min-height: 44px; }
}

.reaction-banner {
  background: var(--p-0); border: 1px solid var(--gold-soft); border-radius: var(--r-card);
  padding: var(--s4); margin-bottom: var(--s4); box-shadow: var(--e1);
}
.reaction-banner h2 { font-size: 18px; margin-bottom: 6px; }
.reaction-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* ========== V3b dark play UI (Phase 20–21) ========== */
.app--v3b { padding-bottom: max(var(--s8), calc(88px + env(safe-area-inset-bottom))); }
.app--v3b .topbar h1 { color: var(--on-dark); }
.app--v3b .brand .seal { color: var(--gold-bright); border-color: rgba(199,154,58,.55); background: rgba(20,16,12,.5); }

.v3b-hero {
  border: 2px solid rgba(168,132,44,.45);
  border-radius: var(--r-panel);
  box-shadow: var(--card-glow);
  overflow: hidden;
}
.v3b-hero__inner {
  background: linear-gradient(165deg, #fbf6e9 0%, #f4ecd6 45%, #ece0c0 100%);
  padding: var(--s7) var(--s5);
  text-align: center;
  color: var(--ink);
}
.v3b-seal { border-color: var(--wax) !important; }

.play-layout {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 920px) {
  .play-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
  }
  .play-zone--kingdom { grid-column: 1; grid-row: 1; }
  .play-zone--hand { grid-column: 1; grid-row: 2; display: block !important; }
  .play-zone--court { grid-column: 2; grid-row: 1; }
  .play-zone--log { grid-column: 2; grid-row: 2 / span 2; }
  .hand-strip { display: none; }
}

.play-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
  display: none;
  gap: 6px;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(12,10,8,.92) 24%, var(--bg-deep) 100%);
  border-top: 1px solid rgba(168,132,44,.25);
}
.play-tabs__btn {
  flex: 1; min-height: 48px; border: 1px solid rgba(168,132,44,.25);
  border-radius: 10px; background: rgba(30,24,18,.85); color: var(--on-dark-soft);
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.play-tabs__btn.on {
  background: var(--gold); color: var(--ink); border-color: var(--gold-bright);
  box-shadow: 0 0 20px rgba(199,154,58,.35);
}
@media (max-width: 919px) {
  .play-tabs { display: flex; }
  .v3b-panel--parley { display: none; }
  .trackers--v3b {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .trackers--v3b .tracker { padding: 8px 10px; }
  .trackers--v3b .tracker .v { font-size: 17px; }
  .trackers--v3b .tracker--vial { grid-column: 1 / -1; }
  .app--v3b { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  body:has(#play-tabs:not([hidden])) .turn-dock:not([hidden]) {
    bottom: calc(54px + env(safe-area-inset-bottom));
  }
  body:has(#play-tabs:not([hidden])):has(.turn-dock:not([hidden])) .app--v3b {
    padding-bottom: calc(168px + env(safe-area-inset-bottom));
  }
  .play-zone { display: none; }
  .play-tab-play .play-zone--kingdom,
  .play-tab-hand .play-zone--hand,
  .play-tab-court .play-zone--court,
  .play-tab-log .play-zone--log { display: block; }
}

.v3b-kingdom__card {
  border: 2px solid var(--gold);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-glow);
  background: #f4ecd6;
  color: var(--ink);
}
.v3b-kingdom__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: 14px 16px 10px;
  border-bottom: 1px solid #d8c6a0;
  background: linear-gradient(180deg, #fbf6e9, #f4ecd6);
}
.v3b-kingdom__title { font-size: 20px; margin: 0; color: var(--ink); }
.v3b-kingdom__hint { margin: 4px 0 0; font-size: 12px; color: var(--ink-soft); }
.v3b-kingdom__turn {
  font-family: var(--serif); font-size: 12px; font-weight: 600;
  color: var(--gold); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; padding-top: 4px;
}
.map-wrap--kingdom {
  max-width: none; margin: 0; border-radius: 0; box-shadow: none; border: 0;
  width: 100%;
}
.v3b-kingdom__card .map-wrap--kingdom svg.map-v3b {
  width: 100%; height: auto; min-height: 0;
}
@media (max-width: 919px) {
  .v3b-kingdom__card .map-wrap--kingdom {
    margin-left: -2px; margin-right: -2px; width: calc(100% + 4px);
  }
  .v3b-kingdom__head { padding: 12px 14px 8px; }
  .v3b-kingdom__title { font-size: 18px; }
}

.loc-footer {
  background: var(--loc-accent, #5b4c38);
  color: #fbf6e9;
  padding: 14px 16px 16px;
  position: relative;
}
.loc-footer__art {
  height: 84px; margin: -14px -16px 12px; background-size: cover; background-position: center 38%;
  border-bottom: 2px solid rgba(232,212,154,.5);
  box-shadow: inset 0 -40px 48px -24px var(--loc-accent, #5b4c38);
}
.loc-footer__label {
  font-family: var(--serif); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px;
  color: rgba(251,246,233,.92);
}
.loc-footer__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: start;
}
.loc-footer__grid .act-hint { color: rgba(251,246,233,.72); font-size: 11px; }
.loc-footer__roles { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); }
.loc-footer__end {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
}
.loc-footer__wait { font-size: 12px; color: rgba(251,246,233,.65); }
.loc-footer__warn, .loc-footer__succ {
  margin-top: 10px; font-size: 13px; color: rgba(251,246,233,.9);
}
.loc-footer__empty { margin: 0; color: rgba(251,246,233,.8); }
.spectator-act-list--light { color: rgba(251,246,233,.85); }

.btn-loc {
  width: 100%; min-height: 44px; font-weight: 700; border-radius: 8px;
  border: 1px solid transparent;
}
.btn-loc--cream { background: #fbf6e9; color: var(--ink); border-color: #d8c6a0; }
.btn-loc--cream:hover:not(:disabled) { background: #fff; }
.btn-loc--gold { background: var(--gold-bright); color: var(--ink); }
.btn-loc--gold:hover:not(:disabled) { background: #d4ab4a; }
.btn-loc__cost, .btn-loc__tag { opacity: .72; font-size: 11px; font-weight: 700; }

.v3b-panel {
  background: linear-gradient(180deg, #fbf6e9, #f4ecd6);
  border: 1px solid rgba(168,132,44,.4);
  border-radius: 12px;
  box-shadow: var(--card-glow);
  padding: var(--s4);
  color: var(--ink);
}
.v3b-panel + .v3b-panel, .v3b-kingdom + .v3b-panel { margin-top: var(--s4); }
.v3b-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid #d8c6a0;
}
.v3b-panel__head h2 { font-size: 18px; margin: 0; color: var(--ink); }

.trackers--v3b .tracker {
  background: rgba(20,16,12,.72);
  border: 1px solid rgba(168,132,44,.28);
  color: var(--on-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.trackers--v3b .tracker .k { color: var(--on-dark-faint); }
.trackers--v3b .tracker .v { color: var(--on-dark); font-size: 22px; }
.trackers--v3b .tracker.active { border-color: var(--gold-bright); }
.trackers--v3b .tracker.gold .v { color: var(--gold-bright); }
.trackers--v3b .tracker.danger .v { color: #e3b9af; }
.tracker-dim { font-size: 14px; opacity: .65; font-weight: 400; }
.trackers--v3b .vial { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.08); }

.court-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--s3);
}
.court-stub { min-width: 0; }
.court-stub__frame {
  border: 2px solid rgba(168,132,44,.35);
  border-radius: 10px;
  overflow: hidden;
  background: #fbf6e9;
  box-shadow: var(--e2);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.court-stub--active .court-stub__frame {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(232,212,154,.45), var(--e2);
}
.court-stub--elim { opacity: .48; }
.court-stub__art {
  position: relative; aspect-ratio: 5 / 7; background: #3a3530; overflow: hidden;
}
.court-stub__ph { width: 100%; height: 100%; background: linear-gradient(180deg, #3a3530, #1a1612); }
.court-stub__crown {
  position: absolute; top: 6px; right: 6px;
  font-size: 14px; color: var(--gold-bright);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.court-stub__bot {
  position: absolute; top: 6px; left: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  background: rgba(0,0,0,.55); color: #e8dcc0; padding: 2px 6px; border-radius: 4px;
}
.court-stub__foot {
  background: var(--stub-accent, #5b4c38);
  color: #fbf6e9;
  padding: 8px 10px 10px;
}
.court-stub__name { font-family: var(--serif); font-size: 14px; font-weight: 600; line-height: 1.2; }
.court-stub__meta { font-size: 10px; opacity: .82; margin-top: 2px; line-height: 1.35; }
.court-stub__role { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .9; margin-top: 4px; }
.court-stub__hand { margin-top: 8px; width: 100%; min-height: 32px; font-size: 12px;
  background: rgba(0,0,0,.2); color: #fbf6e9; border-color: rgba(255,255,255,.2); }
.court-host { margin-top: var(--s4); color: var(--ink-soft); font-size: 13px; }
.court-host summary { cursor: pointer; font-weight: 700; color: var(--ink); }

.parley-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.btn-parley {
  flex: 1 1 calc(33% - 8px); min-width: 88px; min-height: 40px;
  background: var(--p-0); border: 1px solid #cdb98c; color: var(--ink);
  border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer;
}
.btn-parley:hover:not(:disabled) { border-color: var(--gold); background: #fff; }

.turn-dock--dark {
  background: linear-gradient(180deg, transparent, rgba(12,10,8,.94) 20%, #0c0a08 100%);
  border-top: 1px solid rgba(168,132,44,.3);
  box-shadow: 0 -12px 40px rgba(0,0,0,.45);
}
.turn-dock--dark .turn-title { color: var(--on-dark); }
.turn-dock--dark .turn-sub { color: var(--on-dark-soft); }
.turn-dock--dark .chip { background: rgba(30,24,18,.9); border-color: rgba(168,132,44,.25); color: var(--on-dark-soft); }
.turn-dock--dark .btn-ghost { color: var(--on-dark); border-color: rgba(168,132,44,.3); }

.wait-banner {
  background: rgba(20,16,12,.75); border-color: rgba(168,132,44,.3);
  color: var(--on-dark-soft);
}
.hand-limit-banner { box-shadow: 0 8px 28px rgba(0,0,0,.4); }

.scrim { background: rgba(8,6,4,.78); backdrop-filter: blur(4px); }
.toast {
  background: #1a1612; border-color: rgba(168,132,44,.4); color: var(--on-dark);
}

/* ---- Action card stubs + hand UI ---- */
.hand-coach {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 var(--s4); padding: 10px 14px;
  background: rgba(168,132,44,.14); border: 1px solid rgba(199,154,58,.35);
  border-radius: 10px; color: var(--on-dark-soft); font-size: 13px;
}
.hand-strip {
  background: linear-gradient(180deg, #fbf6e9, #efe3c6);
  border-top: 1px solid #d8c6a0;
  padding: 10px 12px 12px;
}
.hand-strip__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.hand-strip__title {
  font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: .04em;
}
.hand-strip__count {
  font-size: 12px; font-weight: 700; color: var(--gold);
  background: rgba(168,132,44,.12); padding: 2px 8px; border-radius: 999px;
}
.hand-strip__more { margin-left: auto; font-size: 11px !important; min-height: 32px !important; }
.hand-strip__scroll {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.hand-strip__empty {
  margin: 0; font-size: 12px; color: var(--ink-soft); font-style: italic;
}
.hand-tab-panel { margin-top: 0; }
.hand-tab-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.hand-tab-panel__count {
  font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--gold);
  white-space: nowrap; padding-top: 4px;
}
.hand-tab-panel__count--warn { color: var(--wax); }
.hand-tab-panel__warn {
  margin-bottom: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(140,47,35,.12); border: 1px solid rgba(140,47,35,.35);
  font-size: 13px; color: var(--ink);
}
.hand-grid { display: flex; flex-direction: column; gap: 10px; }
.hand-roles-block {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.hand-roles-block__title {
  font-family: var(--serif); font-size: 17px; margin: 0 0 10px; color: var(--ink);
}
.action-row {
  display: flex; align-items: stretch; gap: 10px;
}
.action-row__side {
  display: flex; align-items: center; flex-shrink: 0;
}
.action-stub {
  display: block; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  flex-shrink: 0; scroll-snap-align: start;
}
.action-stub:focus { outline: none; }
.action-stub:focus-visible .action-stub__frame {
  box-shadow: 0 0 0 2px var(--gold-bright), var(--e2);
}
.action-stub__frame {
  border: 2px solid rgba(168,132,44,.35);
  border-radius: 10px; overflow: hidden;
  background: #fbf6e9; box-shadow: var(--e1);
  transition: transform .12s, box-shadow .15s, border-color .15s;
  width: 100%;
}
.action-stub__art {
  position: relative; aspect-ratio: 18 / 10; background: #3a3530; overflow: hidden;
}
.action-stub__art-img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.action-stub--compact .action-stub__art { aspect-ratio: 9 / 5; }
.action-stub--compact { width: 116px; }
.action-stub--full { flex: 1; min-width: 0; }
.action-stub--playable .action-stub__frame {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(232,212,154,.45), 0 0 14px rgba(199,154,58,.28), var(--e2);
}
.action-stub--playable:hover .action-stub__frame { transform: translateY(-2px); }
.action-stub__body {
  padding: 8px 8px 6px; min-height: 54px;
  background: linear-gradient(180deg, #fff, #f4ecd6);
}
.action-stub--compact .action-stub__body { min-height: 58px; }
.hand-fix-row, .keep-one-card {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
.hand-fix-row {
  flex-direction: row; align-items: center; gap: 12px;
}
.hand-fix-row .action-stub--full { flex: 1; min-width: 0; }
.hand-fix-row__btn { flex-shrink: 0; }
.keep-one-card__btn { width: 100%; }
.keep-one-view .players { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.action-stub__timing { font-size: 14px; line-height: 1; }
.action-stub__name {
  font-family: var(--serif); font-size: 12px; font-weight: 700;
  line-height: 1.25; margin-top: 4px; color: var(--ink);
}
.action-stub--full .action-stub__name { font-size: 15px; }
.action-stub__effect {
  font-size: 11px; color: var(--ink-soft); margin-top: 4px; line-height: 1.35;
}
.action-stub__badge {
  display: inline-block; margin-top: 6px; font-size: 9px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); background: rgba(42,32,20,.08);
  padding: 2px 6px; border-radius: 4px;
}
.action-stub__badge--play {
  color: #6b4a12; background: rgba(199,154,58,.22);
}
.action-stub__foot {
  background: var(--stub-deck, #5b4c38); color: #fbf6e9;
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; text-align: center; padding: 5px 6px;
}
.action-row__play { white-space: nowrap; }

.action-stub--pulse .action-stub__frame {
  animation: handpulse 1.2s ease-in-out 2;
  border-color: var(--gold-bright);
}
.action-stub--duel .action-stub__frame { border-color: rgba(74,85,104,.85); }
.action-stub--vote .action-stub__frame { border-color: rgba(140,47,35,.75); }
@keyframes handpulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(199,154,58,.5), var(--e2); }
  50% { box-shadow: 0 0 0 6px rgba(199,154,58,.15), 0 0 18px rgba(199,154,58,.45); }
}

.loc-footer__parley {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.loc-footer__parley-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.btn-loc--parley {
  flex: 1 1 calc(50% - 8px); min-width: 0; font-size: 12px; padding: 8px 10px;
}

.helper-hand-empty { font-size: 12px; color: var(--ink-soft); margin: 4px 0; }
.helper-hand-picker {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.helper-hand-pick {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; cursor: pointer; margin: 0;
}
.helper-hand-pick input { position: absolute; opacity: 0; pointer-events: none; }
.helper-hand-pick--on .action-stub__frame {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(232,212,154,.5), var(--e2);
}
.helper-hand-pick__val {
  font-size: 11px; font-weight: 800; color: var(--gold);
  background: rgba(168,132,44,.12); padding: 2px 8px; border-radius: 999px;
}
.helper-vote-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.helper-vote-card__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.helper-vote-card__meta { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.helper-vote-card__who { font-size: 13px; font-weight: 700; }
.helper-vote-card__target { max-width: 180px; }
.bribe-pending { background: rgba(168,132,44,.06); border-radius: var(--r2); padding: 8px 10px; }

.pact-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s4);
}
.pact-chip {
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: rgba(140,47,35,.2); border: 1px solid rgba(140,47,35,.45);
  color: #e3b9af;
}

.deck-archives {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.deck-archives__title {
  font-family: var(--serif); font-size: 17px; margin: 0 0 6px; color: var(--ink);
}
.deck-archives__hint {
  font-size: 12px; color: var(--ink-soft); margin: 0 0 10px;
}
.deck-archives__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(42,32,20,.08);
  font-size: 13px;
}
.deck-archives__name { font-weight: 700; min-width: 88px; color: var(--ink); }
.deck-archives__counts { color: var(--ink-soft); flex: 1; }
.deck-archives__peek { display: flex; gap: 6px; }
.deck-archives__peek .btn { min-height: 32px; font-size: 11px; padding: 4px 8px; }

.hand-tab-panel__note { margin-bottom: 12px; }

.role-powers {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.role-powers__title {
  font-family: var(--serif); font-size: 17px; margin: 0 0 10px; color: var(--ink);
}
.role-powers__role {
  font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--ink);
}
.role-powers ul {
  margin: 0 0 12px; padding-left: 18px; font-size: 12px; color: var(--ink-soft);
}
.role-powers li { margin-bottom: 4px; }

/* Phase 22 — action card play UX */
.private-note-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.private-note-banner__card { width: 140px; flex-shrink: 0; }
.private-note-banner__card .action-stub--full { width: 100%; }
.private-note-banner__text { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--ink); }

.reaction-card-picker, .fence-card-picker {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
}
.reaction-card-pick, .fence-card-pick {
  padding: 0; border: 0; background: none; cursor: pointer;
}
.reaction-card-pick:hover .action-stub__frame,
.fence-card-pick:hover .action-stub__frame { transform: translateY(-2px); }
.fence-card-pick--on .action-stub__frame {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(232,212,154,.5), var(--e2);
}

.modal--play-card .play-card-hero,
.modal--action-card .action-card-focus { max-width: 280px; margin: 0 auto 12px; }
.play-card-hero__effect { text-align: center; }
.action-card-focus__hint {
  font-size: 13px; color: var(--ink-soft); text-align: center; margin: 10px 0 0;
}
.modal--reaction .reaction-card-picker { justify-content: center; }

@media (min-width: 920px) {
  .hand-tab-panel .hand-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pacts-panel--compact { display: none; }
}