/* ════════════════════════════════════════════════════════════════
   Kindlewood — storybook HUD theme (override layer)
   Destination: /css/hud-storybook.css
   Load AFTER main.css:
     <link rel="stylesheet" href="/css/hud-storybook.css?v=1">
   Remove that one line to revert the entire theme.
   ════════════════════════════════════════════════════════════════ */

/* Fonts — harmless duplicate if main.css already imports these */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Crimson+Pro:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --kw-ink:       #1d150d;   /* darkest chrome (topbar) */
  --kw-wood:      #241a10;   /* nav + sidebar */
  --kw-wood-2:    #2c2013;   /* raised cells, secondary buttons */
  --kw-border:    #3a2c1b;   /* quiet structural lines */
  --kw-gold:      #e8c87a;   /* bright gold text */
  --kw-gold-deep: #c9a45c;   /* gold accent lines, active underline */
  --kw-gold-btn:  #cda451;   /* solid primary button fill */
  --kw-gold-dim:  #6e5836;   /* muted gold borders */
  --kw-cream:     #efe4cd;   /* primary text */
  --kw-muted:     #a8946f;   /* secondary text */
  --kw-good:      #9fc97a;   /* positive states (Stable, +rates) */
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  background: var(--kw-ink);
  border-bottom: 1px solid var(--kw-gold-deep);
}

/* !important required: main.css has late `.res-val { color:#fac775 !important }`
   and `.res-rate { color:#7bc67e !important }` rules that would win otherwise */
.topbar .res-val {
  font-family: 'Playfair Display', serif;
  font-weight: 600 !important;
  font-size: 16px;
  color: var(--kw-cream) !important;
  letter-spacing: .01em;
  font-variant-numeric: lining-nums;
}

.topbar .res-rate {
  font-family: 'Crimson Pro', serif;
  color: var(--kw-muted) !important;
}

.topbar .res-icon-img {
  filter: sepia(.25) saturate(.9);
}

.topbar .topbar-version {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  color: var(--kw-muted);
  opacity: .6;
}

/* Season badge → gold-bordered pill (.season-badge-inner is JS-rendered) */
.topbar .season-badge-inner,
.topbar .season-badge {
  font-family: 'Crimson Pro', serif;
  background: transparent;
  border: 1px solid var(--kw-gold-dim);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  color: var(--kw-gold);
}
.topbar .season-badge-inner:hover {
  border-color: var(--kw-gold-deep);
  background: rgba(201, 164, 92, .08);
}

/* Bell, cheat, profile — quiet dark chrome */
.topbar .btn-events-bell,
.topbar .btn-cheat,
.topbar .profile-trigger {
  background: transparent;
  border: 1px solid var(--kw-border);
  border-radius: 6px;
  color: var(--kw-muted);
  transition: border-color .15s, color .15s;
}
.topbar .btn-events-bell:hover,
.topbar .btn-cheat:hover,
.topbar .profile-trigger:hover {
  border-color: var(--kw-gold-dim);
  color: var(--kw-gold);
}

/* ── Nav bar (community-bar) ────────────────────────────── */
.community-bar {
  background: var(--kw-wood);
  border-bottom: 1px solid var(--kw-border);
  gap: 2px;
}

.community-bar .comm-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 15px;
  color: var(--kw-muted);
  padding: 10px 14px 8px;
  transition: color .15s, border-color .15s;
}
.community-bar .comm-btn:hover {
  color: var(--kw-cream);
  background: transparent;
}
.community-bar .comm-btn.active,
.community-bar #nav-map.active {
  color: var(--kw-cream);
  border-bottom-color: var(--kw-gold-deep);
}

/* ── Map surround ───────────────────────────────────────── */
.game-body { background: var(--kw-ink); }
.map-frame { border: 1px solid var(--kw-border); }

.map-ctrl-btn {
  background: rgba(36, 26, 16, .85);
  border: 1px solid var(--kw-gold-dim);
  color: var(--kw-gold);
  border-radius: 6px;
}
.map-ctrl-btn:hover { background: var(--kw-wood-2); }

/* ── Action bar ─────────────────────────────────────────── */
.action-bar .action-bar-btn {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 6px;
  font-family: 'Crimson Pro', serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--kw-cream);
  padding: 8px 16px;
  transition: border-color .15s, background .15s, transform .12s;
}
.action-bar .action-bar-btn:hover {
  border-color: var(--kw-gold-deep);
  background: #352818;
}
.action-bar .action-bar-btn:active { transform: scale(.97); }

/* Scout = the one solid-gold action on the map */
.action-bar #action-scout {
  background: var(--kw-gold-btn);
  border: 1px solid var(--kw-gold);
  color: #241a10;
  font-weight: 600;
}
.action-bar #action-scout:hover {
  background: #d9b261;
  border-color: var(--kw-gold);
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
  background: var(--kw-wood);
  border-left: 1px solid var(--kw-border);
}

.sidebar .sidebar-tabs {
  background: var(--kw-wood);
  border-bottom: 1px solid var(--kw-border);
}
.sidebar .sidebar-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 15px;
  color: var(--kw-muted);
  transition: color .15s, border-color .15s;
}
.sidebar .sidebar-tab:hover { color: var(--kw-cream); }
.sidebar .sidebar-tab.active {
  color: var(--kw-cream);
  border-bottom-color: var(--kw-gold-deep);
  background: transparent;
}

.sidebar .sidebar-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--kw-cream);
}
.sidebar .sidebar-sub {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--kw-muted);
}

/* ── Reusable storybook pieces ──────────────────────────────
   Utility classes for JS-rendered panel content (settlement
   card, stat boxes). Adopt these inside panel-body templates. */

/* Double-border "storybook plate" frame */
.kw-frame {
  border: 1px solid var(--kw-gold-deep);
  border-radius: 8px;
  padding: 3px;
}
.kw-frame-inner {
  border: 1px solid var(--kw-gold-dim);
  border-radius: 5px;
  padding: 16px;
  background: var(--kw-wood-2);
  text-align: center;
}

/* TIER 1 eyebrow / Village / Tomland */
.kw-eyebrow {
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--kw-gold-deep);
}
.kw-plate-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--kw-cream);
  margin: 2px 0;
}
.kw-plate-sub {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--kw-muted);
}

/* ✦ divider: <div class="kw-divider"><span>✦</span><span>✦</span><span>✦</span></div> */
.kw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--kw-gold-deep);
  font-size: 10px;
}
.kw-divider::before,
.kw-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--kw-gold-dim));
}
.kw-divider::after {
  background: linear-gradient(to left, transparent, var(--kw-gold-dim));
}

