/* Glass + craft chrome — ported from docs/art-bible/mockups/_tokens.css (UI-CHROME.md canonical).
   Base tokens (--bg/--panel/--gold/etc.) already live in index.html <style>; do NOT redeclare. */
@font-face { font-family:"Cinzel"; font-weight:400; font-display:swap;
  src:url("./fonts/Cinzel-Regular.woff2") format("woff2"); }
@font-face { font-family:"Cinzel"; font-weight:600; font-display:swap;
  src:url("./fonts/Cinzel-SemiBold.woff2") format("woff2"); }

:root{
  --wood:#33230f; --wood-lite:#513c1f; --bronze:#8a6530; --gilt:#ffcc55; --parchment:#e8dcc0;
}
.title-serif{font-family:"Cinzel",serif;font-weight:600;letter-spacing:.04em;color:var(--gilt)}

.glass-panel{
  background:var(--panel); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,204,85,.10);
  position:relative;
}
.wood-rail{ border:2px solid var(--wood);
  box-shadow:inset 0 0 0 1px var(--wood-lite), 0 6px 22px rgba(0,0,0,.5); }
.bronze-cap::before,.bronze-cap::after{
  content:""; position:absolute; width:12px; height:12px; border:2px solid var(--bronze);
  border-radius:2px;}
.bronze-cap::before{left:-2px;top:-2px;border-right:0;border-bottom:0}
.bronze-cap::after{right:-2px;bottom:-2px;border-left:0;border-top:0}

