*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Ember & Moss tokens — deep forest chrome, ember + lantern-gold light */
  --ink:#f6eedd;          /* primary text  */
  --ink2:#dccfb2;         /* secondary text */
  --ink3:#a89a80;         /* muted text    */
  --ink4:#766c58;         /* faint text    */
  --parchment:#1b241c;    /* base surface  */
  --parchment2:#121814;   /* sunken panel  */
  --parchment3:#2b382c;   /* raised/hover  */
  --night:#080c09;        /* page depths   */
  --accent:#e8633c;       /* ember         */
  --ember-deep:#b23a1d;   /* deep ember    */
  --gold:#f2bd6a;         /* lantern gold  */
  --fern:#7fb069;
  --moss:#7fb069;         /* insurgent / secondary */
  --teal:#4fa89a;         /* tertiary accent */
  --border:rgba(242,189,106,0.16);
  --border2:rgba(242,189,106,0.30);
  --shadow:rgba(0,0,0,0.55);
  --glow:0 0 18px rgba(242,189,106,.32);
  --glow-ember:0 0 22px rgba(232,99,60,.30);
  --radius:13px;
  --spring:cubic-bezier(.34,1.4,.5,1);
  font-family:'Outfit',system-ui,sans-serif;color:var(--ink);background:var(--night);
}
h1,h2,h3,.cinzel{font-family:'Cinzel',serif}
body{min-height:100vh;display:flex;flex-direction:column}
.screen{display:none}
.screen.active{display:flex;flex-direction:column}

