/* Playing from the hand (app.js): on a wide screen the hand floats over the bottom of the screen and the
   map is fitted above it (the cards may cover its bottom edge); the keys stand right after the cards in one row;
   the card picker over the map's column; the note about a second rail on the map; the window next to the cursor
   for a sale; the "missed upgrade" window; the effects layer (fx.js). */

/* ---- the hand panel: the cards, then the keys in one row on the same plate (app.js, handkeys.js) ---- */
/* sizes: the plate's height (wide screens), the keys' height and least width (--key-w1: Sell, Develop, Exchange),
   Undo's least width and End turn's width */
.handdock { display: flex; align-items: flex-end; gap: 12px; --plate-h: 124px; --key-h: 100px; --key-w: 66px; --key-w1: 80px; --undo-w: 66px; --end-w: 128px; --medal: 42px; }
#hand { flex: 0 1 auto; min-width: 0; position: relative; z-index: 1; }
.dock-acts:empty { display: none; }
.dock-acts.machine-case { position: relative; z-index: 2; flex: 1 1 auto; display: flex; align-items: flex-end; gap: 10px; min-width: min-content; }
/* a full hand fans tighter beside the keys (handkeys.js fitHand sets --fan-squeeze) */
#handdock .fan { --fan-gap: -10px; }
:root[data-card-look="ticket"] #handdock .fan { --fan-gap: 3px; }
#handdock .fan .hcard + .hcard { margin-left: calc(var(--fan-gap) - var(--fan-squeeze, 0px)); }
#handdock.squeezed .fan .hcard:not(:last-child) .hc-name { justify-content: flex-start; text-align: left; }
/* the groups' labels stand over whatever the panels behind show */
#handdock .dock-lbl { align-self: flex-start; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--bg) 88%, transparent); }

/* the keys in groups — Build · Network | Sell · Develop · Exchange | Loan · Pass — each group in its recessed bed:
   an icon over the name; a line under it while a card is picked or dragged (what it would do, or why not). The keys
   of a group are as wide as each other (the widest name decides) */
