/* =========================================================================
   PIXEL CIRCLE: ZOMBIE EMPIRE — UI stylesheet (owned by: ui team)
   Dark grimy panels, rust & blood accents, pixel fonts, faction tinting.
   Sizes are in rem; Z.UI scales the root font-size with the window
   (1280×720 → 16px, 2560×1440 → 32px).
   ========================================================================= */
:root {
  --fh: 'Silkscreen', 'Press Start 2P', 'Courier New', monospace;
  --fb: 'VT323', 'Consolas', 'Lucida Console', monospace;
  --bg0: #08070a;
  --panel: #17131a;
  --panel2: #211b20;
  --line: #3b2f2b;
  --line2: #5a4434;
  --rust: #9a4a22;
  --rust2: #c46a2e;
  --blood: #a3161c;
  --blood2: #e0322a;
  --bone: #e8dcc0;
  --text: #d6cab0;
  --dim: #8d8370;
  --gold: #e8c06a;
  --good: #79c25a;
  --bad: #e0503c;
  --fc: #d6453d;           /* faction / player colour (set by JS) */
  --fa: #e8c06a;           /* faction accent */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --chamfer: polygon(0.45rem 0, calc(100% - 0.45rem) 0, 100% 0.45rem, 100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%, 0.45rem 100%, 0 calc(100% - 0.45rem), 0 0.45rem);
  --chamfer-s: polygon(0.25rem 0, calc(100% - 0.25rem) 0, 100% 0.25rem, 100% calc(100% - 0.25rem), calc(100% - 0.25rem) 100%, 0.25rem 100%, 0 calc(100% - 0.25rem), 0 0.25rem);
  --cur-arrow: default;
  --cur-cross: crosshair;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg0); }
body { font-family: var(--fb); color: var(--text); -webkit-font-smoothing: none; user-select: none; -webkit-user-select: none; cursor: var(--cur-arrow); }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #050406; cursor: var(--cur-arrow); outline: none; }
#boot-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fh); color: var(--blood2); font-size: 1.4rem; letter-spacing: .2em; background: #050406; animation: flick 1.2s steps(2) infinite; z-index: 50; }

img.glyph, img.pix, canvas.portrait, canvas.fac-portrait, canvas.minimap-canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
img.glyph { height: 1.05rem; width: auto; vertical-align: middle; flex: none; }

/* ---------- root & layers ---------- */
#ui-root { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-size: 1.15rem; line-height: 1.15; overflow: hidden; }
.ui-layer { position: absolute; inset: 0; pointer-events: none; }
#ui-hud { display: none; }
#ui-hud.show { display: block; animation: fadeIn .4s ease-out; }
#ui-menu { display: none; }
#ui-menu.show { display: block; }
#ui-overlay { display: none; z-index: 30; }
#ui-overlay.show { display: flex; align-items: center; justify-content: center; pointer-events: auto; }
#ui-banners { z-index: 20; display: flex; justify-content: center; align-items: flex-start; padding-top: 20vh; }
#ui-toasts { z-index: 21; top: 4.8rem; right: .6rem; left: auto; bottom: auto; width: 24rem; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
#ui-markers { z-index: 1; }

.panel, button, .btn, input, select, .post-marker, .toast.clickable, .screen, .modal { pointer-events: auto; }
button { font: inherit; color: inherit; }