.btn-craft{
  font-family:inherit; color:var(--text); background:linear-gradient(#213247,#182838);
  border:1px solid var(--line); border-top-color:rgba(255,204,85,.35); border-radius:7px;
  padding:6px 12px; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.4);
}
.btn-craft.gilt{ background:linear-gradient(#f2c860,#d79f3a); color:#2a1c06;
  border-color:#b8842c; text-shadow:0 1px 0 rgba(255,255,255,.25); font-weight:600; }
.btn-craft.danger{ background:linear-gradient(#7d3030,#5a2020); border-color:#a04040; color:#ffe0e0; }
.btn-craft:active{ box-shadow:inset 0 2px 4px rgba(0,0,0,.5); transform:translateY(1px); }
/* Final polish sweep (ui-redesign) — compact size for dense panel-body rows (spy/diplo/
   congress/religion/policies/city-state actions) that previously used the legacy .mini
   class; same chrome as .btn-craft, just tighter padding/font to avoid wrapping. */
.btn-craft.sm{ padding:3px 9px; font-size:12px; }

.tip-glass{position:fixed;z-index:80;max-width:280px;padding:8px 10px;font-size:12px;
  pointer-events:none;display:none;background:var(--panel);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,204,85,.10)}
.tip-glass .tip-hd{font-family:"Cinzel",serif;color:var(--gilt);font-size:12px;margin-bottom:4px}
.tip-row{display:flex;justify-content:space-between;gap:14px;line-height:1.5}
.tip-row .lbl{color:var(--muted)} .tip-row .amt{color:var(--text);font-variant-numeric:tabular-nums}
.tip-total{display:flex;justify-content:space-between;gap:14px;margin-top:4px;padding-top:4px;
  border-top:1px solid var(--bronze);font-weight:700}
.tip-total .amt{color:var(--gilt);font-variant-numeric:tabular-nums}

.ovl-scrim{position:fixed;inset:0;z-index:40;display:none;
  background:radial-gradient(circle at 50% 40%,rgba(8,12,18,.66),rgba(8,12,18,.84));backdrop-filter:blur(2px)}
.ovl-takeover{position:fixed;inset:44px 7vw;z-index:41;display:flex;flex-direction:column;
  background:var(--panel);backdrop-filter:blur(6px);border:2px solid var(--wood);border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--wood-lite),0 10px 40px rgba(0,0,0,.6);overflow:hidden}
.ovl-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bronze);
  background:linear-gradient(#2a2010,#1a140a)}
.ovl-head .ttl{font-family:"Cinzel",serif;font-weight:600;color:var(--gilt);font-size:18px;letter-spacing:.04em}
.ovl-badge{font-size:11px;color:var(--parchment);border:1px solid var(--bronze);border-radius:4px;padding:1px 6px}
.ovl-x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:2px 6px}
.ovl-x:hover{color:var(--text)}
/* §5 (08-lobby-menu.md): setup ✕ goes inert the instant a join succeeds — visibly disabled, not hidden */
#setupClose.disabled{cursor:default;opacity:.35;pointer-events:none}
#setupClose.disabled:hover{color:var(--muted)}
.ovl-body{flex:1;overflow:auto;padding:16px}

/* ---- Scrollbar theme (game-wide scrollbar audit, post-dd6c1ea) ------------------------
   dd6c1ea fixed one phantom OS-default scrollbar (unit/tile card X-axis); this is the
   full-game follow-up: every container below genuinely needs to scroll at some content
   length (long unit/tile card promo+status stacks, chat, the log "history" scrollback,
   the tech tree's era+lane grid, city columns + the buildable list, every .ovl-body/
   .ovl-panel overlay drawer — victory/policies/religion/espionage/congress/replay/
   demographics/tech/city/leader/trade — the lobby setup card, its civ picker grid, and
   Replay's Chronicle list) — themed thin/subtle rather than hidden, per the audit rule:
   never clip content that can legitimately overflow, a themed bar beats a raw OS one.
   #hud deliberately keeps its own pre-existing hidden-scrollbar pattern (sideways strip
   on narrow viewports, ::-webkit-scrollbar{display:none} above in index.html) — untouched
   here, it was already a considered choice, not an oversight.
   Scoped to this explicit surface list (via :is()), not `*`, so a future overflow site
   doesn't silently inherit craft chrome without a conscious audit decision. */
:is(#unitPanel, #tilePanel, #uActs, #log, #chatMsgs, .ovl-body, .ovl-panel, #techPanel .ttwrap,
    .cty-col, .cty-buildlist, #setupCard.card, .civ-grid, #replayEvents) {
  scrollbar-width: thin;
  scrollbar-color: var(--wood-lite) transparent;
}
:is(#unitPanel, #tilePanel, #uActs, #log, #chatMsgs, .ovl-body, .ovl-panel, #techPanel .ttwrap,
    .cty-col, .cty-buildlist, #setupCard.card, .civ-grid, #replayEvents)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
:is(#unitPanel, #tilePanel, #uActs, #log, #chatMsgs, .ovl-body, .ovl-panel, #techPanel .ttwrap,
    .cty-col, .cty-buildlist, #setupCard.card, .civ-grid, #replayEvents)::-webkit-scrollbar-track {
  background: rgba(18, 26, 36, .4);
}
:is(#unitPanel, #tilePanel, #uActs, #log, #chatMsgs, .ovl-body, .ovl-panel, #techPanel .ttwrap,
    .cty-col, .cty-buildlist, #setupCard.card, .civ-grid, #replayEvents)::-webkit-scrollbar-thumb {
  background-color: var(--wood-lite);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
:is(#unitPanel, #tilePanel, #uActs, #log, #chatMsgs, .ovl-body, .ovl-panel, #techPanel .ttwrap,
    .cty-col, .cty-buildlist, #setupCard.card, .civ-grid, #replayEvents)::-webkit-scrollbar-thumb:hover {
  background-color: var(--bronze);
}
:is(#unitPanel, #tilePanel, #uActs, #log, #chatMsgs, .ovl-body, .ovl-panel, #techPanel .ttwrap,
    .cty-col, .cty-buildlist, #setupCard.card, .civ-grid, #replayEvents)::-webkit-scrollbar-corner {
  background: transparent;
}

/* Phase 08 — main menu (title screen), glass+craft reskin */
#lobby #mainMenu{ padding:0 0 26px; }
#mainMenu .menu-hdr{ padding:22px 28px; background:linear-gradient(#3a2c15,#241a0d);
  border-bottom:2px solid var(--bronze); border-radius:8px 8px 0 0; }
#mainMenu .menu-hdr .title-serif{ font-size:38px; }
#mainMenu .menu-hdr .sub{ color:var(--parchment); font-size:13px; letter-spacing:.1em;
  margin-bottom:0; }
#mainMenu .menu-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; padding:0 28px; }
#mainMenu .menu-actions .btn-craft{ font-size:16px; padding:10px; }

/* Phase 08 — setup screen, Civ-V two-pane + Basic/Advanced disclosure */
/* Scrollbar audit (post-dd6c1ea): same X-axis coercion bug the unit/tile card fix
   documents in index.html — overflow-y:auto with no overflow-x declared computes
   overflow-x to auto too, so the ~2px sub-pixel width overflow routine in this card's
   flex-wrap rows (verified live with Advanced setup open: scrollWidth 905 vs clientWidth
   903) spawned a real horizontal scrollbar under the vertical one. Card content never
   needs to scroll sideways, so clip it explicitly. */
#lobby #setupCard.card{ width:min(920px, 92vw); padding:0 0 22px; text-align:left;
  max-height:90vh; overflow-y:auto; overflow-x:hidden; }