/* Stat boxes: 21 ADULTS / 1 CHILD / 0 AWAY */
.kw-statgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.kw-stat {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-border);
  border-radius: 6px;
  padding: 10px 6px;
  text-align: center;
}
.kw-stat .kw-stat-num {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--kw-cream);
  display: block;
}
.kw-stat .kw-stat-label {
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kw-muted);
}

/* Key/value rows: Happiness … 79% · Content */
.kw-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Crimson Pro', serif;
  font-size: 14px;
  padding: 4px 0;
}
.kw-row .kw-key { color: var(--kw-muted); }
.kw-row .kw-val { color: var(--kw-cream); font-weight: 500; }
.kw-row .kw-val.good { color: var(--kw-good); }

/* Full-width gold CTA: Construct building */
.kw-btn-gold {
  display: block;
  width: 100%;
  background: var(--kw-gold-btn);
  border: 1px solid var(--kw-gold);
  border-radius: 6px;
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  font-size: 15px;
  color: #241a10;
  padding: 11px;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.kw-btn-gold:hover { background: #d9b261; }
.kw-btn-gold:active { transform: scale(.98); }

/* ════════════════════════════════════════════════════════════════
   Part 2 — settlement panel re-skin (written against main.js's
   _settlementTierCard / _selectWorldTileImpl markup and the
   existing sett-* rules at main.css ~9560–9790; layout is kept,
   only the skin changes)
   ════════════════════════════════════════════════════════════════ */

/* Tier card → storybook plate. !important needed where main.js sets
   inline tier colors (style="color:...") on the banner text. */
.tier-card-img-wrap::before {
  border: 1px solid var(--kw-gold-deep);
}
.tier-card-img-wrap::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--kw-gold-dim);
  pointer-events: none;
  z-index: 2;
}
.tier-card-tier-num {
  color: var(--kw-gold-deep) !important;
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  letter-spacing: .25em;
  opacity: 1;
}
.tier-card-tier-name {
  color: var(--kw-cream) !important;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.tier-card-tier-name::before,
.tier-card-tier-name::after {
  content: '✦';
  font-size: 9px;
  color: var(--kw-gold-deep);
  opacity: 1;
  vertical-align: 3px;
  padding: 0 8px;
}
.tier-card-sett-name {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--kw-muted);
}

/* Section labels → gold eyebrows */
.sett-section-label {
  font-family: 'Crimson Pro', serif;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--kw-gold-deep);
}

/* Dividers → gradient line with centred ✦ */
.sett-divider {
  position: relative;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--kw-gold-dim), transparent);
  margin: 14px 0;
  overflow: visible;
}
.sett-divider::after {
  content: '✦';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  line-height: 1;
  color: var(--kw-gold-deep);
  background: var(--kw-wood);
  padding: 0 8px;
}

/* Status rows */
.sett-status-label {
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: var(--kw-muted);
}
.sett-status-val {
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  font-weight: 500;
}

/* Population stat cells → dark boxes, serif numerals */
.sett-stat {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-border);
  border-radius: 6px;
  padding: 10px 4px 8px;
}
.sett-stat-val {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--kw-cream);
}
.sett-stat-key {
  font-family: 'Crimson Pro', serif;
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--kw-muted);
}

/* Tags and species pills → quiet gold-bordered pills */
.sett-tag,
.sett-species-pip {
  background: transparent;
  border: 1px solid var(--kw-border);
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  color: var(--kw-muted);
}
.sett-tag-active {
  border-color: var(--kw-gold-dim);
  color: var(--kw-gold);
  background: rgba(201, 164, 92, .08);
}
.sett-species-pip b { color: var(--kw-cream); }

/* Primary action → the solid-gold CTA (replaces the gradient) */
.sett-action-primary {
  background: var(--kw-gold-btn);
  border: 1px solid var(--kw-gold);
  border-radius: 6px;
  color: #241a10;
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
}
.sett-action-primary:hover {
  background: #d9b261;
  border-color: var(--kw-gold);
}

/* Secondary actions → parchment-on-wood */
.sett-action-secondary {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 6px;
  color: var(--kw-cream);
  font-family: 'Crimson Pro', serif;
  font-weight: 500;
  font-size: 12px;
}
.sett-action-secondary:hover {
  background: #352818;
  border-color: var(--kw-gold-deep);
  color: var(--kw-cream);
}

/* ════════════════════════════════════════════════════════════════
   Part 3 — tuning after first live deploy
   ════════════════════════════════════════════════════════════════ */

/* Scout → solid gold. main.css has a patch layer (~line 2202) that
   sets .action-bar-btn background/border/color with !important —
   important beats ID specificity, so these must be !important too. */
.action-bar #action-scout {
  background: var(--kw-gold-btn) !important;
  border: 1px solid var(--kw-gold) !important;
  color: #241a10 !important;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
}
.action-bar #action-scout:hover {
  background: #d9b261 !important;
  border-color: var(--kw-gold) !important;
}

/* Secondary action buttons — take back control from the same patch
   layer; flatten the text-shadow / inset highlight */
.action-bar .action-bar-btn {
  background: var(--kw-wood-2) !important;
  border: 1px solid var(--kw-gold-dim) !important;
  color: var(--kw-cream) !important;
  text-shadow: none;
  box-shadow: none;
}
.action-bar .action-bar-btn:hover {
  background: #352818 !important;
  border-color: var(--kw-gold-deep) !important;
  box-shadow: none;
}

/* Season badge internals — gold the name, mute the day counter,
   and bring the progress bar onto the palette (its fill color is
   set per-season from JS, hence !important) */
.season-badge-inner .season-name { color: var(--kw-gold); }
.season-badge-inner .season-day { color: var(--kw-muted); }
.season-progress-bar { background: rgba(201, 164, 92, .15); }
.season-progress-fill { background: var(--kw-gold-deep) !important; }

/* Sidebar scrollbar — the default grey bar is the last un-themed
   chrome on screen */
.sidebar-body,
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--kw-gold-dim) transparent;
}
.sidebar-body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar-body::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar-body::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
  background: var(--kw-gold-dim);
  border-radius: 4px;
}
.sidebar-body::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--kw-gold-deep); }

/* Unoccupied-tile info rows (click any empty hex) — bring onto
   the same type system as the settlement panel */
.sidebar .info-label {
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: var(--kw-muted);
}
.sidebar .info-val {
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: var(--kw-cream);
}
.sidebar .sdivider {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--kw-gold-dim), transparent);
  margin: 12px 0;
}

/* ════════════════════════════════════════════════════════════════
   Part 4 — second live pass
   ════════════════════════════════════════════════════════════════ */

/* Gold hairline under the topbar — main.css patch layers (~1755,
   ~2141) set border-bottom and background with !important */
.topbar {
  background: var(--kw-ink) !important;
  border-bottom: 1px solid var(--kw-gold-deep) !important;
}