/* ---------- panels ---------- */
.panel {
  position: relative;
  background:
    var(--noise),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0) 30%),
    linear-gradient(180deg, var(--panel2), var(--panel));
  background-blend-mode: overlay, normal, normal;
  border: 2px solid #0a0809;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 rgba(255,220,180,0.06), inset 0 -2px 0 rgba(0,0,0,0.5), 0 0.25rem 0.8rem rgba(0,0,0,0.55);
  clip-path: var(--chamfer);
}
.panel::before { /* rust corner accents */
  content: ''; position: absolute; inset: 2px; pointer-events: none;
  background:
    linear-gradient(var(--rust), var(--rust)) top left / 0.7rem 2px no-repeat,
    linear-gradient(var(--rust), var(--rust)) top left / 2px 0.7rem no-repeat,
    linear-gradient(var(--rust), var(--rust)) bottom right / 0.7rem 2px no-repeat,
    linear-gradient(var(--rust), var(--rust)) bottom right / 2px 0.7rem no-repeat;
  opacity: .8;
}
.p-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; min-height: 1.4rem; }
.p-title { font-family: var(--fh); font-size: .8rem; color: var(--bone); letter-spacing: .04em; text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-count { font-size: 1rem; color: var(--dim); }
.p-spacer { flex: 1; }
.sec-title, .sec-label, .col-h { font-family: var(--fh); font-size: .62rem; color: var(--rust2); letter-spacing: .12em; margin: .55rem 0 .3rem; display: flex; align-items: center; gap: .4rem; }
.sec-title::after, .sec-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.sec-sub { color: var(--dim); font-family: var(--fb); font-size: .9rem; letter-spacing: 0; order: 2; }
.dim { color: var(--dim); }
.red { color: var(--bad); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--fh); font-size: .78rem; letter-spacing: .04em; color: var(--bone);
  padding: .45rem .95rem; border: 0; cursor: pointer; position: relative;
  background: linear-gradient(180deg, #3a2e2c, #241c1d 55%, #1a1415);
  box-shadow: inset 0 0 0 2px #4b3a31, inset 0 3px 0 rgba(255,230,200,0.08), inset 0 -3px 0 rgba(0,0,0,0.45);
  clip-path: var(--chamfer-s);
  text-shadow: 0 1px 0 #000;
  transition: transform .06s, filter .1s, box-shadow .1s;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap;
}
.btn:hover { filter: brightness(1.25); box-shadow: inset 0 0 0 2px var(--rust2), inset 0 3px 0 rgba(255,230,200,0.1), inset 0 -3px 0 rgba(0,0,0,0.45); }
.btn:active { transform: translateY(1px); filter: brightness(.95); }
.btn.primary { background: linear-gradient(180deg, #8e1c1a, #5e1012 60%, #420a0c); box-shadow: inset 0 0 0 2px #c0392b, inset 0 3px 0 rgba(255,180,160,0.18), inset 0 -3px 0 rgba(0,0,0,0.45); color: #fff1dc; }
.btn.primary:hover { box-shadow: inset 0 0 0 2px #ff6a4a, inset 0 3px 0 rgba(255,180,160,0.25), inset 0 -3px 0 rgba(0,0,0,0.45); }
.btn.danger { color: #ffb4a0; }
.btn.danger.armed { background: linear-gradient(180deg, #a01c1a, #600c0e); color: #fff; animation: pulse .5s infinite alternate; }
.btn.big { font-size: 1rem; padding: .7rem 1.3rem; min-width: 15rem; justify-content: flex-start; }
.btn.big::before { content: '▸'; color: var(--rust2); opacity: 0; transition: opacity .1s; margin-right: .1rem; }
.btn.big:hover::before { opacity: 1; }
.btn.tiny { font-size: .58rem; padding: .25rem .5rem; }
.btn.small { font-size: .65rem; padding: .3rem .55rem; }
.btn.icon { padding: .28rem .38rem; }
.btn.icon img.glyph { height: .95rem; }
.btn.disabled, .btn:disabled { opacity: .45; filter: grayscale(.8); cursor: not-allowed; }
.btn.toggle { min-width: 3.2rem; color: var(--dim); }
.btn.toggle.on { color: #c8ff9a; box-shadow: inset 0 0 0 2px #4f7a32, inset 0 -3px 0 rgba(0,0,0,0.45); }
.btn.speed.fast { color: var(--gold); }

/* ---------- bars ---------- */
.bar { position: relative; height: .62rem; background: #0b090c; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #2a2124; overflow: hidden; margin: .18rem 0; }
.bar > .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--good); transition: width .15s linear; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25); }
.bar.hp.mid > .fill { background: #d9a032; }
.bar.hp.lo > .fill { background: var(--bad); }
.bar.prod > .fill { background: linear-gradient(90deg, #7a3c18, #d0842e); }
.bar.cap > .fill { background: var(--fc); }
.bar.cap { height: 1rem; margin: .3rem 0; }
.bar.thin { height: .3rem; }
.bar.mini { height: .3rem; margin: 0; }
.bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .82rem; line-height: 1; color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; white-space: nowrap; }
.bar.prod { height: .95rem; }
.bar.hp:has(.bar-text) { height: .95rem; }

/* ---------- tags & chips ---------- */
.tag { display: inline-block; font-size: .85rem; line-height: 1; padding: .12rem .35rem; margin: 0 .2rem .2rem 0; background: #2b2226; color: var(--text); box-shadow: inset 0 0 0 1px #45363a; }
.tag.t-infects, .tag.t-undead { background: #263a1c; color: #b6ff7a; }
.tag.t-mechanical, .tag.t-construct { background: #1d2a36; color: #9fd6ff; }
.tag.t-flying { background: #2c2440; color: #d6c4ff; }
.tag.t-healer, .tag.t-regen, .tag.t-repair { background: #1e3624; color: #a8f0b4; }
.tag.cap { background: #4a3814; color: var(--gold); }
.tag.feat { background: #3a2a1a; color: #f0c890; }
.tag.biome { background: #222; color: #cfc4b0; }
i.chip { display: inline-block; width: .75rem; height: .75rem; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,255,255,.25); flex: none; }

/* ---------- tooltip ---------- */
.tooltip {
  position: absolute; left: 0; top: 0; z-index: 60; display: none; pointer-events: none;
  max-width: 22rem; min-width: 12rem; padding: .55rem .7rem .6rem; font-size: 1.05rem; line-height: 1.12;
  background: var(--noise), linear-gradient(180deg, #221b20, #120f13); background-blend-mode: overlay, normal;
  box-shadow: inset 0 0 0 1px #4a3a32, 0 0 0 2px #050405, 0 .4rem 1.2rem rgba(0,0,0,.7);
  clip-path: var(--chamfer-s);
}
.tooltip.show { display: block; animation: tipIn .12s ease-out; }
.tt-head { display: flex; align-items: baseline; gap: .5rem; border-bottom: 1px solid #3a2e2a; padding-bottom: .25rem; margin-bottom: .3rem; }
.tt-head b { font-family: var(--fh); font-size: .72rem; color: var(--tc, var(--bone)); font-weight: normal; letter-spacing: .03em; }
.tt-head span { color: var(--dim); font-size: .95rem; margin-left: auto; }
.tt-desc { color: #c9bd9f; margin: .15rem 0 .35rem; }
.tt-desc.dim { color: #a8a08c; font-style: normal; }
.tt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .05rem .9rem; }
.tt-row { display: flex; justify-content: space-between; gap: .4rem; }
.tt-row span { color: var(--dim); }
.tt-row b { font-weight: normal; color: var(--bone); text-align: right; }
.tt-row i { color: var(--dim); font-style: normal; }
.tt-row i.sup { color: var(--gold); }
.tt-tags { margin-top: .35rem; }
.tt-note { margin-top: .35rem; font-size: .95rem; color: var(--dim); }
.tt-note.good { color: var(--good); }
.tt-note.bad { color: var(--bad); }
.tt-sub { margin-top: .4rem; color: var(--rust2); font-family: var(--fh); font-size: .55rem; letter-spacing: .1em; }
.tt-nest { margin-top: .2rem; padding: .35rem .45rem; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px #2e2428; }
.tt-role { display: inline-block; font-family: var(--fh); font-size: .55rem; letter-spacing: .1em; padding: .15rem .4rem; margin: .1rem 0 .25rem; }
.r-horde, .tt-role.r-horde { background: #3a1210; color: #ff9a80; box-shadow: inset 0 0 0 1px #7a2a20; }
.r-army, .tt-role.r-army { background: #14243a; color: #9cc8ff; box-shadow: inset 0 0 0 1px #2a4a7a; }
.r-both, .tt-role.r-both { background: #3a2c10; color: #ffd27a; box-shadow: inset 0 0 0 1px #7a5a20; }

/* ---------- toasts ---------- */
.toast {
  display: flex; align-items: center; gap: .45rem; max-width: 24rem; padding: .35rem .65rem .35rem .5rem; font-size: 1.12rem;
  background: linear-gradient(90deg, rgba(20,16,20,.94), rgba(30,24,28,.94)); box-shadow: inset 3px 0 0 var(--dim), 0 0 0 1px #000, 0 .2rem .5rem rgba(0,0,0,.5);
  animation: toastIn .22s cubic-bezier(.2,.9,.3,1.2); transition: opacity .5s, transform .5s;
}
.toast.k-warn { box-shadow: inset 3px 0 0 #e0a040, 0 0 0 1px #000; }
.toast.k-danger { box-shadow: inset 3px 0 0 var(--blood2), 0 0 0 1px #000; background: linear-gradient(90deg, rgba(60,10,10,.94), rgba(30,14,16,.94)); }
.toast.k-good { box-shadow: inset 3px 0 0 var(--good), 0 0 0 1px #000; }
.toast.k-error { box-shadow: inset 3px 0 0 var(--bad), 0 0 0 1px #000; font-size: 1.02rem; color: #ffc0b0; }
.toast.out { opacity: 0; transform: translateX(1rem); }
.toast.bump { transform: scale(1.05); }
.toast.clickable { cursor: pointer; }
.toast.clickable:hover { filter: brightness(1.3); }
.toast-cnt { color: var(--dim); font-size: .95rem; }
.toast-arrow { height: 1.15rem !important; }

/* ---------- banners ---------- */
.banner { text-align: center; pointer-events: none; animation: bannerIn .5s cubic-bezier(.2,.9,.3,1.1); transition: opacity .5s, transform .5s; }
.banner.out { opacity: 0; transform: scale(1.06); }
.banner-inner { display: flex; flex-direction: column; align-items: center; padding: .4rem 3rem; background: radial-gradient(ellipse at center, rgba(0,0,0,.72), rgba(0,0,0,0) 70%); }
.banner-rule { width: 30rem; max-width: 80vw; height: 2px; background: linear-gradient(90deg, transparent, var(--bc, var(--rust2)), transparent); margin: .3rem 0; }
.banner-title { font-family: var(--fh); font-size: 3rem; line-height: 1.05; color: var(--bc, var(--bone)); letter-spacing: .06em; text-shadow: 0 .2rem 0 #000, 0 0 1.2rem var(--bglow, rgba(255,80,40,.35)); }
.banner-sub { font-size: 1.55rem; color: #e6d8bc; text-shadow: 0 2px 0 #000; margin-top: .2rem; }
.banner-arrow { margin: .1rem 0 .25rem; transition: transform .2s; }
.banner-arrow img { height: 2.6rem; width: auto; image-rendering: pixelated; filter: drop-shadow(0 0 .5rem rgba(255,40,30,.8)); animation: pulse .45s infinite alternate; }
.b-night { --bc: #b9c8ff; --bglow: rgba(80,110,255,.45); }
.b-blood { --bc: #ff3a2a; --bglow: rgba(255,20,10,.7); }
.b-blood .banner-title { animation: flick 1.6s steps(1) infinite; font-size: 3.6rem; }
.b-horde { --bc: #ff6a3a; --bglow: rgba(255,60,20,.55); }
.b-dawn { --bc: #ffd88a; --bglow: rgba(255,200,90,.45); }
.b-death { --bc: #e0322a; --bglow: rgba(200,0,0,.6); }
.b-elim { --bc: #e8dcc0; --bglow: rgba(200,160,120,.35); }
.b-good { --bc: var(--bone); --bglow: rgba(255,170,80,.35); }

/* ---------- order markers & cursor hint ---------- */
.marker { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.marker i { position: absolute; left: -1rem; top: -.5rem; width: 2rem; height: 1rem; border: 2px solid #8fff6a; border-radius: 50%; animation: markerRing .9s ease-out forwards; }
.marker i:nth-child(2) { animation-delay: .15s; opacity: 0; }
.marker b { position: absolute; left: -.2rem; top: -.2rem; width: .4rem; height: .4rem; background: #8fff6a; animation: fadeOut .9s forwards; }
.marker.m-attack i { border-color: #ff5a3a; } .marker.m-attack b { background: #ff5a3a; }
.marker.m-rally i { border-color: var(--gold); } .marker.m-rally b { background: var(--gold); }
.marker.m-ability i { border-color: #fff0a0; width: 4rem; height: 2rem; left: -2rem; top: -1rem; } .marker.m-ability b { background: #fff0a0; }
.marker.m-build i { border-color: #ffb060; }
.cursor-hint { position: absolute; left: 0; top: 0; z-index: 55; display: none; font-size: 1rem; padding: .15rem .4rem; background: rgba(10,8,10,.85); color: #ffe6b0; box-shadow: 0 0 0 1px #4a3a32; pointer-events: none; white-space: nowrap; }
.cursor-hint.show { display: block; }
.cursor-hint.ok { color: #c8ff9a; box-shadow: 0 0 0 1px #3f6a2a; }
.cursor-hint.bad { color: #ffb0a0; box-shadow: 0 0 0 1px #7a2a20; }
.marker.m-move i { border-color: #8fff6a; }
.marker.m-target i { border-color: #ff3a2a; border-width: 3px; } .marker.m-target b { background: #ff3a2a; }
.marker.m-place i { border-color: #ffd27a; width: 3rem; height: 1.5rem; left: -1.5rem; top: -.75rem; } .marker.m-place b { background: #ffd27a; }

/* ---------- R3: build bar, command card, deploy ---------- */
.hud-center { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; max-width: 38rem; }
.build-bar { width: 100%; padding: .35rem .45rem .45rem; animation: slideUp .45s ease-out; }
.bb-tabs { display: flex; gap: .25rem; margin-bottom: .35rem; }
.bb-tab { flex: 1; cursor: pointer; border: 0; display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .22rem .4rem; font-family: var(--fh); font-size: .55rem; letter-spacing: .08em; color: var(--dim); text-transform: uppercase;
  background: linear-gradient(180deg, #221b1f, #141013); box-shadow: inset 0 0 0 1px #33282c; }
.bb-tab:hover { color: var(--bone); box-shadow: inset 0 0 0 1px var(--rust); }
.bb-tab.on { color: #ffd8a8; background: linear-gradient(180deg, #4a2418, #24120e); box-shadow: inset 0 0 0 1px var(--rust2), inset 0 -2px 0 var(--rust2); }
.bb-tab img.glyph { height: .8rem; }
.bb-n { font-style: normal; font-family: var(--fb); font-size: .9rem; color: var(--dim); }
.bb-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.bb-tile { position: relative; cursor: pointer; border: 0; padding: .25rem .15rem .2rem; min-height: 4.6rem; display: flex; flex-direction: column; align-items: center; gap: .05rem;
  background: linear-gradient(180deg, #2c2327, #161214); box-shadow: inset 0 0 0 1px #3e3236; color: var(--text); transition: transform .06s; }
.bb-tile:hover { box-shadow: inset 0 0 0 1px var(--rust2), 0 0 .5rem rgba(196,106,46,.35); filter: brightness(1.2); transform: translateY(-2px); }
.bb-tile.active { box-shadow: inset 0 0 0 2px #ffd27a, 0 0 .7rem rgba(255,210,122,.5); background: linear-gradient(180deg, #4a3618, #1e160c); }
.bb-tile .bb-icon { width: 2.4rem; height: 2.4rem; }
.bb-tile .bt-name { font-size: .85rem; }
.bb-tile .keycap { position: absolute; left: .15rem; top: .12rem; font-family: var(--fh); font-size: .48rem; color: #fff0c0; background: rgba(0,0,0,.8); padding: 0 .18rem; box-shadow: 0 0 0 1px #4a3a32; }
.bb-tile.poor .bt-cost { color: var(--bad); }
.bb-tile.poor .bb-icon { filter: grayscale(.6) brightness(.8); }
.bb-tile.d-wall { box-shadow: inset 0 0 0 1px #6a4a20; } .bb-tile.d-trap { box-shadow: inset 0 0 0 1px #6a2a20; } .bb-tile.d-tower { box-shadow: inset 0 0 0 1px #2a4a6a; } .bb-tile.d-bastion { box-shadow: inset 0 0 0 1px #7a5a20; }
.deploy-note { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; max-width: 34rem; animation: pulseGlow 1.6s ease-in-out infinite; }
.deploy-note img.glyph { height: 2rem; }
.deploy-note b { display: block; font-family: var(--fh); font-size: .8rem; color: #ffd27a; font-weight: normal; letter-spacing: .08em; }
.deploy-note span { font-size: 1.05rem; color: #cfc2a4; }
.b-deploy { --bc: #ffd27a; --bglow: rgba(255,190,80,.55); }
#ui-hud.deploying .node-panel, #ui-hud.deploying .sel-panel { display: none; }
#ui-hud.spectating .leader-card, #ui-hud.spectating .hud-center, #ui-hud.spectating .node-panel, #ui-hud.spectating .res-group, #ui-hud.spectating .res-pop, #ui-hud.spectating .hud-bar .sep { display: none !important; }
#ui-hud.spectating .crest-stripe { background: #6a6258; box-shadow: none; }
.sel-row { display: flex; gap: .5rem; align-items: flex-start; }
.sel-row .sel-body { flex: 1; min-width: 0; }
.cmd-card { display: grid; grid-template-columns: repeat(3, 2.7rem); gap: .2rem; flex: none; }
.cmd-btn { position: relative; cursor: pointer; border: 0; width: 2.7rem; height: 2.45rem; padding: .15rem 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: linear-gradient(180deg, #2e2528, #161214); box-shadow: inset 0 0 0 1px #45363a; color: var(--text); }
.cmd-btn img.glyph { height: 1.05rem; }
.cmd-btn .cmd-l { font-family: var(--fh); font-size: .38rem; letter-spacing: .04em; color: var(--dim); text-transform: uppercase; margin-top: .12rem; }
.cmd-btn .keycap { position: absolute; right: .1rem; top: .05rem; font-family: var(--fh); font-size: .42rem; color: #fff0c0; }
.cmd-btn:hover { box-shadow: inset 0 0 0 1px var(--rust2); filter: brightness(1.25); }
.cmd-btn.on { box-shadow: inset 0 0 0 2px #ffd27a, 0 0 .5rem rgba(255,210,122,.45); }
.cmd-btn.cool { filter: grayscale(.8) brightness(.6); }
.cmd-btn.c-ability { grid-column: span 2; width: auto; }
.sel-panel .p-head { margin-bottom: .2rem; }
/* ---------- R4: resources, costs, deposits, rings, fog-quiet toasts ---------- */
.res-group { display: flex; align-items: center; gap: .8rem; }
.res-group .res img.glyph { height: 1.35rem; }
.res-scrap .res-val { color: #e6d6bf; } .res-food .res-val { color: #ffe0a0; } .res-ichor .res-val { color: #b6ff8a; text-shadow: 0 0 .4rem rgba(120,255,80,.45), 0 1px 0 #000; }
.res-inc.neg { color: var(--bad); }
.cost { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.cost-i { display: inline-flex; align-items: center; gap: .1rem; font-size: .95rem; color: var(--bone); white-space: nowrap; }
.cost-i img.glyph { height: .75rem; }
.cost-i.c-scrap { color: #e6d6bf; } .cost-i.c-food, .cost-i.c-supply { color: #ffe0a0; } .cost-i.c-ichor { color: #b6ff8a; }
.cost-i.short { color: #ff6a50 !important; text-shadow: 0 0 .3rem rgba(255,60,40,.5); }
.cost-free { color: var(--good); font-size: .9rem; }
.tooltip .cost-i { font-size: 1rem; }
.bb-tile .cost { margin-top: auto; gap: .2rem; }
.bb-tile .cost-i { font-size: .85rem; }
.bb-tile.poor { filter: saturate(.55); }
.bt-tag { position: absolute; right: .15rem; top: .15rem; font-family: var(--fh); font-size: .36rem; letter-spacing: .05em; padding: .05rem .2rem; background: rgba(0,0,0,.75); color: #ffd27a; box-shadow: 0 0 0 1px #4a3a32; }
.bb-tile.seg .bt-tag { color: #e8dcc0; }
.up-btn .cost { justify-content: flex-start; }
.up-btn .cost-i { font-size: .82rem; }
.toast.k-quiet { box-shadow: inset 3px 0 0 #7a6a58, 0 0 0 1px #000; background: rgba(14,12,14,.78); font-size: 1rem; color: #bfb29a; padding: .22rem .55rem .22rem .4rem; }
.cyc-horde.quiet { color: #a89880; font-family: var(--fb); font-size: .9rem; letter-spacing: 0; }
.world-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dep-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.dep-mark .dm-ring { position: absolute; border-radius: 50%; border: 2px dashed rgba(220,210,180,.35); }
.dep-mark.near .dm-ring { border: 2px solid #8fff6a; box-shadow: 0 0 .7rem rgba(143,255,106,.55), inset 0 0 .6rem rgba(143,255,106,.35); animation: pulse .6s infinite alternate; }
.dep-mark.empty .dm-ring { border-color: rgba(255,90,60,.5); }
.dep-mark .dm-lbl { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .15rem; font-size: .9rem; color: #e8dcc0; background: rgba(8,6,10,.7); padding: 0 .25rem; white-space: nowrap; }
.dep-mark.near .dm-lbl { color: #c8ff9a; }
.dep-list, .ring-list { display: flex; flex-direction: column; gap: .2rem; }
.dep-row { display: flex; align-items: center; gap: .4rem; padding: .15rem .3rem; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px #2e2428; cursor: help; }
.dep-row img.glyph { height: 1.1rem; }
.dep-row.empty { opacity: .55; }
.dep-main { flex: 1; min-width: 0; }
.dep-top { display: flex; justify-content: space-between; font-size: .95rem; line-height: 1; }
.dep-top b { font-weight: normal; color: var(--bone); }
.dep-w { color: var(--dim); }
.bar.dep { height: .8rem; margin: .1rem 0 0; }
.ring-row { display: flex; align-items: center; gap: .4rem; font-size: .95rem; }
.ring-k { width: 3.3rem; color: var(--dim); }
.ring-g { width: 3.6rem; text-align: right; color: var(--dim); }
.bar.ring { flex: 1; height: .8rem; margin: 0; }
.bar.ring > .fill { background: linear-gradient(90deg, #6a5a48, #a89070); }
@keyframes pulseGlow { 0%, 100% { box-shadow: inset 0 0 0 1px var(--line), 0 0 .4rem rgba(255,190,80,.15); } 50% { box-shadow: inset 0 0 0 1px #ffd27a, 0 0 1.2rem rgba(255,190,80,.45); } }

/* =========================================================================
   HUD
   ========================================================================= */
.hud-top { position: absolute; top: .45rem; left: .5rem; right: .5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; pointer-events: none; }
.hud-crest { display: flex; align-items: stretch; gap: .5rem; padding: .35rem .8rem .35rem .45rem; min-width: 12rem; max-width: 18rem; animation: slideDown .45s ease-out; }
.crest-stripe { width: .4rem; background: linear-gradient(180deg, var(--fc), color-mix(in srgb, var(--fc) 50%, #000)); box-shadow: 0 0 .6rem var(--fc); }
.crest-name { font-family: var(--fh); font-size: .72rem; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crest-mode { font-size: 1rem; color: var(--dim); }
.hud-bar { display: flex; align-items: center; gap: .75rem; padding: .3rem 1rem; animation: slideDown .45s ease-out; min-height: 3.4rem; }
.hud-bar .sep { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, var(--line2), transparent); }
.res { display: flex; align-items: center; gap: .45rem; }
.res img.glyph { height: 1.6rem; }
.res-col { display: flex; flex-direction: column; line-height: 1; }
.res-val { font-family: var(--fh); font-size: 1rem; color: var(--bone); font-weight: normal; text-shadow: 0 1px 0 #000; }
.res-supply .res-val { color: #ffe0a0; }
.res-inc { font-size: 1rem; color: var(--good); }
.res-pop.capped .res-val { color: var(--bad); animation: pulse .6s infinite alternate; }
.res-clock canvas.dial { width: 2.9rem; height: 2.9rem; image-rendering: auto; filter: drop-shadow(0 1px 0 #000); }
.cyc-label { font-family: var(--fh); font-size: .78rem; color: #ffd88a; font-weight: normal; }
.res-clock.night .cyc-label { color: #b9c8ff; }
.cyc-timer { font-size: 1rem; color: var(--dim); }
.res-clock.dusk .cyc-timer { color: #ffa860; }
.cyc-horde { font-family: var(--fh); font-size: .55rem; letter-spacing: .05em; color: transparent; min-height: .7rem; }
.cyc-horde.on { color: #ff4a36; animation: flick .8s steps(2) infinite; }
.cyc-horde.warn { color: #e0a040; }
.cyc-blood { display: none; align-items: center; gap: .3rem; font-family: var(--fh); font-size: .6rem; color: #ff3a2a; padding: .25rem .45rem; background: rgba(90,0,0,.5); box-shadow: inset 0 0 0 1px #7a1010, 0 0 .8rem rgba(255,0,0,.4); animation: pulse .7s infinite alternate; }
.cyc-blood.on { display: flex; }
.mode-lines { display: flex; flex-direction: column; gap: .1rem; }
.mode-line { display: flex; gap: .45rem; font-size: 1rem; align-items: baseline; }
.mode-line .ml-l { color: var(--dim); }
.mode-line .ml-v { color: var(--gold); font-weight: normal; font-family: var(--fh); font-size: .66rem; }
.hud-tr { display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem; animation: slideDown .45s ease-out; }
.gtime { font-family: var(--fh); font-size: .7rem; color: var(--dim); margin: 0 .3rem 0 .1rem; }
#ui-hud.paused .hud-tr .gtime { color: var(--gold); animation: flick 1s steps(2) infinite; }

.hud-bottom { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; display: flex; align-items: flex-end; gap: .5rem; pointer-events: none; }
.hud-flex { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: flex-end; }

/* leader card */
.leader-card { flex: none; width: 19.5rem; display: flex; gap: .55rem; padding: .5rem .6rem .5rem .5rem; animation: slideUp .45s ease-out; }
.portrait-wrap { position: relative; width: 4.9rem; height: 4.9rem; flex: none; cursor: pointer; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--fc) 45%, #000), #0a080b 70%); box-shadow: inset 0 0 0 2px #000, 0 0 0 1px var(--line2); overflow: hidden; }
.portrait-wrap canvas { width: 100%; height: 100%; display: block; }
.portrait-frame { position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--fc), inset 0 0 1rem rgba(0,0,0,.8); pointer-events: none; }
.leader-card.dead .portrait-wrap { filter: grayscale(1) brightness(.6); }
.leader-card.dead .portrait-frame { box-shadow: inset 0 0 0 2px var(--blood), inset 0 0 1rem rgba(0,0,0,.9); }
.l-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.l-name { font-family: var(--fh); font-size: .64rem; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-status { font-size: .98rem; color: var(--dim); min-height: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader-card.dead .l-status { color: var(--bad); }
.l-btns { display: flex; gap: .3rem; margin-top: auto; }
.l-ab { display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 4.3rem; }
.ab-name { font-size: .85rem; color: var(--dim); text-align: center; line-height: .95; max-width: 4.6rem; }
.ability-btn {
  position: relative; width: 3.9rem; height: 3.9rem; cursor: pointer; border: 0; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #3a2c20, #120e10 75%);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #6a5030, 0 0 0 1px #000;
  clip-path: var(--chamfer-s);
}
.ability-btn .ab-icon { width: 2.5rem; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ability-btn .ab-cd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.75) calc(var(--cd, 0) * 360deg), transparent 0); }
.ability-btn .ab-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 1.1rem; color: #fff; text-shadow: 0 2px 0 #000, 0 0 .4rem #000; }
.ability-btn .keycap { position: absolute; right: .15rem; bottom: .1rem; font-family: var(--fh); font-size: .55rem; color: #fff0c0; background: #000; padding: 0 .2rem; }
.ability-btn.ready { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--gold), 0 0 0 1px #000; animation: abReady 1.4s ease-in-out infinite; }
.ability-btn.ready:hover { filter: brightness(1.25); }
.ability-btn.nolead { filter: grayscale(1) brightness(.5); }
.ability-btn.casting { animation: pulse .3s infinite alternate; }
.ability-btn.targeting { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #fff4b0; filter: brightness(1.4); }

/* selection panel */
.sel-panel { display: none; width: 100%; max-width: 36rem; padding: .45rem .55rem; }
.sel-panel.show { display: block; animation: slideUp .2s ease-out; }
.sel-panel.enemy { --line: #5a2020; }
.sel-panel.enemy .p-title { color: #ffb0a0; }
.sel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.05rem, 1fr)); gap: .3rem; max-height: 6.9rem; overflow: auto; }
.sel-tile { position: relative; height: 3.3rem; padding: .15rem .15rem .25rem; cursor: pointer; background: linear-gradient(180deg, #2a2226, #151114); box-shadow: inset 0 0 0 1px #3c3034; display: flex; flex-direction: column; justify-content: flex-end; }
.sel-tile:hover { box-shadow: inset 0 0 0 1px var(--rust2); filter: brightness(1.2); }
.sel-tile.leader { box-shadow: inset 0 0 0 1px var(--gold); }
.sel-tile img { position: absolute; left: 50%; top: .1rem; transform: translateX(-50%); width: 2.6rem; height: 2.6rem; }
.sel-tile .cnt { position: absolute; right: .15rem; top: .05rem; font-family: var(--fh); font-size: .55rem; color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000; }
.sel-more { display: flex; align-items: center; justify-content: center; color: var(--dim); }
.sel-single { display: flex; gap: .6rem; }
.sel-icon-wrap { flex: none; width: 4.4rem; height: 4.4rem; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #2a2226, #0e0b0d 75%); box-shadow: inset 0 0 0 1px #3c3034; }
.sel-big { width: 4rem; height: 4rem; }
.sel-detail { flex: 1; min-width: 0; }
.sel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; margin: .2rem 0; }
.stat { display: flex; flex-direction: column; background: rgba(0,0,0,.25); padding: .1rem .3rem; }
.stat span { font-family: var(--fh); font-size: .48rem; color: var(--dim); letter-spacing: .08em; }
.stat b { font-weight: normal; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .98rem; }
.sel-status { font-size: .95rem; color: var(--dim); }

/* node panel */
.node-panel { display: none; flex: none; width: 21.5rem; padding: .5rem .6rem; --nc: #6a6258; overflow: visible; clip-path: none; }
.node-panel.show { display: block; animation: slideUp .2s ease-out; }
.node-panel::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--nc); box-shadow: 0 0 .6rem var(--nc); }
.node-body { display: flex; flex-direction: column; }
.hud-right { flex: none; width: 21.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; pointer-events: none; }
.hud-right .node-panel { width: 100%; }
.node-scroll { max-height: max(8rem, calc(100vh - 33rem)); overflow-y: auto; overflow-x: hidden; padding-right: .2rem; margin-right: -.2rem; }
.node-tags { margin-bottom: .1rem; }
.node-owner { display: flex; align-items: center; gap: .4rem; font-size: 1.05rem; }
.nstat { display: inline-flex; align-items: center; gap: .2rem; color: var(--dim); font-size: 1rem; }
.nstat img.glyph { height: .85rem; }
.node-note, .slot-empty-note { font-size: .98rem; color: var(--dim); margin: .35rem 0 .1rem; }
.slot-list, .post-list { display: flex; flex-direction: column; gap: .25rem; }
.slot { display: flex; align-items: center; gap: .45rem; padding: .22rem .3rem; background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(0,0,0,.15)); box-shadow: inset 0 0 0 1px #2e2428; min-height: 2.6rem; }
.slot.center { box-shadow: inset 0 0 0 1px #5a4a2a; }
.slot-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.slot-chip { position: relative; width: 2.35rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 .3rem, rgba(0,0,0,.12) .3rem .6rem); box-shadow: inset 0 0 0 1px #3a2e2a; opacity: .8; }
.slot-chip span { position: absolute; right: .12rem; bottom: 0; font-size: .8rem; color: var(--dim); line-height: 1; }
.slot-chip.slot-build { cursor: pointer; opacity: 1; }
.slot-chip.slot-build:hover, .slot-chip.open { box-shadow: inset 0 0 0 1px var(--rust2), 0 0 .4rem rgba(196,106,46,.4); background-color: rgba(154,74,34,.18); }
.slot-chip.gate { box-shadow: inset 0 0 0 1px #7a5a28; }
.slot-chip.focus { box-shadow: inset 0 0 0 1px var(--gold); }
.slot-icon { position: relative; width: 2.3rem; height: 2.3rem; flex: none; display: flex; align-items: center; justify-content: center; background: #0d0a0c; box-shadow: inset 0 0 0 1px #000; }
.slot-icon img.pix { width: 2.3rem; height: 2.3rem; }
.slot-icon img.glyph { height: 1rem; }
.slot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.slot-main b { font-weight: normal; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem; line-height: 1; }
.slot-sub { color: var(--dim); font-size: .95rem; }
.slot-btns { display: flex; gap: .2rem; flex: none; }
.slot.empty { opacity: .75; min-height: 1.85rem; padding: .12rem .3rem; }
.slot.empty .slot-icon { width: 1.5rem; height: 1.5rem; }
.slot.empty .slot-main { flex-direction: row; align-items: baseline; gap: .5rem; }
.slot.empty .slot-icon img.glyph { height: .8rem; }
.slot.slot-build { cursor: pointer; opacity: 1; box-shadow: inset 0 0 0 1px #3a2e2a; background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 .3rem, rgba(0,0,0,.08) .3rem .6rem); }
.slot.slot-build:hover, .slot.open { box-shadow: inset 0 0 0 1px var(--rust2); background-color: rgba(154,74,34,.12); }
.slot.focus { box-shadow: inset 0 0 0 1px var(--gold), 0 0 .5rem rgba(232,192,106,.4); }
.slot.constructing .bar.prod > .fill { background: repeating-linear-gradient(135deg, #7a6018 0 .3rem, #a08020 .3rem .6rem); }
.slot.blocked .bar.prod .bar-text { color: #ffb090; }
.slot.paused { opacity: .7; }
.slot.paused .bar.prod > .fill { background: #555; }
.slot.post.gate .slot-icon { box-shadow: inset 0 0 0 1px #8a6a30; }
.post-kind { position: absolute; left: 0; right: 0; bottom: -.05rem; text-align: center; font-family: var(--fh); font-size: .38rem; color: #fff; background: rgba(0,0,0,.7); line-height: 1.2; }
.slot.post.d-trap .post-kind { color: #ff9a80; } .slot.post.d-wall .post-kind { color: #ffcf7a; } .slot.post.d-tower .post-kind { color: #9cc8ff; } .slot.post.d-bastion .post-kind { color: #ffd27a; }
.up-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin: .3rem 0 .1rem; }
.up-label { grid-column: 1 / -1; font-family: var(--fh); font-size: .5rem; color: var(--gold); letter-spacing: .12em; }
.up-btn { cursor: pointer; border: 0; padding: .25rem .3rem; text-align: left; background: linear-gradient(180deg, #33281e, #1c1612); box-shadow: inset 0 0 0 1px #6a5030; display: flex; flex-direction: column; min-width: 0; }
.up-btn b { font-weight: normal; color: var(--bone); font-size: .92rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-btn span { font-size: .85rem; color: var(--gold); }
.up-btn:hover { filter: brightness(1.3); }
.up-btn.owned { box-shadow: inset 0 0 0 1px #4f7a32; background: linear-gradient(180deg, #24321c, #141c10); cursor: default; }
.up-btn.owned span { color: var(--good); }
.up-btn.poor span { color: var(--bad); }
.rally-row { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; font-size: 1rem; padding-top: .3rem; border-top: 1px solid #2e2428; }
.rally-row b { font-weight: normal; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7rem; }

/* build popup */
.build-pop { display: none; position: absolute; right: calc(100% + .45rem); bottom: 0; width: 27rem; max-height: calc(100vh - 6rem); overflow-y: auto; padding: .5rem .6rem .6rem; z-index: 5; }
.build-pop.show { display: block; animation: popIn .16s ease-out; }
.build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.defense-grid { grid-template-columns: repeat(4, 1fr); }
.build-tile { position: relative; cursor: pointer; border: 0; padding: .3rem .2rem .25rem; min-height: 5.6rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; background: linear-gradient(180deg, #2c2327, #161214); box-shadow: inset 0 0 0 1px #3e3236; color: var(--text); }
.build-tile:hover { box-shadow: inset 0 0 0 1px var(--rust2), 0 0 .5rem rgba(196,106,46,.35); filter: brightness(1.2); transform: translateY(-1px); }
.build-tile img.pix { width: 2.5rem; height: 2.5rem; }
.build-tile .bt-unit { position: absolute; right: .15rem; top: .15rem; width: 1.5rem !important; height: 1.5rem !important; background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px #000; }
.bt-name { font-size: .9rem; line-height: .95; text-align: center; color: var(--bone); max-height: 1.9rem; overflow: hidden; }
.bt-cost { display: flex; align-items: center; gap: .15rem; font-size: .95rem; color: #ffe0a0; margin-top: auto; }
.bt-cost img.glyph { height: .75rem; }
.bt-role { font-family: var(--fh); font-size: .4rem; letter-spacing: .06em; padding: .08rem .25rem; }
.build-tile.poor .bt-cost { color: var(--bad); }
.build-tile.disabled { opacity: .45; filter: grayscale(.7); }
.build-tile.locked::after { content: 'GATE ONLY'; position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: var(--fh); font-size: .45rem; color: #ffcf7a; background: rgba(0,0,0,.8); padding: .15rem 0; }
.build-tile.k-econ { box-shadow: inset 0 0 0 1px #5a4a1e; }
.build-tile.k-beacon { box-shadow: inset 0 0 0 1px #2e5a4a; }
.pop-foot { margin-top: .4rem; font-size: .95rem; color: var(--dim); }

/* rim markers for defense posts */
.post-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.post-marker { position: absolute; left: 0; top: 0; width: 0; height: 0; cursor: pointer; }
.post-marker .pm-ring { position: absolute; left: -.85rem; top: -.85rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px dashed rgba(232,220,192,.55); background: rgba(10,8,10,.55); box-shadow: 0 0 0 1px #000; }
.post-marker.gate .pm-ring { border-radius: .2rem; transform: rotate(45deg); border-color: rgba(240,192,112,.8); }
.post-marker .pm-glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: .8rem !important; }
.post-marker .pm-icon { position: absolute; left: -1rem; top: -1.25rem; width: 2rem; height: 2rem; filter: drop-shadow(0 1px 0 #000); }
.post-marker .pm-hp { position: absolute; left: -.9rem; top: .7rem; width: 1.8rem; height: .25rem; margin: 0; }
.post-marker.built .pm-ring { border-style: solid; border-color: var(--nc, #888); background: rgba(10,8,10,.3); }
.post-marker.mine.empty { animation: pmPulse 1.6s ease-in-out infinite; }
.post-marker.mine.empty:hover .pm-ring, .post-marker.open .pm-ring { border-color: var(--rust2); background: rgba(154,74,34,.45); border-style: solid; }
.post-marker:hover .pm-icon { filter: drop-shadow(0 0 .3rem #fff) brightness(1.2); }

/* minimap */
.mini-panel { flex: none; width: 15.5rem; padding: .35rem .4rem .45rem; animation: slideUp .45s ease-out; }
.mini-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--fh); font-size: .5rem; color: var(--dim); letter-spacing: .12em; margin-bottom: .25rem; }
.mini-legend { display: flex; align-items: center; gap: .25rem; color: #ff6a50; }
.lg-horde { display: inline-block; width: .45rem; height: .45rem; background: #ff3024; border-radius: 50%; animation: pulse .6s infinite alternate; }
.mini-wrap { position: relative; width: 100%; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px var(--line2); background: #0a090c; }
canvas.minimap-canvas { display: block; width: 100%; cursor: pointer; }
#ui-hud.night .mini-panel { box-shadow: inset 0 0 0 1px #2a3050, 0 .25rem .8rem rgba(0,0,0,.55); }

/* =========================================================================
   MENUS
   ========================================================================= */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.6rem 2.6rem 1.4rem; overflow: hidden;
  background: var(--noise), radial-gradient(ellipse at 50% 30%, rgba(30,18,20,.78), rgba(6,5,8,.94) 75%); background-blend-mode: overlay, normal; animation: fadeIn .35s ease-out; }
.scr-head { margin-bottom: .9rem; animation: slideDown .4s ease-out; }
.scr-step { font-family: var(--fh); font-size: .6rem; color: var(--rust2); letter-spacing: .25em; }
.scr-title { font-family: var(--fh); font-weight: 700; font-size: 2.2rem; margin: .1rem 0 0; color: var(--bone); letter-spacing: .05em; text-shadow: 0 .18rem 0 #3a0b0b, 0 .36rem 0 #000, 0 0 1.2rem rgba(200,40,20,.35); }
.scr-sub { font-size: 1.35rem; color: var(--dim); }
.scr-foot { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; }
.scr-foot .btn { font-size: .85rem; padding: .6rem 1.2rem; }

/* title */
.title-screen { background: none; padding: 0; }
.title-vignette { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(5,4,7,.92) 0%, rgba(5,4,7,.75) 32%, rgba(5,4,7,.15) 62%, rgba(5,4,7,0) 100%),
  radial-gradient(ellipse at 70% 50%, transparent 40%, rgba(0,0,0,.6) 100%); }
.title-left { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1.6rem; max-width: 44rem; }
.logo { position: relative; animation: logoIn 1s cubic-bezier(.2,.9,.3,1); }
.logo-top { display: flex; align-items: center; gap: .7rem; font-family: var(--fh); font-size: 1.9rem; color: var(--bone); letter-spacing: .28em; text-shadow: 0 .15rem 0 #000; }
.logo-circle { position: relative; width: 1.8rem; height: 1.8rem; }
.logo-circle i { position: absolute; inset: 0; border: .2rem solid var(--rust2); border-radius: 50%; animation: spin 9s linear infinite; border-right-color: transparent; }
.logo-circle i:nth-child(2) { inset: .35rem; border-color: var(--blood2); border-left-color: transparent; animation-duration: 5s; animation-direction: reverse; }
.logo-circle i:nth-child(3) { inset: .72rem; background: var(--bone); border: 0; }
.logo-main { font-family: var(--fh); font-weight: 700; font-size: 4.4rem; line-height: 1; color: #c81e1e; letter-spacing: .02em; white-space: nowrap;
  text-shadow: .25rem .25rem 0 #3d0606, .5rem .5rem 0 #120203, 0 0 2rem rgba(255,30,10,.45); }
.logo-drips { position: relative; height: 1.6rem; margin-top: -.45rem; width: 34rem; max-width: 100%; }
.logo-drips i { position: absolute; top: 0; width: .32rem; background: linear-gradient(180deg, #c81e1e, #6a0a0a); border-radius: 0 0 .2rem .2rem; animation: drip 4s ease-in infinite; }
.logo-drips i:nth-child(1) { left: 4%; height: .9rem; animation-delay: .2s; }
.logo-drips i:nth-child(2) { left: 17%; height: 1.4rem; animation-delay: 1.4s; }
.logo-drips i:nth-child(3) { left: 33%; height: .6rem; animation-delay: 2.6s; }
.logo-drips i:nth-child(4) { left: 48%; height: 1.2rem; animation-delay: .8s; }
.logo-drips i:nth-child(5) { left: 63%; height: .8rem; animation-delay: 3.1s; }
.logo-drips i:nth-child(6) { left: 79%; height: 1.5rem; animation-delay: 1.9s; }
.logo-drips i:nth-child(7) { left: 92%; height: .7rem; animation-delay: 2.2s; }
.logo-tag { font-size: 1.55rem; color: #bfb39a; margin-top: .2rem; text-shadow: 0 2px 0 #000; }
.title-menu { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }
.title-menu .btn { animation: slideRight .5s ease-out backwards; }
.title-menu .btn:nth-child(2) { animation-delay: .07s; } .title-menu .btn:nth-child(3) { animation-delay: .14s; } .title-menu .btn:nth-child(4) { animation-delay: .21s; }
.title-tip { font-size: 1.25rem; color: var(--dim); max-width: 32rem; }
.title-tip b { font-family: var(--fh); font-size: .6rem; color: var(--rust2); font-weight: normal; letter-spacing: .1em; }
.title-tip.fade { animation: fadeIn .8s; }
.title-foot { position: absolute; left: 6vw; right: 2rem; bottom: 1rem; display: flex; justify-content: space-between; font-size: 1rem; color: #5e5648; }

/* mode select */
.mode-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; align-content: start; overflow: auto; padding: .2rem; }
.mode-card { cursor: pointer; padding: 1rem .95rem; min-height: 15rem; display: flex; flex-direction: column; gap: .35rem;
  background: var(--noise), linear-gradient(180deg, #241c20, #120e11); background-blend-mode: overlay, normal; box-shadow: inset 0 0 0 2px #35292c, 0 .3rem .8rem rgba(0,0,0,.5); clip-path: var(--chamfer); transition: transform .12s, box-shadow .12s; animation: popIn .35s ease-out backwards; }
.mode-card:nth-child(2) { animation-delay: .05s; } .mode-card:nth-child(3) { animation-delay: .1s; } .mode-card:nth-child(4) { animation-delay: .15s; } .mode-card:nth-child(5) { animation-delay: .2s; }
.mode-card:hover { transform: translateY(-.2rem); box-shadow: inset 0 0 0 2px var(--rust), 0 .5rem 1rem rgba(0,0,0,.6); }
.mode-card.on { box-shadow: inset 0 0 0 2px var(--blood2), 0 0 1.4rem rgba(224,50,42,.35); background: var(--noise), linear-gradient(180deg, #3a1a1c, #160c0e); }
.mc-icon img.glyph { height: 2.6rem; }
.mc-name { font-family: var(--fh); font-size: 1.1rem; color: var(--bone); }
.mode-card.on .mc-name { color: #ffd0b0; }
.mc-tag { color: var(--gold); font-size: 1.2rem; }
.mc-desc { color: #b9ad94; font-size: 1.1rem; flex: 1; }
.mc-players { font-family: var(--fh); font-size: .55rem; color: var(--dim); letter-spacing: .1em; }

/* faction select */
.fac-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 22rem 1fr; gap: 1rem; }
.fac-list { overflow-y: auto; display: grid; grid-template-columns: 1fr; gap: .3rem; align-content: start; padding: .15rem; }
.fac-list.many { grid-template-columns: 1fr 1fr; }
.fac-tile { --fc: #888; cursor: pointer; display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; min-height: 3.2rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 18%, #17131a), #141015); box-shadow: inset 0 0 0 1px #33282c, inset .25rem 0 0 var(--fc); clip-path: var(--chamfer-s); transition: filter .1s, transform .1s; animation: slideRight .35s ease-out backwards; }
.fac-tile:hover { filter: brightness(1.25); transform: translateX(.15rem); }
.fac-tile.on { box-shadow: inset 0 0 0 2px var(--fc), inset .35rem 0 0 var(--fc), 0 0 1rem color-mix(in srgb, var(--fc) 40%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 35%, #17131a), #1c1519); }
.ft-icon { width: 2.4rem; height: 2.4rem; flex: none; }
.ft-text { display: flex; flex-direction: column; min-width: 0; }
.ft-text b { font-weight: normal; font-size: 1.05rem; line-height: .95; color: var(--bone); }
.ft-era { font-family: var(--fh); font-size: .45rem; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; margin-top: .15rem; }
.fac-detail { overflow-y: auto; padding: .9rem 1.1rem; animation: fadeIn .3s; }
.fd-top { display: flex; gap: 1.1rem; }
.portrait-box { position: relative; flex: none; width: 12.5rem; height: 12.5rem; background:
  radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--fc) 55%, transparent), transparent 62%),
  radial-gradient(circle at 50% 40%, #2a2026, #08060a 75%);
  box-shadow: inset 0 0 0 2px #000, 0 0 0 1px var(--line2); clip-path: var(--chamfer); }
.portrait-box canvas { width: 100%; height: 100%; display: block; }
.pb-frame { position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--fc), inset 0 0 2.5rem rgba(0,0,0,.85); pointer-events: none; }
.pb-era { position: absolute; left: .4rem; top: .4rem; font-family: var(--fh); font-size: .5rem; letter-spacing: .12em; padding: .15rem .35rem; background: rgba(0,0,0,.75); color: var(--fa); box-shadow: inset 0 0 0 1px var(--fa); text-transform: uppercase; }
.fd-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.fd-name { font-family: var(--fh); font-weight: 700; font-size: 1.5rem; color: var(--bone); text-shadow: 0 .15rem 0 #000; line-height: 1.05; }
.fd-title { color: var(--fc); font-size: 1.3rem; filter: brightness(1.4); }
.leader-line { font-size: 1.15rem; }
.leader-line b { font-weight: normal; color: var(--gold); }
.fd-play { color: #bfb39a; font-size: 1.12rem; }
.fd-econ { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-size: 1rem; }
.econ-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .4rem; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px #3a2e2a; color: var(--bone); }
.econ-chip img.glyph { height: .8rem; }
.econ-chip.c-ichor { color: #b6ff8a; } .econ-chip.c-food { color: #ffe0a0; } .econ-chip.c-scrap { color: #e6d6bf; }
.econ-chip.minor { opacity: .7; box-shadow: none; }
.econ-note { color: var(--dim); flex-basis: 100%; }
.ratings { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem; margin-top: .2rem; }
.rating { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: 1.05rem; color: var(--dim); }
.pips { display: flex; gap: .15rem; }
.pips i { width: .9rem; height: .5rem; background: #2a2226; box-shadow: inset 0 0 0 1px #000; }
.pips i.on { background: linear-gradient(180deg, var(--rust2), var(--rust)); box-shadow: inset 0 0 0 1px #000, 0 0 .3rem rgba(196,106,46,.5); }
.fd-lore { margin: .6rem 0 .1rem; font-size: 1.12rem; color: #d2c5a8; line-height: 1.15; border-left: 2px solid var(--fc); padding-left: .6rem; }
.fd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sw-col ul { margin: 0; padding-left: 1rem; font-size: 1.08rem; }
.sw-col.good li::marker { content: '+ '; color: var(--good); }
.sw-col.bad li::marker { content: '− '; color: var(--bad); }
.sw-col.good .col-h { color: var(--good); } .sw-col.bad .col-h { color: var(--bad); }
.fd-bottom { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; gap: 1rem; align-items: start; }
.ability-box { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .45rem .6rem; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px #3a2e2a; cursor: help; }
.ability-box b { font-weight: normal; color: var(--gold); font-family: var(--fh); font-size: .72rem; }
.ability-box .key { color: var(--dim); }
.ab-glyph { height: 2rem !important; }
.ab-desc { font-size: 1.05rem; color: #bfb39a; }
.roster { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 30rem; }
.roster-unit { width: 4.7rem; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .25rem .15rem; background: linear-gradient(180deg, #241c20, #120e11); box-shadow: inset 0 0 0 1px #35292c; text-align: center; cursor: help; }
.roster-unit:hover { box-shadow: inset 0 0 0 1px var(--rust2); filter: brightness(1.2); }
.roster-unit img { width: 2.5rem; height: 2.5rem; }
.roster-unit span { font-size: .85rem; line-height: .9; color: var(--bone); height: 1.6rem; overflow: hidden; display: flex; align-items: center; }
.role { font-style: normal; font-family: var(--fh); font-size: .4rem; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.fd-banner { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; }
.fd-banner .col-h { margin: 0; }
.swatches { display: flex; gap: .3rem; }
.swatch { width: 1.4rem; height: 1.4rem; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 2px #000; }
.swatch.on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #000, 0 0 .5rem currentColor; transform: scale(1.12); }

/* setup */
.setup-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.setup-col { overflow-y: auto; padding: .6rem 1rem .9rem; }
.set-row { display: flex; align-items: center; gap: .55rem; margin: .4rem 0; font-size: 1.15rem; }
.set-row.col { flex-direction: column; align-items: flex-start; gap: .25rem; }
.set-l { font-family: var(--fh); font-size: .6rem; color: var(--dim); letter-spacing: .1em; min-width: 6rem; }
.seg { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.seg .btn { font-size: .62rem; padding: .35rem .7rem; clip-path: none; }
.seg .btn.on { background: linear-gradient(180deg, #8e1c1a, #4e0c0e); box-shadow: inset 0 0 0 2px #c0392b; color: #fff; }
.stepper { display: inline-flex; align-items: center; gap: .4rem; }
.opp-count { font-family: var(--fh); font-size: 1rem; color: var(--bone); min-width: 1.4rem; text-align: center; font-weight: normal; }
.opp-rows { display: flex; flex-direction: column; gap: .3rem; }
.opp-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .45rem; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px #2e2428; animation: slideRight .25s ease-out; }
.opp-row.you { box-shadow: inset 0 0 0 1px #5a4a2a; }
.opp-row i.chip { width: 1rem; height: 1rem; }
.opp-name { color: var(--gold); }
.opp-idx { font-family: var(--fh); font-size: .55rem; color: var(--dim); min-width: 2.3rem; }
select.sel, input.num, input.txt {
  font-family: var(--fb); font-size: 1.1rem; color: var(--bone); background: #0e0b0e; border: 0; padding: .2rem .4rem; outline: none;
  box-shadow: inset 0 0 0 1px #4a3a32, inset 0 2px 0 rgba(0,0,0,.6);
}
select.sel:focus, input.num:focus, input.txt:focus { box-shadow: inset 0 0 0 1px var(--rust2); }
select.sel option { background: #120e11; }
input.num { width: 6rem; }
input.seed { width: 8rem; }
.you-card { display: flex; align-items: center; gap: .8rem; padding: .5rem .7rem; background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 25%, #120e11), #120e11); box-shadow: inset 0 0 0 1px var(--fc); }
.you-card b { font-weight: normal; font-family: var(--fh); font-size: .85rem; color: var(--bone); }
.you-icon { width: 3rem; height: 3rem; }
.mode-blurb { font-size: 1.12rem; color: #b9ad94; margin-bottom: .2rem; }
.btn.start { font-size: 1.05rem; padding: .8rem 1.8rem; min-width: 0; }
input.slider { -webkit-appearance: none; appearance: none; flex: 1; height: .5rem; background: #0e0b0e; box-shadow: inset 0 0 0 1px #4a3a32; outline: none; }
input.slider::-webkit-slider-thumb { -webkit-appearance: none; width: .9rem; height: 1.2rem; background: linear-gradient(180deg, var(--rust2), var(--rust)); box-shadow: 0 0 0 2px #000; cursor: pointer; }
input.slider::-moz-range-thumb { width: .9rem; height: 1.2rem; background: var(--rust2); border: 2px solid #000; border-radius: 0; }
.sl-val { font-weight: normal; min-width: 3.2rem; text-align: right; color: var(--bone); }

/* end screen */
.end-screen { align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(10,6,8,.55), rgba(4,3,5,.92) 70%); }
.end-box { width: min(52rem, 94vw); padding: 1.4rem 1.8rem 1.2rem; text-align: center; animation: popIn .5s cubic-bezier(.2,.9,.3,1.2); }
.end-title { font-family: var(--fh); font-weight: 700; font-size: 4.2rem; line-height: 1; letter-spacing: .08em; }
.end-screen.won .end-title { color: #ffd36a; text-shadow: .2rem .2rem 0 #5a3a08, 0 0 2rem rgba(255,200,80,.5); }
.end-screen.lost .end-title { color: #d81e1e; text-shadow: .2rem .2rem 0 #3d0606, 0 0 2rem rgba(255,30,10,.5); }
.end-sub { font-size: 1.5rem; color: #cfc2a4; margin: .3rem 0 .8rem; }
.end-meta { display: flex; justify-content: center; gap: 1.6rem; font-family: var(--fh); font-size: .6rem; color: var(--dim); letter-spacing: .1em; margin-bottom: .8rem; }
.end-meta b { color: var(--bone); font-weight: normal; font-size: .8rem; }
table.stats { width: 100%; border-collapse: collapse; font-size: 1.2rem; }
table.stats th { font-family: var(--fh); font-size: .5rem; color: var(--rust2); letter-spacing: .1em; font-weight: normal; padding: .3rem .4rem; border-bottom: 1px solid var(--line2); text-align: right; }
table.stats th:nth-child(2), table.stats td:nth-child(2) { text-align: left; }
table.stats td { padding: .28rem .4rem; text-align: right; border-bottom: 1px solid #241c1f; }
table.stats tr.me td { background: rgba(232,192,106,.07); color: var(--bone); }
table.stats tr.win td:nth-child(2) { color: var(--gold); }
table.stats tr.dead td { color: #7a6e60; }
.end-box .scr-foot { margin-top: 1.1rem; }

/* overlays */
.ovl-dim { position: absolute; inset: 0; background: rgba(4,3,6,.66); backdrop-filter: blur(2px) grayscale(.4); animation: fadeIn .2s; }
.modal { position: relative; width: min(54rem, 94vw); max-height: 92vh; overflow-y: auto; padding: 1.2rem 1.6rem 1.2rem; animation: popIn .22s ease-out; }
.modal.narrow { width: min(28rem, 92vw); }
.modal-title { font-family: var(--fh); font-weight: 700; font-size: 1.9rem; color: var(--bone); text-align: center; letter-spacing: .1em; text-shadow: 0 .18rem 0 #3a0b0b, 0 .36rem 0 #000; margin-bottom: .2rem; }
.modal-sub { text-align: center; color: var(--dim); font-size: 1.3rem; margin-bottom: .9rem; }
.modal-menu { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.modal-row { display: flex; justify-content: center; gap: .8rem; margin-top: 1rem; }
.set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.set-sec .set-row .set-l { min-width: 5.5rem; }
.help-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.4rem; }
.keys { display: flex; flex-direction: column; gap: .12rem; }
.key-row { display: flex; align-items: center; gap: .6rem; font-size: 1.12rem; }
kbd { font-family: var(--fh); font-size: .52rem; color: var(--bone); background: linear-gradient(180deg, #3a2e2c, #1a1415); box-shadow: inset 0 0 0 1px #5a4434, 0 2px 0 #000; padding: .2rem .4rem; min-width: 7.6rem; text-align: center; }
.help-tips { margin: 0; padding-left: 1rem; font-size: 1.12rem; color: #c8bba0; display: flex; flex-direction: column; gap: .35rem; }
.help-tips b { color: var(--gold); font-weight: normal; }

/* scrollbars */
::-webkit-scrollbar { width: .45rem; height: .45rem; }
::-webkit-scrollbar-track { background: #0c0a0d; }
::-webkit-scrollbar-thumb { background: #4a3a32; }
::-webkit-scrollbar-thumb:hover { background: var(--rust); }

/* flicker title effect */
.flicker { animation: flick 6s steps(1) infinite; }

/* =========================================================================
   animations
   ========================================================================= */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-.8rem); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-1rem); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tipIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(1.35); filter: blur(4px); } 60% { opacity: 1; transform: scale(.98); filter: none; } 100% { transform: none; } }
@keyframes logoIn { from { opacity: 0; transform: translateY(-1rem) scale(1.04); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pulse { from { opacity: 1; } to { opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drip { 0%, 60% { transform: scaleY(1); transform-origin: top; opacity: 1; } 80% { transform: scaleY(1.7); opacity: 1; } 100% { transform: scaleY(1.7) translateY(.8rem); opacity: 0; } }
@keyframes flick { 0%, 100% { opacity: 1; } 3% { opacity: .55; } 4% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .7; } 49% { opacity: 1; } 50% { opacity: .85; } 51% { opacity: 1; } }
@keyframes markerRing { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@keyframes abReady { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3) drop-shadow(0 0 .4rem var(--gold)); } }
@keyframes pmPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* small screens: tighten the bottom bar */
@media (max-aspect-ratio: 14/9) {
  .leader-card { width: 17rem; }
  .node-panel { width: 19.5rem; }
  .mini-panel { width: 13.5rem; }
  .build-pop { width: 24rem; }
}