#setupCard .setup-hdr{ padding:16px 24px 14px; background:linear-gradient(#3a2c15,#241a0d);
  border-bottom:2px solid var(--bronze); border-radius:8px 8px 0 0;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
#setupCard .setup-hdr .title-serif{ font-size:22px; }
#setupCard .setup-hdr .sub{ color:var(--parchment); font-size:12px; letter-spacing:.08em;
  margin-top:2px; margin-bottom:0; }
#setupCard .setup-idrow{ display:flex; gap:14px; flex-wrap:wrap; padding:14px 24px 0; }
#setupCard .setup-idrow .field{ flex:1; min-width:160px; margin-bottom:0; }
#setupCard .setup-body{ display:flex; gap:20px; align-items:flex-start; padding:16px 24px 0; }
#setupCard .setup-pane{ flex:1; min-width:0; }
#setupCard .setup-civ{ flex:1.1; }
#setupCard .pane-title{ font-family:"Cinzel",serif; font-weight:600; color:var(--gilt); font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; padding-bottom:4px;
  border-bottom:1px solid var(--bronze); }
#setupCard .civ-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(88px,1fr)); gap:8px;
  max-height:280px; overflow-y:auto; padding:2px 2px 4px; }
#setupCard .civ-tile{ display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px 6px; font-size:11px; text-align:center; cursor:pointer; }
#setupCard .civ-tile .portrait{ width:36px; height:36px; border-radius:50%; object-fit:cover;
  border:1px solid var(--wood-lite); }
#setupCard .civ-tile .mono{ width:36px; height:36px; border-radius:50%; background:var(--wood);
  color:var(--gilt); display:flex; align-items:center; justify-content:center;
  font-family:"Cinzel",serif; font-weight:600; font-size:15px; border:1px solid var(--wood-lite); }
#setupCard .civ-tile .nm{ line-height:1.2; font-weight:600; }
/* item 15: civ already picked by another roster player — cosmetic-only graying, server civTaken
   guard (server/game.js) remains authoritative; own current selection is excluded (never grayed) */
#setupCard .civ-tile.taken{ opacity:.35; filter:grayscale(70%); cursor:not-allowed; }
#setupCard .civ-preview{ margin-top:10px; font-size:14px; color:var(--muted); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; min-height:20px; }
#setupCard .civ-preview img{ width:64px; height:64px; border-radius:8px; float:left; margin:0 8px 4px 0; }
#setupCard .settings-basic .field{ margin-bottom:10px; }
#setupCard .advanced-setup{ margin-top:12px; border-top:1px solid var(--bronze); padding-top:8px; }
#setupCard .advanced-setup summary{ cursor:pointer; font-family:"Cinzel",serif; font-weight:600;
  color:var(--gilt); font-size:13px; letter-spacing:.06em; list-style:none; }