/* Action bar removed (Scout / Build / Citizens / Centre).
   NOTE: this orphans actionScout() and centreCamera() — they have
   no other UI entry point. Build and Citizens remain reachable
   via the sidebar. Delete this block to bring the bar back. */
.action-bar { display: none !important; }

/* Build tab removed from sidebar. switchTab('buildings') still
   works programmatically (e.g. from Construct Building flows) —
   only the tab header is hidden. */
#tab-buildings { display: none !important; }

/* "Found outpost here" and friends — off the old green palette */
.sidebar .action-btn {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 6px;
  color: var(--kw-cream);
  font-size: 13px;
}
.sidebar .action-btn:hover {
  background: #352818;
  border-color: var(--kw-gold-deep);
}

/* ════════════════════════════════════════════════════════════════
   Part 5 — modal harmonization (quests .qm-, battles .bm-,
   inventory .inv-, noticeboard/diplomacy .nb-modal-, combat .cm-)
   ════════════════════════════════════════════════════════════════ */

/* Shared shell: one ink background, one gold-dim border, and the
   same hairline under every header that the topbar uses */
.qm-card,
.nb-modal-card,
.inv-modal-card,
.bm-card,
.cm-card {
  background: rgba(29, 21, 13, .98);
  border: 1px solid var(--kw-gold-dim);
}
.qm-header,
.nb-modal-header,
.inv-header,
.bm-header {
  border-bottom: 1px solid var(--kw-gold-dim);
}

/* Section eyebrows — same treatment as SETTLEMENT STATUS in the
   sidebar (IN PROGRESS, EQUIPMENT, MATERIAL, FOOD, BATTLE LOG) */
.qm-section,
.inv-group-label,
.cm-log-label {
  font-family: 'Crimson Pro', serif;
  letter-spacing: .2em;
  color: var(--kw-gold-deep);
}

/* Modal subtitles → Crimson italic muted */
.bm-header-sub {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  color: var(--kw-muted);
}

/* Primary CTAs → solid gold, same as Scout / Construct Building.
   One gold button per modal = the action hierarchy stays legible. */
.qm-tavern-btn,
.bm-engage {
  background: var(--kw-gold-btn);
  border: 1px solid var(--kw-gold);
  border-radius: 6px;
  color: #241a10;
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  text-shadow: none;
}
.qm-tavern-btn:hover,
.bm-engage:hover {
  background: #d9b261;
  border-color: var(--kw-gold);
  transform: none;
}

/* Quest timers → the topbar's serif numerals */
.qm-quest-timer {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--kw-cream);
}

/* Close buttons — quiet gold instead of the old green hover.
   (.inv-close / .cm-close are best-effort; harmless if unmatched) */
.qm-close,
.nb-modal-close,
.bm-close,
.inv-close,
.cm-close {
  color: var(--kw-muted);
}
.qm-close:hover,
.nb-modal-close:hover,
.bm-close:hover,
.inv-close:hover,
.cm-close:hover {
  background: rgba(201, 164, 92, .12);
  color: var(--kw-gold);
}

/* ════════════════════════════════════════════════════════════════
   Part 6 — vector asset pack (requires the icon sprite + markup
   swaps in the matching index.html)
   ════════════════════════════════════════════════════════════════ */

/* Sprite icons — stroke inherits currentColor from the parent */
.kw-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -3px;
}
.topbar .res .kw-icon { color: var(--kw-gold); }
.community-bar .comm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.community-bar .comm-btn .kw-icon {
  width: 16px;
  height: 16px;
  opacity: .8;
}
.community-bar .comm-btn.active .kw-icon,
.community-bar .comm-btn:hover .kw-icon { opacity: 1; }

/* Ornate storybook frame — nine-slice border-image with flourished
   corners, replacing the plain 1px modal border from Part 5.
   border-radius must be 0: border-image ignores radius, and a
   rounded background would peek past the square corners. */
