/* 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); }

.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}

/* 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 */
#lobby #setupCard.card{ width:min(920px, 92vw); padding:0 0 22px; text-align:left;
  max-height:90vh; overflow-y:auto; }
#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); }

/* 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); }