#setupCard .advanced-setup summary::-webkit-details-marker{ display:none; }
#setupCard .advanced-setup summary::before{ content:"▸ "; }
#setupCard .advanced-setup[open] summary::before{ content:"▾ "; }
#setupCard .advanced-setup .field{ margin-top:10px; margin-bottom:0; }
#setupCard .roster-pane{ margin-top:18px; }
#setupCard .roster{ text-align:left; margin:4px 0; min-height:20px; }
#setupCard .roster .p{ display:flex; align-items:center; gap:6px; padding:3px 0; font-size:14px; }
#setupCard .roster .p.host{ color:var(--accent); }
#setupCard .roster .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
#setupCard .roster .dot.on{ background:var(--good); }
#setupCard .roster .dot.off{ background:var(--muted); }
#setupCard #roomCodeBox{ margin-top:10px; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; font-size:13px; }
#setupCard #roomCodeVal{ font-size:16px; letter-spacing:2px; color:var(--text); }
#setupCard #copyCode{ margin-left:8px; font-size:12px; padding:2px 8px; }
#setupCard #copyMsg{ margin-left:6px; color:var(--muted); font-size:12px; }
#setupCard .hintbit{ color:var(--muted); font-size:11px; margin-top:3px; }
#setupCard #hint{ padding:0 24px; }
#setupCard .setup-actions{ display:flex; gap:8px; padding:14px 24px 0; }
#setupCard .setup-actions button{ flex:1; }
@media (max-width:760px){
  #setupCard .setup-body{ flex-direction:column; }
  #setupCard .civ-grid{ max-height:220px; }
}

/* Phase 01 (ui-redesign) — HUD top strip: identity, yield pips, right-cluster hotkeys.
   docs/plans/ui-redesign/01-hud.md §3/§5/§6; structural/responsive #hud rules stay in
   index.html (where --hud-h and the existing breakpoints already live). */
.hud-civname{ font-size:18px; }
.hud-era{ font-family:"Cinzel",serif; font-weight:600; font-size:13px; letter-spacing:.03em;
  color:var(--gilt); }
.hud-turn{ color:var(--muted); font-size:13px; }
.hud-muted{ color:var(--muted); }

.hud-pips{ display:flex; align-items:center; gap:12px; flex:none; }
.hud-pip{ display:flex; align-items:center; gap:5px; font-size:14px; }
.hud-pip-ic{ font-size:14px; line-height:1; }
.hud-pip-sub{ color:var(--muted); font-size:12px; }
.hud-pip-delta{ font-variant-numeric:tabular-nums; }
.hud-pip-delta.good, .hud-pip b.good{ color:var(--good); }
.hud-pip-delta.bad, .hud-pip b.bad{ color:var(--bad); }
.hud-pip-delta.muted, .hud-pip b.muted{ color:var(--muted); font-weight:400; }
/* pips with a wired breakdown tooltip (Task 1 Step 2) get a hover cue */
#hGoldPip, #hSciPip, #hCultPip, #hFaithPip, #hHappyWrap{ cursor:help; border-radius:6px;
  padding:2px 4px; margin:-2px -4px; transition:background .12s; }
#hGoldPip:hover, #hSciPip:hover, #hCultPip:hover, #hFaithPip:hover, #hHappyWrap:hover{
  background:rgba(255,204,85,.08); }

.hud-research{ gap:6px; }
.hud-research select{ background:linear-gradient(#213247,#182838); border:1px solid var(--line);
  border-top-color:rgba(255,204,85,.25); border-radius:6px; color:var(--text); }
.hud-research-bar{ width:60px; }
.hud-research-bar > span{ background:var(--good); }
.hud-research-num{ font-size:12px; }

/* right-cluster: Cinzel letter-spaced labels restored at normal widths (icon-only
   collapse ≤1150px stays in index.html's media query), gilt hotkey chip per button */
#hud .hud-right button{ position:relative; }
#hud .hud-right button .lbl{ font-family:"Cinzel",serif; letter-spacing:.05em; font-size:11px;
  color:var(--muted); text-transform:uppercase; }
#hud .hud-right button:hover .lbl{ color:var(--text); }
.hud-hotkey{ position:absolute; right:-4px; bottom:-4px; font-size:9px; line-height:1;
  padding:1px 4px; border-radius:4px; background:rgba(10,16,24,.9); color:var(--parchment);
  border:1px solid var(--bronze); font-family:"Cinzel",serif; pointer-events:none; }