.qm-card,
.nb-modal-card,
.inv-modal-card,
.bm-card,
.cm-card,
.kw-ornate-frame {
  border: 18px solid transparent;
  border-radius: 0;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none'%3E%3Cg transform='translate(0,0)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(90,0) scale(-1,1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(0,90) scale(1,-1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(90,90) scale(-1,-1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cpath d='M30 0.75 H60 M30 89.25 H60 M0.75 30 V60 M89.25 30 V60' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M30 5 H60 M30 85 H60 M5 30 V60 M85 30 V60' stroke='%236e5836'/%3E%3C/g%3E%3C/svg%3E") 30 / 18px stretch;
}

/* Divider ornament — curls flanking the diamond, drawn over the
   line (the rect in the data URI masks the line behind it; its
   fill matches the sidebar wood) */
.sett-divider {
  height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 14'%3E%3Crect x='15' width='46' height='14' fill='%23241a10'/%3E%3Cg fill='none' stroke='%23c9a45c' stroke-width='1.2'%3E%3Cpath d='M27 11.5 a5 5 0 1 0 -5 -5'/%3E%3Cpath d='M49 11.5 a5 5 0 1 1 5 -5'/%3E%3C/g%3E%3Cpath d='M38 3 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/svg%3E") center / 76px 14px no-repeat,
    linear-gradient(to right, transparent, var(--kw-gold-dim) 20%, var(--kw-gold-dim) 80%, transparent) center / 100% 1px no-repeat;
}
.sett-divider::after { content: none; }

/* ════════════════════════════════════════════════════════════════
   Part 7 — population & actions rework (pairs with the matching
   main.js: attention pills + equal action grid)
   ════════════════════════════════════════════════════════════════ */

/* Attention pills — citizen states needing the player's eye.
   Rendered only when count > 0; click through to Citizens tab. */
.sett-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.sett-pill {
  background: transparent;
  border: 1px solid var(--kw-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: 'Crimson Pro', serif;
  font-size: 12px;
  color: var(--kw-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sett-pill b {
  color: var(--kw-cream);
  font-weight: 600;
  margin-left: 2px;
}
.sett-pill:hover {
  border-color: var(--kw-gold-dim);
  color: var(--kw-cream);
  background: rgba(201, 164, 92, .06);
}

/* Idle when high — opportunity, amber */
.sett-pill--warn { border-color: #7a652e; color: #d9b261; }
.sett-pill--warn b { color: #e8c87a; }

/* Unhoused / Sick — problems, ember */
.sett-pill--alert { border-color: #6e3a2e; color: #d98a6a; }
.sett-pill--alert b { color: #e8a98f; }

/* Actions — equal 2×2 grid; no permanent king */
.sett-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sett-action {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 6px;
  color: var(--kw-cream);
  font-family: 'Crimson Pro', serif;
  font-weight: 500;
  font-size: 13px;
  padding: 9px 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.sett-action:hover {
  background: #352818;
  border-color: var(--kw-gold-deep);
}
.sett-action:active { transform: scale(.97); }

/* Gold is earned: JS applies this to at most ONE action when the
   game has an opinion about what to do next */
.sett-action--glow {
  border-color: var(--kw-gold);
  color: var(--kw-gold);
  box-shadow: 0 0 10px rgba(201, 164, 92, .22), inset 0 0 6px rgba(201, 164, 92, .1);
}
.sett-action--glow:hover {
  border-color: var(--kw-gold);
  box-shadow: 0 0 14px rgba(201, 164, 92, .32), inset 0 0 6px rgba(201, 164, 92, .14);
}

/* ════════════════════════════════════════════════════════════════
   Part 8 — actions grid (5 buttons) + citizens modal reskin
   ════════════════════════════════════════════════════════════════ */

/* With an odd button count, the last action spans the full row so
   the grid never leaves a hanging gap */
.sett-actions-grid > .sett-action:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* (.sett-action--glow is now unused — the idle→Tavern rule was
   removed from main.js. The class stays available for a future
   priority system.) */

/* ── Citizens modal ("Your People") ── */
.all-citizens-modal {
  background: rgba(29, 21, 13, .98);
  border: 18px solid transparent;
  border-radius: 0;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none'%3E%3Cg transform='translate(0,0)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(90,0) scale(-1,1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(0,90) scale(1,-1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(90,90) scale(-1,-1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cpath d='M30 0.75 H60 M30 89.25 H60 M0.75 30 V60 M89.25 30 V60' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M30 5 H60 M30 85 H60 M5 30 V60 M85 30 V60' stroke='%236e5836'/%3E%3C/g%3E%3C/svg%3E") 30 / 18px stretch;
}

.ac-header { border-bottom: 1px solid var(--kw-gold-dim); }
.ac-title { color: var(--kw-cream); font-weight: 600; }
.ac-count {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--kw-muted);
}
.ac-close { color: var(--kw-muted); }
.ac-close:hover { color: var(--kw-gold); }

.ac-search {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 6px;
  font-family: 'Crimson Pro', serif;
  font-size: 14px;
  color: var(--kw-cream);
}
.ac-search:focus { border-color: var(--kw-gold-deep); }
.ac-search::placeholder { color: var(--kw-muted); opacity: .7; }

/* Filter row */
.ac-filter-label {
  font-family: 'Crimson Pro', serif;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--kw-gold-deep);
}
.ac-chip {
  background: transparent;
  border: 1px solid var(--kw-border);
  border-radius: 999px;
  font-family: 'Crimson Pro', serif;
  font-size: 12px;
  color: var(--kw-muted);
  transition: border-color .15s, color .15s, background .15s;
}
.ac-chip:hover {
  border-color: var(--kw-gold-dim);
  color: var(--kw-cream);
  background: rgba(201, 164, 92, .06);
}
.ac-chip.active {
  border-color: var(--kw-gold-deep);
  color: var(--kw-gold);
  background: rgba(201, 164, 92, .1);
}
.ac-chip-divider { background: var(--kw-border); }

.ac-role-filter,
.ac-role-select {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 5px;
  font-family: 'Crimson Pro', serif;
  color: var(--kw-cream);
}
.ac-role-filter:focus,
.ac-role-select:focus { border-color: var(--kw-gold-deep); }

/* Table */
.ac-table thead { background: rgba(29, 21, 13, .98); }
.ac-table th {
  border-bottom: 1px solid var(--kw-gold-dim);
}
.ac-sort-btn,
.ac-table th {
  font-family: 'Crimson Pro', serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kw-gold-deep);
}
.ac-sort-btn:hover { color: var(--kw-gold); }
.ac-sort-btn.active-asc,
.ac-sort-btn.active-desc { color: var(--kw-gold); }

/* Header alignment: stat columns (😊 through CHA, cols 5–11) and
   the housed column (12) are centred like their data */
.ac-table th:nth-child(n+5):nth-child(-n+12) { text-align: center; }

.ac-row { border-bottom: 1px solid rgba(58, 44, 27, .55); }
.ac-row:hover { background: rgba(201, 164, 92, .05); }
.ac-row td { color: var(--kw-cream); }
.ac-name { color: var(--kw-cream); }
.ac-meta { color: var(--kw-muted); }
.ac-stat { color: #d8cdb4; }
.ac-child-tag {
  border: 1px solid var(--kw-gold-dim);
  border-radius: 999px;
  color: var(--kw-muted);
  background: transparent;
}

/* Themed scrollbar, same as the sidebar */
.ac-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--kw-gold-dim) transparent;
}
.ac-table-wrap::-webkit-scrollbar { width: 7px; }
.ac-table-wrap::-webkit-scrollbar-track { background: transparent; }
.ac-table-wrap::-webkit-scrollbar-thumb {
  background: var(--kw-gold-dim);
  border-radius: 4px;
}
.ac-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--kw-gold-deep); }

/* ════════════════════════════════════════════════════════════════
   Part 9 — tavern scene reskin (CSS-only, markup untouched)
   Principle: brighten the painting, make the UI solid storybook
   plates instead of washed translucent bars.
   ════════════════════════════════════════════════════════════════ */

/* Let the art breathe: lighter base dim + vignette toward edges */
.tavern-bg::after {
  background: radial-gradient(ellipse at center,
    rgba(12, 8, 4, .28) 0%,
    rgba(12, 8, 4, .5) 70%,
    rgba(12, 8, 4, .68) 100%);
}

/* Header */
.tavern-header {
  border-bottom: 1px solid rgba(201, 164, 92, .55);
  padding-bottom: 14px;
}
.tavern-title {
  flex: 1;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: var(--kw-gold);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .85), 0 0 24px rgba(200, 140, 40, .35);
}
.tavern-title::before,
.tavern-title::after {
  content: '✦';
  font-size: 11px;
  color: var(--kw-gold-deep);
  vertical-align: 5px;
  padding: 0 12px;
}
.tavern-back-btn {
  background: rgba(36, 26, 16, .92);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 6px;
  color: var(--kw-cream);
}
.tavern-back-btn:hover {
  background: #352818;
  border-color: var(--kw-gold-deep);
  color: var(--kw-cream);
}

/* Innkeeper plate — solid wood, double-framed */
.tavern-innkeeper-area {
  background: rgba(36, 26, 16, .94);
  border: 1px solid var(--kw-gold-deep);
  border-radius: 8px;
  outline: 1px solid rgba(110, 88, 54, .6);
  outline-offset: -5px;
}
.tavern-innkeeper-portrait {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 8px;
  width: 56px;
  padding: 6px 0;
}
.tavern-innkeeper-msg { color: var(--kw-cream); }
.tavern-innkeeper-msg strong { color: var(--kw-gold); }
.tavern-innkeeper-msg em { color: var(--kw-muted); }

/* Menu plates */
.tavern-menu-btn {
  position: relative;
  background: rgba(36, 26, 16, .92);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 6px;
  color: var(--kw-cream);
  font-weight: 500;
  backdrop-filter: none;
}
.tavern-menu-btn::after {
  content: '❯';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--kw-muted);
  transition: color .15s, transform .15s;
}
.tavern-menu-btn:hover {
  background: #352818;
  border-color: var(--kw-gold-deep);
  color: var(--kw-cream);
}
.tavern-menu-btn:hover::after {
  color: var(--kw-gold);
  transform: translateY(-50%) translateX(3px);
}
.tavern-menu-btn.secondary {
  color: var(--kw-muted);
  border-color: var(--kw-border);
}
.tavern-menu-btn.secondary::after { content: none; }
.tavern-menu-btn.secondary:hover { color: var(--kw-cream); }

/* Card game selection */
.tavern-card-menu-title {
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kw-gold-deep);
}
.tavern-game-btn {
  background: rgba(36, 26, 16, .92);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 6px;
  backdrop-filter: none;
}
.tavern-game-btn:hover {
  background: #352818;
  border-color: var(--kw-gold-deep);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.tgb-icon {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 8px;
  width: 50px;
  text-align: center;
  padding: 6px 0;
}
.tgb-name { color: var(--kw-cream); }
.tgb-desc {
  font-style: italic;
  color: var(--kw-muted);
}
.tgb-reward { color: #d9b261; }

/* ════════════════════════════════════════════════════════════════
   Part 10 — tavern layout rework: scene stays clear, actions dock
   to the bottom counter (pairs with the tavern-dock markup)
   ════════════════════════════════════════════════════════════════ */

/* Full-bleed column: header band top, dock pinned bottom,
   card menu / game area centered in the space between */
.tavern-inner {
  max-width: none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  gap: 0;
  justify-content: flex-start;
  overflow-y: auto;
}

/* Counter shadow at the bottom of the scene + soft vignette */
.tavern-bg::after {
  background:
    linear-gradient(to top,
      rgba(12, 8, 4, .8) 0%,
      rgba(12, 8, 4, .3) 24%,
      rgba(12, 8, 4, 0) 44%),
    linear-gradient(to bottom,
      rgba(12, 8, 4, .72) 0%,
      rgba(12, 8, 4, 0) 18%),
    radial-gradient(ellipse at center,
      rgba(12, 8, 4, .12) 0%,
      rgba(12, 8, 4, .38) 100%);
}

/* Header band */
.tavern-header {
  width: 100%;
  padding: 16px 28px 14px;
  border-bottom: none;
  flex-shrink: 0;
}
.tavern-header-spacer { width: 118px; flex-shrink: 0; }

/* Card menu and game table float centered in the scene */
.tavern-card-menu,
.tavern-game-area {
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: 16px 24px;
}

/* The dock — pinned to the counter */
.tavern-dock {
  margin-top: auto;
  width: 100%;
  max-width: 920px;
  align-self: center;
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* Tavernkeep plaque — compact strip above the cards */
.tavern-dock .tavern-innkeeper-area {
  padding: 12px 18px;
  width: 100%;
}

/* Action cards, side by side */
.tavern-dock .tavern-menu {
  flex-direction: row;
  gap: 14px;
}
.tavern-dock .tavern-menu-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 18px 16px 16px;
  text-align: center;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.tavern-dock .tavern-menu-btn::after { content: none; }
.tavern-dock .tavern-menu-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.tmb-icon {
  font-size: 28px;
  line-height: 1;
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 10px;
  width: 58px;
  padding: 11px 0;
  transition: border-color .15s;
}
.tavern-dock .tavern-menu-btn:hover .tmb-icon {
  border-color: var(--kw-gold-deep);
}
.tmb-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--kw-cream);
}
.tmb-desc {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--kw-muted);
}

/* ════════════════════════════════════════════════════════════════
   Part 11 — tavernkeep character sprite, standing behind the dock
   ════════════════════════════════════════════════════════════════ */

/* Layering: bg (0) → keeper sprite (1) → UI (2) */
.tavern-inner { z-index: 2; }

.tavern-keeper-sprite {
  position: absolute;
  z-index: 1;
  /* Centered behind the plaque; the waistline (≈47% up the sprite)
     sits at the dock's top edge (~214px), so only below the waist
     is hidden behind the UI */
  --kw-keeper-h: clamp(440px, 64vh, 660px);
  height: var(--kw-keeper-h);
  bottom: calc(380px - var(--kw-keeper-h) * .47);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .55));
}

/* ════════════════════════════════════════════════════════════════
   Part 12 — tavern odds & ends
   ════════════════════════════════════════════════════════════════ */

/* Inline "Assign a Tavernkeep" CTA in the empty plaque */
.tavern-assign-btn {
  background: var(--kw-gold-btn);
  border: 1px solid var(--kw-gold);
  border-radius: 5px;
  color: #241a10;
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  font-size: 13px;
  padding: 5px 12px;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: 1px;
}
.tavern-assign-btn:hover { background: #d9b261; }

/* Disabled bank button reads as "not yet worth anything" */
.cg-btn:disabled {
  opacity: .45;
  cursor: default;
}

/* ════════════════════════════════════════════════════════════════
   Part 13 — The Briar Court
   ════════════════════════════════════════════════════════════════ */

.card-game.briar { max-width: 640px; }

.bc-seats {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.bc-seat {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-border);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  min-width: 108px;
  transition: border-color .2s, opacity .2s;
}
.bc-seat.acting,
.bc-you.acting { border-color: var(--kw-gold-deep); }
.bc-seat.out,
.bc-you.out { opacity: .4; }
.bc-seat-name {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--kw-cream);
}
.bc-seat-acorns {
  font-family: 'Crimson Pro', serif;
  font-size: 12px;
  color: var(--kw-muted);
}
.bc-seat-cards {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 6px;
}

.bc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 15px;
  line-height: 1.1;
  border-radius: 5px;
  padding: 5px 6px 3px;
  min-width: 40px;
}
.bc-card span {
  font-family: 'Crimson Pro', serif;
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--kw-muted);
}
.bc-card.back {
  background: #1d150d;
  border: 1px solid var(--kw-gold-dim);
  color: var(--kw-gold-deep);
  justify-content: center;
  min-height: 38px;
}
.bc-card.mine {
  background: #1d150d;
  border: 1px solid var(--kw-gold-deep);
}
.bc-card.mine span { color: var(--kw-cream); }
.bc-card.revealed {
  background: transparent;
  border: 1px dashed #6e3a2e;
  opacity: .55;
}

.bc-log {
  background: rgba(20, 14, 8, .85);
  border: 1px solid var(--kw-border);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
  min-height: 96px;
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: var(--kw-muted);
  text-align: left;
}
.bc-log div:last-child { color: var(--kw-cream); }

.bc-you {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: border-color .2s;
}
.bc-you-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bc-prompt { margin-top: 12px; min-height: 64px; }
.bc-question {
  font-family: 'Crimson Pro', serif;
  font-size: 14px;
  color: var(--kw-cream);
  margin-bottom: 8px;
}
.bc-options {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Briar Court rules panel + help button */
.bc-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--kw-gold-dim);
  background: transparent;
  color: var(--kw-gold-deep);
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  cursor: pointer;
  vertical-align: 3px;
  margin-left: 6px;
}
.bc-help-btn:hover { border-color: var(--kw-gold); color: var(--kw-gold); }