.hk-grp { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--key-w), 1fr); gap: 4px; height: var(--key-h); padding: 4px; border-radius: 4px; }
.hk-key.machine-key { flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 0; padding: 5px 4px; font-size: 12px; line-height: 1.1; text-align: center;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease, opacity .14s ease; }
.hk-key.machine-key[data-key-indicator] { padding-right: 4px; }
.hk-ico { flex: none; display: grid; place-items: center; height: var(--medal); } /* (the same height in every key: the names line up) */
.hk-ico > .machine-icon { width: 26px; height: 26px; }
.hk-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (the line under the name takes the key's width, it never widens the key: width 0, at least all of it) */
.hk-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 0; min-width: 100%; overflow: hidden; font-size: 10.5px; line-height: 1.15; font-weight: 650; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.hk-key .k-ico { font-weight: 800; font-size: 25px; line-height: 26px; height: 26px; }
/* (a line under the name: the icon makes room for it) */
.hk-key.sub .hk-ico { height: calc(var(--medal) - 12px); }
/* Sell, Develop, Exchange — the actions of their own: wider, the icon in a brass medallion */
.hk-g1 { grid-auto-columns: minmax(var(--key-w1), 1fr); }
.hk-g1 .hk-key.machine-key { font-size: 12.5px; }
.hk-g1 .hk-ico { width: var(--medal); border-radius: 50%; color: color-mix(in srgb, var(--ink) 82%, var(--accent-deep));
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff3cf 55%, transparent), transparent 55%), color-mix(in srgb, var(--accent) 30%, var(--machine-surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-deep) 70%, transparent), inset 0 -3px 5px rgb(0 0 0 / .14), 0 1px 0 var(--machine-glint); }
.hk-g1 .hk-ico > .machine-icon { width: 25px; height: 25px; }
.hk-g1 .hk-key.sub .hk-ico { width: calc(var(--medal) - 12px); }
.hk-g1 .hk-key.sub .hk-ico > .machine-icon { width: 19px; height: 19px; }
:root[data-theme="dark"] .hk-g1 .hk-ico { color: #f3e6c4; background: radial-gradient(circle at 35% 30%, rgb(255 240 200 / .18), transparent 55%), color-mix(in srgb, var(--accent) 24%, var(--machine-bed)); }
/* how many goods can be sold, on a glowing Sell */
.hk-badge { position: absolute; left: 5px; top: 5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent-deep); color: #fff; font: 800 11px/18px var(--f-ui); }
/* an exchange being chosen: how many of its three cards are picked */
.hk-key.hk-exchange.active .hk-sub { color: var(--accent-text); font-size: 12px; font-weight: 800; }
/* a card picked first: the keys that can play it stand out (with what it would do), the others fade (with why not) */
.dock-acts .hk-key.target:not(:disabled) { border-color: var(--target); box-shadow: inset 0 0 0 1px var(--target), 0 0 0 2px color-mix(in srgb, var(--target) 35%, transparent); }
.dock-acts .hk-key.target .hk-sub { color: var(--target); }
.dock-acts .hk-key.no:not(:disabled) { opacity: .6; }
.dock-acts .hk-key.no .hk-sub { color: var(--bad); }
/* a card dragged: every key is a slot for it — a dashed place, lit where the card can go, red where it can't; the one
   under the card rises to take it */
body.dragging-card .dock-acts .hk-key.target:not(:disabled) { border: 2px dashed var(--target); padding: 4px 2px; background: color-mix(in srgb, var(--target) 15%, var(--machine-bed, var(--panel2)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--target) 45%, transparent), inset 0 2px 7px rgb(0 0 0 / .1); }
body.dragging-card .dock-acts .hk-key.no:not(:disabled) { border: 2px dashed color-mix(in srgb, var(--bad) 80%, transparent); padding: 4px 2px; background: color-mix(in srgb, var(--bad) 7%, var(--machine-bed, var(--panel2))); opacity: .85; box-shadow: none; }
body.dragging-card .dock-acts .hk-key:is(.target, .no) .hk-sub { font-weight: 750; }
body.dragging-card .dock-acts .hk-key.target.drop-hot { border-style: solid; transform: translateY(-6px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--target) 45%, transparent), 0 10px 20px rgb(0 0 0 / .25); }
body.dragging-card .dock-acts .hk-key.no.drop-hot { border-style: solid; opacity: 1; }
/* (an exchange being chosen: the Exchange key takes the dragged card too) */
body.dragging-card .dock-acts .hk-key.active.drop-hot { border-color: var(--target); transform: translateY(-6px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--target) 45%, transparent), 0 10px 20px rgb(0 0 0 / .25); }
body.dragging-card .dock-acts .hk-key:not(.target):not(.no):not(.active), body.dragging-card .hk-turn { opacity: .4; }
/* impossible this turn: greyed (the tip, or a click, says why) */
.hk-key.off { opacity: .45; filter: saturate(.25); cursor: not-allowed; }
/* a sale is possible this turn: Sell glows (its lamp too), like the goods ringing on the map */
.hk-key.sell-ready:not(:disabled) { border-color: var(--accent-deep); background: linear-gradient(to bottom, var(--machine-glint), transparent 51%), color-mix(in srgb, var(--machine-surface) 72%, var(--accent)); }
.hk-key.sell-ready:not(:disabled)::before { content: ''; position: absolute; inset: -3px; border-radius: 5px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent-deep), 0 0 16px 3px color-mix(in srgb, var(--accent) 70%, transparent); animation: hkGlow 1.8s ease-in-out infinite; }
.hk-key.sell-ready:not(:disabled)[data-key-indicator]::after { background: var(--accent); box-shadow: 0 0 5px var(--accent); animation: hkGlow 1.8s ease-in-out infinite; }
@keyframes hkGlow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Undo and End turn (Suggest before them in the "explore" mode), at the end of the plate */
.hk-turn { flex: none; display: flex; align-items: stretch; gap: 6px; height: var(--key-h); margin-left: auto; }
.hk-undo.machine-key, .hk-suggest.machine-key { min-width: var(--undo-w); }
.hk-suggest.machine-key { border-style: dashed; color: var(--river); }
.hk-end.machine-key { width: var(--end-w); min-height: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 8px; line-height: 1.15; text-align: center; white-space: normal; }
.hk-end-l { font-size: 15px; font-weight: 800; }
.hk-end-s { font-size: 11px; font-weight: 600; }
.hk-clock { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #211a10 13%, transparent); font: 600 13px/1.1 var(--f-sign); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.hk-clock[hidden] { display: none; }
.hk-clock-ico { width: 13px; height: 13px; flex: none; }
.hk-clock small { font-size: 10.5px; opacity: .8; }
.hk-clock.low { color: #8e2418; }
.hk-clock.reserve { color: #fff; background: var(--bad); }
/* the turn timer (turn-clock.js): the reserve may go under the turn's time on a narrow key; stopped while the game
   waits for something else; a soft tick every second of the last ten */
.hk-clock { flex-wrap: wrap; justify-content: center; row-gap: 0; }
:root[data-theme="dark"] .hk-clock.reserve { background: #b03a2e; }
.hk-clock.paused { opacity: .6; }
.hk-clock.tock { animation: hkTock .7s ease-out; }
@keyframes hkTock { 0% { transform: scale(1.12); box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 75%, transparent); } 100% { transform: none; box-shadow: 0 0 0 7px transparent; } }
/* muted while actions are left (the turn can't end yet), dimmer still when it is not your turn */
.hk-end.wait:disabled { opacity: .8; filter: saturate(.3); }
/* the tutorial: the coach hasn't let the turn end yet — muted too (a click says why) */
.hk-end.hold { opacity: .8; filter: saturate(.3); cursor: not-allowed; }
.hk-end.off:disabled { opacity: .45; filter: saturate(.2); }
/* every action done: it lights up */
.hk-end.ready::after { content: ''; position: absolute; inset: -5px; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--accent-deep), 0 0 24px 7px color-mix(in srgb, var(--accent) 75%, transparent); animation: hkGlow 1.5s ease-in-out infinite; }
.hk-end.ready .hk-end-s { font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .hk-key.machine-key { transition: none; }
  .hk-clock.tock, .hk-key.sell-ready::before, .hk-key.sell-ready::after, .hk-end.ready::after { animation: none; opacity: 1; }
  body.dragging-card .dock-acts .hk-key.drop-hot { transform: none; }
}

/* the card's label while it is dragged: a key's sentence can be long */
.card-ghost .cg-label { white-space: normal; width: max-content; max-width: 230px; text-align: center; line-height: 1.25; }

@media (min-width: 1101px) {
  /* the hand over the bottom of the screen: the plate below with the title, the cards standing in it, the keys
     right after them, Undo and End turn at its end; above the plate the cards rise over a light haze */
  #screen.in-game .handdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 0 14px 0 16px; border-top: 0; box-shadow: none; pointer-events: none;
    background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--bg) 45%, transparent) calc(100% - var(--plate-h)), transparent calc(100% - var(--plate-h))); }
  :root[data-theme="dark"] #screen.in-game .handdock { background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--bg) 55%, transparent) calc(100% - var(--plate-h)), transparent calc(100% - var(--plate-h))); }
  #screen.in-game .handdock :is(.hcard, .dock-head, .hand-plate, .hk-grp, .hk-turn) { pointer-events: auto; }
  #screen.in-game .handdock :is(.dock-body, .dock-acts) { pointer-events: none; } /* (the map shows, and clicks, between them) */
  #screen.in-game .leftcol, #screen.in-game .side { padding-bottom: calc(var(--dock-h) + 14px); }
  /* the map narrower than its window (fitted to the height): in the middle */
  #board > svg { margin: 0 auto; }
  .hand-plate.machine-case { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: var(--plate-h); padding: 0; border-width: 1px 0 0; border-radius: 0; }
  /* (the plate is the keys' case) */
  .dock-acts.machine-case { align-self: flex-end; height: auto; margin: 0; padding: 0 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .dock-acts.machine-case::before { display: none; }
  /* the keys stand at the plate's right end, a little apart from Undo and End turn, whatever the hand holds: they
     don't wander as cards come and go (the hand on the left takes the rest, fanning tighter or scrolling) */
  .dock-acts.machine-case { flex-shrink: 0; }
  .dock-acts.machine-case > .hk-g0 { margin-left: auto; }
  .dock-acts.machine-case > .hk-turn { margin-left: 14px; }
  #screen.in-game .handdock .dock-head { align-self: flex-end; flex: 0 0 112px; height: var(--plate-h); justify-content: center; margin: 0; padding: 8px 0; }
  #screen.in-game .handdock.collapsed .dock-head { flex-direction: column; align-items: flex-start; }
  #screen.in-game .handdock.collapsed .dock-head .pcollapse { position: absolute; }
  #screen.in-game .handdock.collapsed .dock-head .ptitle { flex-direction: column; align-items: flex-start; gap: 0; }
  #screen.in-game .handdock .dock-body { gap: 12px; padding: 18px 4px 8px; }
  /* the fan as tight as it goes and still no room: the keys get narrower (handkeys.js fitHand) */
  .handdock.keys-tight { --key-w: 54px; --key-w1: 62px; --undo-w: 54px; --end-w: 96px; }
  .handdock.keys-tight .dock-acts.machine-case { gap: 6px; }
  .handdock.keys-tight :is(.hk-key.machine-key, .hk-g1 .hk-key.machine-key) { padding-inline: 3px; font-size: 10.5px; letter-spacing: -.15px; }
  .handdock.keys-tight .hk-sub { font-size: 9.5px; }
  .handdock.keys-tight { --medal: 36px; }
  .handdock.keys-tight .hk-end-l { font-size: 13px; }
}
@media (min-width: 1101px) and (max-width: 1499px) {
  /* (narrower keys and title: the room goes to the cards) */
  .handdock { gap: 10px; --key-h: 96px; --key-w: 58px; --key-w1: 68px; --undo-w: 58px; --end-w: 104px; }
  .dock-acts.machine-case { gap: 8px; }
  #screen.in-game .handdock .dock-head { flex-basis: 96px; }
  .hk-key.machine-key { padding-inline: 3px; font-size: 11.5px; letter-spacing: -.1px; }
  .hk-g1 .hk-key.machine-key { font-size: 11.5px; }
  .handdock { --medal: 38px; }
  .hk-g1 .hk-ico > .machine-icon { width: 23px; height: 23px; }
  .hk-sub { font-size: 10px; }
  .hk-end-l { font-size: 14px; }
  .hk-end-s { font-size: 10.5px; }
  /* a little smaller cards, so a full hand still fits beside the keys — and so every card (the one being dragged, the
     cards in a window): one card, one size */
  :root[data-card-look="atlas"] .hcard { width: 104px; height: 142px; }
  :root[data-card-look="atlas"] .hcard .hc-mini { height: 40px; }
}
@media (max-width: 1100px) {
  /* the hand at the bottom of the page: the cards, the keys in a row under them (a group that doesn't fit goes on
     to the next row) */
  .handdock { flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: 8px; --key-h: 66px; --key-w: 66px; --key-w1: 76px; --undo-w: 64px; --end-w: 126px; }
  #hand { flex: none; }
  .hand-plate { display: none; }
  .dock-acts.machine-case { flex-wrap: wrap; align-items: stretch; gap: 8px; min-width: 0; padding: 6px; }
  .dock-acts.machine-case::before { display: none; }
  .hk-key.machine-key { gap: 2px; padding: 3px 2px; font-size: 12px; }
  .hk-ico > .machine-icon { width: 21px; height: 21px; }
  .handdock { --medal: 30px; }
  .hk-g1 .hk-ico > .machine-icon { width: 19px; height: 19px; }
  .hk-key .k-ico { font-size: 20px; line-height: 21px; height: 21px; }
  .hk-sub { font-size: 9.5px; -webkit-line-clamp: 1; }
  .hk-end.machine-key { gap: 2px; padding: 3px 8px; }
  .hk-end-l { font-size: 14px; }
  .hk-end-s { font-size: 10px; line-height: 1.1; }
}
@media (max-width: 760px) {
  /* a phone: the cards (they scroll), then the keys in two rows of five — Build, Network, Sell, Develop, Exchange;
     Loan, Pass, then Undo and End turn */
  .dock-acts.machine-case { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .hk-grp { display: contents; }
  .hk-turn { grid-column: span 3; height: auto; gap: 4px; margin: 0; }
  .hk-key.machine-key, .hk-g1 .hk-key.machine-key { min-height: 56px; padding: 3px 1px; font-size: 10.5px; letter-spacing: -.15px; }
  .handdock { --medal: 26px; }
  .hk-g1 .hk-ico > .machine-icon, .hk-ico > .machine-icon { width: 18px; height: 18px; }
  .hk-key .k-ico { font-size: 17px; line-height: 18px; height: 18px; }
  .hk-sub { font-size: 9px; }
  .hk-badge { left: 2px; top: 2px; min-width: 15px; height: 15px; font-size: 9.5px; line-height: 15px; }
  .hk-undo.machine-key, .hk-suggest.machine-key { flex: 0 0 auto; min-width: 0; padding-inline: 6px; }
  .hk-end.machine-key { flex: 1; width: auto; flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: 6px; row-gap: 1px; padding: 2px 4px; }
  .hk-end-l { font-size: 12.5px; }
  .hk-end-s { display: none; } /* (the clock and the glow say it) */
  .hk-clock { padding: 1px 5px; font-size: 11px; }
}
@media (max-width: 360px) { .hk-key.machine-key, .hk-g1 .hk-key.machine-key { font-size: 9.5px; } }

/* ---- End turn: the warning about the income (end-warn.js) — red: the debt will cost tiles; yellow: it is paid ---- */
.modal-bg.ew-bg { z-index: 64; background: color-mix(in srgb, #3a0f08 48%, transparent); }
.modal-bg.ew-bg.yellow { background: color-mix(in srgb, #3a2c08 40%, transparent); }
.modal.ew { --ew: var(--bad); position: relative; max-width: 500px; padding: 0 22px 18px; overflow: hidden; border: 1px solid var(--ew);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ew) 30%, transparent), 0 18px 50px rgba(0, 0, 0, .45); }
.modal.ew.yellow { --ew: var(--warn); }
.ew-band { height: 12px; margin: 0 -22px 16px; background: repeating-linear-gradient(135deg, var(--ew) 0 14px, #1d1a16 14px 28px); }
.ew-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ew-sign { flex: none; width: 48px; height: 42px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--ew); color: #fff; font: 900 23px/1 var(--f-title); }
.ew.yellow .ew-sign { color: #1d1a16; }
.ew .kicker { color: var(--ew); font-weight: 700; }
.ew h2 { margin: 2px 0 0; font-size: 21px; line-height: 1.2; }
.ew-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.ew-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); }
.ew-cell > span { font-size: 11.5px; line-height: 1.2; color: var(--muted); }
.ew-cell > b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 18px; }
.ew-cell > b small { font-size: 12px; font-weight: 600; }
.ew-cell.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--panel2)); }
.ew-cell.bad > b { color: var(--bad); }
.ew p { margin: 0 0 10px; line-height: 1.45; }
.ew p b { font-weight: 700; }
.ew-hint { font-size: 12.5px; color: var(--muted); }
.ew .mk-noask { margin-bottom: 10px; }
.ew .row { margin-top: 6px; }
.ew-keys { font-size: 11.5px; }
@media (max-width: 480px) { .ew-nums { grid-template-columns: 1fr; } .ew-keys { display: none; } }