.hud-badge{ background:linear-gradient(#f2c860,#d79f3a); color:#2a1c06; border-radius:9px;
  padding:0 5px; font-size:11px; margin-left:2px; font-weight:700; }

/* Task 2 (ui-redesign) — End Turn: ready (.gilt, inherited from .btn-craft.gilt above) vs.
   blocking (.hud-blocker) states. docs/plans/ui-redesign/01-hud.md §3/§6/§7. */
.hud-endturn-lbl{ font-family:"Cinzel",serif; text-transform:uppercase; letter-spacing:.05em;
  font-size:12px; font-weight:600; }
#endTurn.hud-blocker{ background:linear-gradient(#6a2a2a,#421818); color:#ffdada;
  border-color:var(--bad); animation:hud-blocker-pulse 1.6s ease-in-out infinite; }
@keyframes hud-blocker-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,107,107,.55); }
  50%{ box-shadow:0 0 0 5px rgba(255,107,107,0); }
}
@media (prefers-reduced-motion: reduce){
  /* static outline instead of the pulse — no forced motion */
  #endTurn.hud-blocker{ animation:none; box-shadow:0 0 0 2px var(--bad); }
}

/* Task 2 (ui-redesign) — shared notification priority queue (client/notify.js).
   Card chrome: .glass-panel base + colored left-accent, kept from the pre-redesign .notif
   convention — default = --accent, war = --bad, big = gilt. Timing (200ms in / ~4s hold /
   300ms out, hover-pause) is driven by notify.js; this file only owns the visual states. */
.hud-toast{ display:flex; align-items:flex-start; gap:8px; padding:8px 11px; cursor:pointer;
  border-left:3px solid var(--accent); max-width:320px; pointer-events:auto;
  opacity:0; transform:translateX(24px);
  transition:opacity .2s ease-out, transform .2s ease-out; }
.hud-toast.show{ opacity:1; transform:none; }
.hud-toast.out{ transition-duration:.3s; opacity:0; transform:translateX(24px); }
.hud-toast.war{ border-left-color:var(--bad); }
.hud-toast.big{ border-left-color:var(--gilt); font-weight:600; }
.hud-toast.me{ background:rgba(90,32,32,.55); }
.hud-toast-content{ display:flex; align-items:center; gap:8px; flex:1; min-width:0;
  font-size:12px; line-height:1.4; color:var(--text); }
.hud-toast-content .nicon{ font-size:16px; flex:none; line-height:1; }
.hud-toast-count{ font-size:11px; font-weight:700; color:var(--gilt); flex:none; }
@media (prefers-reduced-motion: reduce){
  .hud-toast{ transition:none; transform:none; }
}

/* Phase 02 (ui-redesign) — unit + tile card. docs/plans/ui-redesign/02-unit-tile-card.md
   §3a/§3b/§6. Structural sizing/breakpoints stay in index.html; this owns the skin. */
.ui-card{ padding:10px 12px 12px; font-size:13px; pointer-events:auto; }
/* #ui root is pointer-events:none so map clicks pass through; pre-redesign cards
   re-enabled via the .panel class, which the glass-panel cards no longer carry. */
.ui-card .card-hdr{ display:flex; align-items:center; gap:8px; padding-bottom:6px;
  margin-bottom:6px; border-bottom:1px solid var(--bronze); }
.ui-card .card-hdr .title-serif{ font-size:15px; flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ui-card .card-x{ background:none; border:none; color:var(--muted); cursor:pointer;
  padding:2px 4px; font-size:14px; line-height:1; flex:none; }
.ui-card .card-x:hover{ color:var(--text); }
.ui-card .card-sub{ color:var(--muted); font-size:12px; margin:-2px 0 6px; }
.ui-card .card-body{ font-size:13px; }
.ui-card .card-body .t-row{ padding:2px 0; }
.ui-card .card-body .t-defense{ color:var(--gilt); }
.ui-card .card-body .t-wonder{ color:var(--gilt); }
.ui-card .card-body .t-owner{ color:var(--muted); font-size:12px; margin-top:4px;
  padding-top:4px; border-top:1px solid var(--line); }

/* HR3 (docs/plans/ui-redesign/high-risk-gates.md) — read-only foreign-unit inspect card.
   A subtle red-tinted variant of the wood-rail/bronze-cap chrome (border + corner-cap color
   only, no layout change) so this card never reads as "mine, has actions". */
#unitPanel.enemy-inspect{ border-color:var(--bad); box-shadow:inset 0 0 0 1px rgba(255,107,107,.35), 0 6px 22px rgba(0,0,0,.5); }
#unitPanel.enemy-inspect.bronze-cap::before, #unitPanel.enemy-inspect.bronze-cap::after{ border-color:var(--bad); }
.u-owner-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }

/* combat-strength badge, header-right */
.u-badges{ display:flex; gap:5px; flex:none; }
.str-badge{ display:inline-flex; align-items:center; gap:3px; font-weight:700;
  color:var(--gilt); font-size:14px; cursor:help; border-radius:5px; padding:1px 5px;
  background:rgba(255,204,85,.08); }
.str-badge:hover{ background:rgba(255,204,85,.16); }

/* HP/XP bar rows: icon + bar + numeric (redundant, not color-alone per binding principle 4) */
.bar-row{ display:flex; align-items:center; gap:6px; margin:3px 0; }
.bar-row .bar-ic{ flex:none; width:14px; text-align:center; font-size:11px; color:var(--muted); }
.bar-row .bar{ flex:1; margin:0; }
.bar-row .bar-num{ flex:none; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }

.promo-banner{ background:linear-gradient(#f2c860,#d79f3a); color:#2a1c06; font-weight:700;
  border-radius:5px; padding:4px 8px; margin:4px 0; font-size:12px; }
.promo-picks{ margin-top:4px; }

/* movement pips: filled = a move remaining, hollow = spent (never color-only — numeric label sits beside it) */
.u-move-row{ display:flex; align-items:center; gap:6px; margin:6px 0 2px; font-size:12px; color:var(--muted); }
.move-pips{ display:flex; gap:3px; }
.move-pip{ width:8px; height:8px; border-radius:50%; background:transparent;
  border:1.5px solid var(--muted); display:inline-block; }
.move-pip.full{ background:var(--good); border-color:var(--good); }
.move-txt{ font-variant-numeric:tabular-nums; }

/* status + promotion chips — icon+label always (binding principle 4); .active gets a gilt inset */
.u-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:4px 0; }
.chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--text);
  background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:2px 7px; }
.chip.active{ box-shadow:inset 0 0 0 1px var(--gilt); color:var(--gilt); }
.chip[data-tip], .chip[data-promo]{ cursor:help; }
.chip-ic{ font-size:11px; line-height:1; }
.promo-chip{ cursor:help; }