.bc-help {
  background: rgba(20, 14, 8, .96);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 10px 0;
  text-align: left;
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
}
.bc-help-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--kw-gold);
  margin-bottom: 8px;
}
.bc-help-row {
  display: flex;
  gap: 10px;
  padding: 2px 0;
  color: var(--kw-muted);
}
.bc-help-row b { color: var(--kw-cream); min-width: 118px; font-weight: 600; }
.bc-help-note {
  margin: 10px 0;
  color: var(--kw-muted);
  line-height: 1.45;
}
.bc-help-note b { color: var(--kw-cream); }
.bc-help .cg-btn { margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════
   Part 14 — Briar Court card art: fanned hand, hover inspect,
   court ledger tracker
   ════════════════════════════════════════════════════════════════ */

/* Hover-enlarged cards must escape their containers */
.card-game.briar,
.tavern-game-area { overflow: visible; }

/* Your hand — fanned pair, Hearthstone-style */
.bc-hand {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 10px;
  min-height: 158px;
}
.bc-hand-card {
  width: 112px;
  position: relative;
  transition: transform .16s ease-out;
  cursor: zoom-in;
}
.bc-hand-card img {
  width: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .55);
}
.bc-hand-card:first-child { transform: rotate(-4deg) translateX(7px); z-index: 2; }
.bc-hand-card:last-child  { transform: rotate(4deg) translateX(-7px); z-index: 1; }
.bc-hand-card:hover {
  transform: scale(2.1) translateY(-64px);
  z-index: 40;
  cursor: zoom-in;
}
.bc-hand-card.dead img {
  filter: grayscale(.95) brightness(.5);
}
.bc-hand-card.dead:hover {
  transform: scale(1.15) translateY(-10px);
}

