/* Imperium of Dune, dressed like the digital board game: deep space and the
   planet behind, the board's spaces as cut-corner panels framed in their
   area's colour, cards with pictures, gold for points and blue for buttons. */

:root {
  --bg: #04060b;
  --ink: #e9edf3;
  --muted: #9ba7b8;
  --dim: #6c7788;
  --panel: rgba(11, 16, 27, .9);
  --panel-2: #121a29;
  --panel-3: #1a2436;
  --line: rgba(150, 175, 210, .18);
  --line-2: rgba(150, 175, 210, .34);
  --gold: #f2c14e;
  --gold-2: #ffd978;
  --spice: #e0692c;
  --blue: #2f86dc;
  --red: #e0453b;
  --btn: #173f6c;
  --btn-2: #1f5a96;
  --ui: 'Barlow Semi Condensed', 'Segoe UI', system-ui, sans-serif;
  --disp: 'Cinzel', Georgia, serif;
  --dock-h: 260px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg) var(--stars, none) repeat;
  color: var(--ink);
  font: 15px/1.4 var(--ui);
  overflow-x: hidden;
}
body.on-stage { overflow: hidden; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--gold-2); }
h1, h2, h3 { font-family: var(--disp); font-weight: 700; margin: 0; letter-spacing: .03em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -4px; }
.ic.troop { color: #cfd4da; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 14px; }
.grow { flex: 1; min-width: 0; }
.code { font-family: ui-monospace, Menlo, monospace; color: var(--gold-2); background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; }
.dots::after { content: '…'; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.boot svg { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  border: 1px solid #3a5a86; background: #16263f; color: #dfe9f5; border-radius: 3px;
  padding: 9px 16px; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: #1d3354; border-color: #5d86bd; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--btn-2); border-color: #7fb7ff; color: #fff; box-shadow: 0 0 12px rgba(80, 160, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.btn.primary:hover { background: #2669b0; box-shadow: 0 0 18px rgba(80, 160, 255, .55); }
.btn.gold { background: #6b4d10; border-color: var(--gold); color: #fff2cf; }
.btn.danger { background: #3a1210; border-color: #a33a30; color: #ffc9c2; }
.btn.sm { padding: 6px 11px; font-size: 14px; }
.btn.lg { padding: 13px 22px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn .ic { width: 18px; height: 18px; }
.x { width: 30px; height: 30px; display: inline-grid; place-content: center; border: 0; background: transparent; color: var(--muted); border-radius: 3px; flex: none; }
.x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.x .ic { width: 18px; height: 18px; }

.big-btn {
  width: 100%; height: 100%; border: 2px solid #7fc4ff; border-radius: 3px; color: #eaf5ff;
  background: #173f6c; font: 700 24px var(--ui); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 18px rgba(80, 170, 255, .55), inset 0 0 18px rgba(120, 190, 255, .25);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .15s, box-shadow .15s, filter .15s;
}
.big-btn:hover { background: #1f5a96; }
.big-btn.glow { box-shadow: 0 0 28px rgba(110, 190, 255, .85), inset 0 0 20px rgba(140, 200, 255, .4); }
.big-btn.soft { border-color: #5b7fa8; box-shadow: none; background: #132c4a; font-size: 21px; }
.big-btn.off { border-color: #34465c; background: #0f1826; color: #6f8196; box-shadow: none; font-size: 18px; cursor: default; }

.field { width: 100%; background: #070b13; border: 1px solid var(--line-2); border-radius: 3px; padding: 11px 13px; color: var(--ink); font-size: 16px; }
.field:focus { outline: none; border-color: var(--gold-2); }
.lbl { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* ---------- resource icons with their number ---------- */
.ni { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; vertical-align: middle; }
.ni > .ic { position: absolute; inset: 0; width: 100%; height: 100%; }
.ni > b { position: relative; font-weight: 800; font-size: 13px; line-height: 1; color: #202327; }
.ni-spice > b, .ni-persuasion > b { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.ni-vp > b { color: #3a2400; }
.ni-water, .ni-swords, .ni-troops { width: auto; gap: 2px; }
.ni-water > .ic, .ni-swords > .ic, .ni-troops > .ic { position: static; width: 20px; height: 20px; }
.ni-water > b, .ni-swords > b, .ni-troops > b { color: var(--ink); }
.ni.big { width: 34px; height: 34px; }
.ni.big > b { font-size: 17px; }
.fx { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; vertical-align: middle; }
.fx b { font-weight: 800; }
.fx .ic { width: 20px; height: 20px; }
.fx.word { font-size: 14px; font-weight: 600; }
.fx.inf b { color: var(--fc); }
.fx.inf .ic { color: var(--fc); }
.arr { width: 14px !important; height: 14px !important; color: var(--muted); }

/* ---------- landing ---------- */
.landing { position: relative; min-height: 100vh; overflow: hidden; padding: 0 16px 40px; }
.land-sky { position: fixed; inset: 0; pointer-events: none; background: #03050a url(art/table.webp) 62% 100% / cover no-repeat; }
.land-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 5, 10, .35), rgba(3, 5, 10, .1) 40%, rgba(3, 5, 10, .55)); }
.hero { position: relative; text-align: center; padding: 64px 0 30px; }
.wordmark { font-family: var(--disp); font-weight: 800; font-size: clamp(34px, 7vw, 70px); letter-spacing: .14em; line-height: 1; color: #f4ead4; text-shadow: 0 2px 30px rgba(0, 0, 0, .8); }
.wordmark small { display: block; font-size: .28em; letter-spacing: .5em; color: var(--gold); margin-bottom: 14px; }
.tagline { max-width: 640px; margin: 18px auto 0; color: #c9d2de; font-size: 18px; text-shadow: 0 1px 6px #000; }
.land-grid { position: relative; max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }
.panel {
  position: relative; background: var(--panel); border: 1px solid var(--line-2); padding: 22px; border-radius: 3px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.panel h2 { font-size: 21px; color: #f4ead4; margin-bottom: 4px; }
.sub { color: var(--muted); margin: 0 0 16px; }
.sub.small { font-size: 14px; margin: 14px 0 0; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tables { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.table-item { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); padding: 10px 12px; border-radius: 3px; }
.t-name { font-weight: 700; font-size: 16px; }
.t-meta { color: var(--muted); font-size: 14px; }
.t-names { color: var(--dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: var(--dim); text-align: center; padding: 18px; border: 1px dashed var(--line-2); border-radius: 3px; }
.show-title { position: relative; max-width: 1060px; margin: 34px auto 12px; font-size: 22px; color: #f4ead4; text-shadow: 0 2px 10px #000; }
.leaders-show { position: relative; max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lshow { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--panel); border: 1px solid var(--line); padding: 10px 8px; border-radius: 3px; }
.lshow .portrait { width: 84px; height: 84px; border: 2px solid var(--line-2); margin-bottom: 8px; }
.lshow b { font-family: var(--disp); font-size: 14px; line-height: 1.2; }
.lshow span { color: var(--muted); font-size: 14px; }
.fine { position: relative; text-align: center; color: #e2d6c0; font-size: 14px; margin: 26px auto 0; max-width: 760px; padding: 6px 12px; background: rgba(4, 6, 11, .72); }

/* ---------- table lobby ---------- */
.lobby { max-width: 1120px; margin: 0 auto; padding: 18px 16px 50px; }
.lobby-top, .lobby-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.lobby-title h1 { font-size: 28px; flex: 1; }
.brand { font: 800 16px var(--disp); letter-spacing: .12em; color: var(--gold); background: none; border: 0; padding: 0; }
.lobby-grid { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.join { margin-bottom: 16px; }
.join-row { display: flex; gap: 10px; flex-wrap: wrap; }
.join-row .field { flex: 1; min-width: 180px; }
.banner { background: rgba(242, 193, 78, .1); border: 1px solid rgba(242, 193, 78, .4); color: var(--gold-2); padding: 10px 14px; margin-bottom: 16px; }
.seats { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.seat { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-left: 4px solid var(--pc, var(--line-2)); padding: 8px 10px; min-height: 64px; }
.seat.open { border-style: dashed; color: var(--dim); }
.seat-pt { width: 46px; height: 46px; flex: none; display: grid; place-content: center; background: rgba(255, 255, 255, .05); color: var(--dim); }
.seat-pt .portrait { width: 46px; height: 46px; }
.seat-pt.empty { border: 1px dashed var(--line-2); }
.s-name { font-weight: 700; font-size: 16px; }
.s-sub { color: var(--muted); font-size: 14px; }
.tag { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; background: rgba(255, 255, 255, .08); color: var(--muted); }
.tag.you { background: rgba(242, 193, 78, .16); color: var(--gold-2); }
.tag.host { color: #ffd9a8; }
.tag.bot { color: #9fd0ff; }
.start .sub { margin-top: 8px; }
.leaders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.leader { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); padding: 10px; border-radius: 3px; transition: border-color .15s, background .15s; }
.leader:hover:not(:disabled) { border-color: var(--line-2); background: rgba(255, 255, 255, .07); }
.leader.mine { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(242, 193, 78, .25); }
.leader.taken { opacity: .5; }
.leader:disabled { cursor: default; }
.l-pt .portrait { width: 78px; height: 78px; border: 2px solid var(--line-2); display: block; }
.l-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.l-name { font: 700 15px var(--disp); line-height: 1.15; color: #f4ead4; }
.l-title { color: var(--muted); font-size: 14px; }
.l-ability { font-size: 14px; }
.l-seal { font-size: 14px; color: var(--gold-2); }
.l-seal .ic { width: 15px; height: 15px; }
.l-who { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--muted); border-top: 1px dashed var(--line-2); padding-top: 5px; }
.l-who.mine { color: var(--gold-2); }

/* ---------- the stage ---------- */
.table-stage { position: fixed; inset: 0; overflow: clip; background: #03050a var(--stars, none) repeat; }
#stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: clip; font-size: 15px; }
.st-sky { position: absolute; inset: 0; pointer-events: none; background: #03050a url(art/table.webp) center / cover no-repeat; }
.st-sky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 62% 56%, transparent 40%, rgba(2, 3, 8, .45) 100%); }

/* the top line */
.st-top { position: absolute; left: 250px; top: 0; width: 1350px; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 8px 0 18px; }
.brand-mini { font: 800 14px var(--disp); letter-spacing: .14em; color: var(--gold); background: none; border: 0; padding: 0; white-space: nowrap; }
.brand-mini span { color: #d8c9a6; }
.round { font-size: 14px; color: var(--muted); white-space: nowrap; letter-spacing: .04em; }
.round b { color: var(--ink); }
.headline { flex: 1; text-align: center; font-size: 18px; font-weight: 600; color: #eef2f7; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.headline.mine { color: var(--gold-2); }
.headline .who { color: var(--pc); }
.top-icons { display: flex; gap: 4px; }
.ti { width: 36px; height: 34px; display: grid; place-content: center; border: 0; background: transparent; color: #cfd8e3; border-radius: 3px; }
.ti:hover, .ti.on { background: rgba(255, 255, 255, .1); color: #fff; }
.ti .ic { width: 22px; height: 22px; }

/* the houses */
.pp { position: absolute; display: block; padding: 0; text-align: left; color: var(--ink); border: 1px solid rgba(160, 185, 220, .28); border-radius: 2px;
  background: rgba(12, 18, 30, .88); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); overflow: hidden; }
.pp::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pc); }
.pp.turn { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), 0 0 18px color-mix(in srgb, var(--pc) 60%, transparent); }
button.pp:hover { background: rgba(20, 28, 44, .92); }
.pp > * { position: absolute; }
.pp-pt { left: 4px; top: 4px; width: 52px; height: 52px; padding: 0; border: 0; background: none; box-shadow: inset 0 -3px 0 var(--pc); }
.pp-pt .portrait { width: 100%; height: 100%; display: block; }
.pp-vp { left: 50px; top: 12px; }
.pp-vp .ni { width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.pp-vp .ni b { font-size: 15px; }
.pp-agents { left: 88px; top: 6px; display: flex; gap: 1px; }
.pawn { width: 20px; height: 26px; color: var(--pc); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.pawn.used { color: #222a36; filter: none; }
.pp-badges { right: 6px; top: 8px; display: flex; gap: 3px; }
.bdg, .ally-dot { width: 20px; height: 20px; display: grid; place-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--gold-2); }
.ally-dot { color: var(--fc); box-shadow: 0 0 0 1px var(--fc); }
.bdg .ic, .ally-dot .ic { width: 13px; height: 13px; }
.pp-name { left: 0; right: 0; top: 58px; height: 18px; padding: 0 8px 0 10px; display: flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .06);
  font: 700 13.5px var(--disp); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e4e9f0; }
.pp-name i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--pc); flex: none; }
.pp-who { left: 88px; top: 36px; right: 6px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .1); color: #b9c6d6; padding: 0 4px; border-radius: 2px; vertical-align: 1px; }
.tg.first { background: rgba(242, 193, 78, .18); color: var(--gold-2); }
.tg.warn { background: rgba(224, 69, 59, .25); color: #ffb2aa; }
.pp-res { left: 4px; right: 4px; top: 76px; height: 18px; display: flex; align-items: center; gap: 7px; font-size: 14px; }
.pp-res > span { display: inline-flex; align-items: center; gap: 2px; }
.pp-res .ni { width: 20px; height: 20px; }
.pp-res .ni b { font-size: 11px; }
.pp-res .r .ic { width: 17px; height: 17px; }
.pp-res b { font-weight: 800; }
.reveal { margin-left: auto; gap: 4px !important; }
.reveal .sw { display: inline-flex; align-items: center; gap: 1px; }
.donemark { margin-left: auto; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.pp.mine .pp-pt { width: 64px; height: 64px; }
.pp.mine .pp-vp { left: 60px; top: 14px; }
.pp.mine .pp-vp .ni { width: 36px; height: 36px; }
.pp.mine .pp-vp .ni b { font-size: 18px; }
.pp.mine .pp-agents { left: 102px; top: 6px; }
.pp.mine .pawn { width: 24px; height: 31px; }
.pp.mine .pp-who { left: 102px; top: 42px; }
.pp.mine .pp-name { top: 70px; height: 20px; font-size: 14px; }
.pp.mine .pp-res { top: 96px; height: 30px; gap: 6px; font-size: 14px; }
.pp.mine .pp-res .ni { width: 25px; height: 25px; }
.pp.mine .pp-res .ni b { font-size: 13px; }
.pp.mine .pp-res .r .ic { width: 20px; height: 20px; }
.pp-piles { right: 4px; top: 96px; display: flex; gap: 2px; }
.pile { display: inline-flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 2px; padding: 2px 5px; font-weight: 800; font-size: 14px; }
.pile:hover { background: rgba(255, 255, 255, .12); }
.pile .ic { width: 20px; height: 20px; }
.pp.mine .reveal { display: none; }
.bump { animation: bump .8s ease-out; }
@keyframes bump { 35% { transform: scale(1.35); filter: drop-shadow(0 0 6px var(--gold)); } }

/* the chronicle feed on the left */
.feed { position: absolute; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 8px 10px; cursor: pointer;
  background: rgba(8, 12, 20, .5); border: 1px solid rgba(150, 175, 210, .1); border-radius: 2px; overflow: hidden; }
.feed:hover { border-color: var(--line-2); }
.feed-h { margin-bottom: auto; font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 5px; }
.feed-h .ic { width: 15px; height: 15px; }
.fl { font-size: 14px; line-height: 1.3; color: #c3ccd8; padding-left: 7px; border-left: 2px solid var(--pc, transparent); }
.fl.sys { color: var(--gold-2); font-weight: 600; border-left-color: rgba(242, 193, 78, .5); }

/* ---------- board spaces ---------- */
.bs { position: absolute; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); cursor: pointer;
  border-radius: 13px; box-shadow: 0 5px 12px rgba(0, 0, 0, .5); }
.bs-frame { position: absolute; inset: 0; background: var(--ac); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.bs-in { position: absolute; inset: 2px; display: flex; overflow: hidden; background: #0a0e17;
  clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 0 100%); }
.bs-tab { position: relative; z-index: 1; width: 42px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0 4px; background: color-mix(in srgb, color-mix(in srgb, var(--ac) 22%, #0a0e17) 88%, transparent); border-right: 1px solid color-mix(in srgb, var(--ac) 45%, transparent); }
.bs-art > i { transition: transform .6s ease; }
.bs:hover .bs-art > i, .bs.open .bs-art > i { transform: translate(-50%, -50%) scale(1.06); }
.bs-in::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5, 8, 14, .78) 0%, rgba(5, 8, 14, .5) 42%, rgba(5, 8, 14, .12) 100%), linear-gradient(180deg, rgba(5, 8, 14, .45), transparent 32%); }
.bs-in > .bs-body, .bs-in > .bs-pawn, .bs-in > .bs-x { z-index: 2; }
.bs-glyph { width: 24px; height: 24px; color: var(--ac); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ac) 50%, transparent)); }
.a-emperor .bs-glyph { color: #d6dde4; }
.cost { display: flex; flex-direction: column; align-items: center; }
.cost .ni { width: 26px; height: 26px; }
.cost .ni b { font-size: 13px; }
.cost.water .ic { width: 16px; height: 16px; margin-top: -2px; }
.req { display: inline-flex; align-items: center; gap: 1px; color: #35a6de; }
.req .ic { width: 16px; height: 16px; }
.req b { font-size: 14px; font-weight: 800; color: #fff; }
.bs-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 14px 30px 4px 9px; }
.bs-name { position: absolute; left: 8px; top: 3px; right: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(245, 238, 225, .9); text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-fx { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)); }
.bi { display: inline-flex; align-items: center; gap: 1px; }
.bi .ic { width: 26px; height: 26px; }
.bi.troops .ic { width: 25px; height: 25px; margin-right: -3px; }
.bi.pawns .ic { width: 18px; height: 26px; margin-right: -2px; }
.bi b { font-weight: 800; font-size: 15px; margin-left: 2px; }
.bi.word small { font-weight: 800; font-size: 14px; }
.bi .steal { display: inline-flex; margin-left: 4px; }
.bi .steal .ic { width: 20px; height: 20px; margin-left: -8px; transform: rotate(-12deg); }
.bs-fx .fx .ic { width: 24px; height: 24px; }
.plus { font-weight: 800; font-size: 18px; color: #fff; }
.worm { width: 26px !important; height: 26px !important; }
.sell { display: flex; gap: 5px; }
.sell-o { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.sell-o i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #fff; }
.sell-o .ni { width: 26px; height: 26px; }
.bs-x { position: absolute; right: 6px; bottom: 5px; width: 20px !important; height: 20px !important; color: rgba(255, 255, 255, .45); }
.bs-pawn { position: absolute; right: 12px; top: 10px; width: 38px; height: 50px; color: var(--pc); filter: drop-shadow(0 0 6px var(--pc)) drop-shadow(0 3px 3px rgba(0, 0, 0, .7)); }
.bs-pawn.fresh { animation: pawn-drop .5s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes pawn-drop { from { transform: translateY(-40px) scale(1.4); opacity: 0; } }
.bs.taken .bs-body > * { opacity: .5; }
.bs.taken .bs-tab { filter: saturate(.5); }
.maker { position: absolute; left: 44px; top: -12px; display: inline-flex; align-items: center; gap: 1px; background: #1b1209; border: 1px solid var(--spice); border-radius: 12px; padding: 0 6px 0 4px; font-weight: 800; font-size: 14px; color: #ffb27a; box-shadow: 0 0 10px rgba(224, 105, 44, .5); }
.maker .ni { width: 22px; height: 22px; }
.maker .ni b { font-size: 11px; }
.flag { position: absolute; left: 50%; bottom: -24px; width: 32px; height: 26px; margin-left: -16px; display: grid; place-content: center;
  background: #3a4453; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.flag.held { background: var(--pc); }
.flag .ni { width: 20px; height: 20px; margin-top: -4px; }
.flag .ni b { font-size: 11px; }

.bs:hover { filter: brightness(1.12); }
.bs.open { box-shadow: 0 0 0 1px rgba(255, 215, 120, .55), 0 0 18px rgba(255, 215, 120, .6), 0 5px 12px rgba(0, 0, 0, .5); }
.bs.open .bs-frame { background: var(--gold-2); }
.bs.shut { opacity: .4; }
.bs.chosen .bs-frame { background: #fff; }
.bs.chosen { box-shadow: 0 0 0 1px #fff, 0 0 18px rgba(255, 255, 255, .75); transform: scale(1.03); z-index: 3; }
.bs.over { transform: scale(1.06); z-index: 3; box-shadow: 0 0 0 2px var(--gold-2), 0 0 24px rgba(255, 220, 130, .95); }

/* influence tracks */
.trk { position: absolute; display: flex; flex-direction: column; align-items: center; }
.trk-top { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-content: center; color: var(--fc);
  background: #121a27; border: 2px solid var(--fc); box-shadow: 0 0 12px rgba(0, 0, 0, .7), 0 0 10px color-mix(in srgb, var(--fc) 35%, transparent); }
.t-emperor .trk-top { color: #dfe5eb; }
.trk-top .ic { width: 25px; height: 25px; }
.trk-top.allied { border-color: var(--pc); box-shadow: 0 0 0 3px var(--pc), 0 0 16px var(--pc); }
.trk-levels { flex: 1; width: 46px; margin-top: 4px; display: flex; flex-direction: column; background: #2b2217; border: 1px solid rgba(210, 170, 110, .45);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.lv { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; padding: 0 2px;
  border-bottom: 1px solid rgba(0, 0, 0, .45); background: linear-gradient(180deg, rgba(255, 220, 160, .08), rgba(0, 0, 0, .12)); }
.lv::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 8px; margin-top: -6px; border-top: 2px solid rgba(214, 170, 100, .35);
  clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 40%, 50% 100%, 0 40%); }
.lv em { position: absolute; left: 2px; top: 0; font-size: 10.5px; font-style: normal; font-weight: 800; color: rgba(255, 230, 190, .5); }
.lv.vp { background: rgba(242, 193, 78, .22); }
.lv.bonus { background: color-mix(in srgb, var(--fc) 30%, transparent); }
.lv-0 { background: #121a27; }
.mk { position: relative; z-index: 1; width: 8px; height: 8px; background: var(--pc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 4px var(--pc); }
.trk-side { position: absolute; left: -32px; top: 0; bottom: 0; width: 28px; }
.tb { position: absolute; left: 0; width: 28px; height: 28px; display: grid; place-content: center; border-radius: 50%; background: #121a27; border: 1px solid var(--line-2); }
.tb .ni, .tb .fx .ic { width: 20px; height: 20px; }
.tb .fx b { font-size: 10px; }
.tb-4 { top: 72px; }
.tb-2 { top: 106px; }

/* ---------- the battle ---------- */
.cf { position: absolute; display: flex; flex-direction: column; box-shadow: 0 8px 20px rgba(0, 0, 0, .55); }
.cf-head { height: 32px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; gap: 8px;
  background: #5a1510; border-bottom: 2px solid #c0392b; color: #fff; }
.cf-head.gold { background: #4a3710; border-bottom-color: var(--gold); }
.cf-name { font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-count { flex: none; background: #245a94; border: 1px solid #6aa8e8; color: #e2f0ff; padding: 1px 10px; font-weight: 700; font-size: 14px; }
.cf-body { flex: 1; display: flex; min-height: 0; }
.cf-arena { position: relative; flex: 1; overflow: hidden; background: rgba(25, 12, 8, .55); border: 1px solid rgba(192, 57, 43, .35); border-top: 0; }
.cf-art { opacity: .85; }
.cf-arena::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 80% at 50% 50%, rgba(20, 6, 4, .2), rgba(20, 6, 4, .72)); }
.cf-arena > .cf-q, .cf-arena > .cf-mark { z-index: 1; }
.cf-mark { position: absolute; left: 50%; top: 50%; width: 120px !important; height: 120px !important; transform: translate(-50%, -50%); color: rgba(255, 230, 210, .07); }
.cf-q { position: absolute; width: 132px; height: 96px; }
.cf-pt { position: absolute; width: 58px; height: 58px; box-shadow: 0 0 0 2px var(--pc); }
.cf-pt .portrait { width: 100%; height: 100%; display: block; }
.cf-str { position: absolute; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px; background: #0b0f16; border: 2px solid var(--pc); font-weight: 800; font-size: 16px; }
.cf-str .ic { width: 16px; height: 16px; }
.cf-str.out { opacity: .55; }
.cf-gar { position: absolute; display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 14px; color: #d5dce4; }
.cf-gar .ic { width: 17px; height: 17px; color: var(--pc); }
.cf-cubes { position: absolute; display: flex; flex-wrap: wrap; gap: 0; width: 70px; }
.cf-cubes .ic { width: 16px; height: 16px; color: var(--pc); margin: -2px -2px 0 0; }
.q0 { left: 6px; top: 6px; } .q0 .cf-pt { left: 0; top: 0; } .q0 .cf-str { left: 0; top: 64px; } .q0 .cf-gar { left: 64px; top: 2px; } .q0 .cf-cubes { left: 64px; top: 26px; }
.q1 { right: 6px; top: 6px; } .q1 .cf-pt { right: 0; top: 0; } .q1 .cf-str { right: 0; top: 64px; } .q1 .cf-gar { right: 64px; top: 2px; } .q1 .cf-cubes { right: 64px; top: 26px; justify-content: flex-end; }
.q2 { left: 6px; bottom: 6px; } .q2 .cf-pt { left: 0; bottom: 0; } .q2 .cf-str { left: 64px; bottom: 0; } .q2 .cf-gar { left: 64px; bottom: 28px; } .q2 .cf-cubes { left: 64px; top: 4px; }
.q3 { right: 6px; bottom: 6px; } .q3 .cf-pt { right: 0; bottom: 0; } .q3 .cf-str { right: 64px; bottom: 0; } .q3 .cf-gar { right: 64px; bottom: 28px; } .q3 .cf-cubes { right: 64px; top: 4px; justify-content: flex-end; }
.cf-arena.n2 .q0, .cf-arena.n2 .q1 { top: 50%; margin-top: -48px; }
.cf-rewards { width: 92px; flex: none; display: flex; flex-direction: column; gap: 3px; padding: 4px; background: #5a1510; border: 1px solid rgba(192, 57, 43, .45); border-top: 0; }
.cf-r { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 3px 3px; background: #a3261c; border: 1px solid rgba(255, 190, 170, .25); }
.cf-r.off { opacity: .35; }
.cf-place { position: absolute; left: 4px; top: 1px; font-weight: 800; font-size: 13.5px; color: #ffe4dc; }
.cf-place sup { font-size: 9.5px; }
.cf-fx { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; }
.cf-fx .ni { width: 26px; height: 26px; }
.cf-fx .fx .ic { width: 22px; height: 22px; }
.cf-fx .fx.word { font-size: 13px; flex-direction: column; text-align: center; white-space: normal; line-height: 1.1; }
.stand-list { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 8px; background: rgba(12, 16, 26, .9); border: 1px solid rgba(242, 193, 78, .35); border-top: 0; }
.stand-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; background: rgba(255, 255, 255, .05); border-left: 3px solid var(--pc); }
.stand-row.win { background: rgba(242, 193, 78, .14); }
.rk { width: 18px; text-align: center; font: 800 16px var(--disp); color: var(--muted); }
.stand-row.win .rk { color: var(--gold); }
.st-pt .portrait { width: 34px; height: 34px; display: block; }
.stand-row small { display: block; color: var(--muted); font-size: 13.5px; }

/* ---------- the Imperium Row ---------- */
.strip { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: rgba(9, 15, 27, .88); border: 1px solid rgba(90, 140, 205, .4); box-shadow: 0 8px 20px rgba(0, 0, 0, .55); }
.strip-head { height: 54px; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; background: #132b4a; border: 1px solid #3a6aa3; color: #d7e7fa; font-weight: 700; font-size: 14px; letter-spacing: .04em; line-height: 1.1; }
.strip-head small { display: block; font-weight: 500; color: #9ab6d6; font-size: 13.5px; }
.strip-head.buying { background: #1a4c82; border-color: #7fc4ff; box-shadow: 0 0 14px rgba(90, 170, 255, .6); font-size: 15px; }
.row-glyph .ic { width: 30px; height: 30px; }
.strip-cards { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.strip-sep { height: 1px; flex: none; background: var(--line-2); margin: 2px 0; }
.sc { position: relative; flex: none; height: 102px; padding: 0; overflow: hidden; border: 2px solid #0b0f18; border-radius: 3px; background: #000; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); transition: transform .12s, border-color .12s, box-shadow .12s, opacity .15s; }
.sc.res { height: 84px; }
.sc:hover { transform: translateX(-4px); border-color: #8fb4dc; }
.sc-art, .sc-art .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-cost { position: absolute; right: 3px; top: 3px; width: 32px; height: 32px; display: grid; place-content: center; }
.sc-cost .ic { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-cost b { position: relative; font-weight: 800; font-size: 16px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.sc-left { position: absolute; right: 5px; bottom: 26px; font-weight: 800; font-size: 13.5px; background: rgba(0, 0, 0, .7); padding: 0 5px; border-radius: 2px; }
.sc-icons { position: absolute; left: 3px; top: 3px; display: flex; flex-direction: column; gap: 2px; }
.sc-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; background: rgba(4, 6, 12, .82); text-align: left; font-weight: 700; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc.buy { border-color: var(--gold-2); box-shadow: 0 0 14px rgba(255, 215, 120, .85); }
.sc.cant { opacity: .45; }
.cd-ic { width: 20px; height: 20px; display: grid; place-content: center; background: var(--ic); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); color: #0b0f16; }
.cd-ic .ic { width: 14px; height: 14px; }

/* ---------- the bar above your hand, and the hand ---------- */
.pbar { position: absolute; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; background: rgba(40, 12, 10, .92); border: 1px solid rgba(214, 90, 70, .6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.pbar.mine { background: rgba(58, 16, 12, .95); border-color: #e0864a; }
.pbar.empty { display: none; }
.pbar.flash { animation: pbar-flash 1.2s ease-out 2; }
@keyframes pbar-flash { 30% { box-shadow: 0 0 0 2px var(--gold-2), 0 0 26px rgba(255, 215, 120, .9); border-color: var(--gold-2); } }
.pb-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; line-height: 1.2; }
.pb-t small { color: #f3c9b8; font-weight: 500; }
.pb-t.dim { color: #d9c2ba; font-weight: 500; }
.pb-t .ni { width: 22px; height: 22px; }
.pb-t .ni b { font-size: 11px; }
.pb-t .fx .ic { width: 19px; height: 19px; }
.pbar .btn.sm { padding: 5px 10px; }
.stepper { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 18px; }
.stepper button { width: 30px; height: 30px; display: grid; place-content: center; border: 1px solid #7fb7ff; background: #173f6c; color: #fff; border-radius: 2px; }
.stepper button:disabled { opacity: .35; }
.stepper small { font-size: 14px; color: #f3c9b8; font-weight: 600; }
.fbtn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--fc); background: color-mix(in srgb, var(--fc) 20%, #0b0f16); color: #fff; padding: 4px 8px; border-radius: 2px; font-weight: 700; font-size: 14px; }
.fbtn .ic { width: 18px; height: 18px; color: var(--fc); }
.fbtn b { background: rgba(0, 0, 0, .4); padding: 0 5px; border-radius: 2px; }
.fbtn:hover { background: color-mix(in srgb, var(--fc) 40%, #0b0f16); }
.opt { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #7fb7ff; background: #173f6c; padding: 3px 7px; border-radius: 2px; }
.opt:disabled { opacity: .35; }
.opt .ni { width: 22px; height: 22px; }

.hand-tray { position: absolute; overflow: visible; }
.tray-tabs { position: absolute; left: 0; top: 22px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.tray-tabs button { display: flex; align-items: center; gap: 3px; width: 54px; padding: 4px 6px; border: 1px solid var(--line-2); background: rgba(12, 18, 30, .92); color: var(--muted); font-weight: 800; font-size: 14px; border-radius: 2px; }
.tray-tabs button .ic { width: 20px; height: 20px; }
.tray-tabs button.on { color: #fff; border-color: #7fb7ff; background: #173f6c; }
.tray-tabs button.hot { color: var(--gold-2); border-color: var(--gold-2); box-shadow: 0 0 10px rgba(255, 215, 120, .5); }
.tray-cards { position: absolute; left: 62px; right: 0; top: 0; height: 300px; display: flex; justify-content: center; align-items: flex-start; }
.tray-cards > * + * { margin-left: 8px; }
.tray-cards.n5 > * + * { margin-left: -20px; }
.tray-cards.n6 > * + * { margin-left: -47px; }
.tray-cards.n7 > * + * { margin-left: -65px; }
.tray-cards.n8 > * + * { margin-left: -77px; }
.tray-cards.n9 > * + * { margin-left: -87px; }
.tray-cards.n10 > * + * { margin-left: -94px; }
.tray-cards.n11 > * + * { margin-left: -100px; }
.tray-cards.n12 > * + * { margin-left: -105px; }
.tray-empty { align-self: center; margin-top: 30px; color: var(--muted); font-size: 15px; background: rgba(8, 12, 20, .7); padding: 8px 14px; }
.hand-tray .cd { transform: translateY(20px); transition: transform .18s ease, box-shadow .18s, filter .18s; }
.hand-tray .cd:hover { transform: translateY(-150px) scale(1.5); z-index: 10; }
.hand-tray .cd.sel { transform: translateY(-22px); z-index: 9; box-shadow: 0 0 0 3px var(--gold-2), 0 0 22px rgba(255, 215, 120, .8); }
.hand-tray .cd.sel:hover { transform: translateY(-150px) scale(1.5); }
.hand-tray .cd.can { cursor: grab; }
.hand-tray .cd.dim { filter: brightness(.55) saturate(.5); }
.hand-tray .cd.lifted { opacity: .35; }
.hand-tray .cd.playable { box-shadow: 0 0 0 3px var(--gold-2), 0 0 18px rgba(255, 215, 120, .7); }
.hand-tray .cd.shown { filter: brightness(.8); }
.played { position: absolute; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.played-l { font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.pcard { text-align: left; padding: 4px 8px; font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: #1c2433; border: 1px solid var(--line-2); border-left: 4px solid var(--fcol, #8d7b64); }
.st-action { position: absolute; }

.drag-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.drag-ghost .cd { position: absolute; left: 0; top: 0; transform: translate(-50%, -60%) scale(calc(var(--k) * .82)) rotate(-4deg); box-shadow: 0 16px 40px rgba(0, 0, 0, .7), 0 0 0 2px var(--gold-2); }

/* ---------- cards: name and cost, faction ribbon, picture with agent icons, agent box, reveal strip ---------- */
.cd {
  --fcol: #7c6a54;
  position: relative; flex: none; width: 154px; height: 216px; padding: 0; display: flex; flex-direction: column; text-align: left; color: var(--ink);
  background: #0d1017; border: 2px solid #05070b; border-radius: 7px; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); overflow: hidden;
}
.cd.f-emperor { --fcol: #b0473a; }
.cd.f-guild { --fcol: #d9532f; }
.cd.f-bg { --fcol: #8d5fd6; }
.cd.f-fremen { --fcol: #2f8fc9; }
.cd.f-neutral, .cd.f-reserve { --fcol: #9a7a4c; }
.cd.f-starter { --fcol: #6d6252; }
.cd.f-fold { --fcol: #2fa89e; }
.pcard.f-emperor { --fcol: #b0473a; } .pcard.f-guild { --fcol: #d9532f; } .pcard.f-bg { --fcol: #8d5fd6; } .pcard.f-fremen { --fcol: #2f8fc9; } .pcard.f-fold { --fcol: #2fa89e; }
.cd-head { position: relative; display: flex; align-items: center; gap: 4px; min-height: 27px; padding: 3px 4px 3px 7px; background: #171c26; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cd-name { flex: 1; min-width: 0; font: 700 12.5px var(--disp); line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: #f2eee6; }
.cd-cost { position: relative; width: 26px; height: 26px; flex: none; display: grid; place-content: center; margin: -2px -1px -2px 0; }
.cd-cost .ic { position: absolute; inset: 0; width: 100%; height: 100%; }
.cd-cost b { position: relative; font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.cd-tag { align-self: flex-start; padding: 1px 10px 1px 7px; background: var(--fcol); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.cd-art { position: relative; flex: 1; min-height: 54px; overflow: hidden; margin-top: 2px; border-top: 1px solid rgba(0, 0, 0, .6); border-bottom: 1px solid rgba(0, 0, 0, .6); }
.cd-art .scene { width: 100%; height: 100%; display: block; }
.cd-icons { position: absolute; left: 3px; top: 3px; display: flex; flex-direction: column; gap: 2px; }
.cd-box { flex: none; max-height: 104px; display: flex; flex-direction: column; gap: 3px; padding: 5px 6px 4px; background: #e6d8b9; color: #22170c; font-size: 12px; line-height: 1.24; overflow: hidden; }
.cd-agent { display: flex; gap: 4px; align-items: flex-start; }
.cd-mark { flex: none; width: 15px; height: 15px; display: grid; place-content: center; background: #22170c; color: #e6d8b9; border-radius: 2px; margin-top: 1px; }
.cd-mark .ic { width: 11px; height: 11px; }
.cd-txt { flex: 1; min-width: 0; }
.cd-txt .ni { width: 15px; height: 15px; vertical-align: -3px; }
.cd-txt .ni b { font-size: 8.5px; }
.cd-txt .ic, .cd-line .ic { width: 12px; height: 12px; vertical-align: -2px; }
.cd-txt .ic.troop, .cd-line .ic.troop { color: #6b737c; }
.cd-dim { color: #7a6a52; font-style: italic; }
.cd-line { font-size: 10.7px; padding-top: 2px; border-top: 1px dashed rgba(34, 23, 12, .25); }
.cd-line .ni { width: 14px; height: 14px; vertical-align: -3px; }
.cd-line .ni b { font-size: 8px; }
.cd-line.bond b { color: #5a2f7a; }
.cd-line.acq b { color: #2f5a2a; }
.cd-line.note { font-style: italic; color: #5a4630; }
.cd-reveal { flex: none; min-height: 32px; display: flex; align-items: center; gap: 4px; padding: 3px 5px; background: #0a0d14 var(--stars, none); background-size: 300px; border-top: 2px solid var(--fcol); color: #e8edf3; font-size: 11.1px; line-height: 1.2; }
.cd-mark.rv { background: #2a3446; color: #cfe0ff; }
.cd-reveal .ni.rv { width: 25px; height: 25px; }
.cd-reveal .ni.rv b { font-size: 12.5px; }
.rv-sw { display: inline-flex; }
.rv-sw .ic { width: 17px; height: 17px; margin-right: -4px; }
.cd-reveal .cd-txt .ic.troop { color: #cfd4da; }
.cd-reveal .cd-dim { color: #8a94a3; }
.cd.intr { --fcol: #b8923a; background: #14110b; }
.cd.intr .cd-head { background: #1f1a10; }
.cd.intr .cd-box { background: #2b2415; color: #f2e6c8; font-size: 12px; }
.cd.intr .cd-txt .ic.troop { color: #cfd4da; }
.cd.intr .cd-tag { background: #8a6a24; }
.cd.intr.k-combat .cd-tag { background: #a3261c; }
.cd.intr.k-endgame .cd-tag { background: #2f6f8f; }
.cd.intr .cd-reveal { font-style: italic; color: #d8c9a6; }
.cd.mini { zoom: .76; }
.cd.big { zoom: 1.62; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); }
.cd.on { box-shadow: 0 0 0 3px var(--red), 0 0 16px rgba(224, 69, 59, .8); }

/* ---------- leader cards ---------- */
.lc { position: relative; display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 8px; text-align: left; color: var(--ink); background: #0f141e; border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.lc-pt { position: relative; aspect-ratio: 1; overflow: hidden; border: 2px solid rgba(255, 255, 255, .12); }
.lc-pt .portrait { width: 100%; height: 100%; display: block; }
.lc-name { font: 700 14px var(--disp); line-height: 1.15; color: #f4ead4; margin-top: 2px; }
.lc-house { color: var(--muted); font-size: 14px; margin-top: -3px; }
.lc-box { background: #e6d8b9; color: #22170c; padding: 5px 7px 6px; font-size: 14px; line-height: 1.3; border-radius: 2px; }
.lc-box.sig { background: #d7c49a; }
.lc-h { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6a5236; margin-bottom: 1px; }
.lc-h .ic { width: 12px; height: 12px; }
.lc-box b { color: #3a1f0c; }
.lc.pick { cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.lc.pick:hover:not(:disabled) { border-color: var(--gold-2); transform: translateY(-3px); }
.lc.pick.mine { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(242, 193, 78, .35); }
.lc.pick.taken { opacity: .45; }
.lc.pick:disabled { cursor: default; }
.lc-who { font-size: 13.5px; font-weight: 700; color: #fff; background: var(--pc, #3a4453); padding: 3px 7px; border-radius: 2px; }
.lc-who.mine { background: var(--gold); color: #2a1c00; }
.lc.tipcard { width: 240px; }
#tip:has(> .lc) { padding: 0; background: none; border: 0; box-shadow: none; }

/* ---------- the chronicle drawer ---------- */
.logd { position: absolute; right: 0; top: 44px; bottom: 0; width: 380px; z-index: 40; display: flex; flex-direction: column; background: rgba(8, 12, 21, .97);
  border-left: 1px solid var(--line-2); box-shadow: -12px 0 30px rgba(0, 0, 0, .6); transform: translateX(105%); transition: transform .22s ease; }
.logd.open { transform: none; }
.log-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.log-head .x { margin-left: auto; }
.log-lines { flex: 1; overflow-y: auto; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.ln { font-size: 14px; color: #c3ccd8; padding: 2px 0 2px 8px; border-left: 3px solid var(--pc, rgba(255, 255, 255, .15)); }
.ln.sys { color: var(--gold-2); font-weight: 600; }
.ln.new { animation: flash 1.8s ease-out; }
@keyframes flash { from { background: rgba(242, 193, 78, .22); } to { background: transparent; } }
.rd { margin: 10px 0 2px; font: 700 13.5px var(--disp); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }

/* ---------- overlays: a new round, a battle's results, the end ---------- */
#overlay-root > * { z-index: 70; }
.round-banner { position: fixed; left: 0; right: 0; top: 34%; display: flex; justify-content: center; pointer-events: none; animation: rb-in .45s ease-out; }
.round-banner.out { opacity: 0; transition: opacity .6s; }
.rb-in { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 90px; min-width: min(640px, 92vw); background: rgba(6, 9, 16, .9); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); box-shadow: 0 0 60px rgba(0, 0, 0, .8); }
.rb-art { opacity: .75; }
.rb-in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 9, 16, .85), rgba(6, 9, 16, .35) 30%, rgba(6, 9, 16, .35) 70%, rgba(6, 9, 16, .85)); }
.rb-r, .rb-k { position: relative; z-index: 1; text-shadow: 0 2px 10px #000; }
.rb-r { font: 800 42px var(--disp); letter-spacing: .2em; color: #f4ead4; text-transform: uppercase; }
.rb-k { font-size: 18px; color: #ffcfbf; display: flex; align-items: center; gap: 6px; }
.rb-k em { font-style: normal; color: var(--muted); margin-left: 6px; }
@keyframes rb-in { from { transform: scaleX(.6); opacity: 0; } }
.battle-res, .game-over { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 4, 8, .72); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.br-panel { position: relative; width: min(900px, 100%); min-height: 420px; display: flex; gap: 20px; padding: 30px 30px 90px;
  background: radial-gradient(120% 90% at 80% 30%, #7a1a12 0%, #3a0c08 55%, #1a0504 100%); border: 1px solid #c0392b; box-shadow: 0 0 60px rgba(192, 57, 43, .45); }
.br-left { position: relative; flex: 1; min-width: 0; padding-top: 118px; }
.br-art { bottom: auto; height: 132px; left: -30px; right: -20px; top: -30px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); opacity: .9; }
.br-left h2 { position: absolute; left: 0; top: 60px; text-shadow: 0 2px 10px #000; }
.br-left h2 { font: 700 30px var(--disp); letter-spacing: .12em; color: #f2c89a; text-transform: uppercase; }
.br-left h3 { position: relative; font: 700 18px var(--disp); letter-spacing: .14em; color: #ffb9a8; text-transform: uppercase; margin: 4px 0 18px; }
.br-rows { display: flex; flex-direction: column; gap: 8px; }
.br-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; background: rgba(0, 0, 0, .35); border-left: 3px solid var(--pc); }
.br-row.win { background: rgba(242, 193, 78, .14); }
.br-place { width: 34px; font-weight: 800; color: #ffd3c4; text-transform: uppercase; font-size: 14px; }
.br-pt .portrait { width: 44px; height: 44px; display: block; box-shadow: 0 0 0 2px var(--pc); }
.br-name { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; }
.br-str { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 18px; }
.br-fx { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.br-none { color: #ffcfc2; padding: 20px 0; }
.br-hero { width: 290px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.br-hex { width: 210px; height: 236px; display: grid; place-content: center; background: var(--pc, #3a3a3a); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); padding: 5px; }
.br-hex .portrait { width: 200px; height: 226px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: block; }
.br-hex > .ic { width: 90px; height: 90px; color: #ffcfbf; }
.br-cap { text-align: center; }
.br-cap b { display: block; font: 700 24px var(--disp); color: #fff; }
.br-cap span { color: #ffb9a8; font-size: 17px; }
.br-go { position: absolute; left: 50%; bottom: 22px; width: 220px; height: 50px; margin-left: -110px; font-size: 20px; }
.go-panel { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 26px; background: radial-gradient(120% 90% at 50% 0%, #3a2c10 0%, #15100a 60%, #0a0805 100%); border: 1px solid var(--gold); box-shadow: 0 0 60px rgba(242, 193, 78, .3); }
.go-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 18px; }
.go-hero .br-hex { width: 150px; height: 168px; }
.go-hero .br-hex .portrait { width: 142px; height: 160px; }
.go-hero h2 { font-size: 32px; color: var(--gold-2); }
.go-hero p { margin: 0; color: #e8dcc0; }
.go-list { display: flex; flex-direction: column; gap: 6px; }
.go-list .stand-row { padding: 6px 10px 6px 6px; }
.go-list .st-pt .portrait { width: 42px; height: 42px; }
.go-res { display: inline-flex; gap: 4px; margin-right: 6px; }
.go-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------- modals, tooltips, toasts ---------- */
.modal-back { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 4, 8, .7); animation: fade .15s; }
.modal { width: 100%; max-width: 580px; max-height: calc(100vh - 32px); overflow: auto; background: #0d131f; border: 1px solid var(--line-2); box-shadow: 0 20px 60px rgba(0, 0, 0, .8);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.modal.wide { max-width: 900px; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.modal-head h2 { flex: 1; font-size: 20px; color: #f4ead4; }
.modal-body { padding: 6px 18px 18px; }
.modal-body p { margin: 0 0 10px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 0 18px 18px; }
.zoom { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.zoom-side { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.summary { display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); padding: 10px 12px; }
.sline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sline > span:first-child { width: 72px; flex: none; color: var(--muted); font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pile-title { margin: 14px 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pick-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.stack { position: relative; }
.count { position: absolute; top: -8px; right: -6px; z-index: 2; background: #173f6c; border: 1px solid #7fb7ff; font-weight: 800; font-size: 13.5px; padding: 0 6px; }
.who-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 12px; }
.who-row .lc { border-color: var(--pc); }
.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); text-align: left; font-weight: 600; font-size: 15px; }
.opt-row:hover { border-color: var(--gold-2); background: rgba(255, 255, 255, .07); }
.rules h3 { font-size: 16px; color: var(--gold-2); margin: 18px 0 6px; }
.rules p, .rules li { color: #d9e0e9; margin: 0 0 8px; }
.rules ul { padding-left: 18px; margin: 0; }
#tip { position: fixed; z-index: 85; max-width: 330px; pointer-events: none; padding: 10px 12px; background: rgba(8, 12, 21, .97); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .7); }
#tip:has(> .cd) { padding: 0; background: none; border: 0; box-shadow: none; max-width: none; }
.tip-title { font: 700 16px var(--disp); color: #f4ead4; margin-bottom: 6px; }
#tip .summary { background: none; border: 0; padding: 0; }
#tip p { margin: 8px 0 0; }
#toasts { position: fixed; left: 50%; top: 58px; z-index: 95; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 32px); max-width: 460px; }
.toast { background: rgba(10, 16, 28, .96); border: 1px solid var(--line-2); padding: 10px 16px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); animation: fade .2s; text-align: center; }
.toast.err { border-color: #a33a30; color: #ffc4bb; }
.toast.good { border-color: var(--gold); color: var(--gold-2); }
body.on-stage #toasts { top: auto; bottom: 26%; }

/* ---------- phones: the same pieces, stacked ---------- */
.table-compact { min-height: 100vh; padding-bottom: calc(var(--dock-h) + 16px); }
html:has(.table-compact) { scroll-padding-top: 70px; scroll-padding-bottom: calc(var(--dock-h) + 10px); }
.cp-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; background: rgba(4, 6, 11, .96); border-bottom: 1px solid var(--line); }
.cp-top { flex-wrap: wrap; row-gap: 2px; }
.cp-top .brand-mini span { display: none; }
.cp-top .round { font-size: 14px; flex: 1; }
.cp-top .headline { order: 5; flex: 1 1 100%; font-size: 14.5px; text-align: left; white-space: normal; line-height: 1.25; padding-bottom: 2px; }
.cp-top .ti { width: 32px; height: 30px; }
.cp-body { padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.cp-players { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.cp-players .pp { position: relative; flex: none; width: 236px; height: 96px; }
.cf.flow { position: relative; min-height: 250px; }
.cp-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cp-region { background: rgba(10, 15, 25, .82); border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); padding: 8px; grid-column: 1 / -1; }
.cp-region.faction { grid-column: auto; }
.cp-rh { display: flex; align-items: center; gap: 6px; font: 700 14px var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--fc); margin-bottom: 6px; }
.cp-rh .ic { width: 18px; height: 18px; }
.cp-spaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cp-region.faction .cp-spaces { grid-template-columns: 1fr; }
.cp-spaces .bs { position: relative; height: 80px; width: 100%; margin-bottom: 14px; }
.cp-region .trk { position: relative; flex-direction: row; height: 34px; margin-bottom: 8px; }
.cp-region .trk-top { width: 34px; height: 34px; }
.cp-region .trk-top .ic { width: 20px; height: 20px; }
.cp-region .trk-levels { flex-direction: row-reverse; height: 30px; margin: 0 0 0 6px; flex: 1; }
.cp-region .lv { border-bottom: 0; border-left: 1px solid rgba(0, 0, 0, .45); }
.cp-region .lv::before { display: none; }
.cp-region .trk-side { display: none; }
.cp-sec { background: rgba(10, 15, 25, .82); border: 1px solid var(--line); padding: 8px; }
.cp-title { display: flex; align-items: center; gap: 6px; font: 700 14px var(--disp); letter-spacing: .08em; text-transform: uppercase; color: #9fc2e8; margin-bottom: 6px; }
.strip.flow { position: relative; padding: 0; background: none; border: 0; box-shadow: none; }
.strip.flow .strip-cards { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
.strip.flow .sc { width: 124px; }
.strip.flow .strip-sep { width: 1px; height: auto; }
.logd.flow { position: relative; z-index: auto; top: auto; right: auto; width: auto; transform: none; max-height: 340px; box-shadow: none; border: 1px solid var(--line); }
.cp-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(4, 6, 11, .97); border-top: 1px solid var(--line-2); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
.cp-dock .pbar { position: relative; min-height: 42px; flex-wrap: wrap; padding: 6px 8px 6px 12px; }
.hand-tray.flow { position: relative; height: 172px; margin-top: 6px; }
.hand-tray.flow .tray-tabs { top: 6px; }
.hand-tray.flow .tray-cards { left: 60px; height: 172px; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding-top: 6px; }
.hand-tray.flow .tray-cards > * + * { margin-left: 6px !important; }
.hand-tray.flow .cd { zoom: .74; transform: none; }
.hand-tray.flow .cd:hover { transform: none; }
.hand-tray.flow .cd.sel { transform: translateY(-4px); }

@media (max-width: 1100px) {
  .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .land-grid, .lobby-grid { grid-template-columns: minmax(0, 1fr); }
  .leaders-show { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cp-board { grid-template-columns: minmax(0, 1fr); }
  .cp-region.faction { grid-column: 1 / -1; }
  .leaders-show, .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-box { font-size: 13.5px; }
  .br-panel { flex-direction: column; padding: 20px 16px 84px; }
  .br-hero { width: auto; }
  .br-hex { width: 150px; height: 168px; }
  .br-hex .portrait { width: 142px; height: 160px; }
  .rb-r { font-size: 30px; }
  .cd.big { width: 210px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- painted pictures ---------- */
.art { position: absolute; inset: 0; overflow: hidden; container-type: size; pointer-events: none; }
.art > i { position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--ar))); height: max(100cqh, calc(100cqw / var(--ar)));
  transform: translate(-50%, -50%); background-repeat: no-repeat; }
.portrait { display: block; background: #15100b center 30% / cover no-repeat; }
.portrait.none { background: radial-gradient(circle at 50% 38%, #6b5a45, #15100b 70%); }
.pp-pt .portrait, .cf-pt .portrait, .st-pt .portrait, .br-pt .portrait, .seat-pt .portrait { background-size: 165%; background-position: 50% 34%; }
.cd-art .art, .sc-art .art { inset: 0; }

/* ---------- the turn clock ---------- */
.tclock { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, .6); overflow: hidden; z-index: 3; pointer-events: none; }
.tclock.off { display: none; }
.tclock i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--f, 1)); background: #46c46a; transition: background-color .4s; }
.tclock.warn i { background: #f2c14e; }
.tclock.low i { background: #e0453b; }
.tclock em { display: none; }
.tclock.pill { position: relative; left: auto; right: auto; bottom: auto; width: 68px; height: 24px; flex: none; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .45); }
.tclock.pill i { opacity: .6; }
.tclock.pill em { display: block; position: relative; z-index: 1; text-align: center; font-style: normal; font-weight: 800; font-size: 14px; line-height: 22px; color: #fff; text-shadow: 0 1px 2px #000; }
.tclock.pill.low { border-color: #ff8a80; box-shadow: 0 0 10px rgba(224, 69, 59, .7); }
.pp.mine .tclock { height: 6px; }
.timer-set { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.timer-set .lbl { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 0 0; }
.timer-set .lbl .ic { width: 16px; height: 16px; }
.chip { padding: 4px 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); border-radius: 14px; font-weight: 700; font-size: 14px; color: var(--muted); }
button.chip:hover { border-color: var(--gold-2); color: #fff; }
.chip.on { border-color: var(--gold); color: var(--gold-2); background: rgba(242, 193, 78, .12); }
.timer-note { margin: 4px 0 14px !important; }

/* ---------- sound settings ---------- */
.onoff { font-size: 13.5px; padding: 2px 9px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--muted); }
.onoff.on { background: rgba(70, 196, 106, .2); color: #8ff0ae; }
.opt-row.vol input { width: 170px; accent-color: var(--gold); }

/* ---------- moves as they happen ---------- */
.st-fx { position: absolute; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.cp-fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.fx-card { position: absolute; width: 154px; height: 216px; pointer-events: none; will-change: transform, opacity; }
.fx-card > .cd { box-shadow: 0 0 0 3px var(--pc, var(--gold-2)), 0 0 30px color-mix(in srgb, var(--pc, #ffd978) 70%, transparent), 0 18px 40px rgba(0, 0, 0, .8); }
.fx-card.bought > .cd { box-shadow: 0 0 0 3px var(--gold-2), 0 0 30px rgba(255, 215, 120, .85), 0 18px 40px rgba(0, 0, 0, .8); }
.fx-ring { position: absolute; pointer-events: none; border: 3px solid var(--rc); border-radius: 6px; box-shadow: 0 0 20px var(--rc), inset 0 0 20px var(--rc); }
.fx-ring.big { border-radius: 50%; }
.fx-cube { position: absolute; width: 26px; height: 26px; color: var(--pc); filter: drop-shadow(0 0 6px var(--pc)) drop-shadow(0 3px 3px rgba(0, 0, 0, .7)); }
.fx-cube .ic { width: 26px; height: 26px; }
.fx-fan { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fan-cards { position: relative; height: 186px; }
.fan-c { position: absolute; left: calc(var(--i) * 44px); top: 0; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 3deg)) scale(.82); transform-origin: 0 100%; }
.fan-c > .cd { box-shadow: 0 0 0 2px var(--pc), 0 10px 24px rgba(0, 0, 0, .7); }
.fan-sum { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 8px; background: rgba(8, 12, 20, .92); border: 1px solid var(--pc); border-left-width: 4px; font-weight: 800; font-size: 18px; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
.fan-sum .ni { width: 30px; height: 30px; }
.fan-sum .ni b { font-size: 14px; }
.fan-sum .sw { display: inline-flex; align-items: center; gap: 2px; }
.fan-sum .sw .ic { width: 22px; height: 22px; }
.fx-peek { position: fixed; left: 50%; top: 104px; transform: translateX(-50%); }
.fx-peek > .cd { box-shadow: 0 0 0 3px var(--pc, var(--gold-2)), 0 0 24px var(--pc, var(--gold-2)), 0 16px 40px rgba(0, 0, 0, .8); }
.fx-gain { position: absolute; display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px 2px 7px; border-radius: 14px; background: rgba(8, 22, 12, .94); border: 1px solid #5fd38a; color: #b9ffd0;
  font-weight: 800; font-size: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .6); white-space: nowrap; z-index: 2; }
.fx-gain.neg { background: rgba(30, 8, 8, .94); border-color: #e0453b; color: #ffb2aa; }
.fx-gain .ni, .fx-gain > .ic { width: 22px; height: 22px; }
.fx-gain .ic.troop { color: var(--pc); }
.bs-pawn.await { opacity: 0; }
.bs.last { box-shadow: 0 0 0 1px var(--lc), 0 0 16px var(--lc), 0 5px 12px rgba(0, 0, 0, .5); }
.bs.last .bs-frame { background: var(--lc); }

/* the caption: who just did what */
.st-caption { position: absolute; left: 466px; width: 580px; top: 640px; height: 40px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 55; }
.cp-caption { position: fixed; left: 8px; right: 8px; bottom: calc(var(--dock-h) + 10px); z-index: 55; display: flex; justify-content: center; pointer-events: none; }
.cp-caption .cap-in { white-space: normal; font-size: 14px; line-height: 1.25; }
.st-caption, .cp-caption { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.st-caption.show, .cp-caption.show { opacity: 1; transform: none; }
.cap-in { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 3px 14px 3px 3px; background: rgba(6, 9, 16, .9); border: 1px solid color-mix(in srgb, var(--pc, #f2c14e) 70%, transparent);
  border-left: 4px solid var(--pc, var(--gold)); box-shadow: 0 6px 18px rgba(0, 0, 0, .6), 0 0 16px color-mix(in srgb, var(--pc, #f2c14e) 30%, transparent);
  font-size: 15px; font-weight: 600; color: #f1f4f8; white-space: nowrap; }
.cap-in span { overflow: hidden; text-overflow: ellipsis; }
.cap-in.sys { color: var(--gold-2); }
.cap-pt { width: 32px; height: 32px; flex: none; border-radius: 50%; background-size: 165% !important; background-position: 50% 34% !important; }
.cap-ic { width: 22px; height: 22px; color: var(--gold); margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .fx-card, .fx-cube, .fx-fan, .fx-peek { display: none; } }
.opt-row.danger { color: #ffb2aa; border-color: rgba(224, 69, 59, .45); }
.opt-row.danger:hover { background: rgba(224, 69, 59, .14); }

/* ---------- a smoother finish: rounded glass panels, eased motion everywhere ---------- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:root { --ease: cubic-bezier(.22, .8, .24, 1); --soft: 0 10px 30px rgba(0, 0, 0, .45); --book: 'Crimson Pro', Georgia, serif; }
button, .sc, .bs, .pp, .pile, .chip, .opt-row, .fbtn, .opt, .lc, .table-item, .seat {
  transition: background-color .28s ease, border-color .28s ease, box-shadow .35s ease, transform .35s var(--ease), opacity .3s ease, filter .35s ease, color .25s ease; }
.btn { border-radius: 9px; }
.btn:active, .big-btn:active, .pile:active, .chip:active, .fbtn:active, .opt:active { transform: scale(.97); }
.big-btn { border-radius: 14px; clip-path: none; transition: background-color .3s ease, box-shadow .4s ease, filter .3s ease, transform .3s var(--ease); }
.x { border-radius: 8px; }
.field { border-radius: 9px; transition: border-color .25s ease, box-shadow .3s ease; }
.field:focus { box-shadow: 0 0 0 3px rgba(255, 217, 120, .18); }

.panel, .modal { clip-path: none; border-radius: 18px; }
.panel { background: rgba(11, 16, 27, .9); }
.modal-back { background: rgba(2, 4, 8, .78); animation: fade .3s ease; }
.modal { animation: modalIn .38s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
#tip { border-radius: 12px; }
.toast { border-radius: 12px; animation: toastIn .4s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } }

.pp { border-radius: 12px; background: rgba(12, 18, 30, .9); box-shadow: var(--soft); }
.pp.turn { box-shadow: 0 0 0 1px var(--pc), 0 0 24px color-mix(in srgb, var(--pc) 50%, transparent), var(--soft); }
.pp-pt { border-radius: 9px; overflow: hidden; }
.pp-name { border-radius: 0; }
.feed { border-radius: 12px; background: rgba(8, 12, 20, .72); }
.strip { border-radius: 14px; background: rgba(9, 15, 27, .9); }
.strip-head { border-radius: 9px; }
.sc { border-radius: 10px; }
.sc:hover { transform: translateX(-5px) scale(1.01); }
.cf { border-radius: 14px; overflow: hidden; }
.cf-pt { border-radius: 10px; overflow: hidden; }
.cf-str { border-radius: 8px; }
.cf-r { border-radius: 8px; }
.cf-rewards { border-radius: 0 0 14px 0; }
.pbar { clip-path: none; border-radius: 14px; }
.cd { border-radius: 11px; }
.hand-tray .cd { transition: transform .38s var(--ease), box-shadow .35s ease, filter .35s ease, opacity .3s ease; }
.pcard { border-radius: 8px; }
.tray-tabs button { border-radius: 9px; }
.pile { border-radius: 8px; }
.bdg, .ally-dot { transition: box-shadow .4s ease; }

.bs-frame { clip-path: none; border-radius: 13px; transition: background-color .35s ease; }
.bs-in { clip-path: none; border-radius: 11px; }
.bs:hover { transform: translateY(-2px); }
.bs.chosen { transform: translateY(-2px) scale(1.03); }
.bs.over { transform: translateY(-3px) scale(1.06); }
.maker { border-radius: 14px; }
.flag { transition: background-color .4s ease; }
.trk-top { transition: border-color .4s ease, box-shadow .5s ease; }
.trk-levels { clip-path: none; border-radius: 10px; overflow: hidden; }
.mk { border-radius: 3px; transition: transform .4s var(--ease); }
.tb { transition: box-shadow .4s ease; }

.lc { border-radius: 14px; }
.lc-pt { border-radius: 10px; }
.lc-box { border-radius: 8px; }
.lc-credit { font-size: 12.5px; color: var(--dim); font-style: italic; line-height: 1.25; margin-top: -2px; }
.lc.pick:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .55); }
.seat, .table-item { border-radius: 12px; }
.seat-pt { border-radius: 10px; overflow: hidden; }
.chip { border-radius: 999px; }

.round-banner { animation: rb-in .7s var(--ease); }
.round-banner.out { opacity: 0; transform: translateY(-12px); transition: opacity .9s ease, transform .9s ease; }
.rb-in { border-radius: 16px; border: 1px solid rgba(242, 193, 78, .6); }
@keyframes rb-in { from { transform: scale(.92); opacity: 0; } }
.battle-res, .game-over { animation: fade .45s ease; }
.br-panel, .go-panel { border-radius: 20px; overflow: hidden; animation: panelIn .6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.br-row, .stand-row { border-radius: 10px; }
.br-row { animation: rowIn .55s var(--ease) both; }
.br-row:nth-child(2) { animation-delay: .12s; } .br-row:nth-child(3) { animation-delay: .24s; } .br-row:nth-child(4) { animation-delay: .36s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-16px); } }

/* things that arrive glide in instead of popping */
.strip-cards > .m-in { animation: mInSide .7s var(--ease); }
.feed > .m-in, .log-lines > .m-in, .tables > .m-in { animation: mInUp .6s var(--ease); }
@keyframes mInSide { from { opacity: 0; transform: translateX(28px) scale(.96); } }
@keyframes mInUp { from { opacity: 0; transform: translateY(10px); } }
.bump { animation: bump 1s var(--ease); }
@keyframes bump { 30% { transform: scale(1.28); filter: drop-shadow(0 0 7px var(--gold)); } }
.logd { transition: transform .45s var(--ease); border-radius: 14px 0 0 0; }
#stage { animation: stIn .7s ease; }
@keyframes stIn { from { opacity: 0; } }
.bs-pawn.fresh { animation: pawn-drop .7s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes pawn-drop { from { transform: translateY(-46px) scale(1.4); opacity: 0; } 60% { opacity: 1; } }
.st-caption, .cp-caption { transition: opacity .45s ease, transform .45s var(--ease); }
.cap-in { border-radius: 999px; padding-right: 18px; }
.fx-gain { border-radius: 999px; }

/* ---------- cards, refined: a metal edge, a header in the faction's colour, framed art, parchment rules ---------- */
.cd { border: 0; border-radius: 12px; padding: 0 0 4px; background: linear-gradient(180deg, #151a24 0%, #0c0f16 60%, #090b10 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), inset 0 0 0 1px color-mix(in srgb, var(--fcol) 55%, #c9a45a), inset 0 0 0 2px rgba(0, 0, 0, .55), 0 8px 20px rgba(0, 0, 0, .55); }
.cd::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transform: translateX(-70%);
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, .04) 52%, transparent 62%); transition: transform 1s var(--ease), opacity .4s ease; }
.cd:hover::after { opacity: 1; transform: translateX(70%); }
.cd-head { min-height: 28px; margin: 2px 2px 0; padding: 4px 4px 3px 8px; border: 0; border-radius: 10px 10px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fcol) 62%, #1a1f2a) 0%, color-mix(in srgb, var(--fcol) 26%, #10141c) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .4); }
.cd-name { font: 700 12.5px var(--disp); letter-spacing: .035em; color: #fbf4e4; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.cd-cost { width: 27px; height: 27px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
.cd-tag { margin: 3px 0 0 6px; padding: 1px 9px 1px 7px; border-radius: 3px 10px 10px 3px; clip-path: none; font-size: 10.1px; letter-spacing: .12em;
  background: linear-gradient(90deg, var(--fcol), color-mix(in srgb, var(--fcol) 60%, #0c0f16)); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.cd-art { margin: 3px 5px 0; border: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .6); }
.cd-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45) 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.cd-icons { z-index: 2; left: 4px; top: 4px; gap: 3px; }
.cd-box { margin: 4px 5px 0; padding: 5px 7px 5px; border-radius: 7px; font: 500 13px/1.16 var(--book); color: #2a1a0a;
  background: radial-gradient(130% 150% at 50% 0%, #f4ead2 0%, #e6d6b0 55%, #d3bd8e 100%); box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .35), inset 0 0 12px rgba(120, 80, 30, .18), 0 1px 3px rgba(0, 0, 0, .5); }
.cd-box b { font-weight: 700; }
.cd-mark { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a3a26, #1c1409); color: #f0dcb0; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.cd-line { font-size: 12px; border-top: 1px solid rgba(90, 60, 20, .22); }
.cd-dim { color: #7a6242; }
.cd-reveal { margin: 4px 5px 0; min-height: 30px; padding: 3px 6px; border: 0; border-radius: 7px; font: 500 12.5px/1.15 var(--book); color: #e9eef5;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fcol) 18%, #0e131c), #080a0f); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fcol) 70%, #d9b45c), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.cd-mark.rv { background: radial-gradient(circle at 35% 30%, #3b4a66, #141c2c); color: #d8e6ff; }
.cd.intr { --fcol: #b8923a; background: linear-gradient(180deg, #1c170d 0%, #110d07 100%); }
.cd.intr .cd-box { background: radial-gradient(130% 150% at 50% 0%, #3a2f1a 0%, #2a2213 60%, #1d170c 100%); color: #f3e7c6; box-shadow: inset 0 0 0 1px rgba(217, 180, 92, .35), 0 1px 3px rgba(0, 0, 0, .5); }
.cd.intr .cd-reveal { font-style: italic; color: #e2d2a8; }

/* agent icons: small enamel badges */
.cd-ic { width: 21px; height: 21px; border-radius: 6px; clip-path: none; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 72%, #fff) 0%, var(--ic) 42%, color-mix(in srgb, var(--ic) 62%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .55); }
.cd-ic .ic { width: 15px; height: 15px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
.cd-ic[style*="#a9b3bd"] { color: #1b2028; }
.cd-ic[style*="#a9b3bd"] .ic { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }

/* the Imperium Row: framed, with a name plate */
.sc { border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(201, 164, 90, .45), 0 6px 14px rgba(0, 0, 0, .55); }
.sc::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 55%, rgba(0, 0, 0, .55)); }
.sc > * { z-index: 1; }
.sc-name { font: 700 12.5px var(--disp); letter-spacing: .05em; background: linear-gradient(0deg, rgba(4, 6, 12, .92), rgba(4, 6, 12, .6)); border-top: 1px solid rgba(201, 164, 90, .35); }
.sc.buy { box-shadow: 0 0 0 2px var(--gold-2), 0 0 18px rgba(255, 215, 120, .75), 0 6px 14px rgba(0, 0, 0, .55); border: 0; }

/* board spaces: a bevelled frame in the area's colour */
.bs-frame { background: linear-gradient(155deg, color-mix(in srgb, var(--ac) 78%, #fff) 0%, var(--ac) 35%, color-mix(in srgb, var(--ac) 55%, #000) 100%); }
.bs-in { inset: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 10px 24px rgba(0, 0, 0, .35); }
.bs-tab { background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 30%, rgba(10, 14, 23, .9)), rgba(10, 14, 23, .82)); }
.bs-glyph { width: 25px; height: 25px; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ac) 55%, transparent)) drop-shadow(0 1px 1px #000); }
.trk-top .ic { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }

/* ---------- where a picture comes from ---------- */
.pic-credit { display: flex; gap: 7px; align-items: flex-start; margin: 14px 0 0; padding: 9px 11px; border-radius: 10px; background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line); font: 500 14px/1.35 var(--book); color: #d9d1c0; }
.pic-credit .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gold); }
.pic-credit b { color: #f4ead4; font-weight: 600; }
.modal-art { position: relative; display: block; height: 150px; margin: -4px 0 14px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.credits ul { list-style: none; padding: 0; margin: 10px 0 0; columns: 2 340px; column-gap: 26px; }
.credits li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--line); font: 500 14px/1.35 var(--book); color: #cfc7b6; }
.credits li b { font-family: var(--ui); font-weight: 700; font-size: 14px; color: #f4ead4; }
.credits a, .fine a { color: var(--gold-2); }
.credits .lic { font: 700 12px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

/* ---------- the modules ---------- */
.a-ix .bs-glyph { color: #9ff0e6; }
.a-tleilax .bs-glyph { color: #ffb3c9; }
.cd.f-tleilax { --fcol: #b04a6e; }
.pcard.f-tleilax { --fcol: #b04a6e; }
.ic.dread { color: var(--pc, #cfd6de); }
.fx .ic.dread, .bi .ic.dread, .cd-txt .ic.dread { color: #aeb9c6; }
.bs-pawn.second { right: 44px; top: 16px; width: 32px; height: 42px; filter: drop-shadow(0 0 6px var(--pc)) drop-shadow(0 3px 3px rgba(0, 0, 0, .7)); opacity: .95; }
.kw { font-weight: 800; color: #5a2438; }
.kw .ic { width: 12px; height: 12px; vertical-align: -2px; }
.cd-cost.spec .ic, .sc-cost.spec .ic { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.sc-cost.spec b, .cd-cost.spec b { text-shadow: 0 1px 2px #000, 0 0 4px #000; }

/* tracks: shipping, research, the Tleilaxu */
.tk { border-radius: 10px; background: rgba(8, 12, 20, .88); border: 1px solid var(--line-2); padding: 5px 6px 6px; }
.tk-h { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tk-h .ic { width: 15px; height: 15px; }
.tk-h small { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--dim); }
.tk-cells { display: flex; gap: 3px; }
.tk-c { position: relative; flex: 1; min-width: 0; min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding: 2px 1px;
  border-radius: 6px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); }
.tk-c.start { background: rgba(255, 255, 255, .02); }
.tk-c em { position: absolute; left: 3px; top: 0; font-style: normal; font-size: 10px; font-weight: 800; color: var(--dim); }
.tk-fx { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; margin-top: 7px; }
.tk-fx .ni { width: 17px; height: 17px; } .tk-fx .ni b { font-size: 8.5px; }
.tk-fx .fx .ic, .tk-fx > .ic { width: 15px; height: 15px; }
.tk-fx .fx b, .tk-fx .fx small { font-size: 9px; }
.tk-mk { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: auto; }
.tk-mk .mk { width: 7px; height: 7px; }
.tk-tleilax .tk-c { border-color: rgba(208, 88, 126, .25); }
.tk-research .tk-c { border-color: rgba(120, 180, 240, .25); }
.tk-freight .tk-c { border-color: rgba(63, 193, 176, .3); }

/* the market strip: tabs, technology tiles, the Tleilaxu row */
.strip-tabs { display: flex; gap: 4px; flex: none; }
.strip-tabs button { flex: 1; height: 30px; display: grid; place-content: center; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--muted); position: relative; }
.strip-tabs button .ic { width: 19px; height: 19px; }
.strip-tabs button.on { background: #173f6c; border-color: #7fb7ff; color: #fff; }
.strip-tabs button.hot::after { content: ''; position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 8px var(--gold-2); }
.spend-spec { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-weight: 800; }
.spend-spec .ic { width: 20px; height: 20px; }
.market { overflow-y: auto; scrollbar-width: none; gap: 7px; }
.market::-webkit-scrollbar { display: none; }
.mk-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #d7e7fa; padding: 2px 2px 0; }
.mk-h .ic { width: 16px; height: 16px; }
.mk-h small { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--dim); }
.mk-mine { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.mk-l { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: #cfe0f5; }
.mk-l .ic { width: 16px; height: 16px; }
.mk-l.dim { color: var(--dim); font-weight: 600; }
.mk-empty { color: var(--dim); font-size: 13.5px; margin: 0; }
.tchip { display: flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 8px; background: rgba(63, 193, 176, .12); border: 1px solid rgba(63, 193, 176, .35); font-size: 13.5px; font-weight: 700; color: #c6f5ef; }
.tchip .ic { width: 14px; height: 14px; }
.tt { position: relative; flex: none; display: flex; flex-direction: column; gap: 3px; padding: 6px 7px 7px; min-height: 118px; text-align: left; overflow: hidden; border-radius: 10px;
  border: 0; color: var(--ink); background: #0b1418; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(63, 193, 176, .45), 0 6px 14px rgba(0, 0, 0, .5); }
.tt .tt-art { opacity: .5; }
.tt::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 12, 14, .2), rgba(5, 12, 14, .88) 55%); }
.tt > *:not(.art) { position: relative; z-index: 1; }
.tt-cost { align-self: flex-end; margin: -2px -2px 0 0; }
.tt-cost .ni { width: 28px; height: 28px; } .tt-cost .ni b { font-size: 13px; }
.tt-name { display: flex; align-items: center; gap: 4px; font: 700 13px var(--disp); letter-spacing: .03em; text-transform: uppercase; color: #dffcf8; margin-top: auto; }
.tt-name .ic { width: 14px; height: 14px; flex: none; }
.tt-txt { font: 500 13.5px/1.2 var(--book); color: #d7e3e2; }
.tt.buy { box-shadow: 0 0 0 2px var(--gold-2), 0 0 16px rgba(255, 215, 120, .75), 0 6px 14px rgba(0, 0, 0, .5); }
.tt.cant { opacity: .5; }
.tt:hover { transform: translateX(-4px); }
.tt.big { width: 260px; min-height: 190px; }
.tt.big .tt-txt { font-size: 15px; }
.tech-zoom { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.tech-opt { gap: 5px; font-weight: 700; font-size: 14px; }
.tech-opt .ni { width: 20px; height: 20px; }

/* the houses' counts for the modules */
.pp-mod { position: absolute; right: 6px; top: 34px; display: flex; gap: 3px; z-index: 2; }
.pp.mine .pp-mod { top: 40px; }
.mc { display: inline-flex; align-items: center; gap: 1px; padding: 1px 4px 1px 2px; border-radius: 7px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .1); font-weight: 800; font-size: 13px; }
.mc .ic { width: 15px; height: 15px; }
.mc .ic.dread { color: #c9d3de; }

/* the lobby: modules */
.mod-set { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 2px; }
.mod-set .lbl { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 0 0; }
.mod-set .lbl .ic { width: 16px; height: 16px; }
.chip.mod { display: inline-flex; align-items: center; gap: 5px; }
.chip.mod .ic { width: 15px; height: 15px; }
.lc-mod { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 6px; border-radius: 8px; font-size: 12.5px; font-weight: 700; vertical-align: 1px; }
.lc-mod .ic { width: 12px; height: 12px; }
.lc-mod.m-ix { background: rgba(63, 193, 176, .16); color: #9ff0e6; }
.lc-mod.m-tlx { background: rgba(208, 88, 126, .18); color: #ffb3c9; }
.show-title small { font: 500 14px var(--ui); color: var(--muted); margin-left: 8px; letter-spacing: 0; text-transform: none; }

/* animations */
.fx-tech { position: absolute; pointer-events: none; }
.fx-tech > .tt { box-shadow: 0 0 0 2px var(--pc, #3fc1b0), 0 0 24px var(--pc, #3fc1b0), 0 14px 30px rgba(0, 0, 0, .8); }
.fx-cube.dread { width: 34px; height: 34px; }
.fx-cube.dread .ic { width: 34px; height: 34px; }
.cf-cubes .ic.dread { width: 22px; height: 22px; margin: -3px 1px 0 0; color: var(--pc); filter: drop-shadow(0 0 3px var(--pc)); }

.feed[hidden] { display: none; }
.st-caption.high { top: 50px; }
/* rival panels with modules: the counts get their own row */
.pp:not(.mine) .pp-mod { top: auto; bottom: 3px; left: 6px; right: 6px; justify-content: flex-start; }
.pp.mine .pp-mod { left: 102px; right: auto; top: 40px; }
.cp-players .pp:has(.pp-mod) { height: 118px; }

.market .tk-cells { flex-wrap: wrap; row-gap: 3px; }
.market .tk-c { flex: 0 0 calc(20% - 2.4px); min-height: 38px; }

.hand-tray.picking .cd:hover, .hand-tray.picking .cd.sel:hover { transform: translateY(-22px); z-index: 9; }
.hand-tray.picking .cd:not(.sel):hover { transform: translateY(8px); }
#tip { pointer-events: none; }

/* ---------- the board: one frame, a plate for each section, Arrakis as a map ---------- */
.board { position: absolute; border-radius: 20px; background: rgba(6, 9, 15, .78); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(201, 164, 90, .3), inset 0 0 0 1px rgba(0, 0, 0, .7), 0 20px 50px rgba(0, 0, 0, .55); }
.board::before { content: ''; position: absolute; inset: 4px; border-radius: 17px; border: 1px solid rgba(201, 164, 90, .13); }
.bsec { position: absolute; border-radius: 14px; pointer-events: none; }
.sec-t { position: absolute; z-index: 1; left: 12px; top: 5px; font: 700 12.5px var(--disp); letter-spacing: .24em; text-transform: uppercase; color: var(--st, #d9c9a3); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.sec-factions { overflow: hidden; background:
  linear-gradient(90deg, rgba(169, 179, 189, .16), rgba(169, 179, 189, .03)) 0 2px / 100% 156px no-repeat,
  linear-gradient(90deg, rgba(224, 69, 59, .17), rgba(224, 69, 59, .03)) 0 160px / 100% 156px no-repeat,
  linear-gradient(90deg, rgba(160, 102, 224, .17), rgba(160, 102, 224, .03)) 0 318px / 100% 156px no-repeat,
  linear-gradient(90deg, rgba(53, 166, 222, .17), rgba(53, 166, 222, .03)) 0 476px / 100% 156px no-repeat; }
.sec-factions .sec-t { display: none; }
.sec-landsraad { --st: #9be8ab; background: linear-gradient(180deg, rgba(62, 196, 82, .17), rgba(62, 196, 82, .05)); box-shadow: inset 0 0 0 1px rgba(62, 196, 82, .34); }
.sec-choam { --st: #ffd78a; background: linear-gradient(180deg, rgba(242, 169, 28, .17), rgba(242, 169, 28, .05)); box-shadow: inset 0 0 0 1px rgba(242, 169, 28, .34); }
.sec-choam.ix { --st: #ffd78a; }
.sec-arrakis { --st: #ffe0b0; overflow: hidden; background: #4a2c14 url(pics/map.webp) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(242, 169, 28, .4); }
.sec-arrakis::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 3, .62) 0%, rgba(10, 6, 3, .3) 22%, rgba(10, 6, 3, .22) 60%, rgba(10, 6, 3, .5) 100%);
  box-shadow: inset 0 0 40px rgba(10, 6, 3, .55); }
.map-label { position: absolute; top: 240px; z-index: 1; text-align: center; pointer-events: none; font: italic 600 13.5px var(--book); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255, 232, 196, .82); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.ml-cities { left: 598px; width: 416px; }
.ml-desert { left: 1022px; width: 396px; }

/* the control of a space: a pill on its top edge in the holder's colour; a dreadnought there shows on it */
.flag { left: auto; right: 34px; top: auto; bottom: -11px; width: auto; min-width: 30px; height: 22px; margin: 0; padding: 0 5px; gap: 2px; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center; clip-path: none; border-radius: 999px; background: #262e3b;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 8px rgba(0, 0, 0, .5); }
.flag.held { background: var(--pc); }
.flag .ni { width: 19px; height: 19px; margin: 0; }
.flag .ni b { font-size: 10.5px; }
.flag .ic.dread { width: 18px; height: 18px; color: #fff; }
.flag.dread { padding-left: 4px; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .65), 0 0 0 3px var(--pc), 0 3px 10px rgba(0, 0, 0, .6); }
.req.guild { color: #ff7a6e; }
.fx .or, .bi .or { font-style: normal; font-weight: 800; font-size: 13.5px; color: rgba(255, 255, 255, .6); margin: 0 1px; }

/* the influence tracks sit a little tighter on the new board */
.tb-4 { top: 70px; }
.tb-2 { top: 99px; }
.trk-side { left: -31px; }
/* long space names take a second line instead of being cut */
.bs-name { white-space: normal; line-height: 1.12; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bs-body { padding-right: 24px; }

/* Rise of Ix: the Shipping track beside the CHOAM spaces */
.shiptrack { position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(8, 20, 22, .92);
  box-shadow: inset 0 0 0 1px rgba(63, 193, 176, .5), 0 6px 14px rgba(0, 0, 0, .45); }
.sh-c { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 3px 0 10px; border-radius: 9px;
  background: rgba(63, 193, 176, .1); border: 1px solid rgba(63, 193, 176, .24); }
.sh-c.s0 { background: rgba(255, 255, 255, .03); border-style: dashed; }
.sh-c em { position: absolute; left: 4px; top: 1px; font-style: normal; font-size: 10.5px; font-weight: 800; color: rgba(191, 244, 236, .6); }
.sh-fx { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px; }
.sh-fx .ni { width: 19px; height: 19px; }
.sh-fx .ni b { font-size: 9.5px; }
.sh-fx .fx .ic, .sh-fx > .ic { width: 17px; height: 17px; }
.sh-fx .fx b, .sh-fx .fx small { font-size: 10px; }
.sh-fx .or { font-size: 12px; }
.sh-c.s0 .sh-fx .ic { width: 22px; height: 22px; color: #8fdcd1; opacity: .7; }
.sh-mk { position: absolute; right: 3px; top: 2px; display: flex; gap: 2px; }
.fr { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .75), 0 0 6px var(--pc); }

/* Rise of Ix: the Ix board down the left - three stacks of technology, the negotiators */
.ixboard { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(6, 17, 19, .93);
  box-shadow: inset 0 0 0 1px rgba(63, 193, 176, .5), 0 10px 24px rgba(0, 0, 0, .5); }
.ixb-h { flex: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; color: #bff4ec; }
.ixb-h .ic { width: 17px; height: 17px; align-self: center; }
.ixb-h b { font: 700 14px var(--disp); letter-spacing: .2em; text-transform: uppercase; }
.ixb-h small { font-size: 12.5px; color: #7fb3ab; line-height: 1.2; }
.ixb-stacks { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.tstack { position: relative; flex: 1; min-height: 0; min-width: 0; display: flex; }
.tstack > .tt { flex: 1; min-height: 0; width: 100%; padding: 6px 8px 6px; gap: 2px; }
.tstack .tt-cost { position: absolute; right: 4px; top: 4px; margin: 0; }
.tstack .tt-name { margin-top: 0; padding-right: 30px; font-size: 12.5px; }
.tstack .tt-txt { font-size: 13.5px; line-height: 1.18; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.tstack .tt:hover { transform: translateX(3px); }
.tstack.empty { align-items: center; justify-content: center; border-radius: 10px; border: 1px dashed rgba(63, 193, 176, .35); color: #6f9993; font-size: 13.5px; }
.ts-left { position: absolute; right: 5px; bottom: 4px; z-index: 2; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-content: center;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(63, 193, 176, .45); font-size: 12.5px; font-weight: 800; color: #bff4ec; pointer-events: none; }
.ixb-neg { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding-top: 5px; border-top: 1px solid rgba(63, 193, 176, .22); }
.ixb-l, .tlb-l { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7fb3ab; margin-right: 2px; }
.ixb-neg .neg { display: inline-flex; align-items: center; gap: 1px; padding: 1px 6px 1px 3px; border-radius: 9px; background: rgba(0, 0, 0, .4);
  border: 1.5px solid var(--pc); font-weight: 800; font-size: 13.5px; }
.ixb-neg .neg .ic { width: 16px; height: 16px; color: var(--pc); }

/* Immortality: the Bene Tleilax board - research, the Tleilaxu track, the tanks */
.tlxboard { position: absolute; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 6px 8px 8px; border-radius: 14px;
  background: rgba(22, 8, 14, .92); box-shadow: inset 0 0 0 1px rgba(208, 88, 126, .5), 0 10px 24px rgba(0, 0, 0, .5); }
.tlb-h { flex: none; display: flex; align-items: baseline; gap: 6px; color: #ffc6d6; white-space: nowrap; overflow: hidden; }
.tlb-h .ic { width: 17px; height: 17px; align-self: center; }
.tlb-h b { font: 700 14px var(--disp); letter-spacing: .18em; text-transform: uppercase; }
.tlb-h small { font-size: 12.5px; color: #b98597; overflow: hidden; text-overflow: ellipsis; }
.tlb-l { color: #c98ea1; }
.tlb-research { position: relative; flex: none; }
.hx { position: absolute; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hx::before, .hx::after { content: ''; position: absolute; clip-path: polygon(24% 0, 76% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%); }
.hx::before { inset: 0; background: rgba(208, 88, 126, .55); }
.hx::after { inset: 1.5px; background: #2a0f1a; }
.hx.gm::before { background: #e6a0b8; }
.hx.gm::after { background: #3b1424; }
.hx.start::after { background: #1a0a10; }
.hx > * { position: relative; z-index: 1; }
.hx-fx { display: flex; align-items: center; justify-content: center; gap: 0; }
.hx-fx .ni { width: 18px; height: 18px; }
.hx-fx .ni b { font-size: 9px; }
.hx-fx .fx .ic, .hx-fx > .ic { width: 16px; height: 16px; }
.hx-fx .fx b { font-size: 9.5px; }
.hx.start .hx-fx .ic { color: #d78aa3; opacity: .8; }
.hx-mk { position: absolute !important; left: -4px; right: -4px; bottom: -4px; display: flex; justify-content: center; gap: 1px; z-index: 2 !important; }
.rm { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .8), 0 0 5px var(--pc); }
.gmk { position: absolute; top: 1px; width: 16px; height: 16px; display: grid; place-content: center; border-radius: 50%; background: #5a1d33; box-shadow: 0 0 0 1px #e6a0b8, 0 0 8px rgba(230, 160, 184, .5); }
.gmk .ic { width: 12px; height: 12px; color: #ffd6e3; }
.tlb-track, .tlb-tanks { flex: none; display: flex; align-items: center; gap: 3px; }
.tlb-track .tlb-l, .tlb-tanks .tlb-l { width: 58px; flex: none; line-height: 1.1; }
.tl-c { position: relative; flex: 1; min-width: 0; height: 44px; display: flex; flex-direction: column; align-items: center; padding-top: 11px; border-radius: 8px;
  background: rgba(208, 88, 126, .1); border: 1px solid rgba(208, 88, 126, .28); }
.tl-c.start { background: rgba(255, 255, 255, .03); border-style: dashed; }
.tl-c em { position: absolute; left: 4px; top: 1px; font-style: normal; font-size: 10.5px; font-weight: 800; color: rgba(255, 198, 214, .55); }
.tl-fx { display: flex; align-items: center; justify-content: center; }
.tl-fx .ni { width: 19px; height: 19px; }
.tl-fx .ni b { font-size: 9.5px; }
.tl-fx .fx .ic, .tl-fx > .ic { width: 17px; height: 17px; }
.tl-c.start .tl-fx .ic { color: #d78aa3; opacity: .75; }
.tl-mk { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 1px; }
.tl-mk .rm { width: 9px; height: 9px; }
.tl-first { position: absolute; right: -5px; top: -8px; border-radius: 50%; box-shadow: 0 0 0 2px #2a0f1a, 0 0 8px rgba(224, 105, 44, .7); }
.tl-first .ni { width: 20px; height: 20px; }
.tl-first .ni b { font-size: 10px; }
.tlb-tanks .tank { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px 1px 4px; border-radius: 10px; background: rgba(0, 0, 0, .35);
  border: 1.5px solid var(--pc); font-weight: 800; font-size: 14px; }
.tlb-tanks .tank .ic { width: 17px; height: 17px; color: var(--pc); }

/* without Immortality: the victory track and the decks */
.ledger { position: absolute; display: flex; flex-direction: column; gap: 8px; padding: 7px 10px 10px; border-radius: 14px; background: rgba(14, 11, 6, .9);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .42), 0 10px 24px rgba(0, 0, 0, .5); }
.lg-h { flex: none; display: flex; align-items: baseline; gap: 6px; color: #f4dc9c; white-space: nowrap; overflow: hidden; }
.lg-h .ic { width: 17px; height: 17px; align-self: center; }
.lg-h b { font: 700 14px var(--disp); letter-spacing: .18em; text-transform: uppercase; }
.lg-h small { font-size: 12.5px; color: #a8966b; overflow: hidden; text-overflow: ellipsis; }
.lg-track { flex: none; display: flex; gap: 3px; }
.lg-c { position: relative; flex: 1; min-width: 0; height: 50px; display: flex; flex-direction: column; align-items: center; border-radius: 8px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(242, 193, 78, .2); }
.lg-c em { margin-top: 4px; font: 700 14px var(--disp); font-style: normal; color: #e8d3a0; }
.lg-c.goal { background: rgba(242, 193, 78, .22); border-color: var(--gold); box-shadow: 0 0 10px rgba(242, 193, 78, .35); }
.lg-c.goal em { color: #fff3c9; }
.lg-mk { margin-top: auto; padding-bottom: 5px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.lg-mk .mk { width: 9px; height: 9px; }
.lg-decks { flex: 1; min-height: 0; display: flex; gap: 10px; }
.lg-deck { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.lg-deck small { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b9a988; }
.lg-pile { position: relative; width: 58px; height: 76px; display: grid; place-content: center; border-radius: 8px; background: var(--dk, #1b2436);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 3px 3px 0 -1px #0b0e15, 3px 3px 0 0 rgba(201, 164, 90, .45), 6px 6px 0 -1px #0b0e15, 6px 6px 0 0 rgba(201, 164, 90, .3); }
.lg-pile .ic { width: 30px; height: 30px; }
.lg-pile b { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.d-conflict .lg-pile { --dk: #5a1510; color: #ffb7a8; }
.d-intrigue .lg-pile { --dk: #3a2f1a; }
.d-imperium .lg-pile { --dk: #173f2a; }

/* the market strip: labelled tabs, and Family Atomics */
.strip-tabs button { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 3px; font-size: 13.5px; font-weight: 700; }
.strip-tabs button .ic { width: 15px; height: 15px; }
.strip-tabs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-h.sub { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.strip-tabs .atomics { flex: 0 0 30px; padding: 0; border-color: rgba(224, 69, 59, .6); background: rgba(90, 21, 16, .7); color: #ffb0a6; }
.strip-tabs .atomics:hover { background: rgba(140, 32, 24, .85); border-color: #ff8a80; color: #fff; }
.strip-tabs .atomics .ic { width: 17px; height: 17px; }
.opt .sep { font-style: normal; font-weight: 800; margin: 0 2px; color: rgba(255, 255, 255, .6); }
.ic.arr.up { transform: rotate(-90deg); }

/* on a phone the module boards stack into the page */
.cp-ix .ixboard, .cp-tlx .tlxboard { position: static !important; width: auto !important; height: auto !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.cp-ix .tstack > .tt { min-height: 78px; }
.cp-tlx .tlb-track .tlb-l, .cp-tlx .tlb-tanks .tlb-l { width: 48px; }
.cp-tlx .tlb-tanks { flex-wrap: wrap; }
.cp-ix .ixb-h > b, .cp-ix .ixb-h > .ic, .cp-tlx .tlb-h > b, .cp-tlx .tlb-h > .ic { display: none; }
.cp-tlx .tlb-h { white-space: normal; }
/* the bonus spice waiting in the desert hangs from the bottom edge, clear of the map's labels */
.maker { top: auto; bottom: -11px; z-index: 4; }
/* the Ix board's tiles: price beside the name, the text below, the picture showing through underneath */
.tstack .tt-cost { left: 6px; right: auto; top: 5px; }
.tstack .tt-cost .ni { width: 23px; height: 23px; }
.tstack .tt-cost .ni b { font-size: 11.5px; }
.tstack .tt-name { min-height: 23px; padding: 0 0 0 29px; align-items: center; }
.tstack .tt-name .ic { display: none; }
.tstack .tt .tt-art { opacity: .8; }
.tstack .tt::after { background: linear-gradient(180deg, rgba(5, 12, 14, .94) 0%, rgba(5, 12, 14, .8) 42%, rgba(5, 12, 14, .25) 100%); }

/* ---------- v16: plain shapes for the places, the hand and the intrigues together, the Tleilax panel, the atomics token ---------- */
/* agent icons: the factions keep their badges; Landsraad, city and spice trade are plain shapes, always below them */
.cd-shape { width: 21px; height: 21px; display: grid; place-content: center; flex: none; }
.cd-shape .ic { width: 19px; height: 19px; }
.sline .cd-shape, .sline .cd-ic { display: inline-grid; vertical-align: middle; margin: 0 2px; }

/* what your reveal will bring, left of the hand */
.tray-stats { position: absolute; left: 0; top: 22px; z-index: 2; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 3px 7px;
  border-radius: 10px; background: rgba(12, 18, 30, .94); border: 1px solid var(--line-2); box-shadow: 0 6px 14px rgba(0, 0, 0, .45); cursor: help; }
.ts-l { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.05; }
.ts-v .ni { width: 32px; height: 32px; }
.ts-v .ni b { font-size: 15px; }
.ts-v.sw { display: inline-flex; align-items: center; gap: 1px; font-weight: 800; font-size: 17px; color: #ffd6cf; }
.ts-v.sw .ic { width: 21px; height: 21px; }
.hand-tray.flow .tray-stats { top: 6px; }

/* the intrigue cards: their own corner, bottom right, always in view */
.tray-intr { position: absolute; left: 762px; top: 0; width: 190px; height: 300px; display: flex; justify-content: center; align-items: flex-start; }
.tray-intr .cd { zoom: .8; flex: none; }
.tray-intr.n2 > .cd + .cd { margin-left: -70px; }
.tray-intr.n3 > .cd + .cd { margin-left: -112px; }
.tray-intr.n4 > .cd + .cd { margin-left: -126px; }
.tray-intr.n5 > .cd + .cd { margin-left: -132px; }
.tray-intr.n6 > .cd + .cd { margin-left: -136px; }
.hand-tray .tray-intr .cd:hover { transform: translateY(-118px) scale(1.4); transform-origin: 70% 100%; }
.hand-tray.picking .tray-intr .cd:hover { transform: translateY(20px); }
.ti-l { position: absolute; left: 2px; top: 2px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #d9b45c; pointer-events: none; }
.ti-l .ic { width: 13px; height: 13px; }
.ti-none { margin-top: 28px; padding: 18px 10px; width: 150px; text-align: center; border-radius: 10px; border: 1px dashed rgba(217, 180, 92, .35); color: var(--dim); font-size: 13.5px; }
.tray-sep { flex: none; align-self: center; display: grid; place-content: center; width: 22px; height: 110px; margin: 0 2px 0 8px !important; border-left: 1px dashed rgba(217, 180, 92, .45); }
.tray-sep .ic { width: 16px; height: 16px; }
.tray-intr.flash, .tray-sep.flash { animation: pbar-flash 1.2s ease-out 1; border-radius: 12px; }
.st-action .big-btn { font-size: 20px; border-radius: 12px; }

/* the ledger, with the door to the Bene Tleilax board when Immortality is on */
.ledger.with-tlx .lg-decks { gap: 8px; }
.ledger.with-tlx .lg-pile { width: 50px; height: 66px; }
.ledger.with-tlx .lg-deck small { font-size: 12px; text-align: center; line-height: 1.1; }
.lg-tlx { padding: 6px 4px; color: var(--ink); border-radius: 10px; background: rgba(208, 88, 126, .14); border: 1px solid rgba(208, 88, 126, .6); cursor: pointer; }
.lg-tlx:hover, .lg-tlx.on { background: rgba(208, 88, 126, .28); border-color: #ff8fb2; }
.lg-tlx .lg-pile { --dk: #3b1424; }
.lg-tlx .lg-pile .ic { width: 30px; height: 30px; }
.lg-tlx small { color: #ffc6d6 !important; }
.lg-mine { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 800; }
.lg-mine .ic { width: 13px; height: 13px; margin-left: 3px; }

/* the Bene Tleilax panel, over Arrakis */
.tlx-panel { position: absolute; z-index: 45; display: none; flex-direction: column; gap: 8px; padding: 10px 14px 14px; border-radius: 18px;
  background: #1a0810; box-shadow: inset 0 0 0 1px rgba(255, 143, 178, .55), 0 0 0 1px rgba(0, 0, 0, .7), 0 24px 60px rgba(0, 0, 0, .75); }
.tlx-panel.open { display: flex; }
.tlxp-h { display: flex; align-items: center; gap: 8px; color: #ffc6d6; }
.tlxp-h > .ic { width: 22px; height: 22px; }
.tlxp-h b { font: 700 16px var(--disp); letter-spacing: .2em; text-transform: uppercase; }
.tlxp-h small { flex: 1; font-size: 14px; color: #c98ea1; }
.tlxp-h .x { color: #ffc6d6; }
.tlx-panel .tlxboard { position: static; padding: 0; background: none; box-shadow: none; border-radius: 0; gap: 10px; }
.tlxboard.big .hx-fx .ni { width: 27px; height: 27px; }
.tlxboard.big .hx-fx .ni b { font-size: 13px; }
.tlxboard.big .hx-fx .fx .ic, .tlxboard.big .hx-fx > .ic { width: 24px; height: 24px; }
.tlxboard.big .hx-fx .fx b { font-size: 13px; }
.tlxboard.big .rm { width: 14px; height: 14px; }
.tlxboard.big .hx-mk { bottom: -6px; gap: 2px; }
.tlxboard.big .gmk { width: 22px; height: 22px; top: 0; }
.tlxboard.big .gmk .ic { width: 16px; height: 16px; }
.tlxboard.big .tl-c { height: 64px; padding-top: 16px; border-radius: 10px; }
.tlxboard.big .tl-c em { font-size: 13px; left: 6px; top: 2px; }
.tlxboard.big .tl-fx .ni { width: 27px; height: 27px; }
.tlxboard.big .tl-fx .ni b { font-size: 13px; }
.tlxboard.big .tl-fx .fx .ic, .tlxboard.big .tl-fx > .ic { width: 24px; height: 24px; }
.tlxboard.big .tl-mk { bottom: 4px; gap: 2px; }
.tlxboard.big .tl-mk .rm { width: 12px; height: 12px; }
.tlxboard.big .tl-first { right: -6px; top: -10px; }
.tlxboard.big .tl-first .ni { width: 26px; height: 26px; }
.tlxboard.big .tlb-l { width: 76px; font-size: 13px; }
.tlxboard.big .tank { font-size: 15px; padding: 2px 10px 2px 5px; border-radius: 12px; }
.tlxboard.big .tank .ic { width: 20px; height: 20px; }
.tlb-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: #c98ea1; margin-top: -2px; }
.tlb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tlb-legend .ic { width: 16px; height: 16px; }
.tlb-legend b { color: #ffc6d6; font-weight: 700; }
.hx.pick { border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; background: none; }
.hx.pick::before { background: #ffd978; }
.hx.pick::after { background: #4a1a2c; }
.hx.pick:hover::after { background: #6b2640; }
.hx.pick { filter: drop-shadow(0 0 8px rgba(255, 217, 120, .75)); }

/* Family Atomics: a token on the portrait */
.atom { position: absolute; left: 2px; top: 38px; z-index: 3; width: 18px; height: 18px; display: grid; place-content: center; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .75); }
.atom .ic { width: 18px; height: 18px; }
.pp.mine .atom { left: 2px; top: 44px; width: 24px; height: 24px; }
.pp.mine .atom .ic { width: 24px; height: 24px; }
.atom.ready { cursor: pointer; box-shadow: 0 0 0 2px #fff3c4, 0 0 14px rgba(242, 193, 78, .9); transition: transform .25s var(--ease); }
.atom.ready:hover { transform: scale(1.15); }

/* on a phone, the Bene Tleilax region folds open and shut */
.cp-fold > .cp-rh { width: 100%; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; margin-bottom: 0; }
.cp-fold.open > .cp-rh { margin-bottom: 6px; }
.cp-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-more .arr { width: 14px; height: 14px; transform: rotate(90deg); }
.cp-fold.open .cp-more .arr { transform: rotate(-90deg); }
/* on a phone: the intrigues as a row of chips above the hand */
.tray-ichips { position: absolute; left: 60px; right: 0; top: 2px; height: 26px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tray-ichips::-webkit-scrollbar { display: none; }
.ichip { flex: none; display: inline-flex; align-items: center; gap: 4px; max-width: 170px; height: 24px; padding: 0 9px 0 5px; border-radius: 12px; border: 1px solid rgba(217, 180, 92, .6);
  background: rgba(58, 47, 26, .9); color: #f3e7c6; font-size: 13.5px; font-weight: 700; }
.ichip .ic { width: 15px; height: 15px; flex: none; }
.ichip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ichip.hot { border-color: var(--gold-2); box-shadow: 0 0 10px rgba(255, 215, 120, .7); color: #fff; }
.hand-tray.flow.has-intr { height: 202px; }
.hand-tray.flow.has-intr .tray-cards { top: 30px; }
.hand-tray.flow.has-intr .tray-stats { top: 36px; }

/* ---------- v17: the victory popup, the Bene Tleilax button top right, the wide battle ---------- */
button.round { border: 0; background: none; padding: 4px 9px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14px; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
button.round:hover { background: rgba(255, 255, 255, .09); color: #dfe7f1; }
button.cf-count { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: inherit; border-radius: 8px; }
button.cf-count .ic { width: 16px; height: 16px; }
button.cf-count:hover { background: #2f6fb3; border-color: #a9d2ff; }
.top-icons .tlx-btn { width: auto; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px 0 7px; margin-right: 6px; border-radius: 17px;
  border: 1px solid rgba(255, 143, 178, .6); background: rgba(208, 88, 126, .2); color: #ffd1df; font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.top-icons .tlx-btn .ic { width: 20px; height: 20px; }
.top-icons .tlx-btn:hover, .top-icons .tlx-btn.on { background: rgba(208, 88, 126, .42); color: #fff; border-color: #ff8fb2; }
.cp-top .tlx-btn { padding: 0 6px; margin-right: 2px; }
.cp-top .tlx-btn span { display: none; }

/* the popup */
.vic { display: flex; flex-direction: column; gap: 14px; }
.vic-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; color: #f4dc9c; }
.vic-h .ic { width: 20px; height: 20px; align-self: center; }
.vic-h b { font: 700 15px var(--disp); letter-spacing: .16em; text-transform: uppercase; }
.vic-h small { color: var(--muted); font-size: 14px; }
.vic .lg-track { gap: 4px; }
.vic .lg-c { height: 58px; }
.vic .lg-c em { font-size: 15px; margin-top: 5px; }
.vic .lg-mk .mk { width: 11px; height: 11px; }
.vic-houses { display: flex; flex-direction: column; gap: 5px; }
.vic-row { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 10px; background: rgba(255, 255, 255, .05); border-left: 3px solid var(--pc); }
.vic-row b { display: block; font-size: 14px; }
.vic-row small { display: block; font-size: 13.5px; color: var(--muted); }
.vic-row .ni { width: 30px; height: 30px; }
.vic-row .ni b { font-size: 14px; }
.vic-pt { width: 38px; height: 38px; flex: none; border-radius: 8px; overflow: hidden; }
.vic-pt .portrait { width: 100%; height: 100%; background-size: 165%; background-position: 50% 34%; }
.vic .lg-decks { flex: none; height: 150px; }
.vic .lg-deck small { text-align: center; padding: 0 6px; line-height: 1.2; }


/* what just happened is told above Arrakis, clear of the battle; with the Tleilax panel open, below it */
.st-caption { left: 550px; width: 546px; top: 222px; }
.st-caption.high { top: 646px; }

/* ---------- v18: the hand whole and in view, intrigues as chips, Ix as a panel, endgame progress ---------- */
/* the hand on the stage: smaller cards, shown whole; pointing at one grows it in place from its bottom edge, so it never slips away */
#st-hand .tray-cards { top: 0; height: 164px; align-items: flex-end; }
#st-hand .tray-cards > .cd { zoom: .75; transform: none; transform-origin: 50% 100%; }
#st-hand .tray-cards > * + *, #st-hand .tray-cards.n5 > * + * { margin-left: 8px; }
#st-hand .tray-cards.n6 > * + * { margin-left: -2px; }
#st-hand .tray-cards.n7 > * + * { margin-left: -27px; }
#st-hand .tray-cards.n8 > * + * { margin-left: -45px; }
#st-hand .tray-cards.n9 > * + * { margin-left: -62px; }
#st-hand .tray-cards.n10 > * + * { margin-left: -75px; }
#st-hand .tray-cards.n11 > * + * { margin-left: -86px; }
#st-hand .tray-cards.n12 > * + * { margin-left: -94px; }
#st-hand .tray-cards > .cd:hover { transform: scale(1.32); z-index: 10; }
#st-hand .tray-cards > .cd.sel { transform: translateY(-10px); z-index: 9; }
#st-hand .tray-cards > .cd.sel:hover { transform: translateY(-10px) scale(1.2); }
#st-hand.picking .tray-cards > .cd:hover { transform: none; }
#st-hand.picking .tray-cards > .cd.sel, #st-hand.picking .tray-cards > .cd.sel:hover { transform: translateY(-10px); }
#st-hand .tray-stats { top: 10px; }

/* the intrigues on the stage: a list of named chips; the card itself shows above the one pointed at */
#st-hand .tray-intr { left: 762px; top: 0; width: 190px; height: 164px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px; padding-top: 19px; }
#st-hand .ti-l { top: 1px; left: 2px; }
#st-hand .ti-none { margin: 4px 0 0; width: auto; padding: 14px 8px; }
.ichip.big { position: relative; width: 100%; max-width: none; height: 29px; padding: 0 8px 0 6px; font-size: 14px; justify-content: flex-start; }
.ichip.big > .ic { width: 16px; height: 16px; }
.ichip.big small { margin-left: auto; flex: none; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #c9b27a; }
.ichip em { margin-left: auto; flex: none; font-style: normal; font-weight: 800; font-size: 13px; padding: 0 6px; border-radius: 8px; background: rgba(0, 0, 0, .4); color: #ffb2aa; }
.ichip em.met { color: #9ff0b8; }
.ichip:hover { border-color: var(--gold-2); background: rgba(80, 64, 32, .95); }
.ichip-card { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; pointer-events: none; }
.ichip:hover .ichip-card, .ichip:focus-visible .ichip-card { display: block; }
.ichip-card .cd { zoom: 1; transform: none !important; box-shadow: 0 0 0 2px var(--gold-2), 0 16px 36px rgba(0, 0, 0, .75); }

/* how close an endgame intrigue is to its condition */
.cd-goal { position: absolute; right: 6px; top: 34px; z-index: 3; display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 4px; border-radius: 10px;
  background: rgba(40, 10, 10, .88); border: 1px solid #e0453b; color: #ffb2aa; font-weight: 800; font-size: 13.5px; }
.cd-goal.met { background: rgba(8, 40, 20, .88); border-color: #5fd38a; color: #b9ffd0; }
.cd-goal .ic { width: 15px; height: 15px; }
.go-ends { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.go-end { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 4px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
  background: rgba(95, 211, 138, .14); color: #b9ffd0; border: 1px solid rgba(95, 211, 138, .45); }
.go-end.missed { background: rgba(224, 69, 59, .12); color: #ffb2aa; border-color: rgba(224, 69, 59, .4); }
.go-end .ic { width: 13px; height: 13px; }

/* the spaces a hand card could go to, while it is pointed at */
.bs.hint { box-shadow: 0 0 0 2px rgba(255, 217, 120, .9), 0 0 18px rgba(255, 217, 120, .55), 0 5px 12px rgba(0, 0, 0, .5); z-index: 2; }
.bs.hint .bs-frame { background: var(--gold-2); }

/* the Ix board: a panel from the top right */
.ix-panel { background: #061618; box-shadow: inset 0 0 0 1px rgba(63, 193, 176, .6), 0 0 0 1px rgba(0, 0, 0, .7), 0 24px 60px rgba(0, 0, 0, .75); }
.ixp-h { color: #bff4ec; }
.ixp-h small { color: #7fb3ab; }
.ixp-h .x { color: #bff4ec; }
.ix-panel .ixboard { position: static; padding: 0; background: none; box-shadow: none; border-radius: 0; gap: 12px; }
.ix-panel .ixb-stacks { flex: none; flex-direction: row; height: 178px; gap: 12px; }
.ix-panel .tstack .tt-txt { -webkit-line-clamp: 5; font-size: 14px; }
.ix-panel .tstack .tt-name { font-size: 13.5px; }
.ixb-houses { display: flex; flex-direction: column; gap: 5px; }
.ixh-row { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 8px; border-radius: 9px; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--pc); }
.ixh-name { width: 118px; flex: none; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ixh-row .neg { flex: none; display: inline-flex; align-items: center; gap: 1px; padding: 1px 6px 1px 3px; border-radius: 9px; background: rgba(0, 0, 0, .4); border: 1.5px solid var(--pc); font-weight: 800; font-size: 13.5px; }
.ixh-row .neg .ic { width: 16px; height: 16px; color: var(--pc); }
.ixh-techs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.top-icons .ix-btn { width: auto; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px 0 7px; margin-right: 6px; border-radius: 17px;
  border: 1px solid rgba(63, 193, 176, .6); background: rgba(63, 193, 176, .16); color: #c8f7f0; font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.top-icons .ix-btn .ic { width: 19px; height: 19px; }
.top-icons .ix-btn:hover, .top-icons .ix-btn.on { background: rgba(63, 193, 176, .36); color: #fff; border-color: #6fe3d3; }
.cp-top .ix-btn { padding: 0 6px; margin-right: 2px; }
.cp-top .ix-btn span { display: none; }
.cp-ix .ixb-houses { margin-top: 8px; }
.cp-ix .ixh-name { width: 84px; }

/* rival panels with the modules: the counts get their own row, clear of the resources */
.pp:not(.mine) .pp-mod { bottom: 6px; padding-top: 5px; gap: 6px; border-top: 1px solid rgba(255, 255, 255, .07); }
/* the hand: a card pointed at stays where it is, lit; its whole face shows above the hand, letting clicks pass through */
#st-hand .tray-cards > .cd:hover { transform: none; box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(255, 255, 255, .45); z-index: 10; }
#st-hand .tray-cards > .cd.sel:hover { transform: translateY(-10px); }
.peek { position: absolute; z-index: 58; display: none; pointer-events: none; }
.peek.show { display: block; animation: fade .18s ease; }
.peek > .cd { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 18px 40px rgba(0, 0, 0, .8); }

/* ---------- v19: a slimmer faction column, Arrakis spread out, the battle as a tall panel, graft cards ---------- */
/* the influence tracks: slimmer, their 2 and 4 rewards as small badges beside those levels */
#st-board .trk-top { width: 40px; height: 40px; }
#st-board .trk-top .ic { width: 23px; height: 23px; }
#st-board .trk-levels { width: 40px; }
#st-board .trk-side { left: -25px; width: 20px; }
#st-board .tb { width: 20px; height: 20px; border-width: 1px; }
#st-board .tb .ni, #st-board .tb .fx .ic, #st-board .tb > .ic { width: 14px; height: 14px; }
#st-board .tb .ni b, #st-board .tb .fx b { font-size: 8px; }
#st-board .tb-4 { top: 72px; }
#st-board .tb-2 { top: 102px; }
#st-board .lv em { font-size: 10px; }
#st-board .bs.a-emperor .bs-body, #st-board .bs.a-guild .bs-body, #st-board .bs.a-bg .bs-body, #st-board .bs.a-fremen .bs-body { padding-right: 18px; }
#st-board .bs.a-emperor .bi .ic, #st-board .bs.a-guild .bi .ic, #st-board .bs.a-bg .bi .ic, #st-board .bs.a-fremen .bi .ic { width: 23px; height: 23px; }
.ml-cities { left: 550px; width: 268px; }
.ml-desert { left: 828px; width: 268px; }

/* the battle: a tall panel at the right of Arrakis - the houses in rows, the rewards along the bottom */
#st-conflict.tall .cf-head { height: auto; min-height: 36px; padding: 5px 7px 5px 11px; }
#st-conflict.tall .cf-name { font-size: 14.5px; line-height: 1.1; white-space: normal; }
#st-conflict.tall .cf-body { flex-direction: column; }
#st-conflict.tall .cf-arena { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px; border-radius: 0; }
#st-conflict.tall .cf-arena > .cf-mark { display: none; }
#st-conflict.tall .cf-arena > .cf-q { position: relative; inset: auto; margin: 0; width: auto; height: 60px; flex: none; display: grid; grid-template-columns: 50px 56px 1fr; grid-template-rows: 1fr 1fr;
  column-gap: 8px; align-items: center; padding: 5px 8px 5px 5px; border-radius: 10px; background: rgba(12, 6, 4, .66); box-shadow: inset 3px 0 0 var(--pc); }
#st-conflict.tall .cf-q > * { position: static; }
#st-conflict.tall .cf-q .cf-pt { grid-row: 1 / 3; width: 50px; height: 50px; }
#st-conflict.tall .cf-q .cf-str { grid-column: 2; grid-row: 1 / 3; justify-self: start; height: 26px; }
#st-conflict.tall .cf-q .cf-gar { grid-column: 3; grid-row: 1; justify-self: end; font-size: 13.5px; }
#st-conflict.tall .cf-q .cf-cubes { grid-column: 3; grid-row: 2; width: auto; justify-content: flex-start; }
#st-conflict.tall .cf-rewards { width: auto; flex-direction: row; height: 92px; flex: none; border-radius: 0 0 14px 14px; border-top: 1px solid rgba(192, 57, 43, .45); }
#st-conflict.tall .cf-r { padding: 17px 3px 4px; }
#st-conflict.tall .stand-list { border-radius: 0 0 14px 14px; }

/* graft cards: a marked agent box; in the hand, the cards a chosen one can join light up */
.cd-box.graft { background: radial-gradient(130% 150% at 50% 0%, #f7dde6 0%, #ecc6d3 55%, #d9a3b6 100%); box-shadow: inset 0 0 0 1px rgba(120, 30, 60, .45), inset 0 0 12px rgba(150, 40, 80, .18), 0 1px 3px rgba(0, 0, 0, .5); }
.cd-graft { display: inline-flex; align-items: center; gap: 2px; margin: -1px 0 2px; padding: 0 6px 0 3px; border-radius: 7px; background: #7a2346; color: #ffe3ec;
  font: 700 10px var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.cd-graft .ic { width: 10px; height: 10px; }
.hand-tray .cd.partner { box-shadow: 0 0 0 2px #ff8fb2, 0 0 16px rgba(255, 143, 178, .7); }
.hand-tray .cd.grafted { box-shadow: 0 0 0 3px #ff8fb2, 0 0 22px rgba(255, 143, 178, .8); }
.graft-offer { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: #f3c9b8; white-space: nowrap; }
.opt.graft { border-color: #ff8fb2; background: #4a1a2c; color: #ffe3ec; font-weight: 700; font-size: 14px; }
.opt.graft .ic { width: 15px; height: 15px; }
.fx-graft { position: absolute; left: 70px; top: 18px; transform: rotate(5deg); }
.fx-peek .fx-graft { left: 90px; top: 20px; }

/* ---------- v20: the board as printed - the Landsraad's seats, the Ix plate, the round's phases, the battle on the map ---------- */
.sec-ix { --st: #bff4ec; background: linear-gradient(180deg, rgba(63, 193, 176, .2), rgba(63, 193, 176, .05)); box-shadow: inset 0 0 0 1px rgba(63, 193, 176, .45); }
.sec-btn { position: absolute; right: 8px; top: 3px; z-index: 2; pointer-events: auto; display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 7px 0 4px;
  border-radius: 9px; border: 1px solid rgba(63, 193, 176, .6); background: rgba(6, 22, 24, .9); color: #c8f7f0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sec-btn .ic { width: 12px; height: 12px; }
.sec-btn:hover { background: rgba(63, 193, 176, .3); color: #fff; }

/* the High Council's seats */
.hc-seats { position: absolute; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 38px; background: rgba(8, 24, 12, .55);
  box-shadow: inset 0 0 0 1px rgba(62, 196, 82, .35); }
.hc-seat { width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 2px rgba(155, 232, 171, .35); }
.hc-seat.on { background: var(--pc); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 0 10px var(--pc); }
.hc-pers .ni { width: 34px; height: 34px; }
.hc-pers .ni b { font-size: 15px; }

/* the round's phases, in the corner of the map */
.phases { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 10px; pointer-events: none; }
.ph { display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--disp); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 232, 196, .55); text-shadow: 0 1px 3px #000; }
.ph .ic { width: 15px; height: 15px; color: rgba(255, 232, 196, .55); }
.ph.now { color: #ffe9b8; }
.ph.now .ic { color: var(--gold-2); }
.ph.now::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 6px var(--gold-2); }

/* the battle on the map: garrisons in the corners, the conflict card in the middle, the strength track below */
#st-conflict.zone { display: block; background: none; box-shadow: none; border-radius: 0; overflow: visible; filter: none; }
.cz-field { position: absolute; left: 0; top: 0; right: 0; bottom: 30px; border-radius: 16px; background: rgba(20, 10, 6, .38); box-shadow: inset 0 0 0 1px rgba(255, 215, 170, .14); pointer-events: none; }
.cz-x { position: absolute; left: 50%; top: 50%; width: 176px !important; height: 176px !important; transform: translate(-50%, -50%); color: rgba(255, 228, 196, .1); }
.cz-g { position: absolute; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; background: rgba(12, 8, 6, .6);
  box-shadow: inset 0 0 0 3px var(--pc), 0 0 12px color-mix(in srgb, var(--pc) 40%, transparent); }
.g-tl { left: 8px; top: 4px; } .g-tr { right: 8px; top: 4px; } .g-bl { left: 8px; top: 94px; } .g-br { right: 8px; top: 94px; }
.cz-pt { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; margin-top: -8px; }
.cz-pt .portrait { width: 100%; height: 100%; background-size: 165% !important; background-position: 50% 34% !important; }
.cz-gar { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 1px; padding: 0 7px 0 4px; border-radius: 10px;
  background: #0b0f16; border: 1.5px solid var(--pc); font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.cz-gar .ic { width: 15px; height: 15px; color: var(--pc); }
.cz-gar .ic.dread { margin-left: 3px; }
.cz-f { position: absolute; width: 132px; height: 84px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 4px 6px; }
.f-tl, .f-bl { left: 98px; align-items: flex-start; } .f-tr, .f-br { right: 98px; align-items: flex-end; }
.f-tl, .f-tr { top: 4px; } .f-bl, .f-br { top: 94px; }
.cz-f.none .cz-units { display: none; }
.cz-units { display: flex; flex-wrap: wrap; gap: 0; max-width: 124px; }
.f-tr .cz-units, .f-br .cz-units { justify-content: flex-end; }
.cz-units .ic { width: 17px; height: 17px; color: var(--pc); margin: -2px -2px 0 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.cz-units .ic.dread { width: 22px; height: 22px; margin: -3px 1px 0 0; }
.cz-units b { font-size: 13px; font-weight: 800; margin-left: 3px; }
.cz-str { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 6px; border-radius: 8px; background: #0b0f16; border: 2px solid var(--pc); font-weight: 800; font-size: 15px; }
.cz-str .ic { width: 15px; height: 15px; }
.cz-str.out { opacity: .5; }
.cz-card { position: absolute; left: 50%; top: 2px; width: 176px; height: 178px; margin-left: -88px; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px;
  background: #1a0906; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 150, 120, .4), 0 10px 24px rgba(0, 0, 0, .6); }
.cz-card .cz-art { position: absolute; left: 0; right: 0; top: 0; height: 96px; }
.cz-card .cz-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 9, 6, .1) 20%, rgba(26, 9, 6, .95) 100%); }
.cz-name { position: relative; z-index: 1; margin-top: 50px; padding: 0 8px; font: 700 13.5px/1.12 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: #fff4ea; text-shadow: 0 1px 3px #000; }
.cz-count { position: absolute; z-index: 2; right: 5px; top: 5px; padding: 1px 7px; border-radius: 8px; border: 1px solid #6aa8e8; background: rgba(36, 90, 148, .92); color: #e2f0ff; font-weight: 700; font-size: 13px; cursor: pointer; }
.cz-count:hover { background: #2f6fb3; }
.cz-rewards { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 5px; }
.cz-r { display: flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 5px; border-radius: 6px; background: #8f2118; }
.cz-r.off { opacity: .35; }
.cz-r em { width: 24px; flex: none; font-style: normal; font-weight: 800; font-size: 13px; color: #ffe4dc; }
.cz-r em sup { font-size: 8.5px; }
.cz-fx { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.cz-fx .ni { width: 19px; height: 19px; } .cz-fx .ni b { font-size: 9.5px; }
.cz-fx .fx .ic { width: 16px; height: 16px; }
.cz-fx .fx.word { font-size: 12px; }
.cz-track { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; gap: 2px; }
.st-n { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: rgba(90, 21, 16, .72); border: 1px solid rgba(255, 150, 120, .28); }
.st-n.zero { background: rgba(20, 10, 6, .7); }
.st-n em { position: absolute; left: 2px; top: 0; font-style: normal; font-size: 10px; font-weight: 800; color: rgba(255, 228, 220, .6); }
.st-m { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; margin-top: 3px; }
.st-m .rm { width: 10px; height: 10px; }
#st-conflict.zone.over { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: rgba(10, 12, 18, .92); box-shadow: 0 8px 20px rgba(0, 0, 0, .55); }
/* only the houses in the battle show their units and strength beside the card; the crossed blades reach out around it */
.cz-f.none { display: none; }
.cz-x { width: 330px !important; height: 330px !important; color: rgba(255, 228, 196, .09); }

/* ---------- v21: a smaller battle, no strength track ---------- */
.cz-field { bottom: 0; }
.cz-x { width: 250px !important; height: 250px !important; }
.cz-g { width: 66px; height: 66px; }
.g-tl { left: 5px; top: 6px; } .g-tr { right: 5px; top: 6px; } .g-bl { left: 5px; top: 104px; } .g-br { right: 5px; top: 104px; }
.cz-pt { width: 46px; height: 46px; margin-top: -6px; }
.cz-gar { bottom: -5px; padding: 0 6px 0 3px; font-size: 13px; }
.cz-gar .ic { width: 13px; height: 13px; }
.cz-f { width: 90px; height: 80px; gap: 3px; padding: 2px 4px; }
.f-tl, .f-bl { left: 72px; } .f-tr, .f-br { right: 72px; }
.f-tl, .f-tr { top: 2px; } .f-bl, .f-br { top: 100px; }
.cz-units { max-width: 86px; }
.cz-units .ic { width: 15px; height: 15px; }
.cz-units .ic.dread { width: 19px; height: 19px; }
.cz-str { height: 21px; padding: 0 6px 0 4px; font-size: 14px; border-radius: 7px; }
.cz-str .ic { width: 13px; height: 13px; }
.cz-card { width: 142px; height: 176px; margin-left: -71px; top: 3px; border-radius: 11px; }
.cz-card .cz-art { height: 84px; }
.cz-name { margin-top: 44px; font-size: 13px; padding: 0 7px; }
.cz-count { right: 4px; top: 4px; padding: 0 6px; font-size: 12px; }
.cz-rewards { gap: 2px; padding: 4px; }
.cz-r { min-height: 20px; gap: 4px; padding: 1px 4px; }
.cz-r em { width: 20px; font-size: 12px; }
.cz-fx .ni { width: 17px; height: 17px; } .cz-fx .ni b { font-size: 9px; }
.cz-fx .fx .ic { width: 14px; height: 14px; }
.cz-fx .fx.word { font-size: 11px; }

/* ---------- v22: the research tree, End turn and Undo, cards with many icons, CHOAM, animations you can't miss ---------- */
/* the research tree: spaces on a grid, links between them, each house's path in its colour */
.tree { position: relative; flex: none; margin: 2px auto 0; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.tree-lines .ln { stroke: rgba(230, 160, 184, .2); stroke-width: 1.4; }
.tree-lines .ln.near { stroke: rgba(255, 214, 227, .45); stroke-width: 2; }
.tree-lines .ln.open { stroke: #ffd978; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 217, 120, .8)); }
.tree-lines .path { fill: none; stroke: var(--pc); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.tb-band { position: absolute; border-radius: 10px; pointer-events: auto; }
.tb-band em { position: absolute; left: 0; right: 0; top: 2px; display: flex; align-items: center; justify-content: center; gap: 2px; font-style: normal; font-weight: 800; font-size: 12px; letter-spacing: .06em; color: #ffd6e3; }
.tb-band em .ic { width: 12px; height: 12px; }
.tb-band.g1, .tb-band.g2 { background: linear-gradient(180deg, rgba(230, 160, 184, .22), rgba(230, 160, 184, .06)); box-shadow: inset 0 0 0 1px rgba(230, 160, 184, .35); }
.tb-band.end { background: linear-gradient(180deg, rgba(242, 193, 78, .24), rgba(242, 193, 78, .06)); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .45); }
.tb-band.end em { color: #ffe9a8; }
.tn { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 30%; font: inherit; color: inherit;
  background: #2b1320; box-shadow: inset 0 0 0 1.5px rgba(208, 88, 126, .6), 0 2px 4px rgba(0, 0, 0, .5); }
.tn.gm { background: #3b1628; box-shadow: inset 0 0 0 1.5px #e6a0b8, 0 2px 4px rgba(0, 0, 0, .5); }
.tn.vp { background: #3a2a0c; box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 8px rgba(242, 193, 78, .35); }
.tn.start { background: #1a0a10; box-shadow: inset 0 0 0 1.5px rgba(230, 160, 184, .5); color: #d78aa3; }
.tn.start > .ic { width: 60%; height: 60%; }
.tn-fx { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; line-height: 1; }
.tn-fx .ni { width: 17px; height: 17px; } .tn-fx .ni b { font-size: 8.5px; }
.tn-fx .fx .ic, .tn-fx > .ic { width: 15px; height: 15px; }
.tn-fx .fx b { font-size: 9px; margin-right: -1px; }
.tn-fx .fx.word { font-size: 9.5px; }
.tlxboard.big .tn-fx .ni { width: 19px; height: 19px; } .tlxboard.big .tn-fx .ni b { font-size: 9.5px; }
.tlxboard.big .tn-fx .fx .ic, .tlxboard.big .tn-fx > .ic { width: 17px; height: 17px; }
.tn-mk { position: absolute; left: -3px; right: -3px; bottom: -5px; display: flex; justify-content: center; gap: 1px; z-index: 2; }
.tn-mk .rm { width: 11px; height: 11px; }
.tn.pick { cursor: pointer; background: #4a1a2c; box-shadow: inset 0 0 0 2px #ffd978, 0 0 14px rgba(255, 217, 120, .75); }
.tn.pick:hover { background: #6b2640; transform: scale(1.12); }
.tank small { display: inline-flex; align-items: center; gap: 1px; margin-left: 5px; font-size: 13px; color: #c98ea1; }
.tank small .ic { width: 12px; height: 12px; }
.cp-tlx { overflow-x: auto; padding-bottom: 6px; }
.cp-tlx .tlxboard.big { width: max-content; }

/* End turn, and Undo beside it */
.st-action { display: flex; gap: 6px; }
.st-action .big-btn { flex: 1; min-width: 0; width: auto; }
.undo-btn { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; border-radius: 12px;
  border: 1px solid #5b7fa8; background: #132c4a; color: #d7e7fa; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.undo-btn .ic { width: 20px; height: 20px; }
.undo-btn:hover:not(:disabled) { background: #1f4a7a; color: #fff; }
.undo-btn:disabled { opacity: .35; cursor: not-allowed; }
.pbar .btn .ic { width: 15px; height: 15px; }

/* a card with many agent icons: they run on in a second column */
.cd-icons { bottom: 4px; flex-wrap: wrap; align-content: flex-start; }
.sc-icons { bottom: 26px; flex-wrap: wrap; align-content: flex-start; }

/* CHOAM: a gold plate; Sell Melange as four clear exchanges; the Shipping track as a ladder with each house's ship */
.sec-choam { background: linear-gradient(180deg, rgba(242, 169, 28, .22), rgba(242, 169, 28, .06)), repeating-linear-gradient(135deg, rgba(255, 215, 120, .05) 0 6px, transparent 6px 12px); }
.a-choam .bs-frame { background: linear-gradient(155deg, #ffe39a 0%, #f2a91c 38%, #8a5a06 100%); }
.sell { gap: 4px; }
.sell-o { gap: 0; padding: 2px 3px 3px; border-radius: 8px; background: rgba(10, 8, 4, .62); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .45); }
.sell-o i { margin: 1px 0; border-top-color: var(--gold-2); }
.sell-o .ni { width: 25px; height: 25px; }
.bi.mod-freight .ic { width: 34px; height: 34px; margin-right: -4px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.shiptrack { gap: 4px; padding: 4px; background: linear-gradient(180deg, rgba(20, 16, 6, .95), rgba(10, 18, 20, .95)); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .5), 0 6px 14px rgba(0, 0, 0, .45); }
.sh-c { background: linear-gradient(90deg, rgba(242, 193, 78, .16), rgba(242, 193, 78, .05)); border: 1px solid rgba(242, 193, 78, .35); }
.sh-c::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 0; height: 0; margin-left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid rgba(242, 193, 78, .55); }
.sh-c.s0::after { display: none; }
.sh-c em { color: rgba(255, 228, 160, .75); }
.sh-c.s0 .sh-fx .ic { color: #ffd978; opacity: .8; }
.fr { width: 20px; height: 20px; border-radius: 0; background: none; box-shadow: none; color: var(--pc); filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 3px var(--pc)); }
.sh-mk { right: 2px; top: 1px; gap: 0; flex-direction: column; }

/* ---- the moves, told big: who acts, a spotlight on where, a pulse on their panel ---- */
.st-caption { left: 470px; width: 790px; top: 44px; height: 58px; z-index: 56; }
.st-caption .cap-in { gap: 12px; padding: 5px 26px 5px 5px; font-size: 18px; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc, #f2c14e) 32%, rgba(6, 9, 16, .96)), rgba(6, 9, 16, .96) 60%);
  border: 2px solid var(--pc, var(--gold)); border-left-width: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .7), 0 0 26px color-mix(in srgb, var(--pc, #f2c14e) 45%, transparent); }
.st-caption .cap-pt { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--pc, var(--gold)); }
.st-caption .cap-ic { width: 30px; height: 30px; }
.st-caption.high { top: 616px; }
.fx-spot { position: absolute; pointer-events: none; border-radius: 16px; box-shadow: 0 0 0 3px var(--rc), 0 0 30px 6px var(--rc), 0 0 0 2400px rgba(2, 3, 8, .5); }
.pp.acting { box-shadow: 0 0 0 2px var(--pc), 0 0 34px color-mix(in srgb, var(--pc) 75%, transparent), var(--soft) !important; }
.fx-card .fx-label { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; padding: 3px 12px; border-radius: 999px;
  background: rgba(6, 9, 16, .94); border: 1.5px solid var(--pc, var(--gold)); font-weight: 800; font-size: 14px; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
.fx-ring { border-width: 5px; box-shadow: 0 0 26px var(--rc), inset 0 0 22px var(--rc); }
.fx-gain { font-size: 19px; padding: 3px 11px 3px 8px; }
.fx-gain .ni, .fx-gain > .ic { width: 27px; height: 27px; }
/* the Shipping track: each house's ship sits in a row along the bottom of its step, clear of the reward */
.sh-c { padding: 0 3px 13px 12px; align-items: center; }
.sh-mk { position: absolute; left: 2px; right: 2px; top: auto; bottom: 0; flex-direction: row; justify-content: center; gap: 0; }
.fr { width: 17px; height: 17px; margin: 0 -1px; }
.sh-fx .ni { width: 18px; height: 18px; }
.sh-c.s0 .sh-fx .ic { width: 20px; height: 20px; }
/* the banner rides over the top bar, above the board's first row of spaces */
.st-caption { top: -2px; height: 60px; }
/* a leader's story, where one is told */
.lc-lore { margin-top: 2px; padding: 8px 10px; border-radius: 8px; font: italic 500 13.5px/1.4 var(--book); color: #e6dcc6; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--gold); }

/* v23: the research tree's branches, ways and prizes */
.tb-branch { position: absolute; border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 16%, transparent), color-mix(in srgb, var(--bc) 5%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 38%, transparent); pointer-events: none; }
.tb-name { position: absolute; z-index: 2; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font: 800 12.5px var(--disp); letter-spacing: .14em;
  text-transform: uppercase; color: var(--bc); text-shadow: 0 1px 2px #000; cursor: help; }
.tb-name small { font: 600 12px/1 inherit; font-family: inherit; letter-spacing: .02em; text-transform: none; color: color-mix(in srgb, var(--bc) 60%, #c9b6c0); }
.tb-way { position: absolute; z-index: 2; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bc);
  opacity: .92; text-shadow: 0 1px 2px #000; cursor: help; }
.tb-band em { top: auto; bottom: 1px; }
.tree-lines .ln.b-A { stroke: color-mix(in srgb, #b98cff 42%, transparent); }
.tree-lines .ln.b-B { stroke: color-mix(in srgb, #56d6c9 42%, transparent); }
.tree-lines .ln.b-C { stroke: color-mix(in srgb, #ff8a6e 42%, transparent); }
.tree .tn { border-radius: 9px; background: color-mix(in srgb, var(--bc, #e6a0b8) 14%, #1c0b14); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bc, #e6a0b8) 62%, transparent), 0 2px 4px rgba(0, 0, 0, .5); }
.tree .tn.gm { background: color-mix(in srgb, var(--bc, #e6a0b8) 22%, #2a0f1d); }
.tree .tn.vp { background: #3a2a0c; box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 8px rgba(242, 193, 78, .35); }
.tree .tn.start { border-radius: 50%; }
.tree .tn.pick { background: #4a1a2c; box-shadow: inset 0 0 0 2px #ffd978, 0 0 14px rgba(255, 217, 120, .75); }
.tn.prize { padding: 0; overflow: visible; border-radius: 8px; background: #120810; box-shadow: 0 0 0 2px var(--bc), 0 3px 8px rgba(0, 0, 0, .7); cursor: help; }
.tn.prize .tn-art { position: absolute; inset: 0; border-radius: 7px; overflow: hidden; }
.tn.prize .tn-art.none { display: flex; align-items: center; justify-content: center; }
.tn.prize .tn-art.none .ic { width: 70%; height: 70%; }
.tn.prize.relic { border-radius: 50%; }
.tn.prize.relic .tn-art { border-radius: 50%; }
.tn.prize.master { box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px rgba(0, 0, 0, .6), 0 0 16px rgba(242, 193, 78, .55); }
.tn-kind { position: absolute; right: -6px; top: -7px; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: #120810; box-shadow: 0 0 0 1.5px var(--bc); z-index: 2; }
.tn.prize.master .tn-kind { box-shadow: 0 0 0 1.5px var(--gold); }
.tn-kind .ic { width: 13px; height: 13px; }
.tn.prize.taken { filter: saturate(.25) brightness(.6); box-shadow: 0 0 0 2px var(--pc), 0 2px 5px rgba(0, 0, 0, .7); }
.tn-took { position: absolute; left: -6px; bottom: -6px; width: 16px; height: 16px; z-index: 2; filter: none; }
.tn-took .ic { width: 16px; height: 16px; }
.tn.prize.pick { box-shadow: 0 0 0 2.5px #ffd978, 0 0 16px rgba(255, 217, 120, .85); cursor: pointer; }
.tn.prize.pick:hover { transform: scale(1.1); }
.fx.word.prize { font-size: 12.5px; gap: 2px; color: #e2c9ff; }
.tk-relic { display: inline-flex; margin-left: 3px; cursor: help; }
.tk-relic .ic { width: 15px; height: 15px; }
.tlb-vault { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.tlb-vault .ic { width: 15px; height: 15px; }
.mc.relics { cursor: pointer; }

/* a relic tile */
.rtile { position: relative; display: flex; flex-direction: column; gap: 4px; width: 200px; padding: 8px; border-radius: 12px; background: #150b1c;
  box-shadow: inset 0 0 0 1.5px #7d5bb3, 0 6px 18px rgba(0, 0, 0, .55); color: #eadcf7; }
.rtile .rt-art { position: relative; display: block; aspect-ratio: 280 / 230; border-radius: 8px; overflow: hidden; background: #0b0610; }
.rtile .rt-art.none { display: flex; align-items: center; justify-content: center; }
.rtile .rt-art.none .ic { width: 40%; height: 40%; }
.rtile .rt-name { display: flex; align-items: center; gap: 5px; font: 700 14px var(--disp); letter-spacing: .06em; color: #d9c2ff; }
.rtile .rt-name .ic { width: 15px; height: 15px; flex: none; }
.rtile .rt-txt { font-size: 14px; line-height: 1.35; color: #f1e9fa; }
.rt-st { font-size: 13px; color: #bba6cc; }
.rtile.taken, .vcard.taken { opacity: .6; }
.rtile.big { width: 300px; }
.rtile.tip { width: 230px; }
.vault h3 { margin: 12px 0 8px; font: 700 14px var(--disp); letter-spacing: .12em; text-transform: uppercase; color: #d9c2ff; }
.vault-relics, .vault-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.vcard { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 170px; }
.vcard .cd { width: 170px; }

/* vat-grown and masterwork cards */
.cd.f-vat { --fc: #ff8fb2; }
.cd.f-vat .cd-head { background: linear-gradient(180deg, #5a1d33, #2f0f1d); }
.cd.f-master { --fc: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(242, 193, 78, .45); }
.cd.f-master .cd-head { background: linear-gradient(180deg, #6b4a0e, #2f2106); }
.cd.f-master .cd-tag, .cd.f-vat .cd-tag { font-weight: 800; letter-spacing: .06em; }
.rv-sw b { font-size: 15px; font-weight: 800; margin-right: 1px; }

/* a prize taken: shown large on the table, then carried to its house */
.fx-card.prize-fx { z-index: 60; }
.fx-card.prize-fx .rtile { width: 190px; }
.fx-card.prize-fx.master { filter: drop-shadow(0 0 18px rgba(242, 193, 78, .8)); }

/* a card shown large (tooltip, zoom) shows all of its text */
.cd.big .cd-box { max-height: none; }

.rv-vp { display: inline-flex; align-items: center; gap: 1px; font-weight: 800; color: #ffe9a8; }
.vcard { width: 204px; }
.vcard .cd { width: 170px; zoom: 1.2; }
.vcard .cd .cd-box { max-height: none; }

/* ---------- the published cards (v24): larger, and their effects as icons the way the printed cards show them ---------- */
.cd { width: 172px; height: 246px; }
.cd-name { font-size: 12.6px; line-height: 1.08; }
.cd-cost.spec { width: auto; min-width: 27px; gap: 0; display: inline-flex; align-items: center; }
.cd-cost.spec .ic { position: static; width: 11px; height: 11px; margin-right: -2px; }
.cd-cost.spec b { margin-left: 3px; color: #ffd1df; }
.cd-ribs { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 5px 0 6px; }
.cd-rib { padding: 1px 9px 1px 6px; border-radius: 3px 10px 10px 3px; font: 800 9.6px var(--ui); letter-spacing: .11em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, var(--rc, var(--fcol)), color-mix(in srgb, var(--rc, var(--fcol)) 55%, #0c0f16)); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.cd-rib.r-emperor { --rc: #8e98a4; } .cd-rib.r-guild { --rc: #cc4230; } .cd-rib.r-bg { --rc: #8d5fd6; } .cd-rib.r-fremen { --rc: #2f8fc9; }
.cd-art { flex: 1 1 60px; min-height: 58px; }
.cd-icons { gap: 2px; }
.cd-icons .cd-ic { width: 21px; height: 21px; }
.cd-cond { display: flex; flex-direction: column; gap: 2px; opacity: .6; filter: saturate(.55); outline: 1px dashed rgba(255, 255, 255, .55); outline-offset: 1px; border-radius: 3px; }
.cd-acq { position: absolute; right: 4px; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 3px 8px;
  background: linear-gradient(180deg, #1d4f86, #12325a); border: 1px solid #8cc4ff; border-top: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 50% 100%, 0 calc(100% - 6px)); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.cd-acq .cx-t { display: none; }
.cd-acq .ni { width: 20px; height: 20px; }
.cd-acq .ni b { font-size: 11px; }
.cd-acq .cx-i .ic { width: 16px; height: 16px; }
.cd-acq .cx-or { flex-direction: column; gap: 0; }
.cd-acq .orw { color: #cfe3ff; font-size: 8px; margin: 0; }
.cd-box { flex: none; max-height: none; min-height: 30px; padding: 4px 5px; display: flex; flex-direction: column; justify-content: center; gap: 2px; position: relative; }
.cd-box.empty { min-height: 26px; }
.cd-box.graft { background: radial-gradient(130% 150% at 50% 0%, #e2f1d6 0%, #bfdcaa 60%, #9fc486 100%); padding-top: 13px; }
.cd-graft { position: absolute; left: 0; top: 0; padding: 0 10px 0 6px; border-radius: 7px 0 8px 0; background: #3f7d2e; color: #eaffd9;
  font: 800 9px var(--ui); letter-spacing: .14em; text-transform: uppercase; line-height: 12px; }
.cd-kw { align-self: center; display: inline-flex; align-items: center; gap: 2px; padding: 0 6px 0 3px; border-radius: 9px; background: #2a1a0a; color: #f3e2bb;
  font: 700 9.6px var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.cd-kw .ic { width: 12px; height: 12px; }
.cx { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 4px; min-width: 0; }
.cx .ni { width: 22px; height: 22px; }
.cx .ni > b { font-size: 12px; }
.cx-i { display: inline-flex; align-items: center; gap: 1px; }
.cx-i .ic { width: 19px; height: 19px; flex: none; }
.cx-i .ic.troop { color: #eef1f4; filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.cx-i .ic.dread { color: #aeb9c6; }
.cx-i.neg { position: relative; }
.cx-i.neg::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #c62828; transform: rotate(-18deg); }
.cx-i b.x { font: 800 12px var(--ui); margin-left: 1px; }
.cx-i small { font: 800 11px var(--ui); }
.cx-i em { font: 700 10px var(--ui); font-style: normal; margin: 0 1px; }
.cx-i.seal .ic { width: 22px; height: 22px; color: #b98a2c; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.cx-t { flex-basis: 100%; text-align: center; font: 500 11.4px/1.12 var(--book); }
.cx-if, .cx-pay, .cx-or, .cx-ch, .cx-each { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 3px; }
.cx-c { display: inline-flex; align-items: center; gap: 2px; font: 700 10.4px/1 var(--ui); white-space: nowrap; }
.cx-c em { font-style: normal; }
.cx-c.helix .ic { width: 17px; height: 17px; }
.cx-f { width: 17px !important; height: 17px !important; }
.cx-f .ic { width: 12px !important; height: 12px !important; }
.cx-if .col { font-style: normal; font-weight: 800; margin: 0 1px 0 -1px; }
.cx-arr { width: 14px; height: 14px; color: #5a3a12; flex: none; }
.orw { font: 800 9px var(--ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; opacity: .72; margin: 0 1px; }
.cx-ch > em { flex-basis: 100%; text-align: center; font: 700 10.4px var(--ui); font-style: normal; }
.cx-opt { display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px; border-radius: 5px; background: rgba(90, 60, 20, .1); box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .18); }
.cx-each em { font: 700 10px var(--ui); font-style: normal; }
.cx-each .ic { width: 17px; height: 17px; }
.cx-x { width: 20px !important; height: 20px !important; color: #3a2a18; }
.infb { display: inline-grid; place-content: center; width: 19px; height: 22px; flex: none; background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 85%, #fff), var(--fc));
  clip-path: polygon(50% 0, 100% 27%, 100% 100%, 50% 77%, 0 100%, 0 27%); color: #16120c; }
.infb .ic { width: 12px; height: 12px; margin-top: 3px; }
.infb > b { font: 800 12px var(--ui); margin-top: 2px; }
.infb.dn { clip-path: polygon(0 0, 50% 23%, 100% 0, 100% 73%, 50% 100%, 0 73%); filter: grayscale(.2) brightness(.85); }
.infb.dn .ic, .infb.dn > b { margin-top: -3px; }
.cd-ontrash { margin: 3px 5px 0; padding: 2px 5px; border-radius: 6px; background: linear-gradient(90deg, #8a2219, #5a130d); color: #ffe6d8;
  display: flex; align-items: center; gap: 3px; font: 700 9.6px var(--ui); text-transform: uppercase; letter-spacing: .06em; }
.cd-ontrash > .ic { width: 14px; height: 14px; }
.cd-ontrash .cx { flex: 1; justify-content: flex-end; }
.cd-ontrash .cx .ic { width: 16px; height: 16px; }
.cd-reveal { display: flex; align-items: center; gap: 4px; min-height: 34px; padding: 3px 5px; }
.cd-reveal > .cx { flex: 1; }
.cd-reveal .cx .ni { width: 25px; height: 25px; }
.cd-reveal .cx .ni > b { font-size: 13px; }
.cd-reveal .cx-i .ic { width: 20px; height: 20px; }
.cd-reveal .cx-c, .cd-reveal .orw, .cd-reveal .cx-each em, .cd-reveal .cx-ch > em { color: #e9eef5; }
.cd-reveal .cx-t { color: #e9eef5; font-size: 11px; }
.cd-reveal .cx-arr { color: #cfd8e3; }
.cd-reveal .cx-opt { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cd-reveal .cx-x { color: #e9eef5; }
.cd-unload { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 2px; border-radius: 4px; background: #7a1d16; }
.cd-unload .ic { width: 11px; height: 11px; }
.cd.intr .cd-ribs .cd-rib { --rc: #8a6a24; }
.cd.intr.k-combat .cd-rib { --rc: #a3261c; }
.cd.intr.k-endgame .cd-rib { --rc: #2f6f8f; }
.cd.f-tleilax { --fcol: #c24d78; }
.cd.f-tleilax .cd-head { background: linear-gradient(180deg, #6a2140, #2f0f1d); }
.vcard .cd { width: 172px; zoom: 1.15; }

/* the card gallery (?cards) */
.gallery { padding: 18px 22px 60px; }
.gallery h1 { font: 800 26px var(--disp); letter-spacing: .12em; color: var(--gold); margin: 0 0 4px; }
.gallery h2 { margin: 22px 0 10px; font: 700 16px var(--disp); letter-spacing: .12em; color: #e8d7b0; text-transform: uppercase; }
.gallery .g-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.gallery .g-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gallery .g-card small { color: var(--muted); font-size: 12px; }
.gallery.big .cd { zoom: 1.35; }
.sline { align-items: flex-start; }
.sline .sl-t { flex: 1; min-width: 0; line-height: 1.35; }
.sline .sl-t .ni { width: 20px; height: 20px; vertical-align: -5px; }
.sline .sl-t .ni b { font-size: 11px; }
.sline .sl-t .ic { width: 17px; height: 17px; vertical-align: -3px; }
.tip .sline > span:first-child, #tip .sline > span:first-child { width: 64px; }
/* the hand, larger (v24): the board's Arrakis section ends higher, the prompt bar sits over its lower edge */
#st-hand .tray-cards { height: 206px; }
#st-hand .tray-cards > .cd { zoom: .835; }
#st-hand .tray-cards > * + *, #st-hand .tray-cards.n5 > * + * { margin-left: 6px; }
#st-hand .tray-cards.n6 > * + * { margin-left: -14px; }
#st-hand .tray-cards.n7 > * + * { margin-left: -38px; }
#st-hand .tray-cards.n8 > * + * { margin-left: -56px; }
#st-hand .tray-cards.n9 > * + * { margin-left: -72px; }
#st-hand .tray-cards.n10 > * + * { margin-left: -84px; }
#st-hand .tray-cards.n11 > * + * { margin-left: -94px; }
#st-hand .tray-cards.n12 > * + * { margin-left: -102px; }
#st-hand .tray-intr { top: 42px; }
#st-hand .tray-stats { top: 30px; }
.peek > .cd { zoom: 1.36; }
#st-hand .tray-cards.n5 > * + * { margin-left: -8px; }
#st-hand .tray-cards { justify-content: center; left: 60px; }
.pb-src { color: #ffd98a; cursor: help; }
.pb-t .arr, .pb-fx .arr { width: 14px; height: 14px; opacity: .8; vertical-align: -2px; margin: 0 3px; }
.pb-fx { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.pb-fx .ni { width: 22px; height: 22px; }
.opt.fx-opt { min-height: 30px; gap: 3px; }
.opt.rs-opt { border-color: var(--bc); background: color-mix(in srgb, var(--bc) 22%, #0b0f16); }
.opt .hx { width: 16px; height: 16px; }
.pick-one { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* the research tree as a skill tree (v24): your spaces in your colour, the next steps lit, a helix on each genetic marker */
.tree.skill .tn { border-radius: 8px; gap: 3px; padding: 0 5px; }
.tree.skill .tn-fx { gap: 2px; flex-wrap: nowrap; }
.tree.skill .tn-fx .ni { width: 22px; height: 22px; }
.tree.skill .tn-fx .ni b { font-size: 11px; }
.tree.skill .tn-fx .fx .ic, .tree.skill .tn-fx > .ic { width: 19px; height: 19px; }
.tree.skill .tn-fx .fx b { font-size: 11.5px; }
.tree.skill .tn.near { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bc) 85%, #fff), 0 0 9px color-mix(in srgb, var(--bc) 45%, transparent); }
.tree.skill .tn.own { background: color-mix(in srgb, var(--pc) 34%, #140a10); box-shadow: inset 0 0 0 2px var(--pc), 0 0 10px color-mix(in srgb, var(--pc) 55%, transparent); }
.tree.skill .tn.pick { cursor: pointer; background: color-mix(in srgb, var(--bc) 32%, #2a0f1d); box-shadow: inset 0 0 0 2px #ffd978, 0 0 16px rgba(255, 217, 120, .8); }
.tree.skill .tn.pick:hover { transform: scale(1.1); z-index: 3; }
.tn-hx { position: absolute; left: -9px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; z-index: 2; }
.tn-hx .ic { width: 17px; height: 17px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.tree.skill .tn.prize { align-items: flex-end; justify-content: stretch; padding: 0; border-radius: 8px; }
.tree.skill .tn.prize.relic, .tree.skill .tn.prize.relic .tn-art { border-radius: 8px; }
.tree.skill .tn.prize .tn-art { border-radius: 7px; }
.tree.skill .tn-pn { position: relative; z-index: 1; display: flex; align-items: center; gap: 3px; width: 100%; padding: 1px 5px; border-radius: 0 0 7px 7px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .55)); font: 700 10px/1.25 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.tree.skill .tn-pn .ic { width: 12px; height: 12px; flex: none; }
.tree.skill .tn.prize.own { box-shadow: 0 0 0 2px var(--pc), 0 0 12px color-mix(in srgb, var(--pc) 60%, transparent); }
.tree.skill .tn.prize.pick { box-shadow: 0 0 0 2px #ffd978, 0 0 16px rgba(255, 217, 120, .8); }
.tree.skill .tn.prize.near { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc) 85%, #fff), 0 0 9px color-mix(in srgb, var(--bc) 45%, transparent); }
.tree.skill .tn.prize.taken { filter: saturate(.3) brightness(.6); }
.tree.skill .tn-took { left: auto; right: -8px; top: -9px; bottom: auto; width: auto; height: auto; filter: none; }
.tree.skill .tn-took .ni { width: 20px; height: 20px; }
.tree.skill .tn-mk { left: auto; right: 5px; bottom: -6px; justify-content: flex-end; }
.tree.skill .tn-mk .rm { width: 10px; height: 10px; }
.tree-lines .ln.own { stroke: var(--pc); stroke-width: 3.4; stroke-linecap: round; opacity: .95; }
.tree.skill .tn.start { border-radius: 50%; }
.tlb-tanks .tank .hx { display: inline-flex; }
.tlb-tanks .tank .hx .ic { width: 13px; height: 13px; }
/* the prompt bar grows upward when a choice has many options */
#st-pbar { top: auto !important; bottom: 209px; height: auto !important; min-height: 40px; flex-wrap: wrap; row-gap: 5px; padding-top: 4px; padding-bottom: 4px; }
#st-pbar .pb-t { flex: 1 1 auto; min-width: 180px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px; line-height: 1.25; }
#st-pbar .opt { min-height: 30px; }
.opt .cx-t, .opt .cxw .cx-t { flex-basis: auto; font: 600 13px/1.2 var(--ui); color: #eaf2ff; text-align: left; }
.opt .cx-opt { background: rgba(255, 255, 255, .06); }
.opt .infb .ic { color: #16120c; }
.fx.cxw { display: inline-flex; align-items: center; gap: 2px; }
.fx.cxw .cx-t { flex-basis: auto; font: 600 13px/1.2 var(--ui); }
#st-hand .tray-cards.n6 > * + * { margin-left: -35px; }
#st-hand .tray-cards.n7 > * + * { margin-left: -53px; }
#st-hand .tray-cards.n8 > * + * { margin-left: -66px; }
#st-hand .tray-cards.n9 > * + * { margin-left: -76px; }
#st-hand .tray-cards.n10 > * + * { margin-left: -83px; }
#st-hand .tray-cards.n11 > * + * { margin-left: -89px; }
#st-hand .tray-cards.n12 > * + * { margin-left: -94px; }

/* ---------- the research tree (v25): a skill tree to pan and zoom, with a side panel ---------- */
#st-tlx.tlx-panel { padding: 0; display: none; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 45%, #1d0c16 0%, #0d0610 55%, #07040a 100%); border: 1px solid rgba(230, 160, 184, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .8); }
#st-tlx.tlx-panel.open { display: flex; }
.lat-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(230, 160, 184, .2); background: rgba(10, 4, 8, .6); }
.lat-top > .ic { width: 22px; height: 22px; }
.lat-top > b { font: 800 16px var(--disp); letter-spacing: .14em; color: #f3d7e2; text-transform: uppercase; }
.lat-sub { font: 600 13px var(--disp); letter-spacing: .1em; color: #c79aad; }
.lat-hint { margin-left: 12px; font-weight: 700; color: #ffd978; display: inline-flex; align-items: center; gap: 5px; }
.lat-hint .ic { width: 16px; height: 16px; }
.lat-q { width: 260px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(230, 160, 184, .35); background: rgba(0, 0, 0, .35); color: #fff; }
.lat-b { width: 32px; height: 32px; display: grid; place-content: center; border-radius: 9px; border: 1px solid rgba(230, 160, 184, .3); background: rgba(0, 0, 0, .3); color: #f3d7e2; }
.lat-b .ic { width: 16px; height: 16px; }
.lat-b.on { background: rgba(230, 160, 184, .22); border-color: #e6a0b8; }
.lat-body { flex: 1; min-height: 0; display: flex; }
.lat-view { position: relative; flex: 1; min-width: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.lat-view.panning { cursor: grabbing; }
.lat-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lat-wedge { fill: color-mix(in srgb, var(--sc) 7%, transparent); stroke: color-mix(in srgb, var(--sc) 18%, transparent); stroke-width: 3; }
.lat-sname { fill: color-mix(in srgb, var(--sc) 75%, #fff); font: 800 92px var(--disp); letter-spacing: .12em; text-anchor: middle; opacity: .55; }
.lat-stext { fill: color-mix(in srgb, var(--sc) 55%, #bbb); font: 600 46px var(--ui); letter-spacing: .06em; text-anchor: middle; opacity: .5; }
.lat-core circle { fill: #1a0a12; stroke: #e6a0b8; stroke-width: 6; opacity: .9; }
.lat-core circle.c2 { fill: none; stroke-width: 2; stroke-dasharray: 10 8; }
.le { stroke: rgba(210, 180, 190, .22); stroke-width: 5; stroke-linecap: round; }
.le.own { stroke: var(--pc); stroke-width: 9; opacity: .95; }
.le.open { stroke: #ffd978; stroke-width: 8; stroke-dasharray: 16 10; }
.le.path { stroke: #fff; stroke-width: 7; opacity: .75; }
.ln { cursor: pointer; }
.ln .lr { fill: #1b1117; stroke: color-mix(in srgb, var(--sc) 55%, #555); stroke-width: 3; }
.ln.k-notable .lr { stroke-width: 5; fill: color-mix(in srgb, var(--sc) 18%, #161016); }
.ln.k-key .lr { stroke: var(--sc); stroke-width: 6; fill: color-mix(in srgb, var(--sc) 25%, #120a10); }
.ln.k-key .lr2 { fill: none; stroke: #e8c46b; stroke-width: 4; stroke-dasharray: 6 5; opacity: .8; }
.ln.k-root .lr { stroke: var(--sc); stroke-width: 6; fill: color-mix(in srgb, var(--sc) 30%, #150b12); }
.ln.k-mastery .lr { stroke: var(--sc); stroke-width: 4; fill: #231220; }
.ln.k-prize .lr { fill: #120a10; stroke: var(--sc); stroke-width: 4; }
.ln .lp { fill: #1a0f15; stroke: #e8c46b; stroke-width: 2; }
.ln.hx .lr { stroke: #ff4d6d; stroke-width: 4; }
.ln .li { opacity: .85; }
.ln.k-small .li { opacity: .7; }
.ln .lt { fill: #f2e6ec; font: 700 17px var(--ui); text-anchor: middle; paint-order: stroke; stroke: #0b0509; stroke-width: 5px; pointer-events: none; }
.ln.k-key .lt { font: 800 21px var(--disp); fill: #ffe7a6; letter-spacing: .04em; }
.ln.k-root .lt { font: 800 20px var(--disp); fill: color-mix(in srgb, var(--sc) 70%, #fff); }
.lat-svg.z1 .ln .lt, .lat-svg.z1 .ln.k-small .li { display: none; }
.lat-svg.z2 .ln.k-small .lt, .lat-svg.z2 .ln.k-notable .lt { display: none; }
.lat-svg.z1 .ln.k-key .lt, .lat-svg.z1 .ln.k-root .lt { display: block; font-size: 42px; }
.ln.near .lr { stroke: color-mix(in srgb, var(--sc) 80%, #fff); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sc) 70%, transparent)); }
.ln.own .lr { stroke: var(--pc); stroke-width: 6; fill: color-mix(in srgb, var(--pc) 35%, #140a10); filter: drop-shadow(0 0 8px var(--pc)); }
.ln.own .li { opacity: 1; }
.ln.open .lr { stroke: #ffd978; stroke-width: 7; fill: color-mix(in srgb, var(--sc) 30%, #2a1420); animation: lat-pulse 1.3s ease-in-out infinite; }
@keyframes lat-pulse { 50% { stroke: #fff4c4; filter: drop-shadow(0 0 14px rgba(255, 217, 120, .95)); } }
.ln.path .lr { stroke: #fff; }
.ln.pick .lr { stroke: #fff; stroke-width: 7; }
.ln.hit .lr { stroke: #7df9ff; stroke-width: 7; filter: drop-shadow(0 0 10px #7df9ff); }
.ln.taken { opacity: .55; }
.ln .tk { fill: none; stroke-width: 5; stroke-dasharray: 8 6; }
.ln.flash .lr { animation: lat-flash 1.5s ease-out; }
@keyframes lat-flash { 0% { stroke: var(--fl); stroke-width: 16; filter: drop-shadow(0 0 22px var(--fl)); } 100% { } }
.ln:hover .lr { stroke: #fff; }
.lat-side { flex: none; width: 360px; overflow-y: auto; padding: 10px 12px 14px; border-left: 1px solid rgba(230, 160, 184, .2); background: rgba(10, 4, 8, .55); display: flex; flex-direction: column; gap: 10px; }
.ls-info { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid color-mix(in srgb, var(--sc, #e6a0b8) 45%, transparent); }
.ls-info.empty { color: var(--muted); font-size: 14px; }
.ls-k { display: flex; align-items: center; gap: 6px; font: 700 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--sc) 70%, #ddd); }
.ls-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); }
.ls-n { font: 800 20px var(--disp); color: #fff; margin: 4px 0 6px; }
.ls-t { font: 500 15px/1.35 var(--book); color: #eadde3; }
.ls-t .ni { width: 20px; height: 20px; vertical-align: -5px; }
.ls-t .ic { width: 16px; height: 16px; vertical-align: -3px; }
.ls-pow1 { margin-top: 6px; display: inline-flex; gap: 5px; align-items: center; font-weight: 700; color: #ffd978; font-size: 13px; }
.ls-pow1 .ic { width: 14px; height: 14px; }
.ls-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ls-opt { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 9px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; }
.ls-opt b { color: #fff; }
.ls-opt.on { border-color: var(--pc, #e8c46b); background: color-mix(in srgb, var(--pc, #e8c46b) 16%, transparent); }
.ls-opt .btn { align-self: flex-start; margin-top: 4px; }
.ls-st { margin-top: 6px; font-size: 13px; color: #d8c1cb; }
.ls-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; color: #cdb8c3; }
.ls-meta .ok { color: #7ee2a8; display: inline-flex; gap: 4px; align-items: center; }
.ls-meta .ok .ic { width: 14px; height: 14px; }
.lat-go { margin-top: 10px; width: 100%; }
.ls-card { display: flex; justify-content: center; margin: 4px 0; }
.ls-card .cd { zoom: .95; }
.ls-relic { width: 100%; }
.ls-build { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.ls-h { display: flex; align-items: baseline; gap: 8px; font: 800 14px var(--disp); letter-spacing: .1em; text-transform: uppercase; color: #f3d7e2; }
.ls-h b { font-size: 20px; color: var(--pc, #ffd978); }
.ls-h .dim { font: 600 12px var(--ui); letter-spacing: 0; text-transform: none; }
.ls-bars { display: flex; height: 7px; margin: 8px 0; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.ls-bars .lb { background: var(--sc); }
.ls-sub { font: 700 11.5px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #b99aaa; margin: 8px 0 5px; }
.lpow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 5px; border-radius: 9px; background: rgba(255, 217, 120, .07); border: 1px solid rgba(255, 217, 120, .25); }
.lpow span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lpow small { color: #d9c7cf; font-size: 12px; line-height: 1.25; }
.ls-used { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: #9e8994; }
.lchips { display: flex; flex-wrap: wrap; gap: 5px; }
.lchip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 12px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: color-mix(in srgb, var(--sc) 22%, #150b12); border: 1px solid color-mix(in srgb, var(--sc) 60%, transparent); }
.lchip.k-key { border-color: #e8c46b; background: color-mix(in srgb, #e8c46b 22%, #150b12); }
.lchip .ic { width: 13px; height: 13px; }
.ls-track, .ls-tanks { padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.lt-cells { display: flex; gap: 3px; }
.lt-c { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 1px 6px; border-radius: 8px; background: rgba(0, 0, 0, .3); }
.lt-c em { font: 800 11px var(--ui); font-style: normal; color: #d9b7c6; }
.lt-c em .ic { width: 13px; height: 13px; }
.lt-fx .ni { width: 20px; height: 20px; } .lt-fx .fx .ic { width: 16px; height: 16px; }
.lt-mk { display: flex; gap: 1px; min-height: 9px; }
.lt-mk .rm { width: 8px; height: 8px; }
.lt-first { position: absolute; top: -6px; right: -4px; }
.lt-first .ni { width: 17px; height: 17px; }
.ls-tanks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ls-tanks .ls-sub { margin: 0 4px 0 0; }
.ls-tanks .tank { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 9px; border: 1px solid var(--pc); font-size: 13px; }
.ls-tanks .tank .ic { width: 14px; height: 14px; }
.ls-tanks .btn { margin-left: auto; }
.ichip.pwr { border-color: #e8c46b; background: rgba(232, 196, 107, .12); }
.ichip.pwr.hot { box-shadow: 0 0 12px rgba(255, 217, 120, .5); }
.cz-peek { position: absolute; left: 6px; right: 6px; bottom: -20px; display: flex; align-items: center; gap: 4px; justify-content: center; font-size: 12px; font-weight: 700; color: #bfe6ff; }
.cz-peek .ic { width: 13px; height: 13px; }
/* on a phone: the tree in its fold, the side panel under it */
.cp-tlx.lat-host { display: flex; flex-direction: column; }
.cp-tlx .lat-top { flex-wrap: wrap; }
.cp-tlx .lat-q { width: 100%; order: 9; }
.cp-tlx .lat-body { flex-direction: column; }
.cp-tlx .lat-view { height: 62vh; flex: none; }
.cp-tlx .lat-side { width: auto; border-left: 0; border-top: 1px solid rgba(230, 160, 184, .2); }
.st-powers { position: absolute; }
.pow-btn { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 11px; border: 1px solid #e8c46b;
  background: linear-gradient(180deg, rgba(90, 60, 20, .85), rgba(40, 24, 8, .9)); color: #ffe7a6; font: 800 14px var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.pow-btn .ic { width: 18px; height: 18px; }
.pow-btn b { min-width: 20px; padding: 0 5px; border-radius: 9px; background: #e8c46b; color: #2a1a06; }
.pow-btn.glow { box-shadow: 0 0 16px rgba(255, 217, 120, .7); }
.lpow.big { padding: 10px 12px; }
.lpow.big b { font-size: 16px; }
.lpow.big small { font-size: 13.5px; }
.lpow em { font-style: normal; font-size: 12px; color: #ffd978; margin-top: 2px; }