/* stack strip (2+ units on a tile) — portraits reuse the unit-class icon assets */
.u-stack{ margin:6px 0; padding:6px 0; border-top:1px solid var(--line); }
.stack-lbl{ font-size:11px; color:var(--gilt); margin-bottom:4px; font-weight:600; }
.stack-icons{ display:flex; gap:4px; flex-wrap:wrap; }
.stack-ic{ width:26px; height:26px; border-radius:5px; background:var(--panel2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:2px; }
.stack-ic img{ width:100%; height:100%; object-fit:contain; }
.stack-ic.cur{ box-shadow:inset 0 0 0 2px var(--gilt); }
.stack-ic:hover{ border-color:var(--gilt); }

/* glance strip: the unit's own tile, one line, expands the tile card on click */
.u-glance{ margin-top:4px; }
.glance-btn{ font:inherit; background:none; border:none; color:var(--muted); cursor:pointer;
  padding:2px 0; font-size:12px; text-align:left; width:100%; }
.glance-btn:hover{ color:var(--text); }

/* Task 01d (gap-close) — "history" affordance: expands/collapses the existing #log
   scrollback (docs/plans/ui-redesign/01-hud.md §3 L141-142). Small pill, same craft
   chrome family as .btn-craft but compact to sit above the toast stack. */
.hud-history-btn{ font-family:inherit; color:var(--muted); background:var(--panel);
  backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:6px;
  padding:3px 9px; font-size:11px; cursor:pointer; pointer-events:auto; }
.hud-history-btn:hover{ color:var(--text); }
.hud-history-btn.open{ color:var(--gilt); border-color:var(--gilt); }

/* Phase 06 (ui-redesign) — Diplomacy: leader takeover + trade ledger.
   docs/plans/ui-redesign/06-diplomacy.md §3b/§3c/§6. .ovl-card is a sizing modifier on top
   of .ovl-takeover/.glass-panel — a centered card instead of the tech/city shell's edge-to-
   edge inset ("not viewport-filling ornament", §3b), width capped so the leader/trade screens
   read as focused dialogs, not a 3rd full-board takeover. */
.ovl-card{ position:fixed; inset:auto; top:8vh; left:50%; transform:translateX(-50%);
  width:min(720px,92vw); max-height:84vh; z-index:41; }
#tradeModal.ovl-card{ width:min(560px,92vw); display:flex; flex-direction:column; }
#tradeModal.ovl-card .ovl-body{ padding:14px 16px; overflow-y:auto; }

/* leader screen: portrait/backdrop (existing #lmScene, unchanged HAVE composite) beside a
   name-sub/mood/agenda info column */
.lm-top{ display:flex; gap:16px; align-items:flex-start; }
.lm-top #lmScene{ width:220px; flex:none; margin-bottom:0; }
.lm-info{ flex:1; min-width:0; }
.lm-sub{ color:var(--muted); font-size:13px; margin-bottom:8px; }
/* mood pill: color + icon + word — never color-alone (binding principle 4) */
.lm-mood{ margin-bottom:8px; }
.lm-mood-pill{ display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:13px;
  padding:3px 10px; border-radius:6px; border:1px solid var(--line); }
.lm-mood-pill.good{ color:var(--good); border-color:rgba(111,207,127,.5); background:rgba(111,207,127,.08); }
.lm-mood-pill.bad{ color:var(--bad); border-color:rgba(255,107,107,.5); background:rgba(255,107,107,.08); }
.lm-mood-pill.muted{ color:var(--parchment); border-color:var(--bronze); background:rgba(255,204,85,.06); }
.lm-agenda{ font-size:12.5px; line-height:1.4; color:var(--text); }
.lm-agenda b{ color:var(--gilt); font-family:"Cinzel",serif; }
/* "why they feel this way" modifier rows — +/- glyph doubles as the non-color cue */
.lm-why{ margin-top:14px; padding-top:10px; border-top:1px solid var(--bronze); }
.lm-why-row{ display:flex; gap:8px; font-size:12.5px; padding:3px 0; }
.lm-why-row.good{ color:var(--good); } .lm-why-row.bad{ color:var(--bad); } .lm-why-row.muted{ color:var(--muted); }
.lm-sign{ flex:none; width:14px; font-weight:700; text-align:center; }
.lm-actions{ margin-top:14px; padding-top:10px; border-top:1px solid var(--bronze);
  display:flex; flex-wrap:wrap; gap:8px; }

/* trade ledger: two-column give/receive grid, NEED rows shown disabled+tooltipped not omitted */
.tm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:10px; }
.tm-col{ display:flex; flex-direction:column; gap:8px; }
.tm-row{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12.5px; color:var(--muted); padding:4px 0; }
.tm-row select, .tm-row input{ width:140px; }
.tm-row.tm-disabled{ opacity:.55; cursor:help; }
.tm-soon{ font-size:10.5px; font-style:italic; color:var(--muted); }
.tm-summary{ font-size:12px; color:var(--muted); margin:8px 0; padding-top:8px; border-top:1px solid var(--line); }
.tm-actions{ display:flex; gap:8px; justify-content:flex-end; }

/* diplomacy roster: proposal mini-queue (max 2 + overflow, relation-colored left bar + icon
   per type — never color-alone) and roster row relation pill (icon prefix, same reasoning) */