/* Revealed opponent cards — mini art, greyed */
.bc-card.revealed-img {
  width: 42px;
  padding: 0;
  border: none;
  background: transparent;
  opacity: .85;
}
.bc-card.revealed-img img {
  width: 100%;
  display: block;
  border-radius: 4px;
  filter: grayscale(.95) brightness(.5);
}

/* Court ledger — three pips per role, dead copies grey out */
.bc-tracker {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0;
  padding: 6px 10px;
  background: rgba(20, 14, 8, .7);
  border: 1px solid var(--kw-border);
  border-radius: 999px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.bc-tracker-role {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
}
.bc-pip {
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--kw-gold-deep);
  border: 1px solid rgba(0, 0, 0, .4);
}
.bc-pip.dead {
  background: #443625;
  opacity: .55;
}

/* Slimmer you-bar now that cards live in the hand */
.bc-you {
  padding: 7px 16px;
  gap: 14px;
  width: fit-content;
  margin: 0 auto;
}

/* ════════════════════════════════════════════════════════════════
   Part 15 — Briar Court: bubbles, ledger modal, card inspection
   ════════════════════════════════════════════════════════════════ */

/* Thinking bubble above an AI seat */
.bc-seat { position: relative; }
.bc-bubble {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 14, 8, .95);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 999px;
  padding: 3px 11px;
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--kw-muted);
  white-space: nowrap;
  z-index: 6;
  animation: bcBubbleIn .22s ease-out;
}
@keyframes bcBubbleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Mini card art (help rows, ledger) — click to inspect */
.bc-mini-card {
  width: 54px;
  border-radius: 4px;
  cursor: zoom-in;
  display: block;
  transition: transform .12s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.bc-mini-card:hover { transform: translateY(-3px) scale(1.06); }
.bc-mini-card.dead { filter: grayscale(.95) brightness(.45); }

.bc-help-row { align-items: center; }
.bc-help-row .bc-mini-card { flex-shrink: 0; }

/* Tracker is clickable now */
.bc-tracker { cursor: pointer; transition: border-color .15s; }
.bc-tracker:hover { border-color: var(--kw-gold-dim); }

/* Ledger modal */
.bc-ledger-grid {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.bc-ledger-role { text-align: center; }
.bc-ledger-cards {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.bc-ledger-name {
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  color: var(--kw-muted);
  margin-top: 5px;
}

/* Full-size card inspection overlay — click anywhere to dismiss */
.bc-inspect {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(8, 5, 2, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: bcBubbleIn .15s ease-out;
}
.bc-inspect img {
  width: min(360px, 82vw);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .8), 0 0 0 1px var(--kw-gold-dim);
}

/* ════════════════════════════════════════════════════════════════
   Part 16 — multiplayer lobby + multiplayer pill
   ════════════════════════════════════════════════════════════════ */

/* "Multiplayer" pill on game menu entries */
.tgb-mp-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--kw-gold-dim);
  border-radius: 999px;
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  font-style: normal;
  letter-spacing: .02em;
  color: var(--kw-gold);
  background: rgba(201, 164, 92, .08);
  vertical-align: middle;
}

.lobby {
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: 18px 24px;
  text-align: center;
}
.lobby-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--kw-gold);
  margin-bottom: 4px;
}
.lobby-sub {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  color: var(--kw-muted);
  margin-bottom: 18px;
}

/* Mode chooser + create cards */
.lobby-mode-row { display: flex; gap: 14px; justify-content: center; }
.lobby-card {
  flex: 1;
  max-width: 220px;
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 8px;
  padding: 20px 16px;
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}
.lobby-card:hover { border-color: var(--kw-gold-deep); background: #352818; transform: translateY(-3px); }
.lobby-card-icon { font-size: 30px; }
.lobby-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 600;
  color: var(--kw-cream);
  margin: 8px 0 4px;
}
.lobby-card-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 12px; color: var(--kw-muted);
}

/* Room list */
.lobby-rooms { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.lobby-room-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-border);
  border-radius: 6px;
  padding: 10px 14px;
  text-align: left;
}
.lobby-room-host { font-family: 'Playfair Display', serif; color: var(--kw-cream); font-size: 15px; }
.lobby-room-meta { font-family: 'Crimson Pro', serif; font-size: 12px; color: var(--kw-muted); }
.lobby-empty {
  font-family: 'Crimson Pro', serif; font-style: italic;
  color: var(--kw-muted); padding: 24px 0;
}

