:root{
  --bg:#12161d; --bg2:#1a2029; --bg3:#232b36; --line:#323c4a;
  --fg:#e6ecf3; --dim:#8c9bad; --accent:#f0b429; --good:#38b26b; --bad:#e0484b;
  --r:10px;
}
.benchmarkLink{display:block;margin-top:10px;padding:11px 12px;border:1px solid #807044;border-radius:9px;background:#282719;color:#f3c86c;text-align:center;font-size:13px;font-weight:600;text-decoration:none}
.benchmarkLink:hover{background:#343020}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font:14px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit}
.hidden{display:none !important}
.screen{position:fixed;inset:0}
.panel{background:#171d26ee;border:1px solid var(--line);border-radius:var(--r)}

/* ---------------- join ---------------- */
#join{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 700px at 50% 30%,#1d2632,#0d1116)}
.joinCard{width:340px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;
  padding:26px;box-shadow:0 20px 60px #0008}
.joinCard h1{margin:0 0 18px;font-size:30px;letter-spacing:-.5px}
.joinCard h1 span{color:var(--accent)}
.joinCard label{display:block;margin-bottom:12px;font-size:12px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.08em}
.joinCard input{display:block;width:100%;margin-top:5px;padding:10px 12px;border-radius:8px;
  background:var(--bg3);border:1px solid var(--line);color:var(--fg);text-transform:none;letter-spacing:0}
.joinCard input:focus{outline:2px solid var(--accent)}
button.primary{width:100%;padding:11px;border-radius:8px;background:var(--accent);color:#1a1200;
  font-weight:700;margin-top:4px}
button.primary:hover{filter:brightness(1.08)}
p.joinErr{margin:12px 0 0;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.45;
  background:#3a2020;border:1px solid #6b2f2f;color:#ffb3b3}

/* ---------------- board ---------------- */
#board{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:radial-gradient(900px 600px at 45% 45%,#1b2430,#0e1218);touch-action:none}

/* ---------------- right column ---------------- */
#rightCol{position:absolute;top:10px;right:10px;bottom:10px;width:322px;
  display:flex;flex-direction:column;gap:6px;pointer-events:none}
#rightCol>*{pointer-events:auto}
#logPanel{padding:7px;display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
#log{height:150px;overflow-y:auto;font-size:13px;line-height:1.5;padding:2px;color:#c5d0dd}
#log div{margin-bottom:2px}
#log .dot{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px}
#chat{width:100%;padding:6px 8px;border-radius:7px;background:var(--bg3);
  border:1px solid var(--line);color:var(--fg);font-size:12px}

#bank{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;flex:0 0 auto}
.bankLabel{font-size:9px;letter-spacing:.12em;color:var(--dim)}
.bankItem{display:inline-flex;align-items:center;gap:3px;background:#222a35;
  border:1px solid #303a47;border-radius:5px;padding:1px 5px;font-size:11px}
.bankItem i{width:10px;height:10px;border-radius:3px;display:inline-block}
.bankItem i.devDot{background:#6f7fd6}
.bankItem b{font-weight:700}

#players{display:flex;flex-direction:column;gap:5px;overflow-y:auto;flex:1 1 auto;min-height:0}
.pRow{display:grid;grid-template-columns:7px 1fr auto;gap:7px;align-items:start;
  padding:6px 7px;border-radius:8px}
.pRow.me{outline:1px solid var(--accent)}
.pRow.turn{background:#2b3648;box-shadow:inset 0 0 0 1px #4d6180}
.pSwatch{width:7px;align-self:stretch;min-height:34px;border-radius:3px}
.pRow:has(.pFace){align-items:center}
.pMain{display:flex;flex-direction:column;gap:3px;min-width:0}
.pName{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:5px;min-width:0}
/* one font for the whole title: "Percy3000, the Chaos Lord of Prime". It is
   allowed two lines rather than being cut off with an ellipsis. */
.pName{flex-wrap:wrap}
.pName>span:first-child{flex:1 1 100%;min-width:0;white-space:normal;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pSub{font-size:12px;color:var(--dim);display:flex;gap:7px;min-width:0;overflow:hidden;white-space:nowrap}
.pVp{font-size:23px;font-weight:800;text-align:right;line-height:1;padding-top:1px}
.pVp small{display:block;font-size:9px;color:var(--dim);font-weight:500;letter-spacing:.08em}
.badge{font-size:10.5px;background:#3a4556;border-radius:4px;padding:1px 5px;color:#cfd9e6;flex:0 0 auto}
.badge.turnTag{background:var(--accent);color:#1a1200;font-weight:700}
.pStats{display:flex;flex-wrap:wrap;gap:3px}
.stat{display:inline-flex;align-items:baseline;gap:2px;background:#2a3340;
  border:1px solid #36414f;border-radius:5px;padding:0 4px;line-height:1.55}
.stat i{font-style:normal;font-size:10px;color:var(--dim);text-transform:uppercase;display:inline-flex}
.stat i svg{width:12px;height:12px;fill:var(--dim);align-self:center}
.stat.won i svg{fill:var(--accent)}

/* your turn: a thin edge round the whole screen, breathing slowly - there,
   but never in the way */
body.myTurn #game::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;
  box-shadow:inset 0 0 0 3px var(--accent);animation:turnEdge 2.6s ease-in-out infinite}
@keyframes turnEdge{0%,100%{opacity:.22}50%{opacity:.7}}

/* trades: who has said no, and the button to say it */
.trNo{font-size:10.5px;color:var(--dim)}
button.mini.no{background:#3a2a2e;border-color:#6b3a44}
button.mini.no:hover{border-color:var(--bad)}

/* the tile's emblem, drawn onto the resource card */
.card .cEmblem{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:60px;height:54px;
  filter:drop-shadow(0 2px 2px #0005);pointer-events:none}
.stat b{font-size:13px;font-weight:700}
.stat.won{border-color:var(--accent);background:#3a3320}
.stat.won i{color:var(--accent)}
.pPieces{display:flex;flex-wrap:wrap;gap:5px;font-size:11.5px;color:var(--dim)}
.pPieces .free{color:var(--good)}
.pPieces .sevenTag{color:#9fb3cc}

/* ---------------- resource chips: a number and a coloured shape ---------- */
.rc{display:inline-flex;align-items:center;gap:2px}
.rc b{font-size:11px;font-weight:800}
.rc i{width:11px;height:11px;border-radius:3px;display:inline-block;
  border:1px solid #0008;box-shadow:0 1px 2px #0006}
.rc.big b{font-size:14px}
.rc.big i{width:17px;height:17px;border-radius:4px}
.costRow{display:inline-flex;align-items:center;gap:5px}

/* ---------------- your hand ---------------- */
#bottomBar{position:absolute;left:308px;bottom:10px;right:342px;display:flex;gap:10px;
  align-items:flex-end;justify-content:space-between;pointer-events:none}
#bottomBar>*{pointer-events:auto}
#leftStack{display:flex;flex-direction:column;gap:7px;min-width:0}
#hand{position:relative;display:flex;gap:6px;padding:9px 10px 8px;align-items:flex-end;
  flex-wrap:wrap}
#hand::before{content:"YOUR HAND";position:absolute;top:-7px;left:10px;font-size:8px;
  letter-spacing:.14em;color:var(--dim);background:#171d26;padding:0 5px;border-radius:3px}
.card{position:relative;width:64px;height:92px;border-radius:8px;overflow:hidden;flex-shrink:0;
  border:1px solid #0006;box-shadow:0 3px 10px #0006;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;padding-bottom:5px;user-select:none;cursor:pointer}
.card:hover{transform:translateY(-3px);transition:transform .08s}
.card.empty{opacity:.45;cursor:default}
.card.empty:hover{transform:none}
.card.offered{outline:2px solid var(--accent);outline-offset:-2px}
.card .cName{position:absolute;top:5px;left:0;right:0;text-align:center;font-size:9px;
  letter-spacing:.04em;text-transform:uppercase;color:#0009;font-weight:800;
  padding:0 2px;white-space:nowrap;overflow:hidden}
.card .cNum{font-size:23px;font-weight:800;color:#fff;text-shadow:0 1px 3px #0008;line-height:1}
.card .cOffer{position:absolute;top:18px;right:5px;font-size:10px;font-weight:800;color:#1a1200;
  background:var(--accent);border-radius:4px;padding:0 3px}
.handMeter{align-self:center;margin-left:4px;padding:4px 7px;border-radius:7px;
  background:var(--bg3);border:1px solid var(--line);font-size:11px;font-weight:700;
  color:var(--dim);white-space:nowrap}
.handMeter.over{background:#4a2020;border-color:var(--bad);color:#ffb3b3}

/* ---------------- trade tray, directly above the hand ---------------- */
#tradeTray{padding:8px 10px;display:flex;flex-direction:column;gap:7px;max-width:460px}
.trLine{display:flex;align-items:center;gap:10px}
.trSide{flex:1;min-width:0}
.trLabel{display:block;font-size:8.5px;letter-spacing:.14em;color:var(--dim);margin-bottom:3px}
.trChips{display:flex;flex-wrap:wrap;gap:4px}
.trHint{font-size:11px;color:var(--dim)}
.trArrow{color:var(--dim);font-size:16px}
.trActions{display:flex;flex-wrap:wrap;gap:5px}
.trOffer{display:flex;align-items:center;gap:7px;background:#202834;border-radius:7px;
  padding:5px 7px;font-size:12px;flex-wrap:wrap}
.trOffer b{font-size:12px}
button.chipBtn{display:inline-flex;align-items:center;gap:5px;background:var(--bg3);
  border:1px solid var(--line);border-radius:7px;padding:4px 7px;font-size:12px}
button.chipBtn:hover{border-color:var(--accent)}
button.chipBtn.sel{border-color:var(--accent);background:#2f3a49}
button.mini{padding:4px 9px;border-radius:6px;background:var(--bg3);border:1px solid var(--line);
  font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
button.mini:hover:not(:disabled){background:#2f3a49}
button.go{background:var(--accent);color:#1a1200;border-color:var(--accent)}
button.go:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.42;cursor:default}

/* ---------------- dice, bottom right ---------------- */
#dicePanel{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:190px;
  flex:0 0 auto}
#statusText{text-align:center;font-size:13px;font-weight:700;color:var(--dim)}
#statusText.mine{color:var(--accent)}
#diceBtn{display:flex;gap:10px;justify-content:center;padding:10px;border-radius:14px;
  background:#1a2029;border:1px solid var(--line);cursor:default}
#diceBtn.live{border-color:var(--accent);box-shadow:0 0 0 2px #f0b42933;cursor:pointer;
  animation:diceNudge 1.3s ease-in-out infinite}
#diceBtn.live:hover{background:#242d3a}
@keyframes diceNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.dieFace{width:64px;height:64px;border-radius:12px;background:#f2ead7;
  box-shadow:inset 0 -3px 0 #00000022,0 3px 8px #0007;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:9px;gap:2px}
.pip{border-radius:50%;background:transparent}
.pip.on{background:#26221c}
#endTurnBtn{padding:13px;border-radius:10px;background:var(--accent);color:#1a1200;
  font-weight:800;font-size:16px;border:1px solid var(--accent);letter-spacing:.02em}
/* while it is the roll button it says so loudly - it is the same button */
#endTurnBtn.rolling{background:var(--good);border-color:var(--good);color:#04180c;
  animation:diceNudge 1.5s ease-in-out infinite}
#endTurnBtn:hover:not(:disabled){filter:brightness(1.08)}
#abilityBtn{padding:7px;border-radius:9px;background:var(--bg3);border:1px solid var(--line);
  font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
#abilityBtn:hover:not(:disabled){background:#2f3a49}

/* ---------------- action panel (replaces every modal) ---------------- */
#actionPanel{width:100%;flex:0 1 auto;min-height:0;overflow-y:auto;padding:10px 12px}
.apHead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
#apTitle{font-size:15px;font-weight:700}
.apX{font-size:20px;line-height:1;color:var(--dim);padding:0 4px}
.apX:hover{color:var(--fg)}
.apNote{margin:0 0 9px;font-size:11.5px;color:var(--dim);line-height:1.45}
#apBody h4{margin:10px 0 6px;font-size:10px;letter-spacing:.1em;color:var(--dim);
  text-transform:uppercase}
.apGrid{display:flex;flex-direction:column;gap:5px}
button.apPick{text-align:left;background:var(--bg3);border:1px solid var(--line);
  border-radius:8px;padding:7px 9px}
button.apPick b{display:block;font-size:12.5px;margin-bottom:2px}
button.apPick span{font-size:11px;color:var(--dim);line-height:1.4}
button.apPick:hover:not(:disabled){border-color:var(--accent)}
button.apPick.sel{border-color:var(--good);background:#22331f}
button.apPick.arm{border-color:var(--accent);background:#2f3a49}
.apChips{display:flex;flex-wrap:wrap;gap:5px}
.apList{display:flex;flex-direction:column;gap:5px}
.apRow{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12px}
.apRow b{display:block;font-size:12.5px}
.apRow span{display:block;font-size:11px;color:var(--dim);line-height:1.4}
.apRow.result .pVp{font-size:18px}
.apActions{display:flex;gap:6px;justify-content:flex-end;margin-top:10px;align-items:center}
.apInput{flex:1 1 120px;min-width:90px;padding:5px 8px;border-radius:7px;
  background:var(--bg3);border:1px solid var(--line);color:var(--fg);font:inherit;
  font-size:12px}
.apInput:focus{outline:none;border-color:var(--accent)}

/* ---------------- toast ---------------- */
#toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:var(--bad);
  color:#fff;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;z-index:30;
  box-shadow:0 6px 20px #0007}


.freeTag{font-size:9px;font-weight:800;color:var(--good)}

/* ---------------- your development cards, face up ---------------- */
#handRow{display:flex;gap:7px;align-items:flex-end}
#devBar{display:flex;gap:5px;padding:13px 8px 8px;position:relative;max-width:300px;
  flex-wrap:wrap;min-width:132px}
#devBar::before{content:"DEV CARDS";position:absolute;top:-7px;left:10px;font-size:8px;
  letter-spacing:.14em;color:var(--dim);background:#171d26;padding:0 5px;border-radius:3px}
button.devCard{position:relative;width:52px;height:74px;border-radius:8px;background:#2d3550;
  border:1px solid #47527a;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:4px}
button.devCard:hover:not(.off){border-color:var(--accent);transform:translateY(-3px);
  transition:transform .08s}
button.devCard.off{opacity:.55;cursor:default}
.dIcon{width:24px;height:24px}
.dIcon svg{width:100%;height:100%;fill:#c6cffb}
.dName{font-size:8px;line-height:1.15;text-align:center;color:#c6cffb;
  text-transform:uppercase;letter-spacing:.02em}
.dCount{position:absolute;top:3px;right:4px;font-size:10px;font-weight:800;color:#1a1200;
  background:var(--accent);border-radius:5px;padding:0 4px}

/* resource cards: a picture and a number, name on hover */
.card .cIcon{width:26px;height:26px;position:absolute;top:7px;left:50%;
  transform:translateX(-50%);opacity:.85;color:#0b1016}
.card .cIcon svg{width:100%;height:100%;fill:#0b1016}
.card .cNum{margin-bottom:2px}
.card .cRate{position:absolute;bottom:2px;left:4px;font-size:8px;font-weight:800;
  color:#fff;background:#0007;border-radius:4px;padding:0 3px}

/* deployment: make the phase unmissable */
#deployNote{display:flex;align-items:center;gap:8px;margin-bottom:7px;padding:6px 8px;
  border-radius:8px;background:#2b3648;border:1px solid #4d6180;font-size:11.5px}
#deployNote b{color:var(--accent)}
.snake{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
.snake span{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;
  font-size:9px;font-weight:800;background:#2a3340;color:var(--dim)}
.snake span.done{opacity:.4}
.snake span.now{outline:2px solid var(--accent);color:#fff}

/* --- deployment: the four tasks, and the kings with their portraits ------- */
.apChecks{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.apChecks .chk{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  color:var(--dim);background:var(--bg3);border:1px solid var(--line);
  border-radius:6px;padding:3px 7px}
.apChecks .chk.on{color:var(--good);border-color:#2f5a2b;background:#1d2a1c}
.apChecks .chk i{font-style:normal;font-weight:800}
.apGrid.kings{gap:6px}
button.apPick.king{display:flex;gap:8px;align-items:flex-start}
button.apPick.king .kingArt{width:54px;height:54px;border-radius:6px;object-fit:cover;
  flex:0 0 auto;border:1px solid var(--line)}
button.apPick.king .kingText{display:block;min-width:0}
button.apPick.king em{display:block;font-style:normal;font-size:10.5px;margin-top:3px;
  color:var(--accent);opacity:.85}
button.apPick.gone,button.chipBtn.gone{opacity:.35}

/* ---------------- guild legend, board tooltip, turn clock ---------------- */
#guilds{display:flex;flex-direction:column;gap:3px;padding:7px 9px}
.guildRow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:11px;color:var(--dim)}
.guildRow b{font-size:11.5px;font-weight:700;color:var(--dim)}
.guildRow.held b{color:var(--fg)}
.guildRow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#tip{position:absolute;z-index:40;max-width:260px;background:#12161dee;color:var(--fg);
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:11.5px;
  line-height:1.45;pointer-events:none;box-shadow:0 6px 20px #0008}

#statusText.urgent{color:var(--bad);animation:pulseUrgent 1s ease-in-out infinite}
@keyframes pulseUrgent{50%{opacity:.45}}

/* ---------------- the clock, twice over ---------------- */
#statusRow{display:flex;align-items:center;justify-content:center;gap:8px}
#turnClock{font-size:12px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums;
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
#turnClock.low{color:var(--bad);border-color:var(--bad)}

/* the one you cannot miss: only for the last seconds of YOUR turn */
#bigClock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:35;
  display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;
  text-align:center}
#bigClock span{font-size:120px;line-height:.9;font-weight:800;color:var(--bad);
  font-variant-numeric:tabular-nums;text-shadow:0 0 34px #000,0 0 12px #000;
  animation:clockPulse 1s ease-in-out infinite}
#bigClock small{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bad);text-shadow:0 0 10px #000}
#bigClock.critical span{font-size:170px;animation-duration:.5s}
@keyframes clockPulse{50%{opacity:.35;transform:scale(.94)}}

/* ---------------- the thin toolbar above the log ---------------- */
#topBar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 2px 1px}
#roomTag{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gearBtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  line-height:1;color:var(--fg);background:var(--bg3);border:1px solid var(--line);border-radius:7px;padding:5px 10px}
#gearBtn svg{width:16px;height:16px;fill:var(--accent);transition:transform .4s ease}
#gearBtn:hover{border-color:var(--accent)}
#gearBtn:hover svg{transform:rotate(60deg)}

/* a price says each number only when it has to: no rows of 1s, and one
   multiplier up front when every colour costs the same */
.costRow .costMult{font-size:11px;font-weight:800;color:var(--fg);margin-right:1px}

/* ---------------- resource flight ---------------- */
#flyLayer{position:absolute;inset:0;pointer-events:none;z-index:38;overflow:hidden}
.flyCard{position:absolute;width:16px;height:22px;margin:-11px 0 0 -8px;border-radius:3px;
  border:1px solid #0b1016aa;box-shadow:0 2px 6px #0007;opacity:.95;
  transition:transform .62s cubic-bezier(.3,.8,.35,1),opacity .62s ease-in}

/* the king's face on the scoreboard, and the guilds shown where they are held */
.pRow .pFace{width:92px;height:92px;border-radius:8px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line);margin-right:3px;cursor:zoom-in}
.pRow .pFace:hover{border-color:var(--accent)}
.badge.guildTag{background:#2f3a49;color:var(--accent);border-color:#3c4a5c}

/* the king, full size, when you click his face */
#kingCard{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:#0a0d12dd;cursor:zoom-out;
  padding:24px}
#kingCard img{width:min(46vh,340px);height:min(46vh,340px);border-radius:14px;
  object-fit:cover;box-shadow:0 18px 50px #000a}
#kingCard .kcText{max-width:460px;text-align:center;max-height:44vh;overflow-y:auto}
/* one block per thing that is switched on for that player */
.kcFx{background:#141a23;border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;margin-top:8px;text-align:left}
.kcFx.offFx{opacity:.5}
.kcFx b{font-size:13px;margin-bottom:3px}
.kcFx em{margin-top:5px;font-size:11px}
#kingCard .kcText b{display:block;font-size:19px;margin-bottom:6px}
#kingCard .kcText p{margin:0;font-size:12.5px;line-height:1.55;color:var(--dim)}
#kingCard .kcText em{display:block;margin-top:9px;font-style:normal;font-size:12px;
  color:var(--accent)}

/* income: what the board pays you - a small engraved tag, deliberately
   nothing like the big count of cards held above it */
.cInc{margin-top:4px;padding:1px 6px 1px 5px;border-radius:999px;
  font:italic 700 10.5px/1.35 Georgia,"Times New Roman",serif;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:#fdf6e3;
  background:linear-gradient(#0b1016b8,#0b1016d9);
  box-shadow:inset 0 0 0 1px #ffffff2e,0 1px 2px #0006;white-space:nowrap}
/* on Steady, the pill fills left to right as the next card comes due: a
   faint wash behind the number and a bright line along its foot */
.cInc.filling{position:relative;isolation:isolate;overflow:hidden;text-shadow:0 1px 2px #000c}
.cInc.filling::after{content:'';position:absolute;z-index:-1;left:0;top:0;bottom:0;width:var(--p,0%);
  background:color-mix(in srgb,color-mix(in srgb,var(--rc,#fff) 55%,#fff) 42%,transparent);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--rc,#fff) 45%,#fff)}
.cInc:not(.perTurn)::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  background:currentColor;margin-right:3px;vertical-align:2px;opacity:.8}

/* the Seven prompt sits by the dice, where your eyes already are */
/* answered in a hurry, so it sits just above the dice rather than in the far
   corner where the slower panels live */
#actionPanel.byTheDice{position:fixed;z-index:45;max-height:65vh;left:auto;right:352px;top:auto;bottom:130px;width:288px;
  border-color:var(--accent)}
@media (max-width:1100px){#actionPanel.byTheDice{right:296px;width:240px}}

#buildChoices{position:fixed;display:flex;gap:12px;z-index:44;transform:translate(-50%,-100%);
  padding:12px;align-items:center;background:#141d28ed;border:1px solid #536477;border-radius:60px}
#buildChoices button{width:90px;height:90px;border-radius:50%;border:2px solid var(--accent);
  background:#263546;color:var(--fg);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;font-weight:700;cursor:pointer}
#buildChoices button:hover{background:#415976;box-shadow:0 0 0 3px #e8b44244}
#buildChoices button.confirmSelected{outline:3px solid #ffcf40;outline-offset:4px;box-shadow:0 0 0 7px #101820;background:#415976}
#buildChoices img{width:38px;height:34px;object-fit:contain}
#buildChoices small{font-size:9px;font-weight:400}

/* ---------------- the end of the game, read back ---------------- */
#summary{position:absolute;left:14px;right:14px;top:14px;bottom:14px;z-index:60;
  background:#0d1219f2;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 60px #000a;display:flex;flex-direction:column;overflow:hidden;
  backdrop-filter:blur(3px)}
/* minimised: a strip in the top corner, so the board is yours again */
#summary.mini{left:auto;right:312px;top:10px;bottom:auto;width:auto;max-width:520px;
  background:#0d1219ee;box-shadow:0 8px 24px #0008}
.sumHead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 14px;border-bottom:1px solid var(--line)}
#summary.mini .sumHead{border-bottom:none;padding:7px 10px}
.sumTitle{font-size:15px;display:flex;gap:6px;align-items:baseline;min-width:0}
.sumTitle span{color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sumBtns{display:flex;gap:7px;flex:0 0 auto}
.sumTabs{display:flex;gap:4px;padding:8px 12px 0}
button.sumTab{background:transparent;border:1px solid transparent;border-bottom:none;
  border-radius:8px 8px 0 0;padding:6px 14px;font-size:12px;font-weight:700;color:var(--dim)}
button.sumTab:hover{color:var(--fg)}
button.sumTab.on{background:var(--bg2);border-color:var(--line);color:var(--fg)}
.sumBody{flex:1;overflow:auto;padding:10px 14px 16px;display:flex;flex-direction:column;
  gap:12px}
.sumCard{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.sumCard h4{margin:0 0 2px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim)}
.sumNote{margin:0 0 8px;font-size:11.5px;color:var(--dim);opacity:.85}
.sumChart{width:100%;height:auto;display:block;margin:4px 0 2px}
.sumAxis{fill:#8d9bb0;font-size:11px;font-family:"Segoe UI",sans-serif}
.sumKey{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding-top:4px}
.sumTag{font-size:11px;font-weight:700;border:1px solid;border-radius:20px;padding:1px 9px}
.sumTable{width:100%;border-collapse:collapse;font-size:12px}
.sumTable th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);font-weight:700;padding:4px 8px 4px 0;border-bottom:1px solid var(--line)}
.sumTable td{padding:5px 8px 5px 0;border-bottom:1px solid #ffffff0d;white-space:nowrap}
.sumTable tr:last-child td{border-bottom:none}
.sumBands{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.sumBand{display:flex;align-items:center;gap:8px;font-size:11.5px}
.sumBandName{width:118px;flex:0 0 auto;color:var(--dim)}
.sumBandEnd{color:var(--dim);opacity:.7;font-size:10.5px}
.sumTrack{flex:1;display:flex;height:11px;border-radius:6px;overflow:hidden;
  background:#ffffff0d;border:1px solid var(--line)}
.sumSeg{display:block;height:100%;background:transparent}

/* ---------------- left column: everything you can buy ----------------
   The map is square and the window is not, so the shopping lives down the
   side where there is room and the bottom is left to the cards. Everything
   in here is a fixed size: a panel that changes shape when you hover moves
   the thing you are pointing at out from under the cursor, and then it
   flickers between the two shapes as the mouse chases it. */
#leftCol{position:absolute;left:10px;top:10px;bottom:10px;width:288px;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:6}
#leftCol>*{pointer-events:auto}
#buildStack{display:flex;flex-direction:column;gap:8px;min-height:0;flex:0 0 auto}
#buildBox{display:block;padding:8px 9px 6px}
.techHead{font-size:8px;font-weight:800;letter-spacing:.14em;color:var(--dim);
  opacity:.75;margin:2px 0 5px;padding-left:2px}
.techTree{display:flex;flex-direction:column;gap:3px}
.tRow{display:flex;align-items:center;height:32px}
/* the elbow: a corner in borders, with the trunk carrying on down past it
   when another branch follows */
.tElbow{position:relative;width:14px;height:100%;flex:0 0 auto}
.tElbow::before{content:"";position:absolute;left:5px;top:-5px;width:1px;height:21px;
  background:var(--line)}
.tElbow::after{content:"";position:absolute;left:5px;top:15px;width:8px;height:1px;
  background:var(--line)}
.tElbow.through::before{height:40px}
/* the trunk down the left of the tree: road to settlement to city, one line */
.tElbow.trunk::before{top:-4px;height:calc(100% + 8px)}
.tElbow.trunk::after{display:none}
.tElbow.trunk.top::before{top:50%;height:calc(50% + 8px)}
.tElbow.trunk.bottom::before{height:50%}
.tRow.d2 .tElbow{margin-left:14px}

button.build{position:relative;display:flex;flex-direction:row;align-items:center;
  gap:7px;width:100%;min-width:0;height:32px;padding:0 7px;border-radius:8px;
  background:var(--bg3);border:1px solid var(--line);text-align:left}
button.build:hover:not(.off){background:#2f3a49}
button.build.on{background:var(--accent);color:#1a1200;border-color:var(--accent)}
button.build.off{opacity:.45;cursor:default}
.bIcon{width:22px;height:22px;flex:0 0 auto;display:block;
  display:flex;align-items:center;justify-content:center}
.bIcon img{width:100%;height:100%;object-fit:contain;image-rendering:auto}
.bIcon svg{width:100%;height:100%;fill:var(--fg)}
button.build.on .bIcon svg{fill:#1a1200}
.bName{flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bCost{display:flex;align-items:center;justify-content:flex-end;gap:3px;flex:0 0 auto}
.bCost .costRow{gap:3px;flex-wrap:nowrap}
.bCost .rc i{width:9px;height:9px;border-radius:2px}
.bCost .rc b{font-size:10px}
.bCost .costMult{font-size:10px;margin-right:0}
.bLeft{font-size:9.5px;font-weight:800;color:var(--dim);background:#0d1219;
  border:1px solid var(--line);border-radius:5px;padding:0 4px;line-height:1.5;
  flex:0 0 auto;min-width:19px;text-align:center}
button.build.on .bLeft{color:#4a3800;background:#f7d67c;border-color:#c79a1e}
.freeTag{font-size:9px;font-weight:800;color:var(--good)}
/* four lines, always reserved, whether or not there is anything to say */
.buildHint{height:62px;margin-top:7px;padding:5px 2px 0;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.32;color:var(--dim);overflow:hidden}

/* the cards you buy, drawn as cards: guild cards and the three face-up
   development piles, in their own panel under the build tree */
#market{display:flex;flex-direction:column;gap:4px;padding:7px 9px}
.cardRow{display:flex;gap:5px;align-items:stretch}
button.cardBtn{position:relative;flex:1 1 0;min-width:0;height:96px;padding:6px 5px 5px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  border-radius:7px;border:1px solid var(--line);text-align:center;
  background:linear-gradient(170deg,#2a333f,#1b222c 62%);
  box-shadow:0 2px 5px #0006,inset 0 1px 0 #ffffff12}
button.cardBtn:hover:not(.off){border-color:var(--accent);transform:translateY(-2px);
  transition:transform .08s}
button.cardBtn.off{opacity:.45;cursor:default}
.cardName{font-size:9.5px;font-weight:700;line-height:1.15;width:100%;
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cardArt{width:26px;height:26px;opacity:.85}
.cardArt svg{width:100%;height:100%;fill:var(--fg)}
.cardCost{display:flex;align-items:center;justify-content:center;gap:3px;min-height:12px}
.cardCost .costRow{gap:3px;flex-wrap:nowrap}
.cardCost .rc i{width:8px;height:8px;border-radius:2px}
.cardCost .rc b{font-size:9.5px}
.cardCost .costMult{font-size:9.5px;margin-right:0}
.cardLeft{position:absolute;top:3px;right:4px;font-size:8.5px;font-weight:800;color:var(--dim);
  background:#0d1219cc;border:1px solid var(--line);border-radius:4px;padding:0 3px;line-height:1.5}

/* ---------------- narrow windows, last word ---------------- */
@media (max-width:1200px){
  #bottomBar{right:290px;left:268px}
  #rightCol{width:276px}
  #leftCol{width:248px}
  #tradeTray{width:360px}
  .dieFace{width:54px;height:54px}
  #dicePanel{width:168px}
}

/* ---------------- the catalog: the whole deck, before you play ----------- */
button.ghost{width:100%;padding:9px;margin-top:8px;border-radius:8px;background:transparent;
  border:1px solid var(--line);color:var(--dim);font-size:12.5px;font-weight:600}
button.ghost:hover{color:var(--fg);border-color:var(--accent)}
#catalog{position:fixed;inset:0;z-index:90;background:#0a0d12ee;overflow-y:auto;padding:26px 18px}
#catalogBox{position:relative;max-width:1080px;margin:0 auto;background:var(--bg2);
  border:1px solid var(--line);border-radius:14px;padding:22px 26px 30px}
#catalogBox .apX{position:absolute;top:10px;right:14px;font-size:26px}
#catalogBox h2{margin:0 0 6px;font-size:22px}
#catalogBox h3{margin:22px 0 4px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent)}
.catGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;
  margin-top:8px}
.catCard{background:linear-gradient(170deg,#2a333f,#1b222c 65%);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;box-shadow:0 2px 6px #0006}
.catHead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.catHead b{font-size:13.5px;flex:1 1 auto;min-width:0}
.catHead .cardArt{width:22px;height:22px;flex:0 0 auto}
.catCount{font-size:10.5px;color:var(--dim)}
.catCost{margin-bottom:6px}
.catCard p{margin:0;font-size:11.5px;line-height:1.5;color:var(--dim)}

/* ---------------- deployment: the panel you read the game from ---------- */
/* While you are choosing a king and a corner there is nothing else on the
   screen to do, so the panel takes the room it needs to be read comfortably
   rather than squinted at. */
body.deploying #leftCol{width:420px}
body.deploying #bottomBar{left:440px}
@media (max-width:1300px){
  body.deploying #leftCol{width:340px}
  body.deploying #bottomBar{left:360px}
}
/* on a narrow window the board still has to be playable */
@media (max-width:1100px){
  body.deploying #leftCol{width:292px}
  body.deploying #bottomBar{left:312px}
  body.deploying button.apPick.king .kingArt{width:64px;height:64px}
}
body.deploying #actionPanel{padding:14px 16px}
body.deploying #apTitle{font-size:18px}
body.deploying .apNote{font-size:13px;line-height:1.5}
body.deploying #apBody h4{font-size:11.5px;margin:14px 0 7px}
body.deploying button.apPick b{font-size:14.5px;margin-bottom:3px}
body.deploying button.apPick span{font-size:12.5px;line-height:1.45}
body.deploying button.apPick.king{gap:11px;padding:9px 11px}
body.deploying button.apPick.king .kingArt{width:86px;height:86px;border-radius:8px}
body.deploying button.apPick.king em{font-size:12px;margin-top:5px}
body.deploying .apChips .chipBtn{font-size:13px;padding:6px 9px}
body.deploying #deployNote{font-size:13px}
.kingRule{display:block;font-size:11px;line-height:1.4;color:var(--dim);margin-top:3px}
body.deploying .kingRule{font-size:12px}

/* Start-screen room directory. */
#join { overflow-y: auto; align-items: flex-start; padding: 24px 16px; }
.joinCard { margin: auto; width: 420px; max-width: 100%; padding: 26px; }
.joinCard select { display: block; margin-top: 5px; width: 100%; padding: 10px; background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; font: inherit; text-transform: none; letter-spacing: 0; }
.joinCard hr { margin: 22px 0 18px; border: 0; border-top: 1px solid var(--line); }
.createHeading { font-size: 16px; margin: 0 0 16px; }
.joinByCode { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.joinByCode label { margin: 0; }
.joinCard .joinByCode button { width: auto; margin: 0; padding: 10px 16px; height: 41px; }
.lobbyHint { font-size: 12px; color: var(--dim); line-height: 1.5; margin: 10px 0 18px; }
.lobbyHeading, .lobbyRoom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lobbyHeading h2 { font-size: 16px; margin: 0; }
.joinCard .lobbyHeading button { width: auto; margin: 0; padding: 6px 10px; font-size: 12px; }
.lobbyHeading { margin: 20px 0 8px; }
#roomList { max-height: 260px; overflow-y: auto; overflow-x: hidden; text-align: left; }
.lobbyRoom { padding: 12px 0; border-top: 1px solid var(--line); }
.lobbyRoom > div { min-width: 0; flex: 1; }
.lobbyRoom strong { display: block; overflow-wrap: anywhere; }
.lobbyRoom small { display: block; color: var(--dim); margin-top: 4px; }
.joinCard .lobbyRoom button { flex: 0 0 auto; width: auto; max-width: 110px; margin: 0; padding: 8px 12px; font-size: 12px; }
.joinCard .lobbyRoom button:disabled { opacity: 1; color: var(--dim); border-color: transparent; cursor: default; }
.joinCard #catalogBtn { margin-top: 16px; font-size: 12px; color: var(--dim); }
.joinCard :is(button, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Keep pile counts clear of titles; cycle controls are separate purchases. */
button.cardBtn { height: 114px; padding-top: 21px; }
.cardLeft { top: 3px; right: 5px; font-size: 9px; }
.devStack { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.devStack .cardBtn { flex: none; width: 100%; }
.cycleDev { border: 1px solid var(--line); border-radius: 5px; padding: 5px 2px; font-size: 10px; color: var(--fg); background: var(--bg3); }
.cycleDev:disabled { opacity: .4; cursor: default; }
#log { height: 220px; min-height: 100px; max-height: 55vh; resize: vertical; }
#log .rollLog { margin-top: 12px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 700; color: var(--fg); }

/* Earned bonuses are large pictograms, with points and full hover descriptions. */
.heldBonus { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; background: #44371d; border: 1px solid var(--accent); color: var(--accent); }
.heldBonus svg, .heldBonus img { width: 28px; height: 28px; fill: currentColor; object-fit: contain; }
.heldBonus b { font-size: 14px; }
.pName { row-gap: 6px; }
.stat i svg { width: 19px; height: 19px; }
body.myTurn #game::after { box-shadow: inset 0 0 0 5px var(--accent), inset 0 0 32px #f0b42944; animation: none; opacity: 1; }
.pRow.me.turn { border: 2px solid var(--accent); background: #302c20; }
.badge.turnTag { font-size: 12px; padding: 5px 9px; letter-spacing: .05em; }
#now.mine { background: #f0b429; color: #1a1200; font-weight: 800; }
.patchNotes{box-sizing:border-box;width:min(720px,92vw);max-height:85vh;overflow:auto;padding:24px;border:1px solid #586678;border-radius:14px;background:#1b222c;color:#e8edf5;line-height:1.6}
.patchNotes::backdrop{background:#000a}
.patchNotes>button{float:right;position:sticky;top:0}
.patchNotes h3{margin-top:28px;color:#ffcf40}
.patchNotes .patchItem{padding-left:16px;text-indent:-16px}
.skinGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.skinOption{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px;background:#232e3a;border:1px solid #59677b;border-radius:10px;color:#eaf0f8;white-space:normal;text-align:center}
.skinOption img{width:64px;height:64px;image-rendering:auto}
.skinOption small{font-size:11px;font-weight:400;color:#b8c8dc}
.skinOption.selected{outline:2px solid #ffcf40;outline-offset:1px;background:#354151}
.skinOption:hover{background:#3a4859}
.treeBranch{position:relative;width:16px;height:100%;flex:0 0 16px}
.treeBranch::before{content:"";position:absolute;left:6px;top:0;height:100%;border-left:1px solid #72849b}
.treeBranch.elbow:not(.continues)::before{height:50%}
.treeBranch.elbow::after{content:"";position:absolute;left:6px;right:0;top:50%;border-top:1px solid #72849b}
/* a branch that has already closed off above this row - no line at all,
   so a later, unrelated branch at the same indent never reads as joined to it */
.treeBranch.blank::before{content:none}
/* the colour picker is the whole control now - no preset swatches above it -
   so it gets real size and a label beside it instead of being an afterthought */
.colourPickerRow{display:flex;align-items:center;gap:10px;margin:8px 0 14px;font-size:13px;color:var(--dim)}
.colourPickerRow input[type=color]{width:52px;height:34px;padding:0;border:1px solid #ffffff44;
  border-radius:7px;background:none;cursor:pointer}
.chaosRow{display:flex;align-items:center;gap:12px;margin:4px 0 2px}
.chaosRow input[type=range]{flex:1 1 auto;accent-color:var(--accent)}
.chaosLabel{font-weight:700;font-size:13px;min-width:78px;text-align:right;color:var(--fg)}
.skinPicker select{width:100%;margin:8px 0 12px;padding:9px;background:#232e3a;color:#eaf0f8;border:1px solid #59677b;border-radius:7px}
.skinBuildingSet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.skinBuildingExample{display:flex;flex-direction:column;align-items:center;background:#232e3a;border-radius:8px;padding:6px 2px;font-size:11px;text-transform:capitalize}
.skinBuildingExample img{width:100%;max-width:100px;aspect-ratio:1;object-fit:contain}
.lobbyAppearance{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:6px}
.lobbyAppearance img{width:38px;height:38px;object-fit:contain}
.lobbyColour{display:inline-block;width:20px;height:20px;border:1px solid #eee;border-radius:50%}
.patchNotes table{width:100%;border-collapse:collapse;font-size:13px}
.patchNotes td,.patchNotes th{padding:7px 5px;text-align:left;border-bottom:1px solid #48576a}

/* a player who has dropped out: dimmed, and said in words */
.pRow.offline{opacity:.55}
.pRow.offline .pFace{filter:grayscale(1)}
.badge.offlineTag{background:#b3261e;color:#fff}
/* who plays after the current player */
.badge.nextTag{background:#24324a;color:#bcd3ff}

/* restart turn: small, quiet, two clicks */
#restartTurnBtn{padding:3px 8px;font-size:11px;border-radius:7px;background:transparent;
  border:1px solid rgba(255,255,255,.18);color:var(--muted,#9aa);opacity:.75;align-self:center}
#restartTurnBtn:hover:not(:disabled){opacity:1}
#restartTurnBtn:disabled{opacity:.35;cursor:not-allowed}
#restartTurnBtn.armed{background:#b3261e;border-color:#b3261e;color:#fff;opacity:1}

/* =====================================================================
   CARD SKINS. Every card carries its resource colour as --rc and one
   .cs-<skin> class. The same rules dress the hand and the cards in flight.
   ===================================================================== */
.card,.flyCard,.skinCard{--rc:#888;isolation:isolate}
.card>*,.skinCard>*{position:relative;z-index:1}
.card .cEmblem,.card .cOffer,.card .cRate{position:absolute}

/* Classic: the colour, with a little light on it */
.cs-classic{background:linear-gradient(160deg,color-mix(in srgb,var(--rc),#fff 14%) 0%,var(--rc) 45%,color-mix(in srgb,var(--rc),#000 18%) 100%)}

/* Illuminated vellum: cream skin stained with the resource, inked frame */
.cs-parchment{
  background:
    radial-gradient(120% 90% at 30% 20%,#fff8e6cc 0%,transparent 60%),
    radial-gradient(circle at 80% 85%,#6b4a2233 0%,transparent 45%),
    linear-gradient(170deg,color-mix(in srgb,var(--rc),#f3e6c4 62%),color-mix(in srgb,var(--rc),#d9c39a 55%));
  border:1px solid #4a3218 !important;
  box-shadow:inset 0 0 0 2px #f3e6c4,inset 0 0 0 3px #6b4a22aa,inset 0 0 14px #6b4a2255,0 3px 10px #0006 !important}
.cs-parchment .cNum{color:#3a2410;text-shadow:0 1px 0 #fff8;font-family:Georgia,"Times New Roman",serif;font-style:italic}
.cs-parchment .cInc{background:#4a3218d9;color:#f7ecd2}
.cs-parchment .cEmblem{filter:sepia(.35) drop-shadow(0 1px 1px #4a321866)}

/* Gilded foil: dark lacquer tinted by the resource, a gold frame, a slow shimmer */
.cs-gilded{
  background:
    radial-gradient(100% 70% at 50% 25%,color-mix(in srgb,var(--rc),transparent 35%) 0%,transparent 75%),
    linear-gradient(165deg,#1d1a14,color-mix(in srgb,var(--rc),#0d0b08 72%));
  border:1px solid #8a6a22 !important;
  box-shadow:inset 0 0 0 2px #e9c86a,inset 0 0 0 3px #5e4410,inset 0 0 18px #000a,0 3px 12px #000a !important}
.cs-gilded .cNum{color:#f7e3a3;text-shadow:0 1px 0 #5e4410,0 0 8px #e9c86a66}
.cs-gilded .cInc{background:#1a1406e0;color:#f7e3a3;box-shadow:inset 0 0 0 1px #e9c86a88}
.cs-gilded::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,#fff3c455 45%,#ffffff22 50%,transparent 62%);
  background-size:260% 100%;animation:foil 7s ease-in-out infinite;mix-blend-mode:screen}
@keyframes foil{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}

/* Stained glass: leaded panes, lit from behind */
.cs-glass{
  background:
    linear-gradient(35deg,transparent 47%,#101418 47.5%,#101418 50%,transparent 50.5%),
    linear-gradient(-58deg,transparent 60%,#101418 60.5%,#101418 62.5%,transparent 63%),
    linear-gradient(90deg,transparent 30%,#10141899 30.5%,#10141899 32%,transparent 32.5%),
    radial-gradient(90% 70% at 50% 35%,color-mix(in srgb,var(--rc),#fff 45%) 0%,var(--rc) 55%,color-mix(in srgb,var(--rc),#000 40%) 100%);
  border:2px solid #101418 !important;
  box-shadow:inset 0 0 12px color-mix(in srgb,var(--rc),#fff 30%),0 0 12px color-mix(in srgb,var(--rc),transparent 45%),0 3px 10px #0008 !important}
.cs-glass .cNum{text-shadow:0 0 6px #000,0 1px 2px #000}
.cs-glass .cEmblem{filter:drop-shadow(0 0 4px #fff6) saturate(1.2)}

/* Woodblock print: hatched ink over a flat colour, heavy border, a paper plate for the number */
.cs-woodcut{
  background:
    repeating-linear-gradient(-45deg,#0000 0 4px,#1b120a26 4px 5px),
    repeating-linear-gradient(45deg,#0000 0 7px,#1b120a14 7px 8px),
    linear-gradient(180deg,color-mix(in srgb,var(--rc),#e8dcc0 25%),color-mix(in srgb,var(--rc),#2a1d10 30%));
  border:2px solid #1b120a !important;box-shadow:inset 0 0 0 2px #efe4c8aa,0 3px 8px #0007 !important}
.cs-woodcut .cNum{color:#1b120a;text-shadow:none;background:#efe4c8;border:1.5px solid #1b120a;
  border-radius:3px;padding:1px 6px;font-family:Georgia,serif}
.cs-woodcut .cEmblem{filter:contrast(1.25) saturate(.8) drop-shadow(1px 1px 0 #1b120a)}
.cs-woodcut .cInc{background:#1b120a;color:#efe4c8}

/* Starfield: a small night sky, tinted by the land it came from */
.cs-starfield{
  background:
    radial-gradient(1px 1px at 12% 18%,#fff 60%,transparent),
    radial-gradient(1px 1px at 78% 12%,#fffc 60%,transparent),
    radial-gradient(1.5px 1.5px at 64% 62%,#fff 60%,transparent),
    radial-gradient(1px 1px at 28% 74%,#fffa 60%,transparent),
    radial-gradient(1px 1px at 88% 84%,#fff9 60%,transparent),
    radial-gradient(1px 1px at 42% 38%,#fff8 60%,transparent),
    radial-gradient(80% 60% at 50% 40%,color-mix(in srgb,var(--rc),transparent 30%) 0%,transparent 70%),
    linear-gradient(180deg,#0b1024,#05060f);
  border:1px solid color-mix(in srgb,var(--rc),#fff 20%) !important;
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--rc),transparent 50%),0 0 10px color-mix(in srgb,var(--rc),transparent 60%),0 3px 10px #000a !important}
.cs-starfield .cNum{color:#fff;text-shadow:0 0 8px var(--rc),0 0 2px #000}
.cs-starfield .cInc{background:#05081ad9;box-shadow:inset 0 0 0 1px var(--rc)}
.cs-starfield .cEmblem{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rc),#fff 40%))}

/* ---------------- resource flight, second edition ---------------- */
.flyCard{position:absolute;left:0;top:0;width:30px;height:42px;margin:-21px 0 0 -15px;border-radius:5px;
  border:1px solid #0b1016aa;box-shadow:0 6px 14px #000a;will-change:transform,opacity;
  transition:none;opacity:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.flyCard img{width:26px;height:24px;filter:drop-shadow(0 1px 1px #0006);position:relative;z-index:1}
.flyTag{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:800 15px/1 "Segoe UI",sans-serif;
  padding:3px 7px;border-radius:10px;background:#0b1016e6;border:1.5px solid var(--rc,#888);color:#fff;
  box-shadow:0 3px 10px #000a;white-space:nowrap;pointer-events:none;will-change:transform,opacity}
.flyTag i{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--rc);margin-left:4px;vertical-align:0}
.card.gain{animation:cardGain .55s ease-out}
@keyframes cardGain{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-6px) scale(1.08);
  box-shadow:0 0 0 2px #fff,0 0 18px var(--rc)}100%{transform:none}}
.pRow.gain{animation:rowGain .6s ease-out}
@keyframes rowGain{0%{box-shadow:none}35%{box-shadow:inset 0 0 0 2px var(--rc),0 0 14px var(--rc)}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.cs-gilded::after{animation:none}}

/* the card skin picker */
.cardSkinSet{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.skinCard{position:relative;width:44px;height:62px;border-radius:6px;overflow:hidden;display:flex;
  flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:3px;border:1px solid #0006}
.skinCard img{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:38px;height:34px;z-index:1}
.skinCard b{font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 3px #0008;z-index:1}
.cs-parchment.skinCard b{color:#3a2410;text-shadow:none;font-family:Georgia,serif;font-style:italic}
.cs-gilded.skinCard b{color:#f7e3a3}
.cs-woodcut.skinCard b{color:#1b120a;background:#efe4c8;border:1px solid #1b120a;border-radius:3px;padding:0 4px;text-shadow:none}

/* dice stats, in settings */
.diceChart{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;align-items:end;margin:8px 0 4px}
.dCol{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.dPct{font-size:9.5px;font-weight:700;color:var(--dim);white-space:nowrap}
.dPct.up{color:#7fe08a}.dPct.down{color:#ff9a8a}
.dOdds{width:70%;background:linear-gradient(#e0ad3c,#8a6a22);border-radius:3px 3px 0 0;min-height:1px}
.dWell{position:relative;width:100%;height:90px;background:#0b1016;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.dBar{position:absolute;left:12%;right:12%;bottom:0;background:linear-gradient(#5d8fd6,#2f5aa8);border-radius:3px 3px 0 0}
.dWell i{position:absolute;left:4%;right:4%;height:2px;background:#fff;opacity:.8;margin-bottom:-1px}
.dCol.seven .dBar{background:linear-gradient(#d65d5d,#8e1426)}
.dCol b{font-size:11px}
.dNum{font-size:13px;font-weight:800;color:var(--fg)}
.dLegend{font-size:10.5px}
.rollStrip{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:10px}
.rollChip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:22px;border-radius:5px;
  font-size:11.5px;font-weight:800;background:#0b1016;border:2px solid var(--line);color:var(--fg)}
.rollChip.seven{background:#3a1418;color:#ffb3a8}

/* settings during a game: a floating sheet rather than a sliver of the left column */
#actionPanel.floating{position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px));max-height:min(80vh,760px);box-shadow:0 18px 60px #000c;
  border-color:var(--accent)}

button.danger{background:#b3261e;border-color:#b3261e;color:#fff}

/* =====================================================================
   GUILD AND DEVELOPMENT CARDS, second edition: framed, themed by what
   they do (--mc), the same logos in a medallion, and a little life.
   ===================================================================== */
#market{gap:6px;padding:8px 10px}
#market .cardRow{gap:8px}
button.mCard{height:138px;padding:7px 6px 7px;border-radius:9px;overflow:visible;
  justify-content:space-between;border:1px solid color-mix(in srgb,var(--mc),#000 35%);
  background:
    radial-gradient(120% 60% at 50% 45%,color-mix(in srgb,var(--mc),transparent 62%) 0%,transparent 70%),
    linear-gradient(170deg,color-mix(in srgb,var(--mc),#1d242e 72%),color-mix(in srgb,var(--mc),#0b0f14 86%));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mc),#000 55%),
    inset 0 0 0 3px color-mix(in srgb,var(--mc),#fff 10%),
    inset 0 1px 0 4px #ffffff0a,0 4px 10px #0008,var(--pile);
  transition:transform .18s cubic-bezier(.3,.8,.4,1),box-shadow .18s,filter .18s;transform-style:preserve-3d}
/* guild cards: a gold frame, because they are the prize */
button.mCard.guild{box-shadow:inset 0 0 0 2px #5e4410,inset 0 0 0 3px #e9c86a,
  inset 0 0 14px #000a,0 4px 10px #0008,var(--pile)}
/* the pile behind the card: one, two or three edges, as extra shadows */
button.mCard{--pile:0 0 0 0 transparent}
button.mCard[data-depth="1"]{--pile:3px 4px 0 -1px color-mix(in srgb,var(--mc),#0b0f14 70%)}
button.mCard[data-depth="2"]{--pile:3px 4px 0 -1px color-mix(in srgb,var(--mc),#0b0f14 70%),6px 8px 0 -2px color-mix(in srgb,var(--mc),#0b0f14 80%)}
button.mCard[data-depth="3"]{--pile:3px 4px 0 -1px color-mix(in srgb,var(--mc),#0b0f14 70%),6px 8px 0 -2px color-mix(in srgb,var(--mc),#0b0f14 80%),9px 12px 0 -3px color-mix(in srgb,var(--mc),#0b0f14 88%)}

.mCard .cardName{font-size:10.5px;font-weight:800;letter-spacing:.01em;color:#f3ead8;
  text-shadow:0 1px 2px #000a;padding:2px 3px;border-radius:4px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--mc),#000 45%) 18%,color-mix(in srgb,var(--mc),#000 45%) 82%,transparent)}
.mCard.guild .cardName{color:#f7e3a3}
/* the logo, kept, in a lit medallion */
.cardMedal{position:relative;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--mc),#fff 35%) 0%,var(--mc) 45%,color-mix(in srgb,var(--mc),#000 55%) 100%);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mc),#000 50%),0 0 0 3px color-mix(in srgb,var(--mc),#fff 25%),0 3px 8px #000a,inset 0 -4px 8px #0006}
.mCard.guild .cardMedal{box-shadow:0 0 0 2px #5e4410,0 0 0 3px #e9c86a,0 3px 8px #000a,inset 0 -4px 8px #0006}
.mCard .cardArt{width:30px;height:30px;opacity:1;filter:drop-shadow(0 1px 1px #0009)}
.mCard .cardArt svg{fill:#fbf6ea}
.mCard .cardCost{padding:2px 5px;border-radius:6px;background:#0b0f14cc;border:1px solid color-mix(in srgb,var(--mc),#000 30%)}
.mCard .cardLeft{top:-6px;right:-5px;z-index:3;color:#fbf6ea;font-size:9.5px;padding:0 5px;border-radius:9px;
  background:color-mix(in srgb,var(--mc),#000 40%);border:1px solid color-mix(in srgb,var(--mc),#fff 25%);box-shadow:0 2px 4px #0008}
/* the shine: a slow sweep now and then, and a full one on hover */
.cardShine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:2}
.cardShine::after{content:"";position:absolute;top:-20%;bottom:-20%;width:45%;left:-60%;
  background:linear-gradient(100deg,transparent,#ffffff30 45%,#fff5 50%,#ffffff30 55%,transparent);
  animation:mShine 9s ease-in-out infinite;animation-delay:calc(var(--i,0) * 1.3s)}
.mCard.guild .cardShine::after{background:linear-gradient(100deg,transparent,#fff3c430 45%,#fff3c466 50%,#fff3c430 55%,transparent)}
@keyframes mShine{0%,78%{left:-60%}100%{left:120%}}
button.mCard.ready:hover{transform:translateY(-5px) rotateX(6deg) scale(1.03);filter:brightness(1.12);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mc),#000 55%),inset 0 0 0 3px color-mix(in srgb,var(--mc),#fff 30%),
    0 10px 22px #000a,0 0 18px color-mix(in srgb,var(--mc),transparent 45%),var(--pile)}
button.mCard.guild.ready:hover{box-shadow:inset 0 0 0 2px #5e4410,inset 0 0 0 3px #fff2b0,0 10px 22px #000a,0 0 20px #e9c86a66,var(--pile)}
button.mCard.ready:hover .cardShine::after{animation:mShineNow .7s ease-out}
@keyframes mShineNow{from{left:-60%}to{left:120%}}
/* affordable right now: the medallion breathes */
button.mCard.ready .cardMedal{animation:mBreathe 3.2s ease-in-out infinite}
@keyframes mBreathe{0%,100%{filter:none}50%{filter:brightness(1.18) drop-shadow(0 0 6px color-mix(in srgb,var(--mc),#fff 20%))}}
button.mCard.off{opacity:.5;filter:saturate(.55)}
button.mCard:active.ready{transform:translateY(-1px) scale(.97)}
/* a new card turning over on its pile */
button.mCard.flipIn{animation:mFlip .6s cubic-bezier(.3,.8,.4,1)}
@keyframes mFlip{0%{transform:perspective(500px) rotateY(90deg);filter:brightness(1.8)}100%{transform:none}}
.cycleDev{border-radius:7px}
/* the card in flight when you buy one */
.mFly{position:absolute;left:0;top:0;width:46px;height:64px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(170deg,color-mix(in srgb,var(--mc),#1d242e 55%),color-mix(in srgb,var(--mc),#0b0f14 80%));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mc),#fff 25%),0 8px 18px #000b;pointer-events:none;will-change:transform}
.mFly .cardArt{width:26px;height:26px}
.mFly .cardArt svg{fill:#fbf6ea}
/* the cards you hold get the same dress */
button.devCard{--mc:#6b7a90}
@media (prefers-reduced-motion:reduce){.cardShine::after,button.mCard.ready .cardMedal{animation:none}}

/* the card panel takes whatever height the left column has left, and the
   cards grow to fill it - small windows get compact cards, tall ones big */
#buildStack{flex:1 1 auto;min-height:0}
#buildBox{flex:0 0 auto}
#market{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#market .cardRow{flex:1 1 0;min-height:0;max-height:176px}
#market .techHead{flex:0 0 auto}
#market .buildHint{flex:0 0 auto}
#market button.mCard{height:auto;min-height:92px;max-height:170px}
#market .devStack{display:flex;flex-direction:column;min-height:0}
#market .devStack button.mCard{flex:1 1 auto}
#market .cycleDev{flex:0 0 auto}
#market .cardMedal{flex:0 1 54px;height:auto;width:auto;aspect-ratio:1;min-height:28px}
#market .mCard .cardArt{width:58%;height:58%}
#market .mCard .cardName{flex:0 0 auto}
#market .mCard .cardCost{flex:0 0 auto}
#market .mCard .cardName{overflow-wrap:normal;word-break:normal;hyphens:auto;font-size:10px;line-height:1.12}
/* held development cards, dressed like the ones on sale */
button.devCard{border:1px solid color-mix(in srgb,var(--mc),#000 35%) !important;
  background:radial-gradient(110% 60% at 50% 40%,color-mix(in srgb,var(--mc),transparent 55%),transparent 70%),
    linear-gradient(170deg,color-mix(in srgb,var(--mc),#1d242e 65%),color-mix(in srgb,var(--mc),#0b0f14 85%)) !important;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mc),#000 55%),inset 0 0 0 3px color-mix(in srgb,var(--mc),#fff 12%),0 3px 8px #0008 !important;
  transition:transform .15s,filter .15s}
button.devCard:not(.off):hover{transform:translateY(-4px);filter:brightness(1.15)}
button.devCard .dIcon svg{fill:#fbf6ea}
button.devCard .dName{color:#f3ead8}

/* ---------------- big moments (fx.js) ---------------- */
.fxThief,.fxRider,.fxShield,.fxRing,.fxDust,.fxFoot,.fxCracks,.fxTitle,.fxConfetti{position:absolute;pointer-events:none}
.fxThief{z-index:3}
.fxThief svg{overflow:visible;display:block}
.fxRider{left:0;z-index:4;filter:drop-shadow(0 10px 12px #000a)}
.fxRider svg{overflow:visible;display:block}
.fxDust{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#e8d6b0cc,#b89b6a55 60%,transparent 72%);z-index:3}
.fxShield{z-index:3;filter:drop-shadow(0 4px 6px #000a)}
.fxRing{border:3px solid #fff;border-radius:50%;transform:translate(-50%,-50%);z-index:3}
.fxFoot{z-index:2}
.fxCracks{z-index:2}
.fxTitle{top:34px;left:50%;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 26px;
  transform-origin:center;white-space:nowrap;color:#fff8e6;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc),#fff 18%),var(--pc) 55%,color-mix(in srgb,var(--pc),#000 35%));
  border:2px solid #f2cf6b;border-radius:6px;box-shadow:0 0 0 3px #5e4410,0 12px 30px #000c,0 0 30px color-mix(in srgb,var(--pc),transparent 40%);
  clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%)}
.fxTitleText{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.fxTitleText b{font:800 20px/1.1 Georgia,"Times New Roman",serif;text-shadow:0 2px 3px #0009;letter-spacing:.02em}
.fxTitleText i{font-style:normal;font-size:12px;opacity:.85;text-shadow:0 1px 2px #0009}
.fxTitleIcon{width:30px;height:30px;color:#f2cf6b;filter:drop-shadow(0 1px 2px #000a)}
.fxTitleIcon svg{width:100%;height:100%;fill:currentColor}
.fxConfetti{width:7px;height:11px;border-radius:2px;z-index:5}
@media (prefers-reduced-motion:reduce){.fxConfetti{display:none}}

/* ---------------- compact settings: label | control, words on hover ---------------- */
.sHead{margin:12px 0 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sHead:first-child{margin-top:0}
.sRow{display:flex;align-items:center;gap:10px;min-height:32px;padding:3px 0;border-bottom:1px solid #ffffff0c}
.sLabel{flex:0 0 78px;font-size:12px;color:var(--fg);cursor:help;text-decoration:underline dotted #ffffff33;text-underline-offset:3px}
.sCtl{flex:1 1 auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.sCtl .apChips{gap:4px}
.sCtl .chipBtn{padding:3px 8px;font-size:11.5px}
.sSelect{flex:1 1 120px;min-width:0;padding:5px 7px;background:#232e3a;color:#eaf0f8;border:1px solid #59677b;border-radius:6px;font-size:12px}
.sNum{width:64px;padding:4px 6px;background:#232e3a;color:#eaf0f8;border:1px solid #59677b;border-radius:6px}
.sRange{flex:1 1 auto;accent-color:var(--accent)}
.sVal{min-width:18px;text-align:right;font-size:12px}
.sColour{width:40px;height:26px;padding:0;border:1px solid #ffffff44;border-radius:6px;background:none;cursor:pointer}
.sPreview{display:flex;gap:3px;align-items:center}
.sPreview img{width:26px;height:26px}
.skinCard.mini{width:20px;height:28px;border-radius:4px;padding:0}
.skinCard.mini img{width:18px;height:16px;top:3px}
.sRow .apInput{flex:1 1 auto;padding:4px 7px}
.sDetails{margin:10px 0 2px;border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.sDetails summary{cursor:pointer;font-size:12px;color:var(--fg);padding:3px 0}
.sDetails[open] summary{margin-bottom:4px}
.sFoot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}

.badge.hostTag{background:#5e4410;color:#f7e3a3;border-color:#e9c86a}

.badge.timeTag{background:#1c2430;color:#9fb3cc;font-variant-numeric:tabular-nums}
.badge.timeTag.live{background:#2a3a24;color:#bfe8a8}

/* two kinds of "no" in the left panel:
   - not your turn: everything sleeps, grey and dim, but still clickable to queue
   - your turn, can't afford: full colour, price in red, a red edge */
button.build.off.wait,button.mCard.off.wait{opacity:.5;filter:grayscale(1) brightness(.85)}
button.build.off.poor{opacity:.92;filter:none;box-shadow:inset 3px 0 0 #c0392b}
button.build.off.poor .bCost b,button.build.off.poor .bCost .costMult{color:#ff8a7a}
button.build.off.poor .bIcon{opacity:.75}
button.mCard.off.poor{opacity:.9;filter:saturate(.85)}
button.mCard.off.poor .cardCost{border-color:#c0392b;background:#2a0e0ecc}
button.mCard.off.poor .cardCost b,button.mCard.off.poor .cardCost .costMult{color:#ff8a7a}
.techHead.waiting{color:#ffb86b;opacity:1}

/* teams */
.teamPick{display:flex;gap:4px;align-items:center}
button.teamChip{width:26px;height:24px;border-radius:6px;font-weight:800;border:1px solid var(--line);background:var(--bg3);color:var(--dim)}
button.teamChip.sel{color:#fff}
.team0{--tc:#d9534f}.team1{--tc:#3f8fd6}.team2{--tc:#4cae4c}
button.teamChip.sel,.badge.teamTag{background:var(--tc);border-color:var(--tc);color:#fff}

/* build menu, four looks (supersedes the red-edge version):
   ready   - a spot to put it AND the cards: full brightness, a thin lime edge
   poor    - a spot, but not the cards: half bright, price in red
   nowhere - no legal spot at all: dim
   wait    - not your turn: the whole panel sleeps, grey */
button.build.ready{box-shadow:inset 3px 0 0 #b8f35a,0 0 0 1px #b8f35a55;filter:brightness(1.08)}
button.build.ready .bName{color:#f3f8e8}
button.build.off.poor{opacity:.6;box-shadow:none;filter:none}
button.build.off.poor .bIcon{opacity:.85}
button.build.off.nowhere{opacity:.32;filter:saturate(.5)}
button.mCard.ready{outline:1px solid #b8f35a88;outline-offset:1px}
button.mCard.off.poor{opacity:.6}

/* The price is never greyed out: whatever else is asleep, what a thing costs
   is always readable at a glance. So the dimming moves off the button as a
   whole (which would take the price down with it) onto everything else. */
button.build.off,button.build.off.wait,button.build.off.poor,button.build.off.nowhere,
button.mCard.off,button.mCard.off.wait,button.mCard.off.poor,button.cardBtn.off{opacity:1;filter:none}
button.build.off{background:color-mix(in srgb,var(--bg3) 70%,#0b1016)}
button.build.off > :not(.bCost){opacity:.45}
button.build.off.wait > :not(.bCost){opacity:.5;filter:grayscale(1) brightness(.85)}
button.build.off.poor > :not(.bCost){opacity:.6}
button.build.off.nowhere > :not(.bCost){opacity:.32;filter:saturate(.5)}
button.cardBtn.off::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#0b1016;
  opacity:.5;pointer-events:none;z-index:4}
button.cardBtn.off.wait::after{opacity:.58}
button.cardBtn.off.poor::after{opacity:.38}
button.cardBtn .cardCost{position:relative;z-index:5}

/* team games: the combined score of every team, against its target */
.teamBoard{padding:7px 9px 8px;display:flex;flex-direction:column;gap:7px;flex:0 0 auto}
.teamBoard .tbHead{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.tbRow{display:flex;flex-direction:column;gap:4px;padding:4px 6px;border-radius:7px;border:1px solid transparent}
.tbRow.own{border-color:color-mix(in srgb,var(--tc) 55%,transparent);background:color-mix(in srgb,var(--tc) 9%,transparent)}
.tbRow.won{box-shadow:0 0 0 2px var(--accent)}
.tbTop{display:flex;align-items:center;gap:7px;min-width:0}
.tbNames{flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbNames .tbOut{opacity:.45;text-decoration:line-through}
.tbTotal{font-size:14px;font-weight:800;white-space:nowrap}
.tbBar{height:7px;border-radius:4px;background:#0b1016;box-shadow:inset 0 0 0 1px #ffffff14;overflow:hidden}
.tbBar i{display:block;height:100%;border-radius:4px;background:var(--tc);transition:width .4s}

/* what you are looking at: a small label in the top corner of the board */
#lookAt{position:fixed;top:10px;left:12px;z-index:40;display:none;pointer-events:none;
  align-items:baseline;gap:7px;max-width:420px;padding:4px 10px;border-radius:8px;
  background:#0b1016d9;border:1px solid #2c3746;box-shadow:0 2px 8px #0007;
  font-size:12px;line-height:1.4;color:var(--fg);white-space:nowrap}
#lookAt.show{display:flex}
#lookAt b{font-weight:800;font-size:12.5px}
#lookAt .lkOwner{font-weight:700}
#lookAt .lkDetail{color:var(--dim);overflow:hidden;text-overflow:ellipsis}

/* accounts: the box on the start screen, the leaderboard, the rating badge */
.acctBox{display:flex;flex-direction:column;gap:7px;padding:10px 11px;margin-bottom:10px;border-radius:10px;
  background:#121923;border:1px solid var(--line)}
.acctHead{font-size:11.5px;color:var(--dim);line-height:1.4}
.acctFields{display:flex;gap:6px}
.acctFields input{flex:1 1 0;min-width:0}
.acctRow{display:flex;gap:6px;flex-wrap:wrap}
.acctBox .acctRow button{width:auto;flex:1 1 0;margin:0;padding:6px 8px;font-size:12px}
.acctBox .acctFields input{margin:0}
.acctWho{font-size:12.5px}
.acctWho b{color:#fff}
.acctMmr{font-weight:800;color:var(--accent)}
.acctMsg{font-size:11.5px;color:#ff8a7a}
#leaderDlg{background:#131a24;color:var(--fg);border:1px solid #3a4658;border-radius:12px;padding:14px 16px;min-width:340px;max-height:80vh}
#leaderDlg::backdrop{background:#0008}
.ldHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.ldHead h2{margin:0;font-size:16px}
.ldTable{width:100%;border-collapse:collapse;font-size:12.5px}
.ldTable th{text-align:left;color:var(--dim);font-size:11px;font-weight:700;padding:4px 8px;border-bottom:1px solid var(--line)}
.ldTable td{padding:4px 8px;border-bottom:1px solid #ffffff0d}
.ldTable tr.me td{color:var(--accent);font-weight:800}
.badge.mmrTag{background:#1d2633;color:#e8d38a;border:1px solid #4a4128;font-variant-numeric:tabular-nums}

/* every other tooltip: the same dark panel as the prices */
#tipBox{position:fixed;z-index:300;display:none;pointer-events:none;max-width:300px;
  padding:8px 11px 8px;border-radius:10px;background:#131a24f2;border:1px solid #3a4658;
  box-shadow:0 8px 24px #000a;font-size:12px;line-height:1.45;color:var(--fg)}
#tipBox.show{display:block}
#tipBox .tbHeadLine{display:block;font-size:12.5px;font-weight:800;margin-bottom:3px;color:#fff}
#tipBox .tbLine{color:#c7d0dc}
#tipBox .tbLine + .tbLine{margin-top:2px}

/* hover the price: what it costs, spelled out, beside the button */
#costTip{position:fixed;z-index:300;display:none;pointer-events:none;min-width:170px;
  padding:9px 11px 8px;border-radius:10px;background:#131a24f2;border:1px solid #3a4658;
  box-shadow:0 8px 24px #000a;font-size:12.5px;color:var(--fg)}
#costTip.show{display:block}
#costTip .ctHead{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px}
#costTip .ctRow{display:grid;grid-template-columns:14px 18px 1fr auto;align-items:center;gap:7px;padding:2px 0}
#costTip .ctRow i{width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1px #0006}
#costTip .ctRow b{font-size:14px;font-weight:800;text-align:right}
#costTip .ctHave{font-size:11px;font-weight:700;padding-left:8px}
#costTip .ctHave.ok{color:#9fe07a}
#costTip .ctHave.short{color:#ff8a7a}
#costTip .ctFree{font-size:11px;color:#9fe07a;margin-top:4px}

.kingCeil{display:block;font-size:10.5px;color:var(--dim);margin-top:3px}
.kingCeil.short{color:#ffb86b}

/* the connection is down: say so, across the top, until it is back */
#connBanner{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:200;padding:8px 18px;
  background:#b3261e;color:#fff;font-weight:800;font-size:14px;border-radius:0 0 10px 10px;
  box-shadow:0 6px 18px #000a;animation:connPulse 1.4s ease-in-out infinite}
@keyframes connPulse{50%{background:#d9362c}}

/* a computer player's personality, picked by the host in the lobby */
.apRow .personaPick{display:block;width:auto;min-width:110px;font-size:12px;margin:3px 0}

/* ---- the AI Workshop and Arena ---- */
.workshop .wsTabs{display:flex;gap:6px;margin:6px 0 12px}
.workshop .wsTab{padding:6px 14px;border-radius:8px;border:1px solid #586678;background:#232c38;color:#cfd8e3;cursor:pointer;font-weight:700}
.workshop .wsTab.sel{background:#ffcf40;color:#1b222c;border-color:#ffcf40}
.workshop .wsActions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.workshop .wsCard{border:1px solid #3a4656;border-radius:12px;padding:12px 14px;margin:10px 0;background:#202834}
.workshop .wsBars{display:grid;gap:4px;margin:8px 0}
.workshop .wsBar{display:grid;grid-template-columns:96px 1fr 26px;align-items:center;gap:8px;font-size:13px}
.workshop .wsBar.edit{grid-template-columns:96px 30px 1fr 30px 26px}
.workshop .wsBar i{display:block;height:10px;border-radius:5px;background:#2e3947;overflow:hidden}
.workshop .wsBar em{display:block;height:100%;background:linear-gradient(90deg,#5fa8ff,#b8f35a)}
.workshop .wsBar b{text-align:right}
.workshop .wsChips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 10px}
.workshop .mini.sel{background:#ffcf40;color:#1b222c;border-color:#ffcf40}
.workshop .mini.primary{background:#3b7d3a;border-color:#56a855;color:#fff}
.workshop .wsLeft{margin:10px 0 2px;font-weight:800;color:#b8f35a}
.workshop .wsLeft.none{color:#ffcf40}
.workshop .wsEditor input{width:100%;box-sizing:border-box;padding:6px 8px;border-radius:8px;border:1px solid #586678;background:#141a22;color:#e8edf5;font-size:15px}
.workshop .wsEditor label{display:block;margin-top:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9aa7b8}
.workshop .wsProgress{height:8px;border-radius:4px;background:#2e3947;overflow:hidden;margin:10px 0 4px}
.workshop .wsProgress i{display:block;height:100%;width:0;background:#ffcf40;transition:width .2s}
.workshop table{border-collapse:collapse;width:100%;margin:8px 0;font-size:13px}
.workshop th,.workshop td{border-bottom:1px solid #334051;padding:4px 6px;text-align:left}
.workshop select{margin:4px 6px 4px 0}

/* the market: what is under each pile, and which pile turns over next */
.devStack{position:relative}
.devStack .devNext{font-size:10px;color:#9aa7b8;text-align:center;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.devStack .rotBadge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;padding:1px 6px;border-radius:8px;background:#ffcf40;color:#1b222c;white-space:nowrap;box-shadow:0 2px 6px #0008;pointer-events:auto;z-index:2}
.devStack.rotNext .mCard{box-shadow:0 0 0 2px #ffcf40aa}

/* patch notes: sub-points, and the odd table */
.patchNotes .patchSub{padding-left:32px;margin-top:-6px;opacity:.9}
.patchNotes .patchTable{border-collapse:collapse;margin:8px 0 14px 16px;font-size:14px}
.patchNotes .patchTable th,.patchNotes .patchTable td{border-bottom:1px solid #334051;padding:3px 12px 3px 0;text-align:left}
.patchNotes .patchTable th{color:#ffcf40}

/* The next card on each pile, peeking out from behind the top one: a real
   card in its own colour, fanned a few degrees, with a second edge behind it
   so the pile has depth. Hovering the pile lifts it for a better look. */
.devStack.hasNext { padding-top:26px; }
.devStack .devNext {
  position:absolute;top:2px;left:7px;right:7px;height:46px;z-index:0;
  display:flex;align-items:flex-start;gap:4px;padding:4px 5px 0;
  border-radius:8px 8px 0 0;border:1px solid color-mix(in srgb,var(--nc),#000 35%);border-bottom:none;
  background:
    radial-gradient(90% 120% at 20% 0%,color-mix(in srgb,var(--nc),#fff 12%) 0%,transparent 60%),
    linear-gradient(175deg,color-mix(in srgb,var(--nc),#1d242e 55%),color-mix(in srgb,var(--nc),#0b0f14 80%));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--nc),#000 50%),inset 0 0 0 2.5px color-mix(in srgb,var(--nc),#fff 12%),0 -2px 6px #0007;
  transform:rotate(-2.2deg) translateX(-2px);transform-origin:50% 100%;
  transition:transform .2s cubic-bezier(.3,.8,.4,1),filter .2s;
  color:#f3ead8;font-size:10px;font-weight:800;letter-spacing:.01em;text-shadow:0 1px 2px #000b;
  white-space:nowrap;overflow:visible;text-align:left;max-width:none;margin:0;cursor:help}
/* the card under that one: just an edge */
.devStack .devNext::before{content:"";position:absolute;inset:-4px -3px auto 4px;height:30px;z-index:-1;
  border-radius:8px 8px 0 0;background:color-mix(in srgb,var(--nc),#0b0f14 82%);
  border:1px solid color-mix(in srgb,var(--nc),#000 50%);border-bottom:none;transform:rotate(4deg);transform-origin:50% 100%}
.devStack .devNext .nextMedal{flex:none;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--nc),#fff 35%) 0%,var(--nc) 50%,color-mix(in srgb,var(--nc),#000 50%) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--nc),#000 50%),0 1px 3px #000a}
.devStack .devNext .nextMedal svg{width:11px;height:11px;fill:#fbf6ea;filter:drop-shadow(0 1px 1px #0009)}
.devStack .devNext .nextName{min-width:0;overflow:hidden;white-space:normal;font-size:9px;line-height:9.5px;padding-top:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:break-word}
.devStack:hover .devNext{transform:rotate(-3.5deg) translate(-3px,-5px);filter:brightness(1.15)}
.devStack .mCard,.devStack .cardBtn {position:relative;z-index:1;}
/* the pile that turns over next: a gold coin with a turning arrow */
.devStack .rotBadge {top:19px;bottom:auto;left:-5px;right:auto;transform:none;padding:0;width:18px;height:18px;line-height:18px;text-align:center;
  font-size:12px;z-index:3;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3b8,#ffcf40 45%,#b8860b 100%);color:#3a2a05;
  box-shadow:0 0 0 1px #5e4410,0 2px 6px #000a,0 0 10px #ffcf4066;animation:rotSpin 4s ease-in-out infinite}
@keyframes rotSpin{0%,70%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.devStack.rotNext .mCard {box-shadow:none;}
/* when the pile cannot be bought from, the card behind dims with it */
.devStack:has(.mCard.off) .devNext{opacity:.55;filter:saturate(.55)}
/* the cycle button: a small pill under its pile */
#market .cycleDev{margin-top:2px;padding:4px 6px;border-radius:999px;font-size:10px;font-weight:700;color:#e6dcc4;
  border:1px solid #4a5566;background:linear-gradient(#2a3441,#1a212b);box-shadow:inset 0 1px 0 #ffffff14,0 2px 4px #0006;
  transition:filter .15s,transform .15s}
#market .cycleDev:not(:disabled):hover{filter:brightness(1.25);transform:translateY(-1px)}

#turnCounter { display: block; font-size: 10px; color: #9aacbd; text-align: right; font-variant-numeric: tabular-nums; }

.buildKey{display:inline-block;margin-left:5px;padding:0 3px;border:1px solid #8fa5bb55;border-radius:3px;color:#b8c8d8;font:600 9px/13px monospace;vertical-align:middle}

#chatPanel{padding:7px;display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.feedLabel{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
#chatMessages{height:90px;min-height:50px;max-height:240px;resize:vertical;overflow:auto;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
#chatMessages .dot{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px}
#resignBtn{font-size:11px;color:#ffb3b3}

/* ---- the tutorial coach ---- */
#tutorialCard{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:150;width:min(420px,92vw);
  padding:14px 16px 10px;border-radius:14px;background:#1b222cf2;border:2px solid #ffcf40;color:#e8edf5;
  box-shadow:0 12px 36px #000a;font-size:14px;line-height:1.5}
#tutorialCard b{display:block;font-size:16px;color:#ffcf40;margin-bottom:4px}
#tutorialCard p{margin:0 0 10px}
#tutorialCard .tutRow{display:flex;align-items:center;gap:8px}
#tutorialCard .tutCount{flex:1;color:#9aa7b8;font-size:12px}
#tutorialCard button{padding:5px 14px;border-radius:8px;border:1px solid #586678;background:#2a3442;color:#e8edf5;cursor:pointer;font-weight:700}
#tutorialCard button:last-of-type{background:#ffcf40;color:#1b222c;border-color:#ffcf40}
#tutorialCard button:disabled{opacity:.35;cursor:default}
#tutorialCard .tutStop{position:absolute;top:8px;right:10px;padding:2px 8px;font-size:11px;background:none!important;color:#9aa7b8!important;border:none!important}
.tutHighlight{outline:3px solid #ffcf40!important;outline-offset:3px;border-radius:10px;animation:tutPulse 1.4s ease-in-out infinite}
@keyframes tutPulse{50%{outline-color:#ffcf4055}}

/* The tutorial button on the start screen: its own card, in a cool blue with
   a gold edge, so a newcomer's eye goes to it without it fighting the gold
   Create-or-join button above. */
button.tutorialBtn{position:relative;display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:10px 14px 10px 10px;
  border-radius:12px;border:1px solid #e9c86a88;overflow:hidden;text-align:left;cursor:pointer;color:#eef3fa;
  background:
    radial-gradient(120% 140% at 0% 0%,#4f7fd455 0%,transparent 55%),
    radial-gradient(80% 120% at 100% 100%,#2fb39a33 0%,transparent 60%),
    linear-gradient(135deg,#223452,#172238 60%,#141c2c);
  box-shadow:inset 0 1px 0 #ffffff18,inset 0 0 0 1px #0006,0 6px 18px #0007;
  transition:transform .18s cubic-bezier(.3,.8,.4,1),box-shadow .18s,border-color .18s}
button.tutorialBtn:hover{transform:translateY(-2px);border-color:#ffe08a;
  box-shadow:inset 0 1px 0 #ffffff22,inset 0 0 0 1px #0006,0 10px 24px #000a,0 0 18px #4f7fd455}
button.tutorialBtn:active{transform:translateY(0) scale(.99)}
button.tutorialBtn:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}
.tutorialBtn .tbMedal{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 38% 32%,#fff3b8 0%,#ffcf40 42%,#a7780c 100%);
  box-shadow:0 0 0 2px #5e4410,0 0 0 3px #f5dc8f,0 3px 8px #000a,inset 0 -3px 6px #0005;animation:tbBob 3.6s ease-in-out infinite}
.tutorialBtn .tbMedal svg{width:24px;height:24px;fill:#2a1d03;filter:drop-shadow(0 1px 0 #fff6)}
.tutorialBtn .tbText{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tutorialBtn .tbText b{font-size:15px;letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px #0008}
.tutorialBtn .tbText small{font-size:11px;color:#b9c7da;line-height:1.3}
.tutorialBtn .tbArrow{flex:none;font-size:26px;line-height:1;color:#ffe08a;transition:transform .18s}
button.tutorialBtn:hover .tbArrow{transform:translateX(4px)}
.tutorialBtn .tbShine{position:absolute;inset:0;pointer-events:none}
.tutorialBtn .tbShine::after{content:"";position:absolute;top:-30%;bottom:-30%;width:35%;left:-50%;
  background:linear-gradient(100deg,transparent,#ffffff14 40%,#ffffff33 50%,#ffffff14 60%,transparent);
  animation:tbShine 7s ease-in-out infinite}
button.tutorialBtn:hover .tbShine::after{animation:tbShineNow .8s ease-out}
@keyframes tbShine{0%,80%{left:-50%}100%{left:130%}}
@keyframes tbShineNow{from{left:-50%}to{left:130%}}
@keyframes tbBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-2px) rotate(4deg)}}
@media (prefers-reduced-motion: reduce){.tutorialBtn .tbMedal,.tutorialBtn .tbShine::after{animation:none}}

/* watching the AI league: nothing here is yours to press */
body.spectating #resignBtn,body.spectating #restartTurnBtn{display:none}