/* ---- the card picker (card-picker.js): a window over the map's column (the hand stays in reach under it on a wide
   screen) with the cards in hand drawn as in the hand — lit ones to pick, dimmed ones with why — and the exchange's
   window in the same frame (exchange-picker.js: three places over the rest of the hand) ---- */
.cp-bg { position: fixed; inset: 0; z-index: 38; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(28, 22, 12, .3); animation: cp-fade .16s ease-out; }
.cp-bg.wide { bottom: var(--dock-h, 0px); padding: 14px var(--cp-pr, 12px) 14px var(--cp-pl, 12px); }
:root[data-theme="dark"] .cp-bg { background: rgba(0, 0, 0, .46); }
@keyframes cp-fade { from { opacity: 0; } }
.cp { position: relative; display: flex; flex-direction: column; width: max-content; min-width: min(430px, 100%); max-width: min(980px, 100%); max-height: 100%; color: var(--ink);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 7%, transparent), transparent 90px), var(--panel);
  border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 10px; box-shadow: 0 18px 50px rgba(20, 14, 6, .38), 0 3px 10px rgba(0, 0, 0, .2); animation: pop-in .18s ease-out; }
.cp:focus { outline: none; }
.cp-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 48px 4px 16px; }
.cp-hico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 2px; border-radius: 50%; color: color-mix(in srgb, var(--ink) 82%, var(--accent-deep));
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff3cf 55%, transparent), transparent 55%), color-mix(in srgb, var(--accent) 30%, var(--panel2));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-deep) 70%, transparent), inset 0 -3px 5px rgb(0 0 0 / .12); }
.cp-hico .ico { width: 26px; height: 26px; }
:root[data-theme="dark"] .cp-hico { color: #f3e6c4; }
.cp-ht { min-width: 0; max-width: 620px; }
.cp-ht .kicker { display: block; }
.cp-ht h3 { margin: 1px 0 3px; font-family: var(--f-title); font-size: 20px; font-weight: 600; line-height: 1.2; }
.cp-lead { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cp-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; min-height: 0; padding: 0; border: none; background: none; font-size: 24px; line-height: 1; color: var(--muted); border-radius: 6px; }
.cp-x:hover:not(:disabled) { background: var(--panel2); color: var(--ink); }
.cp-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 18px 10px; overscroll-behavior: contain; }
/* the cards: rows of the same length (card-picker.js sets --cols), each with its caption under it */
.cp-cards { display: grid; grid-template-columns: repeat(var(--cols, 4), max-content); justify-content: center; gap: 22px 14px; }
.cp-slot { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.cp-slot .hcard { margin: 0; }
.cp-slot .hcard.selectable:not(.selected):hover, .cp-slot .hcard.selectable:not(.selected):focus-visible { transform: translateY(-8px) scale(1.04); }
.cp-slot .hcard.selected { transform: translateY(-10px); }
.cp-slot.no { cursor: help; }
.cp-slot.no .hcard, .cp-slot.no .hcard:hover { cursor: help; transform: none; }
.cp-cap { max-width: 116px; min-height: 15px; font-size: 11.5px; line-height: 1.25; font-weight: 700; text-align: center; color: var(--target); }
.cp-slot.no .cp-cap { color: var(--bad); font-weight: 600; }
.cp-slot.chosen .cp-cap { color: var(--accent-text); font-weight: 800; }
/* the card chosen: a gold tick on its corner */
.cp-slot.chosen { position: relative; }
.cp-slot.chosen::before { content: '✓'; position: absolute; z-index: 6; top: -18px; right: -9px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #2a1f0c;
  font: 800 14px/24px var(--f-ui); text-align: center; box-shadow: 0 0 0 2px var(--panel), 0 2px 5px rgb(0 0 0 / .3); pointer-events: none; }
.xp-place .cp-slot.chosen::before { display: none; }
.cp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.cp-say { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.cp-say.on { color: var(--ink); }
.cp-foot .machine-key { min-height: 40px; padding: 6px 18px; font-weight: 760; }
.cp-foot .machine-gold::before { display: none; } /* (the Cart era's inner frame: too tight on a small key) */
/* the exchange: three places for the cards to give up, over the rest of the hand; a card dragged from the hand onto
   the window lights them */
.xp-places { display: flex; justify-content: center; gap: 14px; width: max-content; max-width: 100%; margin: -6px auto 0; padding: 14px 20px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 11%, var(--panel2)); box-shadow: inset 0 2px 7px rgb(0 0 0 / .13); transition: box-shadow .14s ease; }
.xp-places.drop-hot { box-shadow: inset 0 0 0 2px var(--target), 0 0 16px color-mix(in srgb, var(--target) 45%, transparent); }
.xp-place { position: relative; display: grid; place-items: center; }
.xp-place > .xp-size.hcard { visibility: hidden; margin: 0; transform: none; transition: none; }
.xp-place:not(.full)::before { content: ''; position: absolute; inset: 0; border: 2px dashed color-mix(in srgb, var(--accent-deep) 65%, transparent); border-radius: 6px; }
.xp-n { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--accent-deep) 60%, transparent); font: 600 30px/1 var(--f-title); }
.xp-place .cp-slot { gap: 0; }
.xp-place .cp-slot .hcard.selected { transform: none; }
.xp-place .cp-slot .hcard.selected:hover { transform: translateY(4px) rotate(-2deg); }
.xp-place .cp-cap { display: none; }
.xp-how { margin: 8px 0 18px; text-align: center; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
  .cp-bg { padding: 8px; align-items: flex-end; }
  .cp { width: 100%; min-width: 0; max-width: none; }
  .cp-head { padding: 10px 44px 2px 12px; gap: 10px; }
  .cp-hico { width: 36px; height: 36px; }
  .cp-ht h3 { font-size: 17px; }
  .cp-lead { font-size: 12px; }
  .cp-body { padding: 18px 10px 8px; }
  .cp-cards { gap: 16px 8px; }
  .cp-cap { max-width: 84px; font-size: 10.5px; }
  .cp-foot { padding: 8px 10px 10px; flex-wrap: wrap; }
  .cp-say { flex-basis: 100%; font-size: 12.5px; }
  .xp-places { gap: 8px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-bg, .cp { animation: none; }
  .cp-slot .hcard, .cp-slot .hcard:hover, .cp-slot .hcard.selected { transition: none; }
}

/* ---- one more rail (rail-choice.js): a small yellow note by the rail just picked, its tail pointing at it; the lines
   that can be the second one pulse on the map ---- */
.rail-note { --tail: 50%; position: absolute; z-index: 7; width: 232px; padding: 8px 10px 8px 11px; border: 1px solid #c49a22; border-radius: 6px; background: #f7dc7c; color: #2b2210;
  box-shadow: 0 6px 16px rgb(40 30 10 / .3), inset 0 1px rgb(255 255 255 / .45); font-size: 12.5px; line-height: 1.35; animation: rn-in .2s ease-out; }
:root[data-theme="dark"] .rail-note { background: #e4c15a; border-color: #f4d885; color: #1d180c; box-shadow: 0 6px 18px rgb(0 0 0 / .5); }
.rail-note[hidden] { display: none; }
@keyframes rn-in { from { opacity: 0; transform: translateY(4px); } }
.rn-text { margin: 0 0 6px; font-weight: 600; }
.rn-one { display: block; min-height: 26px; margin-left: auto; padding: 2px 11px; border: 1px solid #8d6c1b; border-radius: 4px; background: #fff3c4; color: #2b2210; font: 700 12px/1.2 var(--f-ui); cursor: pointer; }
.rn-one:hover { background: #fffbe6; }
.rn-one:focus-visible { outline: 2px solid var(--focus, #345b72); outline-offset: 2px; }
.rn-tail { position: absolute; width: 12px; height: 12px; background: inherit; border: 1px solid; border-color: inherit; transform: rotate(45deg); }
.rail-note[data-side="top"] .rn-tail { bottom: -7px; left: calc(var(--tail) - 6px); border-width: 0 1px 1px 0; }
.rail-note[data-side="bottom"] .rn-tail { top: -7px; left: calc(var(--tail) - 6px); border-width: 1px 0 0 1px; }
.rail-note[data-side="left"] .rn-tail { right: -7px; top: calc(var(--tail) - 6px); border-width: 1px 1px 0 0; }
.rail-note[data-side="right"] .rn-tail { left: -7px; top: calc(var(--tail) - 6px); border-width: 0 0 1px 1px; }
.board-wrap.rail-noted .b-line.glow { animation: rn-glow 1.4s ease-in-out infinite; }
@keyframes rn-glow { 0%, 100% { opacity: .4; } 50% { opacity: .95; stroke-width: 15; } }
@media (max-width: 760px) { .rail-note { width: 190px; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .rail-note { animation: none; } .board-wrap.rail-noted .b-line.glow { animation: none; opacity: .85; } }
/* the players over the map on a phone (app.js renderPlayerBar): the portraits on the map are too small there */
.pbar { display: none; }
@media (max-width: 760px) {
  .pbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0 0 6px; }
  .pbar .pb { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px; row-gap: 1px; min-height: 0; min-width: 0; padding: 3px 6px 3px 4px; text-align: left;
    border: 1px solid color-mix(in srgb, var(--pc) 45%, var(--line)); border-left: 4px solid var(--pc); border-radius: 7px; background: color-mix(in srgb, var(--pc) 6%, var(--panel)); color: var(--ink); font-size: 12px; font-weight: 500; }
  .pbar .pb.now { border-color: var(--accent); border-left-color: var(--pc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
  .pbar .pb-n { grid-row: 1 / span 2; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); color: var(--panel); font: 600 10.5px/17px var(--f-sign); text-align: center; }
  .pbar .pb.now .pb-n { background: var(--accent); color: var(--accent-ink); }
  .pbar .pb-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pbar .pb-st { grid-column: 2; display: flex; gap: 7px; font-variant-numeric: tabular-nums; }
  .pbar .pb-st .iv { gap: 2px; }
  .pbar .pb-st .iv .ico { width: 12px; height: 12px; }
}

/* ---- a sale in the window next to the cursor ---- */
/* (a little wider for a sale, and nothing may spill out of it over the goods still to click) */
.qconfirm:has(.qc-sell) { width: min(400px, calc(100vw - 16px)); max-width: none; }
.qconfirm { overflow: hidden; max-height: calc(100vh - var(--dock-h, 0px) - 16px); overflow-y: auto; }
.qconfirm .qc-sell { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; min-width: 0; }
.qconfirm .sale-list table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.qconfirm .sale-list td:first-child { width: 78px; vertical-align: top; }
.qconfirm .sale-list td { overflow-wrap: anywhere; }
.qconfirm .sale-list select, .qc-pay select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.qc-pay { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.qc-pay select { flex: 1; min-width: 0; }
.qconfirm .sale-list { margin: 0; padding-left: 18px; font-size: 13px; }
.qconfirm .sale-list li + li { margin-top: 4px; }
.qconfirm .sale-list table { font-size: 12px; margin-top: 2px; }
.qconfirm .sale-list td { padding: 1px 6px 1px 0; }
.qconfirm .sale-list button.small { min-height: 22px; padding: 1px 6px; font-size: 11px; }
/* the merchant's free develop: right there, impossible to miss */
.qconfirm tr.bonus td, #wizard tr.bonus td { background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 700; }
.qconfirm tr.bonus td:first-child, #wizard tr.bonus td:first-child { border-radius: 4px 0 0 4px; padding-left: 6px; }
.qconfirm tr.bonus td:last-child, #wizard tr.bonus td:last-child { border-radius: 0 4px 4px 0; }
.qc-more { margin: 0; font-size: 12px; color: var(--accent-text); }

/* ---- "you missed an upgrade": the tiles to take off the mat ---- */
.modal.upgrade .up-picks { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 14px; }
.up-pick { --mp: 52px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px 8px; min-width: 104px; }
.up-pick .mp-top { position: relative; left: auto; top: auto; }
.up-pick:hover .mp-top, .up-pick:focus-visible .mp-top { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, .28); }
.up-pick > span:last-child { font-size: 12.5px; font-weight: 700; }

/* ---- what a build brings (the town opened under a dragged card) ---- */
.ot-brings { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); }
.ot-brings .iv { gap: 2px; }

/* ---- the effects after a move (fx.js): over the map and the hand, below the windows ---- */
.fx-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; overflow: visible; }
.fx-layer .fx-ico { --res-ground: var(--panel); }
.fx-res { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.fx-puff, .fx-ring { fill: none; }
.fx-puff { stroke-width: 2; }
.fx-spark { stroke-width: 2.4; stroke-linecap: round; }
.fx-dust { fill: color-mix(in srgb, var(--muted) 60%, transparent); }
.fx-smoke { fill: color-mix(in srgb, var(--muted) 50%, var(--bg)); }
/* the road a sold good takes: a wide soft glow, the seller's colour, a warm bright core */
.fx-trail-glow, .fx-trail-under, .fx-trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx-trail-glow { stroke-width: 13; opacity: .55; filter: url(#fxGlow); }
.fx-trail-under { stroke-width: 5.5; opacity: .95; }
.fx-trail { stroke: #fff3cc; stroke-width: 2; }
.fx-token { fill: var(--panel); stroke-width: 3; }
.fx-comet { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.fx-gain-t { font: 800 16px var(--f-ui); fill: var(--ink); stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }
.fx-gain.good .fx-gain-t { fill: var(--good); }
.fx-gain.bonus .fx-gain-t { font-size: 17px; fill: var(--accent-text, var(--ink)); }
:root:not([data-theme="dark"]) .fx-gain.bonus .fx-gain-t { fill: #7a5313; }
.fx-coin, .fx-msausage { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
/* a town (a road) takes what flew in: it flashes for a moment (fx.js flashTown, flashRoad) */
.fx-town-glow { fill: none; stroke-width: 9; opacity: .8; filter: url(#fxGlow); }
.fx-town-line { fill: color-mix(in srgb, #fff8e2 30%, transparent); stroke-width: 2.4; }
.fx-road-glow { fill: none; stroke-width: 13; stroke-linecap: round; opacity: .75; filter: url(#fxGlow); }
.fx-road-line { fill: none; stroke: #fff3cc; stroke-width: 3; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .fx-layer { display: none; } }
.fx-layer .ico-money { color: var(--c-vp); --ico-line: var(--rim); --ico-lw: 1.2; }
.fx-layer .ico-income { color: var(--good); --ico-line: var(--rim); --ico-lw: 1; }
.fx-layer .ico-develop { color: var(--river); --ico-line: var(--rim); --ico-lw: 1; }
.fx-chip-bg { fill: var(--panel); stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1.2; }
.fx-chip .bi { --res-ground: var(--panel); }
.fx-layer .ico-vp { color: var(--c-vp); --ico-line: var(--rim); --ico-lw: 1.2; }
/* "VP at once": a flipped tile's VP on their way to the portrait, and an overbuilt one's falling away */
.fx-vp { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)); }
.fx-vp-halo { fill: url(#fxHalo); }
.fx-vp-disc { fill: var(--panel); stroke: var(--c-vp); stroke-width: 2.4; }
.fx-vp-t { font: 800 17px var(--f-ui); fill: #7a5313; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }
:root[data-theme="dark"] .fx-vp-t { fill: var(--c-vp); }
.fx-gain.loss .fx-gain-t { fill: var(--bad); }
/* the same list in the turn panel: the sausage choices fit the column */
#wizard .sale-list table { width: 100%; table-layout: fixed; }
#wizard .sale-list td:first-child { width: 84px; vertical-align: top; }
#wizard .sale-list td { overflow-wrap: anywhere; }
#wizard .sale-list select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }

/* ---- the turn timer: the bar over the hand while the AI plays my seat (app.js renderAiBar) ---- */
#aibar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 46; display: flex; align-items: center; gap: 14px; max-width: min(92vw, 640px);
  background: var(--panel); border: 1px solid var(--bad); border-radius: 12px; padding: 8px 8px 8px 14px; color: var(--ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25), 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); animation: stepIn .25s ease-out; }
.has-dock #aibar { bottom: calc(var(--dock-h) + 14px); }
body:has(#stepbar) #aibar { bottom: calc(var(--dock-h, 0px) + 82px); } /* (the step bar takes the place above the hand) */
#aibar .ab-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#aibar .ab-what b { font-size: 14px; color: var(--bad); }
#aibar .ab-what small { font-size: 12px; color: var(--muted); line-height: 1.3; }
#aibar button { white-space: nowrap; font-size: 14px; padding: 8px 14px; }
@media (max-width: 760px) {
  /* a phone: across the screen, the key under the words when they need the room */
  #aibar { left: 8px; right: 8px; transform: none; max-width: none; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; animation: none; }
  #aibar .ab-what { flex: 1 1 210px; }
  #aibar .ab-what b { font-size: 13.5px; }
  #aibar button { flex: 1 0 auto; font-size: 13.5px; padding: 7px 12px; }
}
/* the players' row on a phone: each one's clock beside the name (the player to move: theirs running) */
@media (max-width: 760px) {
  .pbar .pb-name { display: flex; align-items: center; gap: 5px; }
  .pbar .pb-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pbar .pb-clk { margin-left: auto; flex: none; padding: 0 5px; border-radius: 999px; background: var(--panel2); color: var(--muted);
    font: 600 10.5px/16px var(--f-sign); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
  .pbar .pb-clk .ck-x { margin-left: 3px; font-size: 9px; opacity: .85; }
  .pbar .pb-clk:not(.idle) { color: var(--ink); background: color-mix(in srgb, var(--accent) 32%, var(--panel)); }
  .pbar .pb-clk.low { color: var(--bad); }
  .pbar .pb-clk.reserve { color: #fff; background: var(--bad); }
  :root[data-theme="dark"] .pbar .pb-clk.reserve { background: #b03a2e; }
  .pbar .pb-clk.empty { color: var(--bad); }
  .pbar .pb-clk.paused { opacity: .6; }
  .pbar .pb-clk.tock { animation: hkTock .7s ease-out; }
}