.lobby-join-code { display: flex; gap: 8px; margin-bottom: 14px; }
.lobby-join-code .ac-search { flex: 1; text-align: center; letter-spacing: .2em; text-transform: uppercase; }

/* Create form */
.lobby-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.lobby-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lobby-field span { font-family: 'Crimson Pro', serif; color: var(--kw-muted); font-size: 14px; }
.lobby-field select { flex: 1; max-width: 280px; }

/* Room view */
.lobby-roomcode {
  font-family: 'Crimson Pro', serif;
  color: var(--kw-muted);
  margin-bottom: 16px;
}
.lobby-roomcode strong {
  font-family: 'Playfair Display', serif;
  font-size: 20px; letter-spacing: .15em;
  color: var(--kw-gold);
  margin: 0 4px;
}
.lobby-copy {
  background: transparent; border: 1px solid var(--kw-gold-dim);
  border-radius: 5px; color: var(--kw-cream);
  font-family: 'Crimson Pro', serif; font-size: 12px;
  padding: 3px 10px; cursor: pointer; margin: 0 6px;
}
.lobby-copy:hover { border-color: var(--kw-gold-deep); }
.lobby-vis-tag { font-size: 12px; color: var(--kw-muted); }

.lobby-seats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 18px;
}
.lobby-seat {
  border-radius: 6px; padding: 12px;
  font-family: 'Crimson Pro', serif; font-size: 14px;
}
.lobby-seat.filled { background: var(--kw-wood-2); border: 1px solid var(--kw-gold-dim); color: var(--kw-cream); }
.lobby-seat.empty { background: transparent; border: 1px dashed var(--kw-border); color: var(--kw-muted); font-style: italic; }
.lobby-waiting { font-family: 'Crimson Pro', serif; font-style: italic; color: var(--kw-muted); align-self: center; }

.lobby-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.lobby-flash {
  position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
  background: var(--kw-gold-btn); color: #241a10;
  font-family: 'Crimson Pro', serif; font-weight: 600;
  padding: 10px 20px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  z-index: 100002; animation: bcBubbleIn .2s ease-out;
}

/* ════════════════════════════════════════════════════════════════
   Part 17 — lobby as a modal overlay + AI seat controls
   ════════════════════════════════════════════════════════════════ */

.lobby-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 2, .72);
  backdrop-filter: blur(2px);
}
.lobby-backdrop.open { display: flex; animation: bcBubbleIn .18s ease-out; }