/* ── LOBBY ── */
#screen-lobby{min-height:100vh;align-items:center;justify-content:flex-start;padding:48px 20px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% -6%, rgba(232,99,60,.12), transparent 58%),
    radial-gradient(ellipse 70% 60% at 14% 108%, rgba(60,100,66,.22), transparent 64%),
    radial-gradient(ellipse 70% 60% at 88% 110%, rgba(40,70,90,.16), transparent 64%),
    linear-gradient(180deg,#070b08,#101610 55%,#0a0f0b)}
.logo{text-align:center;margin-bottom:24px;display:flex;flex-direction:column;align-items:center}
.logo h1{font-size:52px;font-weight:900;color:var(--accent);letter-spacing:7px;line-height:1;
  text-shadow:0 2px 0 rgba(178,58,29,.5), 0 0 36px rgba(232,99,60,.30)}
.logo p{font-family:'Crimson Text',serif;font-size:16px;color:var(--ink3);font-style:italic;
  margin-top:9px;letter-spacing:.5px}
.lcard{background:linear-gradient(165deg,#19221a,#10160f 62%,#0c110d);border:1px solid var(--border2);
  border-radius:20px;padding:26px;width:100%;max-width:960px;
  box-shadow:0 18px 50px -12px var(--shadow);position:relative}

/* ── Lobby menu panel transitions (Solo/Online/Records/Deck Editor/Customize) ──
   The active panel is named via view-transition-name in JS (state-lobby.js setMode)
   right before the DOM swap, using .vt-slide-l / .vt-slide-r on <html> to pick a
   direction. Map Editor / in-game screens use switchScreen() and are unaffected —
   they keep their old no-transition behavior. */
.lcard{overflow:hidden}

::view-transition-group(lobby-panel){animation-duration:.32s}

/* Default (no direction class): plain cross-fade, no slide */
::view-transition-old(lobby-panel),
::view-transition-new(lobby-panel){animation-duration:.32s}

/* Clicked a menu to the RIGHT of the current one → content slides right-to-left */
html.vt-slide-r::view-transition-old(lobby-panel){animation:vt-out-to-left .32s ease both}
html.vt-slide-r::view-transition-new(lobby-panel){animation:vt-in-from-right .32s ease both}

/* Clicked a menu to the LEFT of the current one → content slides left-to-right */
html.vt-slide-l::view-transition-old(lobby-panel){animation:vt-out-to-right .32s ease both}
html.vt-slide-l::view-transition-new(lobby-panel){animation:vt-in-from-left .32s ease both}

@keyframes vt-out-to-left{to{translate:-100% 0;opacity:0}}
@keyframes vt-in-from-right{from{translate:100% 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes vt-out-to-right{to{translate:100% 0;opacity:0}}
@keyframes vt-in-from-left{from{translate:-100% 0;opacity:0}to{translate:0 0;opacity:1}}

/* All lobby menus share one fixed width so the card no longer resizes/shifts
   between tabs. (Map editor is a separate full-screen view; Deck Editor is a
   lobby panel like the rest.) */
.lcard.wide{max-width:960px}
.lcard h2{font-family:'Cinzel',serif;font-size:16px;color:var(--ink2);margin-bottom:12px;
  border-bottom:1px solid var(--border);padding-bottom:8px;letter-spacing:.5px}

/* ── Game collection selector (Official Dominion / Ultimate Dominion) ── */
.gmode-row{display:flex;gap:6px;margin-bottom:14px}
.gmode-btn{flex:1;padding:9px 10px;border-radius:10px;font-family:'Cinzel',serif;font-size:12.5px;
  font-weight:700;letter-spacing:.5px;cursor:pointer;border:1px solid var(--border);
  background:rgba(0,0,0,.16);color:var(--ink3);transition:all .18s var(--spring);text-align:center}
.gmode-btn:hover:not(.on){color:var(--ink2);border-color:var(--border2);transform:translateY(-1px)}
.gmode-btn.on{color:#fff5e3;border-color:rgba(240,179,92,.5);
  background:linear-gradient(180deg,var(--accent),var(--ember-deep));
  box-shadow:0 4px 14px -4px rgba(224,99,60,.5)}

/* Mode tabs */
.mode-row{display:flex;gap:8px;margin-bottom:16px}
.mode-btn{flex:1;padding:14px 10px;border-radius:13px;font-family:'Cinzel',serif;font-size:14px;
  font-weight:600;cursor:pointer;border:1px solid var(--border);
  background:linear-gradient(180deg,#1b241c,#161d17);
  color:var(--ink3);transition:all .18s var(--spring);text-align:center}
.mode-btn.active{background:linear-gradient(180deg,var(--accent),var(--ember-deep));color:#fff;
  border-color:transparent;box-shadow:0 8px 24px -6px rgba(178,58,29,.55)}
.mode-btn:hover:not(.active){transform:translateY(-3px);border-color:var(--border2);color:var(--ink2)}
.mode-icon{font-size:22px;display:block;margin-bottom:4px}

.fr{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.fr label{font-family:'Cinzel',serif;font-size:13px;color:var(--ink3);letter-spacing:.4px}
.fr input,.fr select{background:#141b15;border:1px solid var(--border);border-radius:10px;
  padding:10px 13px;font-size:15px;font-family:'Crimson Text',serif;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.fr input:focus,.fr select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,99,60,.12)}

/* Solo player slots */
.player-slots{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.pslot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--parchment);
  border:1px solid var(--border);border-radius:7px;padding:8px 10px}
.pslot-num{font-family:'Cinzel',serif;font-size:13px;color:var(--ink3);
  width:22px;flex-shrink:0;text-align:center}
.pslot input{flex:1;background:transparent;border:none;border-bottom:1px solid var(--border);
  padding:3px 5px;font-family:'Crimson Text',serif;font-size:15px;color:var(--ink);outline:none}
.pslot select{background:var(--parchment);border:1px solid var(--border);border-radius:5px;
  padding:5px 8px;font-family:'Outfit',system-ui,sans-serif;font-size:14px;color:var(--ink);outline:none;min-width:160px}
.pslot .pcolor{width:12px;height:12px;border-radius:50%;flex-shrink:0}

/* Faction + Map grids */
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.fc{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:12px;padding:8px 9px 8px 12px;
  cursor:pointer;transition:all .16s var(--spring);background:linear-gradient(180deg,#1b241c,#151c16)}
.fc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fhue,var(--accent))}
.fc.sel{border-color:var(--fhue,var(--accent));
  box-shadow:0 0 0 1px var(--fhue,var(--accent)), 0 8px 20px -8px var(--fhue,rgba(232,99,60,.5))}
.fc:hover:not(.sel){transform:translateY(-2px);border-color:var(--border2)}
.fc-top{display:flex;align-items:center;gap:5px;margin-bottom:2px}
.fc-icon{font-size:18px}.fc-name{font-family:'Cinzel',serif;font-size:12px;font-weight:600;line-height:1.25}
.fc-sub{font-size:11px;color:var(--ink3)}.fc-type{font-size:10px;font-family:'Cinzel',serif;letter-spacing:.4px;padding:2px 9px;border-radius:20px;margin-top:3px;display:inline-block}
.militant{background:rgba(239,138,106,.16);color:#ef8a6a}.insurgent{background:rgba(155,217,137,.15);color:#9bd989}
.mg{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}
.mc{border:1px solid var(--border);border-radius:11px;padding:7px;cursor:pointer;
  background:linear-gradient(180deg,#1b241c,#151c16);transition:all .16s var(--spring);text-align:center}
.mc.sel{border-color:var(--accent);background:rgba(232,99,60,.08);box-shadow:0 0 0 1px var(--accent)}
.mc:hover:not(.sel){transform:translateY(-2px);border-color:var(--border2)}
.mc .mi{font-size:22px;margin-bottom:3px}.mc .mn{font-family:'Cinzel',serif;font-size:11px;font-weight:600;color:var(--ink2)}
.mc .ms{font-size:10px;color:var(--ink3)}
.sr{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}
.sr:last-child{border-bottom:none}.sr label{font-size:15px;color:var(--ink2)}
.tog{width:44px;height:24px;background:var(--parchment3);border:1px solid var(--border);
  border-radius:12px;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.tog.on{background:var(--accent)}.tog::after{content:'';position:absolute;top:2px;left:2px;
  width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tog.on::after{transform:translateX(20px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;
  border-radius:10px;font-family:'Cinzel',serif;font-size:15px;font-weight:700;cursor:pointer;
  border:none;transition:all .15s;letter-spacing:.6px;position:relative}
.btn-p{background:linear-gradient(180deg,#ef6e44,var(--ember-deep));color:#fff;
  box-shadow:0 10px 26px -8px rgba(178,58,29,.6),inset 0 1px 0 rgba(255,255,255,.22);
  border:1px solid var(--ember-deep);text-shadow:0 1px 1px rgba(0,0,0,.3)}
.btn-p:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(178,58,29,.65),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-p:active{transform:translateY(0);filter:brightness(.95)}
.btn-s{background:linear-gradient(180deg,var(--parchment),var(--parchment3));color:var(--accent);
  border:1.5px solid rgba(232,99,60,.35);box-shadow:0 2px 6px var(--shadow)}
.btn-s:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 10px var(--shadow)}
.btn-s:active{transform:translateY(0)}.btn-f{width:100%}
.divider{text-align:center;color:var(--ink3);font-size:11px;margin:8px 0;position:relative}
.divider::before,.divider::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--border)}
.divider::before{left:0}.divider::after{right:0}
.code-box{background:var(--parchment);border:2px dashed var(--gold);border-radius:8px;padding:14px;
  text-align:center;margin:10px 0}
.code-box .code{font-family:'Cinzel',serif;font-size:30px;font-weight:700;color:var(--accent);letter-spacing:6px}
.code-box p{font-size:11px;color:var(--ink3);margin-top:5px}

/* ══════════════════════════════════════════
   GAME SCREEN — Full Simulation Layout
   ══════════════════════════════════════════ */
#screen-game{flex-direction:column;height:100vh;overflow:hidden}

/* ── VP Track Bar (top) ── */
/* Full-width bar so the menu buttons can pin to its right edge; the tracker itself is centered
   and narrowed (80px less than full width) via .vp-scale below, independent of the button group. */
.vp-track{position:relative;height:40px;background:var(--parchment2);border-bottom:1.5px solid var(--border);
  display:flex;align-items:center;padding:0 10px;gap:10px;flex-shrink:0}

/* ── VP scale: numbered 0→target track with sliding faction icons ──
   .vp-cells sets the natural (scrollable) width via its fixed-width children; .vp-icons is a
   plain in-flow sibling sized to that same width via width:100% of the flex row (not inset:0,
   which would only cover the visible scroll viewport and break icons' % left offsets once the
   cells overflow it). */
.vp-scale{position:relative;flex:1;height:100%;min-width:0;max-width:calc(100% - 80px);margin:0 auto;overflow-x:auto;overflow-y:hidden}
.vp-cells{position:relative;display:flex;height:100%;align-items:stretch;min-width:100%;width:max-content}
/* Each point cell is 45px wide (fixed, not flex-shared) so the tracker's interior scales with the
   VP target instead of squeezing into the bar; the bar itself scrolls/overflows if needed. */
.vp-cell{flex:0 0 45px;width:45px;min-width:45px;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:3px;font-family:'Cinzel',serif;font-size:9px;font-weight:600;color:var(--ink3);
  border-right:1px solid rgba(240,179,92,.14)}
.vp-cell:first-child{border-left:1px solid rgba(240,179,92,.14)}
.vp-icons{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
/* Icon size scaled down proportionally to the bar height (44px × 40/60 ≈ 29px) so icons still fit. */
.vp-ic{position:absolute;top:50%;left:0;width:29px;height:29px;cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--spring);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.vp-ic img{width:100%;height:100%;object-fit:contain}
.vp-ic span{font-size:23px;line-height:1}
.vp-ic.active{filter:drop-shadow(0 0 7px rgba(240,179,92,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.vp-ic.vp-bump>*{animation:vpBump .55s var(--spring)}
@keyframes vpBump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
/* Recruit flinch: warrior sprite/disc pulses the instant it appears in a clearing (board.js renderBoard). */
.warrior-flinch{animation:warriorFlinch .38s ease-out}
@keyframes warriorFlinch{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.35) rotate(-8deg)}55%{transform:scale(.9) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.vp-entry{display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:30px;
  border:1px solid var(--border);background:var(--parchment);white-space:nowrap;cursor:pointer;
  transition:all .14s;flex-shrink:0}
.vp-entry:hover{border-color:var(--border2)}
.vp-entry.active-player{border-color:var(--gold);background:rgba(242,189,106,.10);box-shadow:var(--glow)}
.vp-entry .vp-icon{font-size:17px}
.vp-entry .vp-name{font-family:'Cinzel',serif;font-size:13px;color:var(--ink2);max-width:90px;
  overflow:hidden;text-overflow:ellipsis}
.vp-entry .vp-num{font-family:'Cinzel',serif;font-size:18px;font-weight:700}
.vp-track-spacer{flex:1}
/* Top-right icon group — now lives at the right end of the hint bar (VP track removed) */
.top-icons{display:flex;gap:4px;flex-shrink:0;margin-left:auto}
.top-icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--parchment3),var(--parchment));cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:18px;transition:all .14s;position:relative;box-shadow:0 1px 3px var(--shadow)}
.top-icon-btn:hover{background:var(--parchment3);border-color:var(--gold)}
.top-icon-btn.active{background:var(--parchment3);border-color:var(--accent)}

/* ── Middle row: board + right panels ── */
/* game-main: row wrapper filling the space below the VP track */
.game-main{flex:1;display:flex;overflow:hidden}
/* game-left: column holding the board + bottom bar */
.game-left{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.game-mid{flex:1;display:flex;overflow:hidden}

/* Board area */
.barea{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;
  /* ⛔ NO VIGNETTES / EDGE-DARKENING HERE — EVER (user rule, 2026-07-18, second incident).
     The old inset box-shadow (90px dark) + gradient stops fading to #4a3d26 painted a dark
     band down the right side of the board and made text unreadable. Backgrounds over the
     board or any text must stay evenly lit edge to edge; the only sanctioned overlay is
     the phase.css atmosphere (scoped, user-toggleable). See CONVENTIONS.md → Rendering. */
  background:
    radial-gradient(ellipse 85% 80% at 50% 42%, #e8d29a 0%, #d3b87a 55%, #c2a768 100%)}

/* Hint bar — floats OVER the top of the board (absolute), so the map runs full-height
   up to the very top of .barea instead of being pushed down by a 46px opaque strip.
   Kept translucent so the art reads through it. */
.hint-bar{position:absolute;top:0;left:0;right:0;height:46px;z-index:30;
  background:rgba(26,18,8,.42);border-bottom:1px solid rgba(200,150,60,.2);
  display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}
.hint-text{font-family:'Cinzel',serif;font-size:15px;color:#f5e8c0;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.hint-text.mode{color:#ffd98a;font-weight:700}
.hint-phase{font-family:'Cinzel',serif;font-size:14px;font-weight:700;padding:5px 14px;
  border-radius:14px;white-space:nowrap;flex-shrink:0;border:1px solid rgba(255,255,255,.25)}

.bsvg-wrap{flex:1;overflow:hidden;position:relative}
/* .hint-bar is absolutely positioned, so .bsvg-wrap is the only in-flow child of .barea
   and takes its full height - the board now reaches up behind the bar. */

/* ── Bottom bar: faction board + hand + actions ── */
.bbar{height:292px;background:var(--parchment2);border-top:1.5px solid var(--border);
  display:flex;overflow:hidden;flex-shrink:0}

/* Faction board panel (bottom-left, clickable) */
.faction-board-panel{width:220px;border-right:1.5px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;cursor:pointer;
  transition:background .14s;position:relative}
.faction-board-panel:hover{background:rgba(200,150,60,.04)}
/* All fonts in the faction-board panel (side area) bumped +2px for legibility. */
.fbp-header{padding:7px 10px 5px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
/* white-space:nowrap+ellipsis (2026-07-29): a long faction name (e.g. "Lord of the Hundreds",
   "Riverfolk Company") wrapped to 2 lines in the fixed-height header, silently eating into the
   #fbp-counters budget below it and causing an overflow that had nothing to do with counter
   count. Full name still lives in the tooltip via the header's own hover (see fbp-header). */
.fbp-faction-name{font-family:'Cinzel',serif;font-size:18px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.fbp-counters{display:flex;flex-direction:column;gap:4px;padding:7px 9px;border-bottom:1px solid var(--border)}
.fbp-counter{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 9px;border-radius:6px;border:1px solid var(--border);background:var(--parchment);
  cursor:default;position:relative;min-width:0}
.fbp-counter:hover .fbp-tooltip{display:block}
.fbp-tooltip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  background:rgba(26,18,8,.92);color:#f5e8c0;font-size:13px;padding:4px 7px;border-radius:5px;
  white-space:nowrap;pointer-events:none;z-index:50;font-family:'Crimson Text',serif;line-height:1.4;
  max-width:180px;white-space:normal;text-align:center}
/* line-height:1 (2026-07-29): an emoji counter value (e.g. Lizard Cult's Outcast suit icon)
   renders with taller glyph metrics than a plain number under some fonts' default line-height,
   growing its .fbp-counter row just enough to overflow #fbp-counters by a couple px at the
   short-desktop breakpoint. Numbers are unaffected either way. */
/* flex-shrink:1 + min-width:0 + wrap (2026-08-09): Lost Powers' "Tableau" counter value is a
   variable-length joined string of suit glyphs (one per follower), not a short number — at
   flex-shrink:0 it refused to shrink and pushed #fbp-counters wider than the panel at every
   breakpoint. Numeric/short values are unaffected since they never need to wrap. */
.fbp-cval{font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--ink);flex-shrink:1;min-width:0;line-height:1;display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:4px;white-space:normal;overflow-wrap:anywhere;text-align:right}
.fbp-cicon{width:18px;height:18px;object-fit:contain;border-radius:3px;flex-shrink:0}
/* Lizard Cult Outcast "Hated" effect: a flame-frame image behind the suit icon (2026-07-29).
   Not a separate uploadable slot — imgBg is a fixed effect asset, always larger than the
   foreground icon so the flame border peeks out around it. */
.fbp-cicon-wrap{position:relative;width:26px;height:26px;display:inline-flex;align-items:center;
  justify-content:center;flex-shrink:0}
.fbp-cicon-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fbp-cicon-wrap .fbp-cicon{position:relative;width:15px;height:15px;border-radius:2px}
.fbp-clbl{font-size:15px;color:var(--ink3);font-family:'Cinzel',serif;text-align:left;line-height:1.2;flex-shrink:0}
/* .fbp-tracks / .fbp-cell removed — track strip now rendered in bbar centre via .bbar-track-mid */

/* Hand area */
.hand-a{flex:1;padding:8px 10px;overflow-x:auto;display:flex;flex-direction:column;min-width:0;cursor:grab}
.hand-a.drag-scrolling{cursor:grabbing;user-select:none}
.ht{font-family:'Cinzel',serif;font-size:14px;color:var(--ink3);letter-spacing:.5px;margin-bottom:5px;
  display:flex;align-items:center;gap:6px}
.hname{font-size:14px;color:var(--accent);font-family:'Cinzel',serif}
.cr{display:flex;gap:8px;align-items:flex-end;min-height:144px}
.card{width:80px;height:114px;border-radius:11px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--parchment3),var(--parchment));
  cursor:pointer;transition:all .16s var(--spring);display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:3px;text-align:center;flex-shrink:0;position:relative;overflow:hidden}
.card:hover{transform:translateY(-10px);box-shadow:0 10px 22px -6px var(--shadow);border-color:var(--gold)}
.card.selected-card{transform:translateY(-14px);border-color:var(--accent);box-shadow:0 10px 22px -6px rgba(232,99,60,.35)}
.cs{font-size:25px;margin-bottom:3px}.cn{font-family:'Cinzel',serif;font-size:10px;color:var(--ink2);line-height:1.25}
.ct{font-size:10px;font-style:italic;color:var(--ink3);margin-top:2px}
.card-suit-bar{position:absolute;bottom:0;left:0;right:0;height:4px;border-radius:0 0 7px 7px}

/* Action panel — full-height right sidebar inside game-mid */
.action-panel{width:352px;border-left:1.5px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
  background:var(--parchment2)}
.ap-top{padding:5px 8px 4px;border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;gap:6px;flex-shrink:0}
.ap-phase-lbl{font-family:'Cinzel',serif;font-size:13px;font-weight:700;padding:3px 9px;border-radius:9px}
.ap-player-lbl{font-family:'Cinzel',serif;font-size:13px;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ap-actions{flex:1;padding:7px 8px;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.abt{width:100%;padding:10px 12px;border-radius:9px;font-family:'Cinzel',serif;font-size:16px;
  font-weight:600;cursor:pointer;border:1px solid var(--border);
  background:var(--parchment);
  color:var(--ink2);text-align:left;display:flex;align-items:center;gap:8px;transition:all .14s;
  line-height:1.35}
.abt:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px);background:var(--parchment3)}
.abt:active:not(:disabled){transform:translateY(0)}
.abt:disabled{opacity:.4;cursor:not-allowed}
.abt.end{border-color:rgba(232,99,60,.5);color:var(--accent);background:rgba(232,99,60,.07)}
.abt.end:hover:not(:disabled){background:rgba(232,99,60,.14)}
.abt .abt-icon{font-size:22px;flex-shrink:0;width:28px;text-align:center}
.abt .abt-txt{flex:1;min-width:0}
.abt .abt-desc{font-size:14px;color:var(--ink3);font-family:'Crimson Text',serif;font-weight:400;
  display:block;margin-top:1px;white-space:normal}
.abt.used{opacity:.5;text-decoration:line-through}
/* 6-icon grid row (like Marquise) */
/* grid-auto-rows:1fr → every button in the grid is the same height (the tallest one),
   so descriptions are always shown and buttons no longer resize on hover. */
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:3px;padding:5px 6px}
.agrid-btn{border:1px solid var(--border);border-radius:9px;background:var(--parchment);
  cursor:pointer;padding:9px 5px;display:flex;flex-direction:column;align-items:center;gap:1px;
  transition:all .14s;font-family:'Cinzel',serif}
.agrid-btn:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px);background:var(--parchment3)}
.agrid-btn:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(.8)}
.agrid-btn .ag-icon{font-size:28px}
.agrid-btn .ag-lbl{font-size:14px;font-weight:700;color:var(--ink2);text-align:center;line-height:1.2}
.agrid-btn .ag-desc{font-size:13px;color:var(--ink3);text-align:center;font-family:'Crimson Text',serif;
  font-weight:400;line-height:1.2;display:block}
.agrid-btn.used{opacity:.5}
/* ── Action panel VP scoreboard ── */
.ap-scoreboard{padding:4px 8px 3px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;gap:1px}
/* All rows carry a transparent 3px left edge so the active row's colored edge never
   shifts the layout; the faction-colored edge/sweep/glow are set inline (renderScoreboard). */
.ap-sb-row{display:flex;align-items:center;gap:5px;padding:3px 4px;border-radius:5px;cursor:pointer;
  border-left:3px solid transparent;transition:background .1s}
.ap-sb-row.active{background:rgba(200,150,60,.13)}
.ap-sb-row:hover{background:var(--parchment3)}
/* Icon bumped up so it's more visible (the active player's grows further, inline) */
.ap-sb-icon{font-size:20px;width:27px;text-align:center;flex-shrink:0}
/* Name font bumped up; name text itself is capped to 8 chars in JS (renderScoreboard) so a long
   online player name can never change this column's width and shift the bar/points around. */
.ap-sb-name{font-family:'Cinzel',serif;font-size:13px;color:var(--ink3);width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
/* Bar 1px thicker (4px → 5px) */
.ap-sb-bar{flex:1;height:5px;background:var(--parchment3);border-radius:3px;overflow:hidden;min-width:0}
.ap-sb-fill{height:100%;border-radius:3px;transition:width .4s}
/* Points get their own opaque chip so no background gradient/glow from the panel can wash them
   out, and the font is bumped +1 unit (13px → 14px) for legibility. */
.ap-sb-vp{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--ink);width:26px;text-align:right;flex-shrink:0;
  background:var(--parchment2);border-radius:4px;padding:1px 2px;position:relative;z-index:1}
/* ── Bbar centre track strip ── */
.bbar-track-mid{padding:4px 10px 4px;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;overflow:visible}
.btm-row{display:flex;align-items:center;gap:4px}
.btm-lbl{font-family:'Cinzel',serif;font-size:9px;color:var(--ink3);min-width:52px}
.btm-cells{display:flex;gap:3px}
.btm-cell{width:26px;height:26px;border-radius:3px;border:1.5px solid var(--border);
  background:var(--parchment3);display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;font-family:'Cinzel',serif;gap:0}
.btm-cell.filled{border-color:transparent}
.btm-cell .btm-vp{font-size:7px;color:var(--gold);font-family:'Cinzel',serif;line-height:1.1}
/* ── Building tracker column (left of the hand in the bbar) ── */
/* Whole bottom bar uses a sans-serif face for readability. */
.bbar, .bbar *{font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif !important}
.bbar-tracker{flex:0 1 506px;min-width:0;border-right:1.5px solid var(--border);
  padding:7px 12px;display:flex;flex-direction:column;gap:6px;overflow:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
/* Eyrie decree summary rows under the roosts tracker */
.bt-decree{display:flex;gap:7px;flex:1;flex-wrap:wrap;align-items:center}
.bt-decree-chip{font-size:18px;line-height:1.1;display:inline-flex;align-items:center;gap:1px;
  padding:1px 6px;border-radius:8px;border:1px solid var(--border);background:var(--parchment3);font-weight:700;
  white-space:nowrap}
.bt-decree-empty{color:var(--ink3);font-size:15px}
/* Centering helpers (Roosts track + Decree header) */
.bt-cells.bt-center{justify-content:center}
.bt-subhead.bt-center,.bt-head.bt-center{text-align:center}
/* Roosts track: "Roosts" label sits vertically on the left, cells run beside it near the top edge.
   Same font treatment as the "Decree" vertical label below it (Cinzel, 15px, bold, gold). */
.bt-vlbl-row{display:flex;align-items:center;gap:8px}
.bt-vlbl{font-family:'Cinzel',serif;font-size:15px;font-weight:700;letter-spacing:.7px;color:var(--gold);
  writing-mode:vertical-rl;transform:rotate(180deg);flex-shrink:0;align-self:stretch;
  display:flex;align-items:center;justify-content:center;padding-right:1px}
/* Eyrie Decree block — nudged down a bit from the Roosts track above it. "Decree" is a vertical
   label on the far left of the whole block (beside the Recruit/Move/Battle/Build rows), not a
   horizontal header above them. */
.bt-decree-wrap{display:flex;align-items:stretch;gap:9px;margin-top:9px}
.bt-decree-vlbl{font-family:'Cinzel',serif;font-size:15px;font-weight:700;letter-spacing:.7px;color:var(--gold);
  writing-mode:vertical-rl;transform:rotate(180deg);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;padding-right:1px}
/* Eyrie Decree: one row per column (Recruit/Move/Battle/Build) — column name sits vertically on
   the left, its suit-count chips form a small grid to the right. */
.bt-decree-cols{display:flex;flex-direction:column;flex:1;justify-content:center}
/* Separator line length scaled down proportionally to the VP-track bar height correction
   (60px→40px, i.e. 66.7% of original) so the divider under each decree row runs about 2/3 width
   instead of the full row width. */
.bt-decree-row{display:flex;align-items:center;gap:8px;padding:5px 0;position:relative}
.bt-decree-row:not(:last-child)::after{content:'';position:absolute;left:0;right:0;bottom:0;
  border-bottom:1px solid var(--border)}
.bt-dc-lbl{font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:.3px;color:var(--ink2);
  writing-mode:vertical-rl;transform:rotate(180deg);flex-shrink:0;min-width:16px;
  display:flex;align-items:center;justify-content:center}
.bt-dc-cards{display:flex;flex-wrap:wrap;gap:4px;
  flex:1;min-height:24px;align-content:center;align-items:center}
/* Vagabond HUD — item satchel + quest cards */
.vb-items{display:grid;grid-template-columns:repeat(7,minmax(52px,64px));gap:6px;justify-content:center;margin-bottom:2px;
  min-height:124px;align-content:start}   /* reserve 2 item rows (2×59px + 6px gap) so the HUD height never shifts when the 2nd row is empty */
.vb-item-fx{font-size:9.5px;color:#8fbf7a;line-height:1;white-space:nowrap}
.vb-item{position:relative}
.vb-item-def{position:absolute;top:2px;right:4px;font-size:9px;color:var(--accent);line-height:1}
.vb-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:52px;height:59px;padding:5px 6px;
  border:1px solid var(--border);border-radius:10px;background:var(--parchment3);box-sizing:border-box}
.vb-item .vb-item-ic{font-size:22px;line-height:1}
.vb-item .vb-item-st{font-size:10.5px;line-height:1;color:var(--ink3)}
.vb-item.vb-damaged .vb-item-st{color:#c0554a}
.vb-item.vb-empty{border-style:dashed;opacity:.55;background:rgba(255,255,255,.03)}
.vb-item .vb-empty-ic{opacity:.5}
.vb-item .vb-empty-lbl{font-size:9.5px;color:var(--ink3);font-style:italic;line-height:1}
/* Item states — side (exhausted = face down) and condition (damaged) are independent
   and combine: exhausted flips the icon upside-down + dashed border, damaged goes red. */
.vb-item.vb-ready{border-color:#4c7a4c;box-shadow:inset 0 0 0 1px rgba(90,150,90,.25)}
.vb-item.vb-exhausted{opacity:.5;border-style:dashed}
.vb-item.vb-exhausted .vb-item-ic{display:block;transform:rotate(180deg);filter:grayscale(.75)}
.vb-item.vb-damaged{border-color:#a33;background:rgba(150,40,40,.18)}
.vb-item.vb-damaged .vb-item-ic{filter:sepia(.6) hue-rotate(-25deg) saturate(2)}
.vb-item.vb-damaged.vb-exhausted{opacity:.55}
.vb-item.vb-damaged.vb-exhausted .vb-item-ic{transform:rotate(180deg);filter:grayscale(.4) sepia(.6) hue-rotate(-25deg) saturate(1.6)}
.vb-quests{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.vb-quest{position:relative;min-width:110px;border:1px solid var(--border);border-radius:10px;padding:7px 9px;background:var(--parchment3)}
.vb-quest .vb-q-top{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.vb-quest .vb-q-suit{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.vb-quest .vb-q-name{font-family:'Cinzel',serif;font-size:12.5px;color:var(--ink1)}
.vb-quest .vb-q-items{display:flex;gap:6px;font-size:17px}
.vb-quest.can{border-color:var(--accent);cursor:pointer;box-shadow:0 0 0 1px var(--accent) inset}
.vb-quest.can:hover{background:rgba(232,99,60,.14)}
.vb-quest .vb-q-go{margin-top:5px;font-size:11px;font-weight:700;color:var(--accent);text-align:center}
/* Ready/completed quest — orange check in the bottom-right corner (no text line) */
.vb-quest .vb-q-check{position:absolute;right:7px;bottom:6px;font-size:16px;font-weight:700;color:var(--accent);line-height:1}
.bbar-tracker .bt-head{font-size:15px;font-weight:700;letter-spacing:.7px;
  color:var(--gold);border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:1px}
/* Single shared wood-cost row at the top, columns aligned to the building cells. */
.bt-costrow .bt-lbl{color:var(--ink3);display:flex;align-items:center;justify-content:flex-end;gap:3px}
.bt-costcell{width:54px;flex-shrink:0;text-align:center;font-weight:700;font-size:16px;color:var(--gold);
  display:flex;align-items:center;justify-content:center}
.bt-wood{font-size:16px}
/* Cost row title — 1 unit bigger than the standard row labels */
.bt-costrow .bt-lbl{font-size:16px}
/* Per-faction tracker-panel nudges (renderFBPTracks toggles these classes) */
.bbar-tracker.bt-eyrie, #fbp-tracks.bt-eyrie{padding-top:12px}
/* 'bt-compact' (2026-07-29): several non-reference official factions (Duchy, Lord, Corvid,
   Riverfolk) legitimately need MORE track rows than the reference factions' default cell size
   (54×58) leaves room for in the fixed #fbp-tracks panel (Cat has 3 rows, Eyrie 1 — Duchy has 6).
   Rather than growing the panel (against HUD-AUDIT-CONVENTIONS.md) or dropping tracked state,
   shrink the cell/label footprint for just these factions — same pattern as the existing
   responsive breakpoints (.bt-cell already shrinks at 1500px/800px/760px), just per-faction
   instead of per-viewport. */
.bbar-tracker.bt-compact .bt-cell, #fbp-tracks.bt-compact .bt-cell{width:38px;height:38px}
.bbar-tracker.bt-compact .bt-cell .bt-tok,.bbar-tracker.bt-compact .bt-cell .bt-tokimg,.bbar-tracker.bt-compact .bt-cell .bt-tokimg-wrap,
#fbp-tracks.bt-compact .bt-cell .bt-tok,#fbp-tracks.bt-compact .bt-cell .bt-tokimg,#fbp-tracks.bt-compact .bt-cell .bt-tokimg-wrap{width:24px;height:24px}
.bbar-tracker.bt-compact .bt-cell .bt-vp, #fbp-tracks.bt-compact .bt-cell .bt-vp{font-size:13px}
.bbar-tracker.bt-compact .bt-state, #fbp-tracks.bt-compact .bt-state{font-size:7px}
.bbar-tracker.bt-compact .bt-row, #fbp-tracks.bt-compact .bt-row{gap:6px}
.bbar-tracker.bt-compact .bt-lbl, #fbp-tracks.bt-compact .bt-lbl{width:64px;font-size:12.5px}
.bbar-tracker.bt-compact, #fbp-tracks.bt-compact{gap:4px}
/* Rows with no text label (e.g. Riverfolk Trade Posts — the suit icon already reads without
   a "Fox"/"Rabbit"/"Mouse" caption): center the cells and size them to fill the width the
   label used to occupy, packed tight (small gap) instead of spread out. */
.bt-row-nolbl{justify-content:center}
/* Riverfolk: Trade Posts (3 short rows) leaves unused width beside it — put Services and the
   Bank-by-owner rows in a second column to its right instead of stacked underneath. */
.bt-tp-layout{display:flex;align-items:flex-start;gap:14px}
.bt-tp-col{display:flex;flex-direction:column;gap:6px}
.bt-tp-side{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;border-left:1px solid var(--border);padding-left:12px}
.bbar-tracker.bt-compact .bt-cells-big, #fbp-tracks.bt-compact .bt-cells-big{gap:4px}
.bbar-tracker.bt-compact .bt-cells-big .bt-cell, #fbp-tracks.bt-compact .bt-cells-big .bt-cell{width:58px;height:58px}
.bbar-tracker.bt-compact .bt-cells-big .bt-cell .bt-tok,.bbar-tracker.bt-compact .bt-cells-big .bt-cell .bt-tokimg,.bbar-tracker.bt-compact .bt-cells-big .bt-cell .bt-tokimg-wrap,
#fbp-tracks.bt-compact .bt-cells-big .bt-cell .bt-tok,#fbp-tracks.bt-compact .bt-cells-big .bt-cell .bt-tokimg,#fbp-tracks.bt-compact .bt-cells-big .bt-cell .bt-tokimg-wrap{width:40px;height:40px}
.bbar-tracker.bt-compact .bt-cells-big .bt-state, #fbp-tracks.bt-compact .bt-cells-big .bt-state{font-size:10px}
/* Lizard Cult: Gardens/Outcast rows match Cat's Buildings shape (6-cell rows), so bring the
   cells/icons back up to the reference (cat) size instead of the generic bt-compact shrink —
   higher specificity (3 classes) than the plain bt-compact rules above, so only Lizard is
   affected. Kept slightly under the full 54x58/40x40 reference size (Lizard has 4 rows to Cat's
   3) so the extra Outcast row doesn't push the panel into overflow at short-desktop heights. */
.bbar-tracker.bt-compact.bt-lizard .bt-cell, #fbp-tracks.bt-compact.bt-lizard .bt-cell{width:48px;height:50px}
.bbar-tracker.bt-compact.bt-lizard .bt-cell .bt-tok,.bbar-tracker.bt-compact.bt-lizard .bt-cell .bt-tokimg,.bbar-tracker.bt-compact.bt-lizard .bt-cell .bt-tokimg-wrap,
#fbp-tracks.bt-compact.bt-lizard .bt-cell .bt-tok,#fbp-tracks.bt-compact.bt-lizard .bt-cell .bt-tokimg,#fbp-tracks.bt-compact.bt-lizard .bt-cell .bt-tokimg-wrap{width:36px;height:36px}
.bbar-tracker.bt-compact.bt-lizard .bt-cell .bt-vp, #fbp-tracks.bt-compact.bt-lizard .bt-cell .bt-vp{font-size:19px}
.bbar-tracker.bt-compact.bt-lizard .bt-state, #fbp-tracks.bt-compact.bt-lizard .bt-state{font-size:9px}
.bbar-tracker.bt-compact.bt-lizard .bt-lbl, #fbp-tracks.bt-compact.bt-lizard .bt-lbl{width:74px;font-size:13.5px}
/* Gardens rows (no per-suit label anymore — see 'Gardens' bt-head instead): images a bit
   bigger than the other Lizard tracks, and the not-yet-built VP badge pulled out of the
   flex column and pinned centered on the image's bottom border (Eyrie-Roost-style), in a
   brighter color than the default dim .bt-vp-ghost. */
#fbp-tracks.bt-lizard .bt-garden-row .bt-cell, .bbar-tracker.bt-lizard .bt-garden-row .bt-cell{width:58px;height:60px}
#fbp-tracks.bt-lizard .bt-garden-row .bt-cell .bt-tok,
#fbp-tracks.bt-lizard .bt-garden-row .bt-cell .bt-tokimg,
#fbp-tracks.bt-lizard .bt-garden-row .bt-cell .bt-tokimg-wrap,
.bbar-tracker.bt-lizard .bt-garden-row .bt-cell .bt-tok,
.bbar-tracker.bt-lizard .bt-garden-row .bt-cell .bt-tokimg,
.bbar-tracker.bt-lizard .bt-garden-row .bt-cell .bt-tokimg-wrap{width:46px;height:46px}
#fbp-tracks.bt-lizard .bt-garden-row .bt-cell .bt-vp.bt-vp-ghost,
.bbar-tracker.bt-lizard .bt-garden-row .bt-cell .bt-vp.bt-vp-ghost{
  position:absolute;left:50%;bottom:1px;transform:translateX(-50%);margin:0;
  color:var(--gold);font-size:13px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* Outcast row: single cell, blown up per hand-tuned request (10% down from the original 90px
   art, per follow-up request), sitting beside (not under) the Garden rows — see bt-liz-layout
   below. The side text label is hidden (hideLabel:true); "Outcast" is instead overlaid on top
   of the art itself via .bt-cell-toplabel (imgLabel, set in getFactionTracks/buildCells). */
/* Outcast cell grown ~1.5x (95x99 -> 143x149) so the FLAME scales with the art. artScale
   alone could only enlarge the icon by stealing the fire's margin — the ring had dropped to
   5px. Giving the whole unit more room makes both grow together: art 55->84px, ring 19->28px.
   Only the Lizard Outcast column is affected; the Garden rows keep their size. */
/* Shrunk 206->132px (2026-08-09, real-Chromium HUD overflow check): the fixed 206px cell
   overflowed #fbp-tracks at wide-desktop/laptop/short-desktop/tablet (the side panel's width
   is never as wide as 206px+padding at those breakpoints; only phone's different bbar grid
   happened to have enough room). Scaled every inner element (tokimg/tokimg-wrap, flame-wrap)
   by the same 132/206 ratio so the art keeps its proportions, just smaller overall. */
#fbp-tracks.bt-lizard .bt-outcast-row .bt-cell, .bbar-tracker.bt-lizard .bt-outcast-row .bt-cell{width:124px;height:127px}
#fbp-tracks.bt-lizard .bt-outcast-row .bt-cell .bt-tok,
#fbp-tracks.bt-lizard .bt-outcast-row .bt-cell .bt-tokimg,
#fbp-tracks.bt-lizard .bt-outcast-row .bt-cell .bt-tokimg-wrap,
.bbar-tracker.bt-lizard .bt-outcast-row .bt-cell .bt-tok,
.bbar-tracker.bt-lizard .bt-outcast-row .bt-cell .bt-tokimg,
/* 129 = the Hated flame's content box (138px at the current OUTCAST_HATED config: 200px wrap
   − 2×31px fire margin) minus the requested 9px. Both states are flex-centred in the same
   cell, so their centre points coincide with no further alignment needed. Recompute if the
   preset's heightFrac/spreadFrac/meltFrac change. */
.bbar-tracker.bt-lizard .bt-outcast-row .bt-cell .bt-tokimg-wrap{width:62px;height:62px}
/* Outcast "Hated" LIVE flame frame (js/flame-wrap.js) — the animated replacement for
   lizard/outcast_hated.webp. Sized 93px inside the unchanged 95×99 cell, so no cell or panel
   geometry changes and tools/test-hud-overflow.js is unaffected.
   Must come AFTER the 81px rule above — same specificity, later wins. */
#fbp-tracks.bt-lizard .bt-outcast-row .bt-cell .bt-flame-wrap,
.bbar-tracker.bt-lizard .bt-outcast-row .bt-cell .bt-flame-wrap{width:96px;height:96px}
/* NO .bt-compact shrink here on purpose. The Lizard panel DOES get .bt-compact, and an
   earlier 54px compact override made the Outcast smaller than it had ever been. The Outcast
   is a single status badge, not a row of build slots, so it keeps full size at every
   breakpoint — same 200px the tuner previews at. */
.bt-cell .bt-flame-wrap{display:block}
/* MUST fill the content box exactly: with burnIntoArt the shader maps the content texture's
   UVs to that box, so any inset/bleed would draw the art at the wrong scale. (Note the
   .bt-tokimg inset:26% rule further down does NOT apply — this is .bt-flame-icon.) */
.bt-cell .bt-flame-wrap .bt-flame-icon{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain}
/* (The un-grey exemption that used to live here is gone — supply art is no longer dimmed
   at all, so there is nothing left for the flame frame to opt out of.) */
/* Gardens (left) + Outcast (right), side by side instead of stacked. */
.bt-liz-layout{display:flex;align-items:center;gap:14px}
.bt-liz-gardens{display:flex;flex-direction:column}
.bt-liz-outcast{display:flex;align-items:center;justify-content:center;
  /* whole Outcast unit (label + cell) 33px left, per user request; transform so the flex
     layout and the Gardens column are untouched */ transform:translateX(-33px)}
.bt-liz-outcast .bt-outcast-row{margin:0}
/* Text label drawn over the top edge of the art (imgLabel), replacing the old side .bt-lbl
   for tracks that pass hideLabel — currently only Lizard's Outcast row. */
.bt-cell-toplabel{position:absolute;top:2px;left:0;right:0;text-align:center;
  font-family:'Cinzel',serif;font-weight:700;font-size:12px;letter-spacing:.3px;color:var(--gold);
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.9);white-space:nowrap;pointer-events:none;z-index:2}
.bt-row{display:flex;align-items:center;gap:9px}
.bt-lbl{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--gold);width:78px;flex-shrink:0;text-align:right}
/* Sub-header: a track label on its own line (e.g. Sympathy / Supporters), cells wrap beneath it. */
.bt-subhead{font-family:'Cinzel',serif;font-size:13px;font-weight:600;letter-spacing:.4px;color:var(--ink2);margin:4px 0 3px}
/* Vagabond setup — pick which bordering forest the pawn camps in. */
.vfc-inner{background:linear-gradient(168deg,#1f2a20,#16201a);border:2px solid var(--gold);border-radius:16px;
  padding:20px 22px;max-width:min(460px,90vw);box-shadow:0 20px 50px rgba(0,0,0,.7)}
.vfc-title{font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--gold);margin-bottom:4px}
.vfc-sub{font-family:'Crimson Text',serif;font-size:14px;color:var(--ink2);margin-bottom:14px;line-height:1.4}
.vfc-list{display:flex;flex-direction:column;gap:9px}
.vfc-btn{font-family:'Outfit',sans-serif;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;
  padding:11px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04);transition:background .15s,border-color .15s}
.vfc-btn:hover{background:rgba(240,179,92,.14);border-color:var(--gold)}
/* Woodland Sympathy + Supporters: two columns — round tokens (5×2) left, suit-badge supporters right. */
.wa-track{display:flex;gap:60px;align-items:flex-start;padding-left:16px}
.wa-lbl{font-family:'Cinzel',serif;font-size:17px;font-weight:700;letter-spacing:.5px;color:var(--gold);margin-bottom:7px}
.wa-base-row{display:flex;gap:9px}
/* Base art FILLS the cell — the tile is square with its own rounded corners, so it must sit flush
   inside the suit-coloured border (46px art in a 54px cell used to float, off-centre and letterboxed). */
.wa-base{position:relative;box-sizing:border-box;width:54px;height:54px;border-radius:9px;border:2px solid var(--border);
  background:var(--parchment3);overflow:hidden;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:26px}
.wa-base img{display:block;width:100%;height:100%;border-radius:7px;object-fit:cover;object-position:center}
.wa-base.placed{opacity:.3;filter:grayscale(.75)}
.wa-base-suit{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.55)}
.wa-symp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.wa-tok{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:var(--parchment3);
  display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden}
.wa-tok img{width:44px;height:44px;border-radius:50%;object-fit:contain}
.wa-tok .wa-vp{font-family:'Cinzel',serif;font-size:22px;font-weight:700;line-height:1}
.wa-sup{flex:1;min-width:110px;margin-left:-10px;align-self:center}
.wa-sup .wa-lbl{white-space:nowrap}
.wa-sup-row{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.wa-suit{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.4)}
.wa-supn{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--ink)}
.bt-cells{display:flex;gap:6px;flex:1}
.bt-cells.bt-cells-wrap{flex-wrap:wrap;flex:none}
.bt-cell{position:relative;width:54px;height:58px;border-radius:8px;border:1px solid var(--border);
  background:var(--parchment3);display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0}
.bt-cell .bt-tok{width:40px;height:40px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:23px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);margin-bottom:2px}
.bt-cell .bt-tokimg{width:40px;height:40px;border-radius:7px;object-fit:contain;margin-bottom:1px}
/* Layered variant (Lizard Outcast Hated flame-frame): wrap sizes like .bt-tokimg everywhere
   (see the .bt-compact / breakpoint rules below, which list bt-tokimg-wrap alongside bt-tokimg)
   and both layers fill it at 100%, so bg+fg always stay pixel-aligned without duplicating sizes. */
.bt-cell .bt-tokimg-wrap{position:relative;width:40px;height:40px;display:inline-flex;margin-bottom:1px}
.bt-cell .bt-tokimg-wrap .bt-tokimg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:7px}
/* The suit icon is drawn SMALLER than its background frame (inset, not inset:0) so a frame
   like the Outcast Hated barbed-wire border stays visible around it instead of being fully
   covered — both source images are the same square resolution, so without this inset the
   foreground icon exactly overdraws the frame and it never showed. */
.bt-cell .bt-tokimg-wrap .bt-tokimg{position:absolute;inset:15%;width:70%;height:70%;margin-bottom:0}
/* Outcast Hated: the suit icon art (e.g. outcast_mouse.webp) already has its own full-bleed
   border baked in, so the generic 70%-fill inset above only reveals a thin sliver of the
   flame frame behind it. Shrink the icon further here so the flame reads clearly around it. */
#fbp-tracks.bt-lizard .bt-outcast-row .bt-cell .bt-tokimg-wrap .bt-tokimg,
.bbar-tracker.bt-lizard .bt-outcast-row .bt-cell .bt-tokimg-wrap .bt-tokimg{inset:26%;width:48%;height:48%}
.bt-cell.built{background:rgba(255,255,255,.04)}
/* Riverfolk Trade Posts: placed posts render as circular slots (same visual language as
   Woodland's placed Sympathy tokens, .wa-tok) instead of the shared square .bt-cell shape —
   they're a flat one-time +2 VP each, not a progression track, so they shouldn't look like one. */
.bt-tp-col .bt-cell.is-on-map{border-radius:50%}
.bt-note{font-family:'Crimson Text',serif;font-style:italic;font-size:11px;color:var(--ink3);
  margin-top:4px;line-height:1.3}
/* Not-yet-built slot with art (e.g. Eyrie's next Roost): bare art only, no parchment frame/fill. */
.bt-cell.bt-cell-bare{border-color:transparent;background:transparent}
/* Built cell (colored VP box — every built cell without c.text takes this branch in
   buildCells(), art or no art, since the built check runs before the art/img check):
   colored border+fill highlight, driven by --bt-cell-col/--bt-cell-bg (set inline per-cell
   in game-render.js) rather than direct style.background/borderColor, so a more specific
   per-faction rule (e.g. Eyrie's wood-slab material in hud-skin.css) can still win via
   normal CSS cascade. */
.bt-cell.built.bt-cell-built-tint{border-color:var(--bt-cell-col);background:var(--bt-cell-bg)}
/* Not-yet-built bare-art slot: dim the art so built vs. unbuilt are visually distinguishable
   (e.g. Lizard Gardens/Eyrie Roosts previously rendered identically regardless of built state). */
/* Pieces still IN SUPPLY render at full colour — they are things you hold, not things you
   are denied. (This used to be grayscale(.85) brightness(.55) opacity(.55), which read as
   disabled/unavailable across every faction's tracker.) "Spent" is now conveyed by the
   piece being ABSENT from the track, matching the physical game, so no dimming is needed.
   .is-lost below deliberately KEEPS its dimming: a destroyed Riverfolk post is gone for
   good, not back in supply. */
.bt-cell .bt-vp{font-family:'Cinzel',serif;font-size:22px;font-weight:700;line-height:1;margin-bottom:3px}
/* Not-yet-built slot: just the bare art (no frame/fill behind it) + the VP it will score. */
.bt-cell .bt-vp.bt-vp-ghost{font-size:11px;font-weight:700;color:var(--ink3);margin-bottom:0;line-height:1}
/* Eyrie Roosts track: nudge the roost art down+left, and the not-yet-built VP badges
   left + brighter + larger, per hand-tuned pixel alignment against the roost artwork. */
.bt-eyrie .bt-cell-bare .bt-tokimg-wrap,.bt-eyrie .bt-cell-bare .bt-tokimg{transform:translate(-1px,6px)}
.bt-eyrie .bt-cell-bare:last-child .bt-tokimg-wrap,.bt-eyrie .bt-cell-bare:last-child .bt-tokimg{transform:translate(-2px,6px)}
.bt-eyrie .bt-cell-bare .bt-vp.bt-vp-ghost{transform:translateX(-1px);color:var(--ink);font-size:13px}
/* Pushed low enough to clear the VP badge above it (that badge's centered flex stack already
   overflows the cell's own bottom edge by a few px) — was -10px, which sat right on top of it. */
.bt-cell .bt-bonus{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font-size:12px;
  background:var(--parchment2);border:1px solid var(--gold);border-radius:9px;padding:1px 5px;color:var(--gold);white-space:nowrap}
/* ── Faction abilities panel (right side of the bbar) ── */
.bbar-abilities{flex:0 1 312px;min-width:0;border-left:1.5px solid var(--border);
  padding:9px 14px;display:flex;flex-direction:column;gap:9px;overflow-y:auto}
.bbar-abilities .ba-head{font-size:15px;font-weight:700;letter-spacing:.7px;
  color:var(--gold);border-bottom:1px solid var(--border);padding-bottom:4px}
.ba-item{font-family:'Crimson Text',serif;font-size:15px;line-height:1.5;color:var(--ink2)}
.ba-item .ba-name{font-family:'Cinzel',serif;font-weight:700;font-size:14px;color:var(--accent);display:block;margin-bottom:1px}
/* Vagabond character special ability — teal so it stands out from the shared faction abilities */
.ba-item .ba-name.ba-special{color:#6fc2ad}
/* Live usage/trigger counter appended to a tracked ability name */
.ba-item .ba-name .ba-badge{font-family:'Crimson Text',serif;font-weight:600;font-size:12px;color:var(--ink3);letter-spacing:0}
/* The Keep after it is destroyed — readable warning red */
.ba-item .ba-name.ba-destroyed{color:#e0633c}
/* Dominance chip in the scoreboard rows (replaces the VP bar when a player's score is locked) */
.ap-sb-dom{flex:1;min-width:0;font-family:'Cinzel',serif;font-size:11px;font-weight:700;
  letter-spacing:.5px;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Public dominance banners pinned to the left edge of the board */
#dom-banners{position:absolute;left:10px;top:44px;display:flex;flex-direction:column;gap:8px;
  z-index:5;pointer-events:none;max-width:190px}
.dom-card{pointer-events:auto;background:var(--parchment2,rgba(20,16,12,.92));border:2px solid;
  border-radius:10px;padding:7px 10px;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.dom-card-suit{font-size:22px;line-height:1;text-align:center}
.dom-card-name{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--gold);
  text-align:center;margin:2px 0}
.dom-card-text{font-family:'Crimson Text',serif;font-size:11.5px;line-height:1.35;color:var(--ink2)}
.dom-card-who{font-family:'Cinzel',serif;font-size:11px;font-weight:700;margin-top:4px;text-align:center}
.ap-bottom{padding:5px 6px;border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:3px}
/* ── Global item supply tracker (sidebar bottom — replaced the P1–P4 seat tabs) ── */
.ap-itemsupply{display:flex;flex-wrap:wrap;gap:3px;align-items:center;padding:5px 8px;
  border-top:1px solid var(--border);flex-shrink:0}
.ap-is-lbl{font-family:'Cinzel',serif;font-size:10px;color:var(--ink3);letter-spacing:.4px;
  text-transform:uppercase;margin-right:3px;flex-shrink:0}
.ap-is-chip{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:6px;
  border:1px solid var(--border);background:var(--parchment);font-size:13px;line-height:1.2}
.ap-is-chip b{font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:var(--ink)}
.ap-is-chip i{font-style:normal;font-size:10px;color:var(--ink3)}
.ap-is-chip.empty{opacity:.42;filter:grayscale(.7)}
.ap-is-chip.empty b{text-decoration:line-through}
.ap-is-none{font-size:11px;color:var(--ink3);font-style:italic}
.ptab{padding:5px 12px;border-radius:13px;font-family:'Cinzel',serif;font-size:15px;
  cursor:pointer;border:1px solid var(--border);background:var(--parchment);
  color:var(--ink3);transition:all .14s;white-space:nowrap}
.ptab.active{color:#fff;border-color:transparent}
.ptab:hover:not(.active){background:var(--parchment3)}

/* ── Side panels (right) ── */
.side-panel{position:absolute;top:0;right:0;bottom:0;width:310px;
  background:var(--parchment2);border-left:1.5px solid var(--border);
  display:flex;flex-direction:column;z-index:20;transform:translateX(100%);
  transition:transform .2s ease}
/* ⛔ The drop-shadow lives on .open ONLY. A closed panel is still laid out at right:0 of
   .game-mid (just translated off-screen), so an unconditional box-shadow bled a dark
   vertical band across the right edge of the board - four panels stacked = 4x dark.
   See the no-vignette rule at .barea. */
.side-panel.open{transform:none;box-shadow:-4px 0 20px var(--shadow)}
.side-panel-head{padding:10px 12px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.side-panel-head h3{font-family:'Cinzel',serif;font-size:14px;color:var(--ink2)}
.side-close{width:22px;height:22px;border-radius:5px;border:1px solid var(--border);
  background:transparent;cursor:pointer;font-size:11px;display:flex;align-items:center;
  justify-content:center;color:var(--ink3)}
.side-panel-body{flex:1;overflow-y:auto;padding:10px}
.le{font-size:13px;color:var(--ink2);padding:3px 0;border-bottom:1px solid rgba(242,189,106,.08);
  line-height:1.4;display:flex;gap:4px}
.le-ts{font-size:10px;color:var(--ink3);flex-shrink:0;margin-top:1px}

/* ── Voice chat (voice.js) — shared markup mounted in the lobby waiting room AND the
   in-game Voice panel opened from Settings. ── */
.voice-block{font-size:12px;color:var(--ink2)}
.voice-head{display:flex;align-items:center;justify-content:space-between;
  font-family:'Cinzel',serif;font-size:12px;color:var(--gold);margin-bottom:8px}
.voice-roster{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.voice-row{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:8px;
  background:var(--parchment3);border:1px solid var(--border);transition:box-shadow .2s,border-color .2s}
.voice-row.voice-self{background:rgba(242,189,106,.08)}
.voice-row span:not(.voice-dot):not(.voice-db){flex:0 0 auto}
.voice-row strong,.voice-row>span:nth-child(2){flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-dot{width:8px;height:8px;border-radius:50%;background:var(--ink4);flex-shrink:0;transition:background .12s,box-shadow .12s}
.voice-row.voice-speaking{border-color:var(--gold);box-shadow:var(--glow)}
.voice-row.voice-speaking .voice-dot{background:var(--fern);box-shadow:0 0 8px rgba(127,176,105,.8)}
.voice-status{font-size:10px;color:var(--ink3);font-style:italic}
.voice-mic-btn,.voice-vol-btn{width:22px;height:22px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--ink2);cursor:pointer;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.voice-mic-btn:hover,.voice-vol-btn:hover{border-color:var(--gold);background:rgba(242,189,106,.1)}
.voice-mic-btn.voice-muted{border-color:var(--ember-deep);color:var(--accent)}
.voice-db{font-size:10px;color:var(--ink3);min-width:34px;text-align:center;flex-shrink:0}
.voice-controls{border-top:1px solid var(--border);padding-top:8px;margin-bottom:8px;
  display:flex;flex-direction:column;gap:6px}
.voice-slider-row{display:flex;align-items:center;gap:6px;font-size:11px}
.voice-slider-row label{flex:0 0 84px;color:var(--ink3)}
.voice-slider-row input[type=range]{flex:1 1 auto;accent-color:var(--accent)}
.voice-slider-row select{flex:1 1 auto;background:var(--parchment3);color:var(--ink2);
  border:1px solid var(--border);border-radius:6px;padding:3px 5px;font-size:11px}
.voice-slider-row>span{flex:0 0 38px;text-align:right;color:var(--ink3);font-size:10px}
.voice-invite-list{border-top:1px solid var(--border);padding-top:8px;
  display:flex;flex-direction:column;gap:4px}
.voice-invite-banner{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;
  background:var(--parchment2);border:1px solid var(--gold);box-shadow:var(--glow);
  font-size:12px;color:var(--ink2)}

/* Supply panel */
.supply-item{display:flex;align-items:center;gap:8px;padding:5px 0;
  border-bottom:1px solid rgba(242,189,106,.08)}
.supply-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.supply-info{flex:1}
.supply-name{font-family:'Cinzel',serif;font-size:12px;color:var(--ink2)}
.supply-count{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--gold)}
.supply-bar{height:3px;background:var(--parchment3);border-radius:2px;margin-top:3px}
.supply-fill{height:100%;border-radius:2px;background:var(--gold);transition:width .3s}

/* Faction board modal */
.fb-modal{position:fixed;inset:0;background:rgba(8,11,9,.66);backdrop-filter:blur(3px);display:none;
  align-items:center;justify-content:center;z-index:200}
.fb-modal.open{display:flex}
.fb-modal-inner{background:linear-gradient(165deg,#19221a,#10160f 62%,#0c110d);border:1px solid var(--border2);border-radius:18px;
  width:480px;max-height:85vh;overflow-y:auto;padding:20px;
  box-shadow:0 20px 50px -12px var(--shadow)}
.fb-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.fb-title{font-family:'Cinzel',serif;font-size:19px;font-weight:700}
.fb-sect{margin-bottom:14px}
.fb-sect h4{font-family:'Cinzel',serif;font-size:12px;color:var(--ink3);text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:7px;border-bottom:1px solid var(--border);padding-bottom:4px}
.fb-track-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.fb-track-name{font-family:'Cinzel',serif;font-size:10px;color:var(--ink2);width:60px;
  flex-shrink:0;padding-top:3px}
.fb-cells{display:flex;gap:3px;flex-wrap:wrap}
.fb-cell{width:28px;height:28px;border-radius:4px;border:1.5px solid var(--border);
  background:var(--parchment3);display:flex;flex-direction:column;align-items:center;
  justify-content:center;font-size:8px;color:var(--ink3);cursor:default;position:relative}
.fb-cell.used{background:var(--accent);border-color:var(--accent);color:#fff}
.fb-cell .cell-vp{font-family:'Cinzel',serif;font-size:10px;font-weight:700}
.fb-cell .cell-sub{font-size:7px;opacity:.8}
.fb-cell .cell-bonus{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-size:8px;color:var(--gold);font-family:'Cinzel',serif;white-space:nowrap}
.fb-stat-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;
  border-bottom:1px solid rgba(242,189,106,.07);font-size:12px}
.fb-stat-label{color:var(--ink3)}
.fb-stat-val{font-family:'Cinzel',serif;font-weight:700;color:var(--ink)}

/* Prow — player list row */
.prow{display:flex;align-items:center;gap:5px;padding:3px 5px;border-radius:5px;
  margin-bottom:2px;border:1px solid transparent}
.prow.active{border-color:var(--gold);background:rgba(200,150,60,.08)}
.pdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pi{flex:1;min-width:0}.pname{font-size:12px;font-weight:600;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfact{font-size:10px;color:var(--ink3)}.pvp{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--gold)}
.vpb{height:2px;background:var(--parchment3);border-radius:2px;margin-top:1px;overflow:hidden}
.vpf{height:100%;border-radius:2px;transition:width .4s}

/* Misc game elements kept */
/* top:54px keeps it clear of the floating .hint-bar (46px) that now overlays the board */
.fp{position:absolute;top:54px;left:8px;width:215px;background:var(--parchment2);
  border:1.5px solid var(--border);border-radius:8px;padding:11px;font-size:11px;
  box-shadow:0 2px 12px var(--shadow);display:none;z-index:10;max-height:80%;overflow-y:auto}
.fp.open{display:block}

/* Riverfolk Set Costs panel (right action panel, Evening) */
.rf-costs-panel{padding:6px 2px 2px;border-top:1px solid var(--border);margin-top:4px}
.rf-costs-title{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.6px;color:var(--ink3);margin-bottom:4px}
.rf-cost-row{margin:6px 0}
.rf-cost-row-label{font-size:10px;color:var(--ink3);margin-bottom:3px;display:flex;align-items:center;gap:4px}
.rf-cost-btns{display:flex;gap:4px}
.rf-cost-btn{flex:1;padding:4px 0;font-family:'Cinzel',serif;font-size:12px;border-radius:5px;
  border:1px solid var(--border);background:var(--parchment3);color:var(--ink);cursor:pointer;transition:all .12s}
.rf-cost-btn:hover:not(:disabled){background:var(--parchment2);border-color:var(--accent)}
.rf-cost-btn:disabled{opacity:.5;cursor:default}
.rf-cost-btn.rf-cost-cur{border-color:var(--accent);color:var(--accent);background:rgba(232,99,60,.12);font-weight:700}

/* Decree / special state displays */
/* Eyrie Decree panel */
.eyrie-decree-panel{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.decree-col-group{border:1px solid var(--border);border-radius:7px;overflow:hidden}
.decree-col-header{font-family:'Cinzel',serif;font-size:12px;font-weight:700;letter-spacing:.7px;
  padding:4px 10px;background:var(--parchment2);color:var(--ink3);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:6px}
.decree-col-header.active{color:var(--accent);background:rgba(232,99,60,.08)}
.decree-col-header.done{color:#4a8040;background:rgba(60,130,50,.06)}
.decree-col-header.locked{opacity:.45}
.decree-entry{display:flex;align-items:center;gap:7px;padding:4px 8px;
  border-bottom:1px solid var(--border2,rgba(0,0,0,.07))}
.decree-entry:last-child{border-bottom:none}
.decree-entry.resolved{opacity:.55;background:rgba(60,130,50,.05)}
.decree-entry-suit{font-size:16px;width:22px;text-align:center}
.decree-entry-btn{flex:1;font-family:'Cinzel',serif;font-size:12px;padding:3px 8px;
  border-radius:4px;border:1px solid var(--border);background:var(--parchment3);
  cursor:pointer;text-align:left;transition:all .12s;color:var(--ink)}
.decree-entry-btn:hover:not(:disabled){background:var(--parchment2);border-color:var(--accent)}
.decree-entry-btn:disabled{opacity:.45;cursor:default}
.decree-entry-btn.cannot{border-color:#c02020;color:#c02020;background:rgba(192,32,32,.07)}
.decree-entry-done{font-size:13px;color:#4a8040;font-weight:700}
.decree-turmoil-btn{width:100%;margin-top:4px;padding:7px;font-family:'Cinzel',serif;font-size:11px;
  font-weight:700;border:2px solid #c02020;border-radius:7px;background:rgba(192,32,32,.09);
  color:#c02020;cursor:pointer;transition:all .12s;letter-spacing:.4px}
.decree-turmoil-btn:hover{background:rgba(192,32,32,.18)}
.decree-done-notice{text-align:center;font-family:'Cinzel',serif;font-size:11px;
  color:#4a8040;padding:6px;border:1px solid #4a8040;border-radius:6px;
  background:rgba(60,130,50,.06);margin-top:2px}

.decree-slot{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:5px;
  border:1px solid var(--border);background:var(--parchment);font-size:11px;margin:2px}
.decree-suit-bird{border-color:#1a4a8b;color:#1a4a8b;background:rgba(30,90,180,.08)}
.decree-suit-fox{border-color:#c8631a;color:#c8631a;background:rgba(200,100,30,.08)}
.decree-suit-rabbit{border-color:#b89020;color:#b89020;background:rgba(180,145,30,.08)}
.decree-suit-mouse{border-color:#3a8030;color:#3a8030;background:rgba(60,130,50,.08)}
.decree-suit-frog{border-color:#1a8a50;color:#1a8a50;background:rgba(30,140,80,.08)}

/* "Actions left: N" — sits as its own row directly above the action buttons/icons */
.actions-left{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--ink3);
  padding:5px 10px;margin:10px 8px 2px;border-radius:8px;border:1px solid var(--border);background:var(--parchment);
  white-space:nowrap;text-align:center;flex-shrink:0}
.actions-left.low{color:var(--accent);border-color:rgba(232,99,60,.35)}

/* Warning banner in action panel */
.turmoil-warn{background:rgba(232,99,60,.09);border:1px solid rgba(232,99,60,.32);border-radius:9px;
  padding:7px 9px;font-size:11.5px;color:var(--accent);font-family:'Cinzel',serif;line-height:1.4}

/* ══ EYRIE LEADER CHOOSER MODAL ══ */
#eyrie-leader-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,16,.82);backdrop-filter:blur(4px);animation:czFade .16s ease;padding:18px}
.elm-inner{max-width:920px;width:100%;text-align:center}
.elm-title{font-family:'Cinzel',serif;font-size:26px;font-weight:700;color:#cfe0ff;letter-spacing:.5px}
.elm-sub{font-family:'Crimson Text',serif;font-size:14px;color:#9fb2d6;margin:8px auto 20px;max-width:640px;line-height:1.4}
.elm-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:14px}
.elc{flex:0 0 210px;width:210px;max-width:42vw;box-sizing:border-box;
  background:linear-gradient(170deg,#eef4ff 0%,#d6e2f5 70%,#c4d3ec 100%);border:2px solid #6fa3e8;border-radius:14px;
  padding:16px 13px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .16s var(--spring),box-shadow .16s,border-color .16s}
.elc:hover{transform:translateY(-6px) scale(1.03);border-color:#a7c8ff;box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 22px rgba(111,163,232,.5)}
.elc-icon{font-size:46px;line-height:1}
.elc-art{width:100%;height:120px;background-size:cover;background-position:center;border-radius:8px}
/* Full leader card art — same treatment as deck cards: whole image, card-shaped. */
.elc.has-art{background:transparent;border:none;box-shadow:none;padding:0;gap:8px}
.elc.has-art:hover{box-shadow:none}
.elc-cardimg{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:12px;display:block;
  box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .16s var(--spring),box-shadow .16s}
.elc.has-art:hover .elc-cardimg{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 22px rgba(111,163,232,.5)}
.elc-name{font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:#1c3a66}
.elc-viz-lbl{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.6px;color:#5a7299;text-transform:uppercase}
.elc-viz-cols{display:flex;gap:5px;justify-content:center;margin-top:4px;flex-wrap:wrap}
.elc-col{font-family:'Cinzel',serif;font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px;border:1px solid}
.elc-col-recruit{color:#8b1a1a;border-color:#8b1a1a;background:rgba(139,26,26,.08)}
.elc-col-move{color:#1a5ab5;border-color:#1a5ab5;background:rgba(30,90,180,.08)}
.elc-col-battle{color:#b8431a;border-color:#b8431a;background:rgba(184,67,26,.08)}
.elc-col-build{color:#2d6b2d;border-color:#2d6b2d;background:rgba(45,107,45,.08)}
.elc-ability{font-family:'Crimson Text',serif;font-size:13px;color:#33455f;line-height:1.34;flex:1;margin-top:2px}
.elc-btn{margin-top:6px;width:100%;padding:8px;border:none;border-radius:8px;cursor:pointer;
  font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#3f74c4,#27508f);box-shadow:0 2px 8px rgba(0,0,0,.3);transition:filter .15s}
.elc:hover .elc-btn{filter:brightness(1.12)}

/* ══ DECREE PLACEMENT MODAL ══ */
#decree-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,16,.82);backdrop-filter:blur(4px);animation:czFade .16s ease;padding:18px}
.dm-inner{max-width:680px;width:100%;background:linear-gradient(168deg,#1d2733,#141b24);border:2px solid #6fa3e8;
  border-radius:16px;padding:20px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.7)}
.dm-title{font-family:'Cinzel',serif;font-size:22px;font-weight:700;color:#cfe0ff}
.dm-sub{font-family:'Crimson Text',serif;font-size:13px;color:#9fb2d6;margin:6px auto 16px;max-width:560px;line-height:1.4}
.dm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dm-col{background:rgba(255,255,255,.04);border:2px solid;border-radius:10px;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .14s var(--spring),box-shadow .14s}
.dm-col:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.5)}
.dm-col-h{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:#fff;padding:6px 4px}
.dm-col-body{min-height:54px;padding:8px 4px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center}
.dm-chip{font-size:18px;line-height:1}
.dm-empty{color:#5a6b80;font-size:13px}
.dm-col-add{font-family:'Cinzel',serif;font-size:10px;color:#8fa6c8;padding:5px 2px;border-top:1px solid rgba(255,255,255,.06)}
.dm-hand-lbl{font-family:'Cinzel',serif;font-size:12px;color:#9fb2d6;margin:16px 0 8px;letter-spacing:.4px}
.dm-hand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.dm-hcard{display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(168deg,#f8efdb,#e2cfa6);
  border:2px solid rgba(90,65,30,.5);border-radius:8px;padding:8px 10px;cursor:pointer;min-width:42px;
  transition:transform .14s var(--spring),border-color .14s,box-shadow .14s}
.dm-hcard:hover{transform:translateY(-4px);border-color:var(--gold)}
.dm-hcard.sel{border-color:#6fa3e8;box-shadow:0 0 0 2px #6fa3e8,0 6px 14px rgba(111,163,232,.5);transform:translateY(-6px)}
.dm-hc-emoji{font-size:22px;line-height:1}
.dm-hc-suit{font-size:13px}
/* Decree hand cards: show the real card face, card-shaped (same treatment as deck cards). */
.dm-hcard.has-art{padding:0;overflow:hidden;min-width:0;width:64px;background:#f3e6c8}
.dm-hc-img{width:64px;aspect-ratio:5/7;object-fit:cover;display:block;border-radius:6px}
.dm-done{margin-top:18px;padding:9px 28px;border:none;border-radius:9px;cursor:pointer;
  font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#3f74c4,#27508f);box-shadow:0 3px 10px rgba(0,0,0,.4);transition:filter .15s}
.dm-done:hover{filter:brightness(1.12)}



/* ══ TURN ANNOUNCEMENT BANNER ══ */
.turn-banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:300;pointer-events:none}
.tb-inner{background:rgba(26,18,8,.9);color:#f5ead6;padding:26px 54px;border-radius:18px;
  border:3px solid var(--gold);text-align:center;animation:tbpop 2.4s ease forwards;
  box-shadow:0 10px 50px rgba(0,0,0,.5)}
.tb-icon{font-size:58px;line-height:1.1}
.tb-name{font-family:'Cinzel',serif;font-size:28px;font-weight:700;margin-top:4px}
.tb-sub{font-family:'Cinzel',serif;font-size:16px;color:#e8cf9a;margin-top:5px;letter-spacing:.6px}
@keyframes tbpop{0%{opacity:0;transform:scale(.85)}12%{opacity:1;transform:scale(1)}
  78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}}

/* ══ BUILD CHOOSER (Marquise) ══ */
.bc-overlay{position:fixed;inset:0;background:rgba(8,11,9,.66);backdrop-filter:blur(3px);display:flex;
  align-items:center;justify-content:center;z-index:250}
.bc-inner{background:linear-gradient(165deg,#1b241c,#10160f 62%,#0c110d);border:1px solid rgba(232,99,60,.5);border-radius:18px;
  padding:22px;width:560px;max-width:94vw;box-shadow:0 20px 50px -12px rgba(0,0,0,.55)}
.bc-inner h3{font-family:'Cinzel',serif;font-size:18px;color:var(--accent);margin-bottom:4px}
.bc-inner .bc-help{font-size:13.5px;color:var(--ink3);margin-bottom:14px;line-height:1.45}
.bc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.bc-card{border:2px solid var(--border);border-radius:12px;padding:12px 10px;text-align:center;
  cursor:pointer;background:linear-gradient(180deg,var(--parchment),var(--parchment2));
  transition:all .15s;position:relative}
.bc-card:hover:not(.off){border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 5px 14px var(--shadow)}
.bc-card.off{opacity:.45;cursor:not-allowed}
.bc-bicon{font-size:30px}
.bc-bname{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--ink);margin-top:3px}
.bc-cost{font-family:'Cinzel',serif;font-size:13px;color:var(--accent);margin-top:5px;font-weight:700}
.bc-vp{font-size:12px;color:#2d6b2d;font-weight:700;font-family:'Cinzel',serif}
.bc-track{font-size:11px;color:var(--ink3);margin-top:4px}
.bc-why{font-size:10.5px;color:var(--accent);margin-top:4px;line-height:1.3}

/* ══ ADVANCED SETUP PANEL ══ */
.sx-card{display:flex;flex-direction:column;height:100%;overflow:hidden}
.sx-banner{padding:8px 11px;display:flex;align-items:center;gap:9px;color:#fff;flex-shrink:0;
  background:linear-gradient(180deg,#ef6e44,var(--ember-deep));border-bottom:2px solid var(--ember-deep)}
.sx-banner .sx-icon{font-size:24px}
.sx-banner .sx-fname{font-family:'Cinzel',serif;font-size:16px;font-weight:700;line-height:1.2;flex:1;
  text-shadow:0 1px 1px rgba(0,0,0,.35)}
.sx-banner .sx-sub{font-size:10px;opacity:.85;font-family:'Cinzel',serif;letter-spacing:.8px}
.sx-prio{width:34px;height:34px;flex-shrink:0;background:#fff;color:var(--accent);border-radius:7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-weight:700;font-size:15px;line-height:1;box-shadow:inset 0 0 0 2px var(--accent)}
.sx-prio span{font-size:7px;letter-spacing:.5px}
.sx-steps{flex:1;overflow-y:auto;padding:8px}
.sx-step{display:flex;gap:9px;padding:8px 9px;border-radius:9px;margin-bottom:5px;
  border:1px solid transparent;opacity:.55;transition:all .2s}
.sx-step.done{opacity:.8}
.sx-step.cur{opacity:1;border-color:var(--gold);background:rgba(200,150,60,.12);
  box-shadow:0 2px 8px var(--shadow)}
.sx-ord{font-family:'Cinzel',serif;font-weight:700;font-size:14px;color:var(--accent);
  width:30px;flex-shrink:0;text-align:right;line-height:1.3}
.sx-ord sup{font-size:8px}
.sx-step.done .sx-ord{color:#2d6b2d}
.sx-body{flex:1;min-width:0}
.sx-title{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.sx-text{font-size:13.5px;color:var(--ink2);line-height:1.45;margin-top:2px}
.sx-prog{font-family:'Cinzel',serif;font-size:11px;color:var(--gold);margin-top:4px;font-weight:700}
.sx-controls{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.sx-opt{padding:9px 13px;border-radius:9px;border:1.5px solid var(--border);cursor:pointer;
  font-family:'Cinzel',serif;font-size:13.5px;font-weight:600;color:var(--ink2);
  background:linear-gradient(180deg,var(--parchment),var(--parchment2));transition:all .14s}
.sx-opt:hover{border-color:var(--gold);transform:translateY(-1px)}
.sx-foot{padding:8px;border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:6px}
.sx-foot .btn{padding:9px 14px;font-size:13px;flex:1}
.sx-queue{display:flex;gap:4px;padding:6px 9px;border-bottom:1px solid var(--border);flex-shrink:0;
  overflow-x:auto;align-items:center}
.sx-qchip{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:11px;
  border:1px solid var(--border);font-family:'Cinzel',serif;font-size:10.5px;color:var(--ink3);
  white-space:nowrap;background:var(--parchment)}
.sx-qchip.cur{border-color:var(--accent);color:var(--accent);font-weight:700;background:rgba(232,99,60,.08)}
.sx-qchip.done{opacity:.45;text-decoration:line-through}
@keyframes sxpulse{0%,100%{stroke-opacity:.9;r:38}50%{stroke-opacity:.35;r:42}}

/* Battle-blink: the clearing under an active battle flashes red (board.js overlay circle) */
.battle-blink{animation:battleBlink .8s ease-in-out infinite}
@keyframes battleBlink{0%,100%{fill-opacity:.55;stroke-opacity:.9}50%{fill-opacity:.1;stroke-opacity:.3}}

/* Modal overlay for combat (kept from original) */

/* ── COMBAT MODAL ── */
.mover{position:fixed;inset:0;background:rgba(8,11,9,.66);backdrop-filter:blur(3px);display:none;
  align-items:center;justify-content:center;z-index:100}
.mover.open{display:flex}
/* ⚔ Inline battle panel — #cmod no longer dims the screen; the card is anchored beside
   the battle clearing by positionCombatPanel() (combat.js) so the board stays visible. */
#cmod{background:none;backdrop-filter:none;pointer-events:none}
#cmod .modal{position:fixed;left:50%;top:60px;margin:0;pointer-events:auto;
  width:300px;max-width:84vw;max-height:70vh;overflow-y:auto;padding:16px;
  box-shadow:0 8px 34px rgba(0,0,0,.6)}
#cmod .modal h2{font-size:16px}
/* ── Battle FX: 2D smoke puffs, revolt red flash, fading result badges ── */
.fx-smoke{fill:#b9b2a6;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:fx-smoke 1.45s ease-out forwards}
@keyframes fx-smoke{0%{opacity:0;transform:translateY(0) scale(.6)}
  18%{opacity:.85}100%{opacity:0;transform:translateY(-28px) scale(2.5)}}
.fx-redflash{fill:#d43a2a;opacity:0;animation:fx-red .55s ease-in-out 3}
@keyframes fx-red{0%,100%{opacity:0}50%{opacity:.45}}
.battle-fade{animation:fx-fade 4.6s ease forwards}
@keyframes fx-fade{0%,72%{opacity:1}100%{opacity:0}}
/* "+N VP" floating up from a clearing / destroyed structure (2s) */
.fx-vpfloat{transform-box:fill-box;transform-origin:center;animation:fx-vpfloat 2s ease-out forwards}
@keyframes fx-vpfloat{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}
  100%{opacity:0;transform:translateY(-34px)}}
/* "+N VP" chip on the craft popup */
.craft-pop-vp{display:inline-block;margin-top:5px;padding:2px 10px;border-radius:10px;
  font-family:'Cinzel',serif;font-weight:800;font-size:13px;color:#ffd76a;
  background:rgba(60,44,10,.65);border:1px solid #c8963c;
  animation:craft-vp-pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes craft-vp-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.modal{background:linear-gradient(165deg,#19221a,#10160f 62%,#0c110d);border:1px solid var(--border2);border-radius:16px;
  padding:24px;width:360px;box-shadow:0 20px 50px -12px var(--shadow)}
.modal h2{font-family:'Cinzel',serif;font-size:19px;color:var(--accent);margin-bottom:4px}
.modal p{font-size:13px;color:var(--ink3);margin-bottom:12px}
.drow{display:flex;gap:10px;justify-content:center;margin:12px 0}
.die{width:52px;height:52px;border-radius:11px;border:2px solid var(--border);
  background:linear-gradient(180deg,var(--parchment3),var(--parchment));
  display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:24px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 3px 8px -2px var(--shadow)}
.die.atk{border-color:#b22222}.die.def{border-color:#1a3a6b}
/* Dice roll: a continuous 3D-ish tumble while the faces flash random values (combat.js
   swaps the numbers every ~85ms), then a settle "pop" when the real result lands. */
@keyframes diceTumble{
  0%{transform:rotate(0deg) scale(1) translateY(0)}
  20%{transform:rotate(160deg) scale(1.18) translateY(-7px)}
  40%{transform:rotate(320deg) scale(.94) translateY(2px)}
  60%{transform:rotate(480deg) scale(1.12) translateY(-5px)}
  80%{transform:rotate(650deg) scale(.97) translateY(1px)}
  100%{transform:rotate(720deg) scale(1) translateY(0)}
}
.die.rolling{animation:diceTumble .9s cubic-bezier(.3,.7,.4,1) infinite;
  box-shadow:0 6px 14px -4px var(--shadow),inset 0 1px 0 rgba(255,255,255,.08)}
@keyframes diceSettle{0%{transform:scale(1.35)}55%{transform:scale(.92)}100%{transform:scale(1)}}
.die.settled{animation:diceSettle .4s ease-out}
.cres{text-align:center;padding:8px;background:var(--parchment2);border-radius:7px;
  font-size:12px;color:var(--ink2);margin-bottom:12px;line-height:1.5;display:none}
.cnote{font-size:10px;color:var(--ink3);margin-top:8px;line-height:1.5}
.ambrow{background:rgba(232,99,60,.07);border:1px solid var(--border);border-radius:8px;
  padding:8px;margin-bottom:10px;font-size:12px;color:var(--ink2)}

/* ── EDITOR ── */
#screen-editor{background:var(--parchment)}
/* Deck Editor now lives as #panel-deckeditor inside .lcard (a lobby menu, like
   Solo/Online/Records/Customize) instead of its own full-viewport #screen.
   .detb/.de-body no longer stretch to fill the viewport — they're bounded to a
   fixed height so the card grid scrolls internally within the lobby card. */
.detb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;background:#1d1710;
  border:1px solid rgba(240,179,92,.18);border-radius:10px 10px 0 0;box-sizing:border-box}
.de-title{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--accent);margin-right:6px}
.detb select,.detb input{background:#2a2014;border:1px solid rgba(240,179,92,.25);border-radius:6px;color:#f0e2c4;
  font-family:'Crimson Text',serif;font-size:13px;padding:5px 8px}
.de-count{font-family:'Cinzel',serif;font-size:13px;color:#9fb27f;margin-left:auto;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.25)}
.de-count.bad{color:#e0884a}
.de-count.good{color:#74c46a}
.de-tb-btn{padding:6px 12px;border-radius:8px;border:1px solid rgba(242,189,106,.3);cursor:pointer;
  font-family:'Cinzel',serif;font-size:12px;color:#f0e2c4;background:#33270f;transition:filter .15s,border-color .15s}
.de-tb-btn:hover{filter:brightness(1.2);border-color:var(--gold)}
.de-tb-btn.de-danger{border-color:rgba(139,26,26,.5);color:#e89a8a}
.de-body{height:min(60vh,560px);display:grid;grid-template-columns:1fr;gap:12px;padding:12px;min-height:0;
  box-sizing:border-box;background:#15110b;border:1px solid rgba(240,179,92,.18);border-top:none;border-radius:0 0 10px 10px}
.de-pane{display:flex;flex-direction:column;background:#1b1610;border:1px solid rgba(240,179,92,.12);border-radius:10px;padding:10px;min-height:0}
.de-pane-h{font-family:'Cinzel',serif;font-size:13px;color:var(--gold);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.de-hint{font-family:'Crimson Text',serif;font-size:11px;color:#8a7a5a;font-weight:400}
.de-pane select{margin-bottom:8px;align-self:flex-start;background:#2a2014;border:1px solid rgba(240,179,92,.25);
  border-radius:6px;color:#f0e2c4;font-family:'Crimson Text',serif;font-size:12px;padding:4px 8px}
.de-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;align-content:start;padding:4px}
.de-cardlet{position:relative;background:linear-gradient(168deg,#f8efdb,#e2cfa6);border:1px solid rgba(90,65,30,.5);
  border-radius:8px;padding:8px 4px 6px;text-align:center;cursor:pointer;transition:transform .14s var(--spring),box-shadow .14s,border-color .14s}
.de-cardlet:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 16px rgba(0,0,0,.4)}
.de-cardlet .dc-art{width:100%;aspect-ratio:5/7;height:auto;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:5px;margin-bottom:4px}
.de-cardlet .dc-emoji{font-size:26px;line-height:1}
.de-cardlet .dc-name{font-family:'Cinzel',serif;font-size:9px;color:#33270f;margin-top:2px;line-height:1.1;min-height:20px}
.de-cardlet .dc-suitbar{height:4px;border-radius:3px;margin-top:3px}
.de-cardlet .dc-art-btn{position:absolute;top:2px;right:2px;width:18px;height:18px;border:none;border-radius:50%;
  background:rgba(20,14,8,.8);color:#f0c878;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.de-cardlet .dc-art-btn:hover{background:rgba(40,28,12,.95)}
.etb{display:flex;gap:6px;padding:10px 13px;background:var(--parchment2);
  border-bottom:1.5px solid var(--border);flex-wrap:wrap;align-items:center}
.et{padding:6px 12px;border-radius:8px;font-family:'Cinzel',serif;font-size:11px;
  cursor:pointer;border:1px solid var(--border);background:var(--parchment);color:var(--ink2);transition:all .14s}
.et:hover{background:var(--parchment3);border-color:var(--border2)}.et.at{background:linear-gradient(180deg,var(--accent),var(--ember-deep));color:#fff;border-color:transparent}
.ebody{flex:1;display:flex;overflow:hidden}
.eprops{width:175px;background:var(--parchment2);border-right:1.5px solid var(--border);
  padding:12px;overflow-y:auto;font-size:11px;color:var(--ink3)}
.eprops h3{font-family:'Cinzel',serif;font-size:11px;color:var(--ink3);margin-bottom:7px}

/* ── TOAST + CONN ── */
.toast{position:fixed;top:52px;left:50%;background:var(--parchment2);border:1px solid var(--border);
  border-radius:8px;padding:9px 14px;font-size:12px;color:var(--ink2);text-align:center;
  box-shadow:0 4px 14px var(--shadow);transform:translate(-50%,-160%);opacity:0;
  transition:transform .3s,opacity .3s;
  z-index:200;max-width:min(420px,90vw);line-height:1.4}
.toast.show{transform:translateX(-50%);opacity:1}
.conn{position:fixed;bottom:18px;left:18px;background:var(--parchment2);border:1px solid var(--border);
  border-radius:20px;padding:5px 10px;font-family:'Cinzel',serif;font-size:12px;color:var(--ink3);
  z-index:200;display:flex;align-items:center;gap:5px}
.cdot{width:7px;height:7px;border-radius:50%;background:#ccc}
.cdot.solo{background:var(--gold)}.cdot.online{background:#3b8a3b}.cdot.offline{background:#c0392b}

/* ── CUSTOMIZE MENU ─────────────────────────────── */
/* ── CUSTOMIZE PANEL CSS ─────────────────────────────────────── */
.cust-faction-tab{
  display:flex;align-items:center;gap:6px;padding:6px 10px;
  border-radius:7px;border:1.5px solid var(--border);background:var(--parchment);
  cursor:pointer;font-family:'Cinzel',serif;font-size:11px;color:var(--ink2);
  transition:all .15s;flex-shrink:0;
}
.cust-faction-tab:hover{border-color:var(--gold);}
.cust-faction-tab.active{color:#fff;border-color:transparent;}
.cust-section{margin-bottom:18px;}
.cust-section h3{font-family:'Cinzel',serif;font-size:12px;color:var(--ink2);
  margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.cust-category-pill{
  padding:4px 12px;border-radius:14px;font-family:'Cinzel',serif;font-size:10px;
  cursor:pointer;border:1px solid var(--border);background:var(--parchment);
  color:var(--ink3);transition:all .14s;white-space:nowrap;
}
.cust-category-pill:hover{background:var(--parchment3);border-color:var(--gold)}
.cust-category-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.cust-slot{
  background:var(--parchment);border:1.5px solid var(--border);border-radius:8px;
  padding:10px;display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:all .15s;
}
.cust-slot:hover{border-color:var(--gold);background:var(--parchment2);}
.cust-slot.has-image{border-color:rgba(200,150,60,.5);background:rgba(200,150,60,.04);}
.cust-preview{
  width:100px;height:100px;border-radius:8px;
  background:var(--parchment3);border:2px dashed var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;overflow:hidden;position:relative;cursor:pointer;
  transition:all .15s;
}
.cust-preview:hover{border-color:var(--accent);transform:scale(1.03);}
.cust-preview img{width:100%;height:100%;object-fit:contain;}
.cust-preview .no-img{font-size:32px;opacity:.4;}
.cust-preview .img-overlay{
  position:absolute;inset:0;background:rgba(26,18,8,.55);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;font-size:12px;font-family:'Cinzel',serif;
  color:#fff;letter-spacing:.3px;
}
.cust-preview:hover .img-overlay{opacity:1;}
.cust-label{font-family:'Cinzel',serif;font-size:10px;color:var(--ink2);
  font-weight:600;text-align:center;line-height:1.3;}
.cust-btns{display:flex;gap:5px;width:100%;}
.cust-btn{flex:1;padding:4px 0;border-radius:5px;font-family:'Cinzel',serif;
  font-size:10px;cursor:pointer;border:1px solid var(--border);
  background:var(--parchment);color:var(--ink2);transition:all .14s;text-align:center;}
.cust-btn:hover{background:var(--parchment3);border-color:var(--gold);}
.cust-btn.danger{color:var(--accent);border-color:rgba(232,99,60,.3);}
.cust-btn.danger:hover{background:rgba(232,99,60,.1);}
.cust-save-badge{
  display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
  border-radius:12px;font-size:11px;font-family:'Cinzel',serif;
  background:rgba(45,107,45,.12);color:#2d6b2d;margin-top:8px;
}
/* In-game faction card modal */
.faction-card-modal{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:320px;background:var(--parchment);border:2px solid var(--border);
  border-radius:12px;padding:16px;box-shadow:0 8px 40px var(--shadow);
  z-index:20;display:none;
}
.faction-card-modal.open{display:block;}
.faction-card-img{width:100%;border-radius:8px;border:1px solid var(--border);margin-bottom:10px;display:none;}
.faction-card-img.loaded{display:block;}


/* ═══════════════════════════════════════════════════════════════
   NIGHT CAMPAIGN — modern material & motion layer
   (cascade override layer: keeps every original selector working)
   ═══════════════════════════════════════════════════════════════ */

::selection{background:rgba(240,179,92,.35)}
*{scrollbar-width:thin;scrollbar-color:rgba(240,179,92,.3) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(240,179,92,.25);border-radius:5px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(240,179,92,.45);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

body{font-family:'Outfit',system-ui,sans-serif}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ── Lobby: glass command tent + fireflies ── */
.logo h1{font-size:50px;letter-spacing:6px;font-weight:800;text-shadow:none;
  background:linear-gradient(180deg,#ffe9bd 10%,var(--gold) 45%,#c47a35 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(240,179,92,.35)) drop-shadow(0 2px 2px rgba(0,0,0,.6));
  animation:logoIn .9s var(--spring) both}
.logo p{color:var(--ink3);letter-spacing:2.5px;text-transform:uppercase;font-size:12px;
  font-family:'Outfit',sans-serif;font-weight:500;animation:fadeUp .8s .25s ease both}
@keyframes logoIn{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lcard{background:rgba(20,27,21,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(240,179,92,.18);border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  animation:fadeUp .7s .12s ease both}
.firefly{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#ffe9b0 0%,rgba(240,179,92,.85) 40%,transparent 72%);
  filter:blur(.4px);opacity:0;
  animation:drift var(--dur,11s) var(--delay,0s) linear infinite,
            flicker calc(var(--dur,11s)/3.2) var(--delay,0s) ease-in-out infinite}
@keyframes drift{
  0%{transform:translate(0,0)}
  25%{transform:translate(var(--dx1,30px),var(--dy1,-42px))}
  50%{transform:translate(var(--dx2,-22px),var(--dy2,-86px))}
  75%{transform:translate(var(--dx3,26px),var(--dy3,-128px))}
  100%{transform:translate(0,-170px)}}
@keyframes flicker{0%,100%{opacity:0}45%{opacity:.95}60%{opacity:.3}75%{opacity:.8}}

/* ── Interactive ripple (added by JS to pressed controls) ── */
.btn,.abt,.agrid-btn,.mode-btn,.sx-opt,.ptab,.top-icon-btn,.mc,.fc,.bc-card,.vp-entry,.tog,.et,.cust-btn{
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.ripple{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(240,179,92,.5) 0%,rgba(240,179,92,.18) 45%,transparent 70%);
  transform:scale(0);animation:rip .55s ease-out forwards;mix-blend-mode:screen}
@keyframes rip{to{transform:scale(2.6);opacity:0}}

/* ── Buttons: lantern primary with shimmer sweep + spring ── */
.btn{transition:transform .2s var(--spring),box-shadow .2s,filter .2s;border-radius:12px}
.btn-p{background:linear-gradient(180deg,#f2864f 0%,var(--accent) 52%,#a33f22 100%);
  border:1px solid rgba(255,190,130,.45);color:#fff8ec;
  text-shadow:0 1px 2px rgba(80,20,0,.55);
  box-shadow:0 4px 18px rgba(224,99,60,.4), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-p::after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,245,220,.5),transparent);
  transform:skewX(-20deg);transition:left .55s ease}
.btn-p:hover{transform:translateY(-2px) scale(1.015);filter:none;
  box-shadow:0 9px 26px rgba(224,99,60,.5), var(--glow), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-p:hover::after{left:130%}
.btn-p:active{transform:translateY(0) scale(.97)}
.btn-s{background:rgba(240,179,92,.06);color:var(--gold);border:1px solid rgba(240,179,92,.35);
  box-shadow:none;transition:transform .2s var(--spring),box-shadow .2s,background .2s,border-color .2s}
.btn-s:hover{background:rgba(240,179,92,.13);border-color:var(--gold);transform:translateY(-2px);
  box-shadow:var(--glow)}
.btn-s:active{transform:scale(.97)}

.mode-btn{transition:all .2s var(--spring);border-radius:12px}
.mode-btn.active{background:linear-gradient(180deg,#f2864f,var(--accent) 60%,#a33f22);
  border-color:rgba(255,190,130,.4);box-shadow:0 4px 16px rgba(224,99,60,.4)}
.mode-btn:hover:not(.active){background:var(--parchment3);border-color:rgba(240,179,92,.4);
  transform:translateY(-2px)}

.tog{background:#2a3329;border-color:rgba(240,179,92,.2);transition:background .25s,box-shadow .25s}
.tog::after{background:#cdbf9f;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.tog.on{background:linear-gradient(180deg,#f2864f,#c44f2c);box-shadow:0 0 12px rgba(224,99,60,.45)}
.tog.on::after{background:#fff5e3}

/* ── Action buttons: lift, glow edge, icon nudge ── */
.abt{background:linear-gradient(180deg,#242e26,#1b231d);border:1px solid rgba(240,179,92,.14);
  box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s var(--spring),box-shadow .2s,border-color .2s,background .2s}
.abt:hover:not(:disabled){background:linear-gradient(180deg,#2c3a2f,#222b24);
  border-color:rgba(240,179,92,.55);transform:translateY(-2px) translateX(2px);
  box-shadow:0 6px 16px rgba(0,0,0,.45), var(--glow)}
.abt:hover:not(:disabled) .abt-icon{transform:scale(1.25) rotate(-6deg)}
.abt-highlight{background:linear-gradient(180deg,#5a4012,#3a2a0a);border-color:#c8963c;
  box-shadow:0 0 0 1px #c8963c, 0 2px 10px rgba(200,150,60,.4);animation:harvestPulse 1.8s ease-in-out infinite}
@keyframes harvestPulse{0%,100%{box-shadow:0 0 0 1px #c8963c,0 2px 10px rgba(200,150,60,.35)}
  50%{box-shadow:0 0 0 1px #e0b860,0 2px 18px rgba(200,150,60,.7)}}
.abt:active:not(:disabled){transform:scale(.975)}
.abt .abt-icon{transition:transform .2s var(--spring);display:inline-block}
.abt.end{background:rgba(224,99,60,.08);border-color:rgba(224,99,60,.45);color:#f0936f}
.abt.end:hover:not(:disabled){background:rgba(224,99,60,.16);box-shadow:0 0 14px rgba(224,99,60,.35)}
.agrid-btn{background:linear-gradient(180deg,#242e26,#1b231d);border:1px solid rgba(240,179,92,.14);
  transition:transform .18s var(--spring),box-shadow .2s,border-color .2s}
.agrid-btn:hover:not(:disabled){transform:translateY(-3px);border-color:rgba(240,179,92,.55);
  box-shadow:0 7px 16px rgba(0,0,0,.45), var(--glow)}
.agrid-btn:hover:not(:disabled) .ag-icon{transform:scale(1.2)}
.agrid-btn .ag-icon{transition:transform .2s var(--spring);display:inline-block}
.agrid-btn:active:not(:disabled){transform:scale(.96)}
/* Available (enabled) actions read clearly brighter than disabled/unavailable ones. */
.agrid-btn:not(:disabled){border-color:rgba(240,179,92,.45);
  background:linear-gradient(180deg,#2b3a2d,#202a21);
  box-shadow:0 2px 7px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.agrid-btn:not(:disabled) .ag-lbl{color:#efe6cf}
.agrid-btn:disabled{filter:grayscale(.85);opacity:.3}
.abt:not(:disabled):not(.end){border-color:rgba(240,179,92,.4)}
.abt:disabled{filter:grayscale(.7)}
.top-icon-btn{background:rgba(240,179,92,.06);border:1px solid rgba(240,179,92,.18);
  transition:transform .18s var(--spring),box-shadow .2s,background .2s,border-color .2s}
.top-icon-btn:hover{background:rgba(240,179,92,.14);border-color:var(--gold);
  transform:translateY(-2px) scale(1.06);box-shadow:var(--glow)}
.top-icon-btn:active{transform:scale(.94)}
.ptab{transition:all .18s var(--spring)}
.ptab:hover:not(.active){transform:translateY(-2px);border-color:rgba(240,179,92,.45)}

/* ── Faction / map pickers ── */
.fc,.mc{transition:transform .18s var(--spring),box-shadow .2s,border-color .2s,background .2s;
  border-radius:11px}
.fc:hover:not(.sel),.mc:hover:not(.sel){transform:translateY(-3px);border-color:rgba(240,179,92,.5);
  box-shadow:0 8px 18px rgba(0,0,0,.4)}
.fc.sel,.mc.sel{border-color:var(--gold);background:rgba(240,179,92,.1);
  box-shadow:var(--glow), inset 0 0 0 1px rgba(240,179,92,.25)}

/* ── Game chrome: glass bars ── */
.vp-track{background:rgba(15,20,16,.92);border-bottom:1px solid rgba(240,179,92,.15);
  box-shadow:0 2px 14px rgba(0,0,0,.4)}
.vp-entry{background:rgba(240,179,92,.05);border-color:rgba(240,179,92,.16);
  transition:transform .18s var(--spring),border-color .2s,background .2s,box-shadow .2s}
.vp-entry:hover{transform:translateY(-2px);border-color:rgba(240,179,92,.5);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.vp-entry.active-player{border-color:var(--gold);background:rgba(240,179,92,.14);
  box-shadow:var(--glow);animation:activePulse 2.6s ease-in-out infinite}
@keyframes activePulse{0%,100%{box-shadow:0 0 8px rgba(240,179,92,.25)}50%{box-shadow:0 0 18px rgba(240,179,92,.5)}}
.vp-num.vp-pop{animation:vpPop .7s var(--spring)}
@keyframes vpPop{0%{transform:scale(1)}35%{transform:scale(1.7);color:var(--gold);
  text-shadow:0 0 14px rgba(240,179,92,.9)}100%{transform:scale(1)}}
.vp-entry .vp-num{display:inline-block}
.hint-bar{background:linear-gradient(180deg,rgba(12,16,13,.55),rgba(12,16,13,.34));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-bottom:1px solid rgba(240,179,92,.2)}
.hint-text.mode{animation:hintGlow 1.6s ease-in-out infinite}
@keyframes hintGlow{0%,100%{text-shadow:0 0 6px rgba(255,217,138,.3)}50%{text-shadow:0 0 16px rgba(255,217,138,.85)}}
.bbar{background:linear-gradient(180deg,#161d18,#111713);border-top:1px solid rgba(240,179,92,.18);
  box-shadow:0 -4px 18px rgba(0,0,0,.45)}
.side-panel{background:rgba(20,27,21,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-left:1px solid rgba(240,179,92,.2);
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
.side-panel.open{box-shadow:-10px 0 40px rgba(0,0,0,.55)}
.le{animation:fadeUp .3s ease both}

/* ── Hand cards: physical parchment that pops on the dark felt ── */
.card{background:linear-gradient(168deg,#f8efdb 0%,#ecdcba 70%,#e2cfa6 100%);
  border:1px solid rgba(90,65,30,.5);box-shadow:0 3px 8px rgba(0,0,0,.5);
  transition:transform .22s var(--spring),box-shadow .22s,border-color .2s}
.card .cn{color:#33270f}.card .ct{color:#7a6438}
.card:hover{transform:translateY(-14px) rotate(-1.5deg) scale(1.05);
  box-shadow:0 14px 26px rgba(0,0,0,.6), 0 0 16px rgba(240,179,92,.25);border-color:var(--gold)}
.card.selected-card{transform:translateY(-18px) scale(1.06);border-color:var(--accent);
  box-shadow:0 14px 26px rgba(0,0,0,.6), 0 0 18px rgba(224,99,60,.5)}

/* ── Card zoom overlay ── */
#card-zoom-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(8,6,3,.74);backdrop-filter:blur(3px);animation:czFade .14s ease}
@keyframes czFade{from{opacity:0}to{opacity:1}}
.card-zoom-big{width:300px;max-width:78vw;background:linear-gradient(168deg,#f8efdb 0%,#ecdcba 70%,#e2cfa6 100%);
  border:2px solid var(--gold);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.7), 0 0 30px rgba(240,179,92,.35);
  padding:22px 20px 16px;text-align:center;position:relative;cursor:pointer;animation:czPop .18s var(--spring)}
@keyframes czPop{from{transform:scale(.82);opacity:.4}to{transform:scale(1);opacity:1}}
.card-zoom-big .czb-suitbar{position:absolute;top:0;left:0;right:0;height:9px;border-radius:16px 16px 0 0}
.card-zoom-big .czb-emoji{font-size:96px;line-height:1.1;margin:10px 0 6px}
.card-zoom-big .czb-img{width:100%;height:200px;background-size:cover;background-position:center;border-radius:10px;margin:6px 0 10px}
.card-zoom-big .czb-name{font-family:'Cinzel',serif;font-size:24px;font-weight:700;color:#33270f;margin-top:4px}
.card-zoom-big .czb-type{font-family:'Crimson Text',serif;font-size:15px;color:#7a6438;margin-top:3px;text-transform:capitalize}
.card-zoom-big .czb-text{font-family:'Crimson Text',serif;font-size:14px;color:#4a3a1e;margin-top:10px;line-height:1.35}
.card-zoom-big .czb-hint{font-family:'Cinzel',serif;font-size:11px;color:#9a7a45;margin-top:14px;letter-spacing:.3px}


/* ── Board clearings glow under the pointer ── */
.camp-group{transition:filter .18s ease}
.camp-group:hover{filter:brightness(1.13) drop-shadow(0 0 10px rgba(240,179,92,.6))}

/* ── Setup panel & queue ── */
.sx-step.cur{border-color:rgba(240,179,92,.6);background:rgba(240,179,92,.09);
  box-shadow:0 3px 12px rgba(0,0,0,.35), inset 0 0 14px rgba(240,179,92,.05);
  animation:fadeUp .3s ease both}
.sx-opt{background:linear-gradient(180deg,#242e26,#1b231d);color:var(--ink);
  border:1px solid rgba(240,179,92,.25);transition:transform .18s var(--spring),box-shadow .2s,border-color .2s}
.sx-opt:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--glow)}
.sx-qchip.cur{border-color:var(--gold);color:var(--gold);background:rgba(240,179,92,.12);
  box-shadow:0 0 8px rgba(240,179,92,.3)}
.sx-prio{background:#10150f;color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}

/* ── Build chooser & modals: dark glass ── */
.bc-overlay,.fb-modal,#combat-modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bc-overlay{background:rgba(6,9,7,.66)}
.bc-inner{background:rgba(24,31,25,.97);border:1px solid rgba(240,179,92,.35);
  box-shadow:0 24px 70px rgba(0,0,0,.7), var(--glow);animation:modalIn .32s var(--spring) both}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
.bc-card{background:linear-gradient(180deg,#242e26,#1b231d);border:1.5px solid rgba(240,179,92,.18);
  transition:transform .2s var(--spring),box-shadow .2s,border-color .2s}
.bc-card:hover:not(.off){transform:translateY(-4px) scale(1.03);border-color:var(--gold);
  box-shadow:0 10px 24px rgba(0,0,0,.5), var(--glow)}
.bc-vp{color:#8ed084}
.fb-modal-inner,.modal{background:rgba(24,31,25,.97);border:1px solid rgba(240,179,92,.3);
  box-shadow:0 24px 70px rgba(0,0,0,.7);animation:modalIn .3s var(--spring) both}
.turn-banner .tb-inner{background:rgba(13,18,14,.93);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);box-shadow:0 18px 70px rgba(0,0,0,.7), 0 0 40px rgba(240,179,92,.2)}

/* ── Toast & connection chip ── */
.toast{background:rgba(24,31,25,.96);border:1px solid rgba(240,179,92,.35);
  border-left:4px solid var(--gold);color:var(--ink);border-radius:11px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);font-size:13.5px;font-family:'Outfit',sans-serif;
  transition:transform .38s var(--spring),opacity .3s}
.conn{background:rgba(24,31,25,.92);border:1px solid rgba(240,179,92,.22)}

/* ── Dice ── */
.die{background:linear-gradient(180deg,#2a352c,#1d2620);border:2px solid rgba(240,179,92,.35);
  box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)}
.die.atk{border-color:#ef6a4c;box-shadow:0 0 12px rgba(239,106,76,.35)}
.die.def{border-color:#6fa3e8;box-shadow:0 0 12px rgba(111,163,232,.35)}

/* ── Inputs ── */
.fr input,.fr select,.pslot select{background:rgba(12,16,13,.6);border:1px solid rgba(240,179,92,.2);
  color:var(--ink);border-radius:9px}
.fr input:focus,.fr select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,179,92,.15)}
.pslot{background:rgba(12,16,13,.45);border:1px solid rgba(240,179,92,.14);border-radius:10px;
  transition:border-color .2s,background .2s}
.pslot:focus-within{border-color:rgba(240,179,92,.45);background:rgba(12,16,13,.65)}
.pslot input{color:var(--ink);border-bottom-color:rgba(240,179,92,.25)}
.code-box{border-color:var(--gold);background:rgba(240,179,92,.05)}
.code-box .code{text-shadow:0 0 18px rgba(240,179,92,.45);color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .firefly{display:none}
  /* Battle FX are gameplay feedback (who fought, where, result), not decoration —
     keep them animating even when the OS asks for reduced motion. Without this,
     Windows "Animation effects: off" made smoke/red-flash invisible in ALL browsers. */
  .fx-smoke{animation:fx-smoke 1.45s ease-out forwards!important}
  .fx-redflash{animation:fx-red .55s ease-in-out 3!important}
  .battle-fade{animation:fx-fade 4.6s ease forwards!important}
  .fx-vpfloat{animation:fx-vpfloat 2s ease-out forwards!important}
}


/* ═══════════ History / Replays / Stats / merged Online (history-stats.js) ═══════════ */

/* Merged Online menu sub-tabs */
.online-subtabs{display:flex;gap:8px;margin-bottom:14px}
.online-subtab{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--parchment);color:var(--ink3);font-family:'Cinzel',serif;font-size:12px;cursor:pointer;
  transition:all .15s}
.online-subtab:hover{border-color:var(--accent)}
.online-subtab.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.ws-tools-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding-top:12px;
  border-top:1px dashed var(--border)}

.play-subtabs{display:flex;gap:8px;margin-bottom:14px}
.play-subtab{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--parchment);color:var(--ink3);font-family:'Cinzel',serif;font-size:12px;cursor:pointer;
  transition:all .15s}
.play-subtab:hover{border-color:var(--accent)}
.play-subtab.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Online lobby: "or join a room" divider between the create button and the code field */
.online-or{display:flex;align-items:center;gap:10px;margin:16px 0 10px;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;color:var(--ink3);text-transform:uppercase}
.online-or::before,.online-or::after{content:'';flex:1;height:1px;background:var(--border)}

/* Online lobby: faction draft (dice roll → pick order) */
.draft-roll{display:flex;flex-direction:column;gap:8px;padding:10px 12px;
  border:1px solid var(--border);border-radius:8px;background:rgba(0,0,0,.14)}
.draft-title{font-family:'Cinzel',serif;font-size:12px;color:var(--accent)}
.draft-hint{font-size:11px;color:var(--ink3);line-height:1.45}
.draft-order{display:flex;flex-wrap:wrap;gap:6px}
.draft-seat{display:flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--border);
  border-radius:999px;font-size:11px;background:var(--parchment)}
.draft-seat.now{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.draft-seat .die{font-family:'Cinzel',serif;color:var(--accent)}
/* A faction card that is taken, or that this client may not pick yet */
.fc.locked{opacity:.42;pointer-events:none;filter:grayscale(.55)}
.fc.taken{opacity:.5;pointer-events:none}
.fc.taken .fc-top::after{content:'✓';margin-left:4px;color:var(--accent)}

/* In-game Move History panel */
.hist-actions{display:flex;gap:6px;margin-bottom:8px;position:sticky;top:0}
.hist-row{display:flex;align-items:baseline;gap:6px;padding:4px 2px;font-size:11px;
  border-bottom:1px solid rgba(120,90,40,.12);line-height:1.35}
.hist-row .hist-ic{flex:none;font-size:12px;width:16px;text-align:center}
.hist-row .hist-ts{flex:none;font-family:'Cinzel',serif;font-size:9px;color:var(--ink3);min-width:22px}
.hist-row .hist-pf{flex:none}
.hist-row .hist-tx{flex:1;color:var(--ink2)}

/* Replays tab cards */
.replay-card{display:flex;align-items:center;gap:8px;padding:9px 11px;margin-bottom:8px;
  border:1px solid var(--border);border-radius:9px;background:var(--parchment2)}

/* Floating replay control bar */
/* Fixed to a stable left offset (not left:50%+translateX) so the bar never shifts
   horizontally as caption text length changes between steps. Width is pinned so
   internal content reflow can't resize/move the bar either. */
#replay-bar{position:fixed;left:50%;bottom:14px;margin-left:-460px;width:920px;max-width:94vw;z-index:9000;
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:10px 14px;
  border:1px solid var(--accent);border-radius:14px;
  background:rgba(20,27,21,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(0,0,0,.45)}
#replay-bar .rp-btn{border:1px solid var(--border);background:var(--parchment);color:var(--ink);
  border-radius:7px;padding:7px 11px;font-size:15px;cursor:pointer;line-height:1;flex:0 0 auto}
#replay-bar .rp-btn:hover{border-color:var(--accent)}
#replay-bar .rp-play{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
#replay-bar #replay-slider{width:200px;max-width:34vw;min-width:60px;accent-color:var(--accent);flex:1 1 60px}
#replay-bar .rp-step{font-family:'Cinzel',serif;font-size:13px;color:var(--gold);min-width:42px;text-align:center;flex:0 0 auto}
/* flex:1 0 100% forces the caption onto its own full-width row ALWAYS (never inline),
   and min-height reserves that row even when the caption is short/empty — so the bar
   keeps a constant height regardless of caption length (e.g. after a battle step). */
#replay-bar .rp-caption{font-size:13px;color:#e8e0cf;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 0 100%;min-height:17px;line-height:17px}

/* Statistic
/* ═══════════ Card art (deck images: public/Images/Decks/...) ═══════════ */
/* Hand cards: show the full card-face SVG, with the name on a legible strip. */
.card.has-art{position:relative;overflow:hidden;padding:0;background:#f3e6c8}
.card.has-art .card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.card.has-art .card-art-fallback{display:none}
/* TTS-style sheet sprite (deck-sheets.js): one deck image, background-position picks the cell */
.card-spr{width:100%;height:100%;display:block}
.craft-pop-card .card-spr{position:relative;z-index:2}
.card.has-art .card-name-strip{position:absolute;left:0;right:5px;bottom:5px;font-family:'Cinzel',serif;font-size:7.5px;font-weight:600;
  text-align:center;color:#fff;background:rgba(20,14,8,.55);padding:1px 2px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* If the image 404s, hide it and reveal the emoji+name fallback. */
.card.has-art.art-failed .card-art,
.card.has-art.art-failed .card-name-strip{display:none}
.card.has-art.art-failed .card-art-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:2px}
.card.has-art.art-failed .card-art-fallback .cs{font-size:30px}
.card.has-art.art-failed .card-art-fallback .cn{font-size:9px;text-align:center;padding:0 3px}

/* Zoomed card: show the whole card image, uncropped. */
.card-zoom-big.has-art{background:transparent;border:none;box-shadow:none;padding:0;width:auto}
.card-zoom-big .czb-card{width:min(340px,82vw);aspect-ratio:5/7;max-height:84vh;object-fit:cover;object-position:center;display:block;border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.55)}
.card-zoom-big .czb-fallback{display:none}
.card-zoom-big.has-art .czb-hint{color:#e8dcc0;margin-top:12px;text-align:center}
/* Fallback if the zoom image fails to load. */
.card-zoom-big.has-art.art-failed{background:linear-gradient(168deg,#f8efdb 0%,#ecdcba 70%,#e2cfa6 100%);border:1px solid var(--border);box-shadow:0 14px 44px rgba(0,0,0,.55);padding:18px}
.card-zoom-big.has-art.art-failed .czb-card{display:none}
.card-zoom-big.has-art.art-failed .czb-fallback{display:block;position:relative;padding-top:6px}
.card-zoom-big.has-art.art-failed .czb-hint{color:#9a7a45}

/* ── Card zoom GALLERY: right-click shows the whole hand, focused + scrollable ── */
#card-zoom-overlay{flex-direction:column;gap:16px}
.czg-wrap{display:flex;align-items:center;gap:6px;max-width:100vw;overflow-x:auto;overflow-y:hidden;
  padding:64px calc(50vw - 151px);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.czg-wrap::-webkit-scrollbar{display:none}
.czg-wrap.drag-scrolling{cursor:grabbing;scroll-behavior:auto;user-select:none}
.czg-card{flex:0 0 auto;width:302px;aspect-ratio:5/7;position:relative;overflow:hidden;border-radius:14px;cursor:pointer;   /* 210px +20% +20% — card text was hard to read */
  transform:scale(.72);filter:brightness(.55) saturate(.8);box-shadow:0 8px 22px rgba(0,0,0,.5);
  transition:transform .26s var(--spring),filter .26s ease,box-shadow .26s ease}
.czg-card:hover{filter:none}
.czg-card.focus{transform:scale(1.22);filter:none;box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 30px rgba(240,179,92,.55);z-index:2}
.czg-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Spanish rules caption in the zoom gallery — BELOW the card so the original stays visible.
   .has-es cards drop the fixed 5/7 box onto the image itself and stack the caption under it. */
.czg-card.has-es{aspect-ratio:auto;display:flex;flex-direction:column}
.czg-card.has-es .czg-img{width:100%;height:auto;aspect-ratio:5/7;flex:none}
.czg-es{background:rgba(20,14,8,.92);color:#f0e6d2;
  font-family:'Crimson Text',serif;font-size:12.5px;line-height:1.25;padding:7px 9px 8px;text-align:center;
  border-top:1px solid rgba(240,179,92,.4)}
.czg-card .czg-fb{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  width:100%;height:100%;padding:16px;background:linear-gradient(168deg,#f8efdb 0%,#ecdcba 70%,#e2cfa6 100%)}
.czg-card.has-art .czg-fb{display:none}
.czg-card.has-art.art-failed .czg-img{display:none}
.czg-card.has-art.art-failed .czg-fb{display:flex}
.czg-fb-bar{position:absolute;top:0;left:0;right:0;height:8px}
.czg-fb-emoji{font-size:56px;line-height:1}
.czg-fb-name{font-family:'Cinzel',serif;font-weight:700;color:#33270f;font-size:17px;line-height:1.15}
.czg-fb-type{font-family:'Crimson Text',serif;color:#7a6438;font-size:12px;text-transform:capitalize}
.czg-fb-text{font-family:'Crimson Text',serif;color:#4a3a1e;font-size:11px;line-height:1.3;margin-top:2px}
.czg-hint{font-family:'Cinzel',serif;font-size:12px;color:#e8dcc0;letter-spacing:.3px;text-align:center;padding:0 16px}
@media(max-width:760px){ .czg-card{width:160px} .czg-wrap{padding:32px calc(50vw - 80px)} }

/* ═══════════ Hirelings control bar (hirelings-play.js) ═══════════ */
#hireling-bar{position:fixed;left:50%;top:46px;transform:translateX(-50%);z-index:7000;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:94vw;padding:5px 8px;
  border:1px solid var(--border);border-radius:11px;
  background:rgba(20,27,21,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.4)}
#hireling-bar .hb-item{display:flex;align-items:center;gap:6px;padding:3px 7px;border:1px solid var(--border);
  border-radius:8px;background:var(--parchment);font-size:11px}
#hireling-bar .hb-dot{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);flex:none}
#hireling-bar .hb-name{font-family:'Cinzel',serif;color:var(--ink2);white-space:nowrap}
#hireling-bar .hb-ctrl{font-size:9px;color:var(--ink3)}
#hireling-bar .hb-act{font-family:'Cinzel',serif;font-size:10px;padding:2px 8px;border-radius:6px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
#hireling-bar .hb-act:disabled{opacity:.45;cursor:default;background:var(--parchment);color:var(--ink3)}
/* ═══════════ Readability: ensure all form controls use light theme text ═══════════ */
/* Standalone inputs (e.g. VP Target) set only a dark background inline, leaving the text
   at the browser default (black) → unreadable on the dark surface. Force the ink colour. */
input, select, textarea, option, .fr input, .fr select{ color:var(--ink); }
input[type="number"], input[type="text"]{ color:var(--ink); }
input::placeholder{ color:var(--ink3); opacity:1; }
/* Native dropdown options render with the OS palette; give them a readable pairing. */
select option{ background:#1b241c; color:var(--ink); }
.pslot select option{ font-family:'Outfit',system-ui,sans-serif; font-size:14px; }
/* Number-spinner contrast in WebKit */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{ filter:invert(0.7); }

/* ═══════════ Battle modal: combatant faces + result rows ═══════════ */
#cdesc{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.cbt-line{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:nowrap;white-space:nowrap}
.cbt-side{display:inline-flex;align-items:center;gap:4px;font-family:'Cinzel',serif;font-size:11px;min-width:0}
.cbt-side b{overflow:hidden;text-overflow:ellipsis;max-width:86px}
.cbt-portrait{width:26px;height:26px;border-radius:50%;border:2px solid #888;overflow:hidden;flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.cbt-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.cbt-vs{font-family:'Crimson Text',serif;font-style:italic;color:var(--ink3);font-size:12px}
.cbt-at{text-align:center;font-family:'Crimson Text',serif;font-style:italic;
  color:var(--ink3);font-size:11px;flex:none}
.cres-row{margin:2px 0;font-size:11.5px;line-height:1.45;text-align:left}
.cres-row i{color:var(--ink3);font-size:10.5px}

/* ═══════════ Craft/use popup (hand-panels.js showCraftPopup) ═══════════ */
#craft-popups{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:8500;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.craft-pop{display:flex;align-items:center;gap:10px;max-width:420px;padding:8px 12px;
  border:1px solid var(--accent);border-radius:12px;background:rgba(20,14,8,.94);
  box-shadow:0 8px 26px rgba(0,0,0,.5);opacity:0;transform:translateY(-8px) scale(.96);
  transition:opacity .3s ease,transform .3s ease;pointer-events:auto;cursor:pointer}
.craft-pop.in{opacity:1;transform:translateY(0) scale(1)}
.craft-pop-card{position:relative;width:64px;height:90px;border-radius:6px;overflow:hidden;flex:none;
  border:1px solid rgba(255,255,255,.25);background:#ecdcba}
.craft-pop-card img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}
.craft-pop-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;text-align:center;padding:6px 3px;z-index:1}
.craft-pop-bar{position:absolute;top:0;left:0;right:0;height:5px}
.craft-pop-emoji{font-size:24px;line-height:1}
.craft-pop-nm{font-family:'Cinzel',serif;font-weight:700;font-size:9px;color:#33270f;line-height:1.15}
.craft-pop-info{min-width:0}
.event-pop-ic{width:46px;height:46px;border-radius:50%;border:2px solid var(--accent);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:23px;background:rgba(255,255,255,.06)}
.craft-pop-title{font-family:'Cinzel',serif;font-size:12px;color:#f5ead6;line-height:1.3}
.craft-pop-fx{font-family:'Crimson Text',serif;font-size:11.5px;color:#d8c9a8;font-style:italic;
  line-height:1.35;margin-top:3px}

/* ═══════════ Eyrie leader card beside the Decree ═══════════ */
.eyrie-leader{flex:none;align-self:center;margin-left:auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;cursor:zoom-in;padding:2px 6px 2px 2px}
.eyrie-leader-img{width:117px;height:164px;object-fit:cover;border-radius:8px;
  border:1.5px solid var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.5);display:block;
  max-height:100%}
.eyrie-leader-fb{width:117px;height:164px;border-radius:8px;border:1.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:56px;background:var(--parchment2)}
.eyrie-leader-nm{font-family:'Cinzel',serif;font-size:11px;color:var(--ink2);max-width:150px;
  text-align:center;line-height:1.15}

/* ═══════════ Riverfolk bank-by-owner chips (warrior icon+number idiom) ═══════════ */
/* A small warrior-art icon inline inside a .bt-decree-chip, standing in for the plain suit
   emoji that chip normally shows — used when the chip represents another faction's warriors
   held in the Riverfolk's Funds/Payments/Committed boxes. */
.bt-decree-wicon{width:14px;height:14px;object-fit:cover;border-radius:2px;vertical-align:middle;margin-right:1px}

/* ═══════════ Duchy minister mini-cards (eyrie-leader pattern, compact for multiples) ═══════════ */
/* The Duchy can hold several swayed Ministers at once (unlike the Eyrie's single Leader), so
   each gets a smaller card than .eyrie-leader — sized to let 3+ wrap onto one row without
   overflowing the tracks panel — while reusing the exact same zoom overlay (showMinisterZoom). */
.duchy-ministers-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.duchy-minister-card{flex:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;cursor:zoom-in;width:46px}
.duchy-minister-card img{width:46px;height:64px;object-fit:cover;border-radius:6px;
  border:1.5px solid var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.4);display:block}
.duchy-minister-fb{width:46px;height:64px;border-radius:6px;border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--parchment2)}
.duchy-minister-nm{font-family:'Cinzel',serif;font-size:8.5px;color:var(--ink2);max-width:52px;
  text-align:center;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══════════ Lord of the Hundreds: Warlord location chip beside the Mood mini-card ═══════════ */
.lord-warlord-chip{font-family:'Cinzel',serif;font-size:11px;font-weight:600;color:var(--ink2);
  align-self:center;padding:4px 8px;border:1px solid var(--border);border-radius:8px;
  background:var(--parchment3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
#leader-zoom-overlay{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
  justify-content:center;background:rgba(8,6,4,.78);backdrop-filter:blur(4px);cursor:zoom-out}
.leader-zoom{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:340px;
  padding:18px;border:1px solid var(--accent);border-radius:14px;background:rgba(20,14,8,.96)}
.leader-zoom img{width:230px;max-width:70vw;border-radius:10px;display:block;
  box-shadow:0 12px 40px rgba(0,0,0,.6)}
.leader-zoom-fb{width:230px;height:300px;display:flex;align-items:center;justify-content:center;
  font-size:90px;border-radius:10px;background:var(--parchment2)}
.leader-zoom-nm{font-family:'Cinzel',serif;font-size:17px;font-weight:700;color:var(--accent)}
.leader-zoom-ab{font-family:'Crimson Text',serif;font-size:13.5px;color:#e8dcc0;text-align:center;line-height:1.45}
.leader-zoom-vz{font-family:'Cinzel',serif;font-size:10.5px;color:var(--ink3);text-transform:capitalize}
.leader-zoom-hint{font-size:10px;color:var(--ink3);font-style:italic}

/* ═══════════ Crafted Items box (faction board panel) + VB relationships ═══════════ */
/* No inner box: crafted items sit directly on the faction panel, just under the VP-track
   divider. Only a top border rule separates them from the tracks above. */
.fbp-crafted{margin-top:6px;padding:5px 0 9px;border:none;border-top:1px solid var(--border);
  border-radius:0;background:none}
.fbp-crafted-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink3);margin-bottom:4px}
.fbp-rel{font-size:9.5px;padding:1px 6px;border:1px solid;border-radius:8px;text-transform:none;
  letter-spacing:0;font-family:'Crimson Text',serif;font-weight:700}
.fbp-crafted-items{display:flex;flex-wrap:wrap;gap:4px}
.fbp-item{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;
  font-size:11px;border:1px solid var(--border);background:rgba(255,255,255,.05);
  text-transform:capitalize}
/* Knaves Stash: a used (face-down) item dims instead of disappearing — it returns to ready
   on Take It Easy, so it must stay visible as "there but not usable right now". */
.fbp-item-used{opacity:.45;filter:grayscale(.6)}
.fbp-noitems{font-size:10.5px;color:var(--ink3);font-style:italic}
/* Vagabond faction-panel additions: character sub-name + relationship areas */
.fbp-subname{font-family:'Cinzel',serif;font-size:11px;color:var(--ink2);padding:2px 9px 4px;
  border-bottom:1px solid var(--border)}
.fbp-rels{padding:3px 9px 4px;border-bottom:1px solid var(--border)}
.fbp-rel-head{font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink3);margin-bottom:2px}
/* In the bottom-bar VB side panel, the Relationships head matches the Completed Quests /
   Abilities heads (.ba-head) so the panel reads as one balanced unit. */
.bbar-abilities .fbp-rel-head{font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.7px;
  text-transform:none;color:var(--gold);border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:0}
.fbp-rel-row{display:flex;align-items:center;gap:6px;margin:1px 0;line-height:1.2}
.fbp-rel-lbl{font-family:'Crimson Text',serif;font-weight:700;font-size:14px;width:96px;flex:none}
.fbp-rel-ics{display:flex;flex-wrap:wrap;gap:4px;font-size:18px;line-height:1}
.fbp-rel-ic{position:relative}
.fbp-rel-prog{font-size:12px;color:#c8963c;font-weight:700}
.fbp-rel-none{font-size:14px;color:var(--ink3)}
/* VB side panel: spread the Relationships + Completed Quests sections evenly */
#fbp-vbpanel{justify-content:space-evenly;gap:6px}
/* Completed-quests tracker: 3 suit rows × 5 slots */
.vb-qdone{display:flex;flex-direction:column;gap:5px;align-items:center;margin:2px 0 4px}
.vb-qdone-row{display:flex;align-items:center;gap:5px}
.vb-qdone .vb-q-suit{width:26px;height:26px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:15px}
.vb-qdone-cell{width:26px;height:26px;border:1px solid var(--border);border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink3);
  background:rgba(255,255,255,.04)}
.vb-qdone-cell.filled{border-color:#4c7a4c;background:rgba(90,150,90,.22);color:#9adb8a;font-weight:700}
/* Scoundrel: left-aligned quest rows + Torch / Scorched Earth tracker to their right */
.vb-qdone.vb-qdone-left{align-items:flex-start}
.vb-qdone-wrap{display:flex;align-items:center;gap:8px;margin:2px 0 4px}
.vb-qdone-wrap .vb-qdone{margin:0}
.vb-torch-row{font-size:12px;font-family:'Crimson Text',serif;color:var(--ink2);line-height:1.35;
  padding:4px 8px;border:1px solid #6fc2ad;border-radius:8px;max-width:120px;text-align:center}
.vb-torch-row .vb-torch-ic{display:block;font-size:16px;margin-bottom:1px}
.vb-torch-row.used{border-color:#b3341a;color:#e08a6a;background:rgba(179,52,26,.12)}
.vb-rels{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:2px 0 6px}
.vb-rel-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border:1px solid;
  border-radius:8px;font-size:10px;font-family:'Crimson Text',serif;font-weight:700}

/* Phase atmosphere rules live in css/phase.css (kept separate so they survive edits). */

/* ═══════════ 2026 adaptive interface pass ═══════════ */
html{scrollbar-color:var(--border2) var(--parchment2)}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}
.skip-link{position:fixed;z-index:12000;top:8px;left:8px;transform:translateY(-160%);
  padding:9px 13px;border-radius:9px;background:var(--gold);color:#161008;font-family:'Cinzel',serif;
  font-size:12px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.55);transition:transform .16s}
.skip-link:focus{transform:none}

/* Lobby hierarchy and reusable content surfaces. */
.logo-kicker{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3.2px;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px;opacity:.82}
.panel-intro{margin:-3px 0 16px;color:var(--ink3);font-family:'Crimson Text',serif;
  font-size:14px;line-height:1.55}
.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.setup-grid .fr{margin-bottom:4px}.field-gap{margin-top:3px;margin-bottom:12px}
.settings-list{padding:4px 14px;margin-bottom:14px;border:1px solid var(--border);
  border-radius:13px;background:rgba(5,8,6,.25)}
.status-banner:not(:empty){margin:10px 0;padding:9px 12px;border:1px solid rgba(242,189,106,.22);
  border-left:3px solid var(--gold);border-radius:9px;background:rgba(242,189,106,.05);
  color:var(--ink2);font-size:12px;line-height:1.45}
.tip-card{display:block;margin-top:16px;padding:12px 14px;border:1px solid rgba(242,189,106,.24);
  border-left:3px solid var(--gold);border-radius:11px;background:rgba(242,189,106,.06);
  color:var(--ink3);font-size:12px;line-height:1.5}

/* Faction picker: provenance is visible without making the card busier. */
.fc-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:5px}
.fc-tier,.fc-priority{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;
  border:1px solid var(--border);font-family:'Cinzel',serif;font-size:8.5px;line-height:1.25;
  letter-spacing:.35px;color:var(--ink3);background:rgba(255,255,255,.035)}
.fc-tier.bespoke,.fc-tier.creator{border-color:rgba(79,168,154,.38);color:#8ed8cc;background:rgba(79,168,154,.09)}
.fc-tier.reference{border-color:rgba(232,99,60,.4);color:#f19a7f;background:rgba(232,99,60,.09)}
.fc-tier.adapted{border-color:rgba(242,189,106,.3);color:var(--gold)}
.fc-priority{margin-left:auto;color:var(--accent)}

/* One faction colour now frames the active HUD, including fan factions. */
#screen-game{--faction-color:var(--accent)}
#screen-game .action-panel{border-left-color:color-mix(in srgb,var(--faction-color) 42%,var(--border));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--faction-color) 23%,transparent)}
#screen-game .faction-board-panel{border-top:2px solid var(--faction-color);
  background:linear-gradient(145deg,color-mix(in srgb,var(--faction-color) 8%,transparent),transparent 58%)}
#screen-game .bbar-tracker,#screen-game .bbar-abilities{
  background:linear-gradient(180deg,color-mix(in srgb,var(--faction-color) 5%,transparent),transparent 50%)}
#screen-game[data-faction-kind="fan"] .faction-board-panel::after{content:'FAN';position:absolute;right:7px;top:8px;
  padding:1px 5px;border:1px solid color-mix(in srgb,var(--faction-color) 45%,var(--border));border-radius:7px;
  color:color-mix(in srgb,var(--faction-color) 65%,white);font-family:'Cinzel',serif;font-size:7px;letter-spacing:.8px}
.faction-board-panel{overflow-y:auto;scrollbar-width:thin}
.fbp-counters{flex:1;overflow-y:auto;scrollbar-width:thin;justify-content:center}

/* State-aware faction tracks. Text states are deliberately short so twelve-slot tracks fit. */
.bt-state{font-family:'Cinzel',serif;font-size:8px;font-weight:800;line-height:1;letter-spacing:.15px;
  color:var(--ink2);text-align:center}
.bt-cell.is-lost,.fb-cell.is-lost{border-color:#a5483d!important;background:rgba(165,72,61,.16)!important}
.bt-cell.is-lost .bt-state,.fb-cell.is-lost .cell-vp{color:#e78d7e!important}
.bt-cell.is-governing,.fb-cell.is-governing{border-color:#d7b4ff!important;background:rgba(160,115,210,.24)!important}
.bt-cell.is-closed,.fb-cell.is-closed{border-color:#7d6eaa!important;background:rgba(91,75,130,.22)!important}
.bt-cell.is-militant,.fb-cell.is-militant{border-color:#dd684d!important;background:rgba(221,104,77,.22)!important}
.bt-cell.is-peaceful,.fb-cell.is-peaceful{border-color:#58b986!important;background:rgba(88,185,134,.18)!important}
.bt-cell.is-hidden,.fb-cell.is-hidden{border-style:dashed;background:rgba(255,255,255,.035)!important}
.bt-cell.is-svc,.fb-cell.is-svc{border-color:#4fc3d4!important;background:rgba(79,195,212,.14)!important}
.bt-cell.is-active,.fb-cell.is-active{box-shadow:0 0 0 2px var(--gold),0 0 13px rgba(242,189,106,.35)}
.bt-cell.is-retired,.fb-cell.is-retired{filter:grayscale(1);opacity:.42}
/* Riverfolk Trade Posts: on-map posts render as a plain faction-colored filled cell
   (same visual language as Woodland's placed Sympathy tokens), so the is-lost/is-on-map
   square rules above are fine there. Lost posts keep the bare ghost-art rendering
   (buildCells' img branch, since they're not "built") — just desaturated. */
.bt-cell.bt-cell-bare.is-lost{border-color:transparent!important;background:transparent!important}
.bt-cell.bt-cell-bare.is-lost .bt-tokimg,.bt-cell.bt-cell-bare.is-lost .bt-tokimg-wrap{filter:grayscale(1) brightness(.6);opacity:.75}

/* Live economy/state card below each non-reference faction's action list. */
.faction-state-card{order:20;margin-top:5px;padding:8px 9px;border:1px solid color-mix(in srgb,var(--state-color) 38%,var(--border));
  border-radius:11px;background:linear-gradient(145deg,color-mix(in srgb,var(--state-color) 9%,transparent),rgba(0,0,0,.13));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--state-color) 55%,transparent)}
.fsc-head{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:5px;
  font-family:'Cinzel',serif;font-size:9px;font-weight:700;letter-spacing:.65px;text-transform:uppercase;color:var(--state-color)}
.fsc-tier{padding:2px 6px;border:1px solid color-mix(in srgb,var(--state-color) 35%,var(--border));
  border-radius:999px;color:var(--ink3);font-size:7.5px;white-space:nowrap}
.fsc-row{display:grid;grid-template-columns:minmax(72px,.75fr) minmax(0,1.5fr);gap:8px;align-items:start;
  padding:3px 0;border-top:1px solid rgba(255,255,255,.045);font-size:10.5px;line-height:1.3}
.fsc-label{color:var(--ink3)}.fsc-value{color:var(--ink2);text-align:right;overflow-wrap:anywhere}

/* Faction modal: generic sections now serve official and fan boards alike. */
.fb-modal-inner{width:min(720px,calc(100vw - 28px));padding:clamp(14px,2.5vw,24px)}
.fb-ability-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.fb-ability{display:flex;align-items:flex-start;gap:8px;padding:8px;border:1px solid var(--border);
  border-radius:9px;background:rgba(255,255,255,.025)}
.fb-ability>span{font-size:17px}.fb-ability strong{font-family:'Cinzel',serif;font-size:10px;color:var(--ink2)}
.fb-ability p,.fb-tier p,.fb-phase-rules p{margin-top:2px;color:var(--ink3);font-family:'Crimson Text',serif;font-size:12px;line-height:1.4}
.fb-tier>span{display:inline-flex;padding:3px 8px;border:1px solid var(--border2);border-radius:999px;
  font-family:'Cinzel',serif;font-size:9px;color:var(--gold)}
.fb-phase-rules{display:grid;gap:5px;margin-top:8px}.fb-phase-rules details{border:1px solid var(--border);border-radius:8px;padding:6px 8px}
.fb-phase-rules summary{cursor:pointer;font-family:'Cinzel',serif;font-size:9px;color:var(--ink2)}

/* Wide laptops: preserve the full board while reclaiming fixed sidebar space. */
@media (max-width:1500px) and (min-width:1181px){
  .action-panel{width:320px}.faction-board-panel{width:200px}.bbar-tracker{flex-basis:430px;padding-inline:8px}
  .bbar-abilities{flex-basis:270px;padding-inline:9px}
  /* Coordinated tracker shrink: cost header, cells, tokens and labels scale together
     so track columns stay aligned (28px cells under 54px cost cells misaligned). */
  .bt-cell{width:40px;height:44px}
  .bt-costcell{width:40px;font-size:13px}
  .bt-cell .bt-tok,.bt-cell .bt-tokimg,.bt-cell .bt-tokimg-wrap{width:30px;height:30px}
  .bt-cell .bt-vp{font-size:16px}
  .bt-cell .bt-vp.bt-vp-ghost{font-size:9px}
  .bt-lbl{width:62px;font-size:12px}
  .bbar-tracker .bt-head{font-size:13px}
  .card{width:72px;height:103px}.cr{gap:6px}
}

/* Tablet and narrow windows: board/HUD first, action rail beneath it. */
@media (max-width:1180px){
  #screen-game{height:100dvh;overflow-x:hidden;overflow-y:auto}
  .game-main{flex:none;flex-direction:column;overflow:visible;width:100%}
  .game-left{height:auto;flex:none;width:100%;overflow:visible}
  .game-mid{height:min(62vw,700px);min-height:470px;flex:none;overflow:hidden}
  .bbar{height:292px;flex:none}
  .action-panel{width:100%;height:430px;flex:none;border-left:0;border-top:2px solid var(--faction-color);
    box-shadow:inset 0 3px 0 color-mix(in srgb,var(--faction-color) 22%,transparent)}
  .ap-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
  .ap-actions>.action-grid,.ap-actions>.faction-state-card{grid-column:1/-1}
  .ap-bottom{position:sticky;bottom:0;background:var(--parchment2);z-index:2}
  .side-panel{width:min(380px,88vw)}
}

/* Phone layout: keep the SVG legible, then turn the bottom HUD into a compact dashboard. */
@media (max-width:760px){
  #screen-lobby{padding:26px 10px}.lcard{padding:17px 13px;border-radius:15px}
  .logo{margin-bottom:17px}.logo h1{font-size:clamp(30px,10vw,44px);letter-spacing:3px}.logo-kicker{font-size:8px;letter-spacing:2px}
  .mode-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.mode-btn{padding:9px 4px;font-size:10px}.mode-icon{font-size:17px}
  .gmode-btn{font-size:10px;padding-inline:5px}.setup-grid{grid-template-columns:1fr}
  .fg{grid-template-columns:repeat(2,minmax(0,1fr))}.mg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pslot{align-items:stretch}.pslot input{min-width:120px}.pslot select{min-width:0;width:100%;flex-basis:100%}
  .sr{gap:12px}.sr label{font-size:13px}.fb-ability-list{grid-template-columns:1fr}

  .game-mid{height:calc(58vw + 46px);min-height:285px}.hint-bar{height:46px;padding-inline:7px}.hint-phase{font-size:10px;padding:4px 8px}
  .hint-text{font-size:11px}.top-icons{gap:2px}.top-icon-btn{width:38px;height:38px;font-size:16px}
  .bbar{height:auto;min-height:590px;display:grid;grid-template-columns:minmax(150px,38%) minmax(0,62%);
    grid-template-rows:255px 175px auto;overflow:visible}
  .faction-board-panel{grid-column:1;grid-row:1;width:auto;min-width:0;border-right:1px solid var(--border)}
  .bbar-tracker{grid-column:2;grid-row:1;min-width:0;width:auto;padding:6px;overflow:auto;border-right:0}
  .hand-a{grid-column:1/-1;grid-row:2;padding:7px 9px;border-top:1px solid var(--border)}
  .bbar-abilities{grid-column:1/-1;grid-row:3;width:auto;min-height:145px;max-height:220px;overflow:auto;border-top:1px solid var(--border);gap:5px;padding:6px 10px}
  .ba-item{font-size:12.5px;line-height:1.3}
  .ba-item .ba-name{font-size:12px}
  .fbp-faction-name{font-size:14px}.fbp-counters{padding:5px;gap:3px}.fbp-counter{padding:3px 6px}.fbp-cval{font-size:15px}.fbp-clbl{font-size:11px}
  /* Riverfolk's Trade Posts (bt-tp-col) + Services (bt-tp-side) sit side-by-side (bt-tp-layout)
     on wider breakpoints, but even shrunk (see bt-cells-big override above) the two columns
     together don't fit the ~240px phone panel — stack them instead so each gets the full
     width (2026-08-09 HUD overflow fix). */
  .bt-tp-layout{flex-direction:column;gap:6px}
  .bt-tp-side{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:8px}
  .bt-head{font-size:11px}.bt-row{gap:3px}.bt-lbl{width:46px;font-size:9px}.bt-cells{gap:2px}.bt-cell{width:24px;height:24px}.bt-state{font-size:6.5px}
  /* .bt-costcell (the cost-header row above .bt-cells, e.g. Marquise/Cat's Sawmill/Workshop/
     Recruiter cost row) wasn't shrunk at this breakpoint — it stayed at its 54px desktop width
     while .bt-cell above shrank to 24px, so 5-6 cost cells alone (54px*5=270px+) blew past the
     ~150-390px tracker column on phone. Shrink it in lockstep with .bt-cell so columns still
     line up and the row fits (2026-08-08 Marquise HUD phone-breakpoint overflow fix). */
  .bt-costcell{width:24px;font-size:10px}
  /* The 🪵 wood-cost glyph inside .bt-lbl ("🪵 Cost") still renders at its 16px desktop
     size here, wide enough that the label's no-wrap content pokes ~7px past the shrunk
     46px .bt-lbl box on phone (Marquise/Cat cost row). Shrink it alongside everything else. */
  .bt-wood{font-size:11px}
  .bt-cell .bt-vp.bt-vp-ghost{display:none}
  /* 'bt-compact' must keep shrinking here too — the higher-specificity base rule (styles.css
     "bt-compact" block) otherwise wins over the plain .bt-cell rule above and cells stop
     shrinking at the phone breakpoint, overflowing horizontally (2026-07-29 HUD audit finding
     on Lord of the Hundreds, which has 6 Strongholds cells in one row). */
  .bbar-tracker.bt-compact .bt-cell, #fbp-tracks.bt-compact .bt-cell{width:20px;height:20px}
  .bbar-tracker.bt-compact .bt-lbl, #fbp-tracks.bt-compact .bt-lbl{width:44px;font-size:9px}
  .bbar-tracker.bt-compact .bt-cell .bt-tok,.bbar-tracker.bt-compact .bt-cell .bt-tokimg,.bbar-tracker.bt-compact .bt-cell .bt-tokimg-wrap,
  #fbp-tracks.bt-compact .bt-cell .bt-tok,#fbp-tracks.bt-compact .bt-cell .bt-tokimg,#fbp-tracks.bt-compact .bt-cell .bt-tokimg-wrap{width:13px;height:13px}
  .bbar-tracker.bt-compact .bt-state, #fbp-tracks.bt-compact .bt-state{font-size:5.5px}
  /* Riverfolk's Trade Post rows use bt-cells-big (58px cells, styles.css ~L500) sitting
     side-by-side with the Services column (bt-tp-layout) — at 58px the 3 big cells alone
     leave no room for Services beside them in the 240px phone column, pushing its 3 text
     cells (🃏/⛵/⚔) past the panel edge. Shrink big cells here too, same pattern as the
     Lizard exception below (2026-08-09 HUD overflow fix). */
  .bbar-tracker.bt-compact .bt-cells-big .bt-cell, #fbp-tracks.bt-compact .bt-cells-big .bt-cell{width:34px;height:34px}
  .bbar-tracker.bt-compact .bt-cells-big .bt-cell .bt-tok,.bbar-tracker.bt-compact .bt-cells-big .bt-cell .bt-tokimg,.bbar-tracker.bt-compact .bt-cells-big .bt-cell .bt-tokimg-wrap,
  #fbp-tracks.bt-compact .bt-cells-big .bt-cell .bt-tok,#fbp-tracks.bt-compact .bt-cells-big .bt-cell .bt-tokimg,#fbp-tracks.bt-compact .bt-cells-big .bt-cell .bt-tokimg-wrap{width:22px;height:22px}
  .bbar-tracker.bt-compact .bt-cells-big .bt-state, #fbp-tracks.bt-compact .bt-cells-big .bt-state{font-size:6.5px}
  /* Lizard's larger bt-lizard cells (styles.css ~L484) don't fit the 240px phone column —
     fall back to the same shrink every other bt-compact faction gets at this breakpoint. */
  .bbar-tracker.bt-compact.bt-lizard .bt-cell, #fbp-tracks.bt-compact.bt-lizard .bt-cell{width:20px;height:20px}
  .bbar-tracker.bt-compact.bt-lizard .bt-lbl, #fbp-tracks.bt-compact.bt-lizard .bt-lbl{width:44px;font-size:9px}
  .bbar-tracker.bt-compact.bt-lizard .bt-cell .bt-tok,.bbar-tracker.bt-compact.bt-lizard .bt-cell .bt-tokimg,.bbar-tracker.bt-compact.bt-lizard .bt-cell .bt-tokimg-wrap,
  #fbp-tracks.bt-compact.bt-lizard .bt-cell .bt-tok,#fbp-tracks.bt-compact.bt-lizard .bt-cell .bt-tokimg,#fbp-tracks.bt-compact.bt-lizard .bt-cell .bt-tokimg-wrap{width:13px;height:13px}
  .bbar-tracker.bt-compact.bt-lizard .bt-cell .bt-vp, #fbp-tracks.bt-compact.bt-lizard .bt-cell .bt-vp{font-size:13px}
  .bbar-tracker.bt-compact.bt-lizard .bt-state, #fbp-tracks.bt-compact.bt-lizard .bt-state{font-size:5.5px}
  .duchy-minister-card{width:36px}.duchy-minister-card img,.duchy-minister-fb{width:36px;height:50px}
  .cr{min-height:126px}.card{width:70px;height:102px}.card:hover{transform:translateY(-5px)}
  .action-panel{height:520px}.ap-actions{grid-template-columns:1fr;padding:7px}.ap-actions>.action-grid,.ap-actions>.faction-state-card{grid-column:auto}
  .abt{min-height:48px;padding:9px 10px;font-size:14px}.abt .abt-desc{font-size:12px}.ap-scoreboard{max-height:120px;overflow:auto}
  .fb-modal{align-items:flex-end}.fb-modal-inner{width:100%;max-height:92dvh;border-radius:18px 18px 0 0}
  #replay-bar{left:3vw;bottom:8px;margin-left:0;width:94vw}
}

/* Common "maximized browser on a 1080p monitor" case (~950-1000px usable height after
   browser chrome). Not caught by the 800px tier below, but the Advanced Setup step list
   (.sx-steps) is tall enough on multi-step factions (e.g. Marquise's 8 steps) to overflow
   its scroll area here with only a faint 9px scrollbar as the affordance — steps read as
   silently cut off rather than scrollable. Trim the step list and surrounding chrome so a
   full step queue fits without scrolling instead of just tightening the fallback bbar/abt. */
@media (max-height:1050px) and (min-width:1181px){
  .sx-step{padding:6px 8px;margin-bottom:3px;gap:7px}
  .sx-text{font-size:12.5px;line-height:1.35;margin-top:1px}
  .sx-title{font-size:13px}
  .sx-banner{padding:6px 10px}
  .sx-banner .sx-fname{font-size:14px}
  .ap-top{padding:3px 8px 2px}
  .ap-scoreboard{padding:3px 8px 2px}
  .ap-bottom{padding:4px 6px}
}

@media (max-height:800px) and (min-width:1181px){
  .bbar{height:244px}.action-panel{width:330px}.abt{padding-block:7px}.abt .abt-desc{font-size:12px}
  .ap-scoreboard{max-height:118px;overflow:auto}.fbp-counter{padding-block:2px}.bt-cell{width:27px;height:27px}
  .bt-cell .bt-vp.bt-vp-ghost{display:none}
  /* Non-reference factions with 3 abilities (vs. the reference set's 1-2) need a tighter
     abilities panel to fit the shorter .bbar here — shrinks text, doesn't drop content. */
  .bbar-abilities{gap:6px;padding:7px 12px}
  .ba-item{font-size:13px;line-height:1.32}
  .ba-item .ba-name{font-size:12.5px}
  /* 'bt-compact' needs to shrink further still at this shorter .bbar height (244px) — see the
     phone-breakpoint override above for why the higher base specificity needs re-stating here. */
  .bbar-tracker.bt-compact .bt-cell, #fbp-tracks.bt-compact .bt-cell{width:26px;height:26px}
  .bbar-tracker.bt-compact .bt-lbl, #fbp-tracks.bt-compact .bt-lbl{width:52px;font-size:10.5px}
  .bbar-tracker.bt-compact .bt-cell .bt-tok,.bbar-tracker.bt-compact .bt-cell .bt-tokimg,.bbar-tracker.bt-compact .bt-cell .bt-tokimg-wrap,
  #fbp-tracks.bt-compact .bt-cell .bt-tok,#fbp-tracks.bt-compact .bt-cell .bt-tokimg,#fbp-tracks.bt-compact .bt-cell .bt-tokimg-wrap{width:16px;height:16px}
  .bbar-tracker.bt-compact .bt-state, #fbp-tracks.bt-compact .bt-state{font-size:6px}
  .bbar-tracker.bt-compact .bt-row, #fbp-tracks.bt-compact .bt-row{gap:4px}
  .bbar-tracker.bt-compact, #fbp-tracks.bt-compact{gap:3px}
  .duchy-minister-card{width:38px}.duchy-minister-card img,.duchy-minister-fb{width:38px;height:52px}
}

@media (hover:none){
  .top-icon-btn,.side-close{min-width:42px;min-height:42px}.tog{width:48px;height:28px}.tog::after{width:22px;height:22px}.tog.on::after{transform:translateX(20px)}
  .card:hover,.fc:hover:not(.sel),.mc:hover:not(.sel),.abt:hover:not(:disabled){transform:none}
}

/* Fix (pre-existing): Item Supply select clipped off the settings row edge —
   let the long label give way instead of pushing the select out of the panel. */
#solo-itemsupply-row label{flex:1 1 auto;min-width:0;padding-right:10px}
#solo-itemsupply-row select{flex:0 0 auto}

/* ══════════ WORKSHOP TAB (fan-content browse / rate / import / publish) ══════════ */
.ws-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ws-toolbar select{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--parchment);color:var(--ink);font-family:'Crimson Text',serif}
.ws-card{border:1px solid var(--border);border-radius:11px;background:var(--parchment2);padding:11px 13px;margin-bottom:10px;transition:border-color .18s}
.ws-card:hover{border-color:var(--border2)}
.ws-card.ws-enabled{border-color:rgba(127,176,105,.45);box-shadow:0 0 14px rgba(127,176,105,.12)}
.ws-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-card-name{font-family:'Cinzel',serif;font-size:14px;color:var(--ink)}
.ws-card-author{font-size:11px;color:var(--ink3);margin-left:auto}
.ws-card-desc{font-size:12px;color:var(--ink2);margin-top:5px;line-height:1.45}
.ws-card-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.ws-card-btns .btn{font-size:11px;padding:5px 10px}
.ws-type-chip{font-size:10.5px;font-family:'Cinzel',serif;padding:2px 8px;border-radius:99px;border:1px solid var(--border2);color:var(--gold);background:rgba(242,189,106,.07);white-space:nowrap}
.ws-danger{border-color:rgba(217,90,60,.4)!important;color:#e08a6a!important}
.ws-empty{padding:22px 14px;text-align:center;font-size:12.5px;color:var(--ink3);border:1px dashed var(--border);border-radius:11px;line-height:1.6}
.ws-h3{font-family:'Cinzel',serif;font-size:12px;color:var(--ink3);margin:14px 0 8px}
.ws-textarea{width:100%;box-sizing:border-box;background:var(--parchment2);color:var(--ink);border:1px solid var(--border);border-radius:9px;padding:10px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;line-height:1.5;margin-bottom:8px;resize:vertical}
.ws-textarea:focus{outline:none;border-color:var(--border2)}
.ws-errors{border:1px solid rgba(217,90,60,.4);background:rgba(217,90,60,.08);border-radius:9px;padding:10px 12px;font-size:12px;margin-top:10px}
.ws-errors ul{margin:6px 0 0 16px;line-height:1.5}
.ws-ok{border:1px solid rgba(127,176,105,.4);background:rgba(127,176,105,.08);border-radius:9px;padding:10px 12px;font-size:12.5px;margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Star ratings — average row uses a fractional-width overlay: 3.25★ renders 3 whole
   gold stars + a 25%-filled 4th star (same gold), remainder stays the faint base. */
.ws-card-rate{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.ws-stars{position:relative;display:inline-block;font-size:15px;line-height:1;letter-spacing:1px}
.ws-stars-base{color:rgba(242,189,106,.22)}
.ws-stars-fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--gold);pointer-events:none;text-shadow:0 0 8px rgba(242,189,106,.35)}
.ws-stars-num{font-size:11px;color:var(--ink3);margin-left:6px}
.ws-vote{display:inline-flex;gap:1px;margin-left:auto}
.ws-vote-star{background:none;border:none;cursor:pointer;font-size:17px;line-height:1;padding:1px 2px;color:rgba(246,238,221,.25);transition:color .12s,transform .12s}
.ws-vote-star:hover{transform:scale(1.25)}
.ws-vote-star.on{color:var(--gold);text-shadow:0 0 8px rgba(242,189,106,.4)}
.ws-vote:hover .ws-vote-star{color:rgba(242,189,106,.35)}
.ws-vote .ws-vote-star:hover,.ws-vote .ws-vote-star:has(~ .ws-vote-star:hover){color:var(--gold)}

/* Workshop account row (guest / Google) */
.ws-account-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;background:var(--parchment2);padding:8px 12px;margin-bottom:10px;flex-wrap:wrap}
.ws-account-id{font-size:12.5px;color:var(--ink2)}
.ws-account-sub{font-size:11px;color:var(--ink3)}
.ws-account-row .btn{font-size:11px;padding:5px 10px;margin-left:auto}


/* Lobby account chip + auth gate */
.lobby-account{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.lobby-acct-name{font-size:12px;color:var(--ink2)}
.lobby-account .btn{font-size:11.5px;padding:6px 12px}

/* ── Map editor phase 2: skin studio panel ──────────────────────────────────
   One row per slider: label, track, live value. The panel reuses .eprops so it
   inherits the editor sidebar's parchment/scroll behaviour. */
#studio-panel h3{ margin:10px 0 4px; font-family:'Cinzel',serif; font-size:12px; color:var(--accent); }
#studio-panel hr{ border:none; border-top:1px solid var(--border); margin:10px 0; }
#studio-panel .sst{ display:flex; align-items:center; gap:6px; font-size:10px; margin:3px 0; }
#studio-panel .sst > span{ flex:0 0 84px; }
#studio-panel .sst > input[type=range]{ flex:1; min-width:0; }
#studio-panel .sst > b{ flex:0 0 30px; text-align:right; font-variant-numeric:tabular-nums; }
#studio-panel select{ font-size:11px; padding:3px; border:1px solid var(--border);
  border-radius:4px; background:var(--parchment); color:var(--ink); }