#diploPanel .prop{ border-left:3px solid var(--accent); display:flex; align-items:flex-start; gap:6px; }
#diploPanel .prop .picon{ flex:none; font-size:14px; line-height:1.3; }
#diploPanel .prop-more{ font-size:11.5px; color:var(--muted); text-align:center; padding:2px 0 6px; }
#diploPanel .drow .nm[tabindex]{ cursor:pointer; border-radius:4px; }
#diploPanel .drow .nm[tabindex]:focus-visible{ outline:2px solid var(--gilt); outline-offset:2px; }
#diploPanel .rel{ display:inline-flex; align-items:center; gap:3px; }

/* Phase 07 (ui-redesign) — shared "Overlay Takeover" wide shell for Victory/Replay/Espionage/
   Congress/Religion/Policies + Demographics. docs/plans/ui-redesign/07-overlays.md §3.1/§6.
   .ovl-wide is a sizing modifier on .ovl-takeover, sibling to .ovl-card (Phase 06) — centered
   like .ovl-card but sized for dense Civ-V-style content (clamp 680-980px vs .ovl-card's 720px
   single-column dialog cap); height caps at 86vh instead of .ovl-takeover's edge-to-edge inset
   (spec: "height min(86vh, content)"). Responsive overrides at 760/1150px live alongside
   .ovl-card's own in index.html's existing media queries (same load-order reasons documented
   there — this file loads after that inline block). */
.ovl-wide{ position:fixed; inset:auto; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(680px,80vw,980px); max-height:86vh; z-index:41; }
/* meta row directly under .ovl-head, before any tabs/body (spyInfo/congressInfo/religionInfo/
   policyInfo) — same padding rhythm as .cty-manage's own "row right under the header" pattern */
.ovl-subinfo{ padding:10px 16px 0; font-size:13px; color:var(--muted); }
/* tab strip: plain .btn-craft pills, active tab gets .btn-craft.gilt (§6 — same "selected view"
   language as the primary End Turn button). Number keys 1/2/3… also drive these (client/ui.js,
   keymap.js) — click and keyboard hit the same switchTab() call, never two divergent paths. */
.ovl-tabs{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px 0; }
.ovl-tabs .btn-craft{ padding:5px 12px; font-size:12.5px; }
/* two-column body (Espionage roster+intel, Replay standings+chronicle, Congress in a future
   pass) — a 1px wood rail divider between columns per §6 ("a rail, not a carved surface") */
.ovl-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ovl-2col > div + div{ border-left:1px solid var(--wood); padding-left:16px; }
@media (max-width:760px){
  .ovl-2col{ grid-template-columns:1fr; }
  .ovl-2col > div + div{ border-left:none; padding-left:0; border-top:1px solid var(--wood); padding-top:12px; margin-top:8px; }
}
/* Social Policies (§3.7): one .glass-panel card per branch in a responsive grid — auto-fit
   reflows 3-up/2-up/1-up on its own (no hardcoded breakpoint needed to satisfy acceptance #9's
   "never overflow the viewport"). No wood-rail on the cards themselves — §6 reserves that
   weight for the outer takeover only. */
.pol-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:10px; }
.pol-card{ padding:10px 12px; }
.pol-card .drow:first-child{ border-top:none; }
/* Demographics (§3.8): ranked table — header + "you" row get a thin --gilt top-border accent
   instead of a solid highlight fill (§6: "so the table doesn't fight the glass panel's
   translucency"); best/worst per column are non-color-redundant too (bold+gilt vs. muted-red
   text, never color alone — principle 4). NEED columns (no server aggregate yet) render "—"
   via .demo-na, distinguishable from a real zero. */
.demo-table{ width:100%; border-collapse:collapse; font-size:13px; }
.demo-table th{ text-align:center; font-weight:600; color:var(--muted); padding:6px 8px; border-bottom:2px solid var(--gilt); white-space:nowrap; }
.demo-table th:first-child{ text-align:left; }
.demo-table td{ text-align:center; padding:5px 8px; border-top:1px solid var(--line); }
.demo-table td:first-child{ text-align:left; }
.demo-table tr.me td{ border-top:2px solid var(--gilt); color:var(--gilt); font-weight:600; }
.demo-table td.best{ color:var(--gilt); font-weight:700; }
.demo-table td.worst{ color:var(--bad); }
.demo-table td.demo-na{ color:var(--muted); font-style:italic; }