.lobby-card-shell {
  position: relative;
  width: min(620px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: rgba(29, 21, 13, .99);
  border: 18px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none'%3E%3Cg transform='translate(0,0)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(90,0) scale(-1,1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(0,90) scale(1,-1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(90,90) scale(-1,-1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cpath d='M30 0.75 H60 M30 89.25 H60 M0.75 30 V60 M89.25 30 V60' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M30 5 H60 M30 85 H60 M5 30 V60 M85 30 V60' stroke='%236e5836'/%3E%3C/g%3E%3C/svg%3E") 30 / 18px stretch;
}
.lobby-x {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--kw-muted);
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}
.lobby-x:hover { color: var(--kw-gold); }

/* AI seat affordances */
.lobby-seat.add-ai {
  background: transparent;
  border: 1px dashed var(--kw-gold-dim);
  color: var(--kw-gold-deep);
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.lobby-seat.add-ai:hover {
  border-color: var(--kw-gold-deep);
  color: var(--kw-gold);
  background: rgba(201, 164, 92, .06);
}
.lobby-ai-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border: 1px solid var(--kw-gold-dim);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--kw-gold);
  vertical-align: 1px;
}
.lobby-seat-x {
  background: transparent;
  border: none;
  color: var(--kw-muted);
  cursor: pointer;
  font-size: 12px;
  margin-left: 6px;
}
.lobby-seat-x:hover { color: #d98a6a; }

/* ════════════════════════════════════════════════════════════════
   Part 18 — large multiplayer game modal + in-game chat / whispers
   ════════════════════════════════════════════════════════════════ */

.bcmp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 2, .8);
  backdrop-filter: blur(3px);
}
.bcmp-shell {
  position: relative;
  display: flex;
  gap: 0;
  width: min(1080px, 94vw);
  height: min(740px, 90vh);
  background: rgba(29, 21, 13, .99);
  border: 18px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none'%3E%3Cg transform='translate(0,0)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(90,0) scale(-1,1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(0,90) scale(1,-1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cg transform='translate(90,90) scale(-1,-1)'%3E%3Cpath d='M0.75 30 C0.75 13 13 0.75 30 0.75' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M5 30 C5 16 16 5 30 5' stroke='%236e5836'/%3E%3Cpath d='M12 8 l4 4 -4 4 -4 -4 z' fill='%23c9a45c'/%3E%3C/g%3E%3Cpath d='M30 0.75 H60 M30 89.25 H60 M0.75 30 V60 M89.25 30 V60' stroke='%23c9a45c' stroke-width='1.5'/%3E%3Cpath d='M30 5 H60 M30 85 H60 M5 30 V60 M85 30 V60' stroke='%236e5836'/%3E%3C/g%3E%3C/svg%3E") 30 / 18px stretch;
}
.bcmp-x {
  position: absolute;
  top: 4px; right: 8px;
  background: transparent; border: none;
  color: var(--kw-muted); font-size: 18px; cursor: pointer; z-index: 3;
}
.bcmp-x:hover { color: var(--kw-gold); }

.bcmp-game {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  display: flex;
}
.bcmp-game .card-game.briar { max-width: 680px; margin: auto; }

/* Chat panel docked to the right */
.bcmp-chat {
  width: 268px;
  flex-shrink: 0;
  border-left: 1px solid var(--kw-gold-dim);
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.bcmp-chat-log {
  flex: 1;
  overflow-y: auto;
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: var(--kw-cream);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 4px;
}
.bcmp-chat-line { line-height: 1.4; }
.bcmp-chat-line b { color: var(--kw-gold); }
.bcmp-chat-line.whisper {
  background: rgba(150, 110, 180, .12);
  border-left: 2px solid #9a7bb5;
  padding: 3px 7px;
  border-radius: 4px;
}
.bcmp-whisper-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b89bd0;
  margin-right: 5px;
}
.bcmp-chat-row { display: flex; gap: 5px; margin-top: 8px; }
.bcmp-chat-to {
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 5px;
  color: var(--kw-cream);
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  max-width: 78px;
}
.bcmp-chat-input {
  flex: 1;
  min-width: 0;
  background: var(--kw-wood-2);
  border: 1px solid var(--kw-gold-dim);
  border-radius: 5px;
  color: var(--kw-cream);
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  padding: 6px 8px;
}
.bcmp-chat-input:focus { border-color: var(--kw-gold-deep); outline: none; }
.bcmp-chat-send {
  background: var(--kw-gold-btn);
  border: 1px solid var(--kw-gold);
  border-radius: 5px;
  color: #241a10;
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  font-size: 12px;
  padding: 0 10px;
  cursor: pointer;
}

/* Whisper bubble reuses the thinking bubble, tinted */
.bc-bubble.whisper {
  border-color: #9a7bb5;
  color: #c9b3dd;
}

/* On narrow screens, stack chat under the game */
@media (max-width: 760px) {
  .bcmp-shell { flex-direction: column; height: 92vh; }
  .bcmp-chat { width: auto; border-left: none; border-top: 1px solid var(--kw-gold-dim); height: 180px; }
}

/* ════════════════════════════════════════════════════════════════
   Part 19 — networked Court states
   ════════════════════════════════════════════════════════════════ */
.bc-wait, .bc-waiting {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  color: var(--kw-muted);
  padding: 18px 0;
  text-align: center;
}
.bc-hand-card.back-lg {
  width: 112px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d150d;
  border: 1px solid var(--kw-gold-dim);
  border-radius: 8px;
  color: var(--kw-gold-deep);
  font-size: 28px;
}
.bc-hand-card.selected img {
  outline: 2px solid var(--kw-gold);
  outline-offset: 2px;
  border-radius: 8px;
}
.cg-btn.disabled { opacity: .45; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════
   Part 20 — game-modal scrollbar + disconnect banner
   ════════════════════════════════════════════════════════════════ */
.bcmp-game, .bcmp-chat-log {
  scrollbar-width: thin;
  scrollbar-color: var(--kw-gold-dim) transparent;
}
.bcmp-game::-webkit-scrollbar,
.bcmp-chat-log::-webkit-scrollbar { width: 8px; }
.bcmp-game::-webkit-scrollbar-track,
.bcmp-chat-log::-webkit-scrollbar-track { background: transparent; }
.bcmp-game::-webkit-scrollbar-thumb,
.bcmp-chat-log::-webkit-scrollbar-thumb {
  background: var(--kw-gold-dim);
  border-radius: 4px;
}
.bcmp-game::-webkit-scrollbar-thumb:hover,
.bcmp-chat-log::-webkit-scrollbar-thumb:hover { background: var(--kw-gold-deep); }

/* Also theme the lobby + card-shell scrollbars */
.lobby-card-shell, .bcmp-shell {
  scrollbar-width: thin;
  scrollbar-color: var(--kw-gold-dim) transparent;
}
.lobby-card-shell::-webkit-scrollbar,
.bcmp-shell::-webkit-scrollbar { width: 8px; }
.lobby-card-shell::-webkit-scrollbar-thumb,
.bcmp-shell::-webkit-scrollbar-thumb { background: var(--kw-gold-dim); border-radius: 4px; }
.lobby-card-shell::-webkit-scrollbar-track,
.bcmp-shell::-webkit-scrollbar-track { background: transparent; }

.bcmp-absent {
  background: rgba(110, 58, 46, .25);
  border: 1px solid #6e3a2e;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: #d98a6a;
  text-align: center;
}
.bcmp-absent .cg-btn { margin-left: 8px; padding: 3px 12px; }

/* ════════════════════════════════════════════════════════════════
   Part 21 — Owl consult glow + larger scrollable log
   ════════════════════════════════════════════════════════════════ */

/* Selected consult cards get a clear gold radiance */
.bc-hand-card.selected {
  transform: translateY(-10px) scale(1.04);
  z-index: 5;
}
.bc-hand-card.selected img {
  outline: 2px solid var(--kw-gold);
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow:
    0 0 14px 3px rgba(232, 200, 122, .65),
    0 0 30px 8px rgba(201, 164, 92, .35);
  animation: bcSelGlow 1.6s ease-in-out infinite;
}
@keyframes bcSelGlow {
  0%, 100% { box-shadow: 0 0 12px 2px rgba(232,200,122,.5), 0 0 26px 6px rgba(201,164,92,.28); }
  50%      { box-shadow: 0 0 18px 5px rgba(232,200,122,.8), 0 0 38px 11px rgba(201,164,92,.45); }
}

/* History log: a little taller, scrollable, themed bar */
.bc-log {
  max-height: 150px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--kw-gold-dim) transparent;
}
.bc-log::-webkit-scrollbar { width: 7px; }
.bc-log::-webkit-scrollbar-track { background: transparent; }
.bc-log::-webkit-scrollbar-thumb { background: var(--kw-gold-dim); border-radius: 4px; }
.bc-log::-webkit-scrollbar-thumb:hover { background: var(--kw-gold-deep); }

/* ════════════════════════════════════════════════════════════════
   Part 22 — body-level overlays (help/ledger) + seat reaction tints
   ════════════════════════════════════════════════════════════════ */

/* Help & ledger overlay — fixed, above the game modal (which is 100000) */
.bc-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 2, .72);
  backdrop-filter: blur(2px);
}
.bc-overlay-backdrop.open { display: flex; animation: bcBubbleIn .16s ease-out; }
.bc-overlay-panel {
  background: rgba(20, 14, 8, .98);
  border: 1px solid var(--kw-gold-deep);
  border-radius: 10px;
  padding: 20px 22px;
  max-width: 460px;
  width: 90vw;
  max-height: 84vh;
  overflow-y: auto;
  text-align: left;
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .7);
}
.bc-overlay-panel .cg-btn { margin-top: 12px; }

/* Inspect layer sits above everything, including the overlay panel */
.bc-inspect { z-index: 100003; }

/* Seat reaction tints */
.bc-seat { transition: background .25s, border-color .25s; position: relative; }
.bc-seat-react {
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Crimson Pro', serif;
  font-size: 10px;
  letter-spacing: .04em;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 4;
}
.bc-seat.react-passed    { background: rgba(120, 160, 90, .18); border-color: #7a9a5a; }
.bc-seat.react-passed    .bc-seat-react { background: #4d6b38; color: #cfe0b4; }
.bc-seat.react-challenge { background: rgba(150, 110, 180, .22); border-color: #9a7bb5; }
.bc-seat.react-challenge .bc-seat-react { background: #6a4d85; color: #e0cdf0; }
.bc-seat.react-block     { background: rgba(90, 130, 175, .2); border-color: #5a82af; }
.bc-seat.react-block     .bc-seat-react { background: #3d5d7e; color: #c4d8ec; }
.bc-seat.react-fail {
  background: rgba(175, 70, 55, .35) !important;
  border-color: #af4637 !important;
  animation: bcFailFlash .9s ease-out;
}
@keyframes bcFailFlash {
  0% { background: rgba(175, 70, 55, .6); }
  100% { background: rgba(175, 70, 55, 0); }
}