/* The Board's Frame: the chrome is the edge of Feudum's own board. A chocolate frame,
   score-track cream panels under gold filigree with a teal jewel, crimson for actions and the
   action cards' mauve for picks, Baskerville bold small caps over Optima-voiced text. */
@font-face { font-family: "Baskervville"; src: url("assets/fonts/baskervville.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libertinus Sans"; src: url("assets/fonts/libertinus-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libertinus Sans"; src: url("assets/fonts/libertinus-sans-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libertinus Sans"; src: url("assets/fonts/libertinus-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Taken from the board: the cream of the score-track squares, the chocolate frame,
     its gold filigree and teal glass jewels, the logo crimson, the action cards' mauve. */
  --parchment: #e4d8ba;
  --paper: #f5eedc;
  --paper-2: #d6c7a2;
  --ink: #2b1d10;
  --ink-2: #594530;
  --accent-ink: #7c2a1e;
  --frame: #3b2814;
  --frame-deep: #271a0c;
  --on-frame: #f5ead0;
  --gold: #b8973f;
  --act: #9c302f;
  --act-deep: #6c1f1c;
  --pick: #6b5676;
  --pick-deep: #4a3a53;
  --jewel: #2f7f78;
  --rule: rgba(43, 29, 16, .26);
  --rule-strong: rgba(43, 29, 16, .58);
  --danger: #9a3a3d;
  --ok: #2f5a1f;
  /* Food cubes: the base game's green, or the high-visibility pink of Squirrels & Conifers
     (the menu's Pink food switch, or a game with the expansion). */
  --food: #6fa84e;
  --radius: 4px;
  --display: "Baskervville", "Baskerville", serif;
  --text: "Libertinus Sans", "Optima", sans-serif;
  --float: 0 10px 28px rgba(31, 20, 8, .36);
  /* The board's frame ornament: a gold double line with ring ends and a teal glass jewel
     at its middle, as on the guild panels. */
  --rod-end: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.6' fill='%23b8973f' stroke='%23271a0c' stroke-width='1.2'/%3E%3Ccircle cx='6' cy='6' r='1.8' fill='%23271a0c'/%3E%3C/svg%3E");
  --rod-shaft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' preserveAspectRatio='none'%3E%3Crect y='3.6' width='10' height='1.6' fill='%23b8973f'/%3E%3Crect y='6.8' width='10' height='1' fill='%23b8973f'/%3E%3C/svg%3E");
  --rod-jewel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18' viewBox='0 0 22 18'%3E%3Cpath d='M1 9 Q6 4 11 2 Q16 4 21 9 Q16 14 11 16 Q6 14 1 9Z' fill='%23b8973f' stroke='%23271a0c' stroke-width='1'/%3E%3Ccircle cx='11' cy='9' r='4.6' fill='%232f7f78' stroke='%23271a0c' stroke-width='1'/%3E%3Ccircle cx='9.6' cy='7.6' r='1.4' fill='%23bfe8df' opacity='.8'/%3E%3C/svg%3E");
  --rod: var(--rod-jewel) center top / 22px 18px no-repeat, var(--rod-end) left 6px top 3px / 12px 12px no-repeat, var(--rod-end) right 6px top 3px / 12px 12px no-repeat, var(--rod-shaft) center top 3px / calc(100% - 32px) 12px no-repeat;
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --safe-l: env(safe-area-inset-left);
  --safe-r: env(safe-area-inset-right);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--parchment);
  color: var(--ink);
  font: 16px/1.4 var(--text);
  font-variant-numeric: lining-nums;
  font-kerning: normal;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "stage" "hud";
  height: 100dvh;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  scrollbar-color: rgba(43, 29, 16, .45) transparent;
}
::selection { background: rgba(184, 151, 63, .4); color: var(--ink); }
button { font: inherit; color: inherit; }
h2, h3, .brand { font-family: var(--display); font-weight: 700; font-variant-caps: small-caps; letter-spacing: .01em; color: var(--ink); text-wrap: balance; }
h2 { font-size: 25px; margin: 2px 0 6px; line-height: 1.1; }
h3 { font-size: 21px; margin: 0; line-height: 1.15; }
h4 { margin: 18px 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
p { margin: 0 0 10px; }
.muted { color: var(--ink-2); }
.hint { color: var(--ink-2); font-size: 15px; font-style: italic; margin: 8px 0 0; }
/* Teal captions, as the rulebook labels its pieces and terms. */
.kicker { font-size: 16px; font-variant-caps: small-caps; letter-spacing: .03em; color: var(--accent-ink); line-height: 1.2; }
.kicker b { color: var(--ink); font-weight: 700; }
h2 + .kicker { margin: -3px 0 10px; }
.note { font-style: italic; color: var(--ink-2); margin: -2px 0 8px; }
.icon svg, .x::before { pointer-events: none; }

/* top bar: the rulebook's frame */
.top {
  grid-area: top;
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 6px) calc(var(--safe-r) + 10px) 6px calc(var(--safe-l) + 14px);
  background: var(--frame);
  color: var(--on-frame);
  border-bottom: 2px solid var(--gold);
}
.brand { font-size: 21px; color: var(--on-frame); }
.status { flex: 1; min-width: 0; text-align: right; font-size: 15px; color: var(--on-frame); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status .turns { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: -1px; }
.status .turns i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--on-frame); }
.status .turns i.on { background: var(--on-frame); }
body.playing .brand { display: none; }
body.playing .status { text-align: left; font-size: 16px; }
.status b { font-family: var(--display); font-weight: 700; font-size: 1.1em; }
.icon {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid rgba(243, 239, 220, .4);
  background: transparent; color: var(--on-frame); cursor: pointer; padding: 0;
}
.icon svg { width: 22px; height: 22px; display: block; }
.icon:disabled { opacity: .4; }
.top :focus-visible { outline-color: var(--on-frame); }

/* map */
.stage { grid-area: stage; position: relative; min-height: 0; overflow: hidden; background: var(--frame-deep); }
.map { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.map:active { cursor: grabbing; }
.regions { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; pointer-events: none; }
.regions::-webkit-scrollbar { display: none; }
/* The top strip: the two guild columns at either end, Center and Status between them. */
.gcols { display: flex; gap: 6px; }
#guildsR { margin-left: auto; }
.regions .strip-tools { display: flex; gap: 6px; }
.regions .recenter { position: static; pointer-events: auto; flex: none; }
/* Phones: Center and Status show their icons only, so the whole strip fits the width. */
@media (max-width: 480px) {
  .regions .recenter { padding: 0 10px; gap: 0; }
  .regions .recenter span { display: none; }
}
.rchip { pointer-events: auto; flex: none; min-height: 44px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 0 14px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(20, 16, 10, .35); }
/* The region of what to look at now: a mauve edge and underline, the chip stays paper. */
.rchip:not(.gside) { display: inline-flex; align-items: center; gap: 5px; padding-left: 10px; }
.rchip .rg-ic { width: 24px; height: 24px; margin: 0; vertical-align: 0; }
.rchip.gside { display: inline-flex; align-items: center; gap: 3px; padding: 0 10px; }
.rchip.gside img { width: 20px; height: 20px; object-fit: contain; }
.rchip[aria-current] { border: 2px solid var(--pick); box-shadow: inset 0 -4px 0 var(--pick), 0 2px 6px rgba(20, 16, 10, .35); }
.map svg { width: 100%; height: 100%; display: block; }
.site { cursor: pointer; }
.site .hit { fill: transparent; }
.site.selected .hit { fill: rgba(255, 240, 200, .18); stroke: #f8e7b6; stroke-width: 3; }
.site image { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.site .unknown { fill: rgba(30, 26, 20, .75); stroke: #e8d6a8; stroke-width: 2.5; stroke-dasharray: 6 5; }
.site .q { fill: #f1e6cf; font: 700 26px var(--display); text-anchor: middle; }
.site .tag { fill: #fff; font: 700 15px var(--text); text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 4px; }
.site .pip { stroke: #120f0b; stroke-width: 2.5; }
.site .pawn { stroke: #120f0b; stroke-width: 2; }
/* The pawn you picked to move: larger, lifted, with a soft light around it. */
.pawn-chosen .pawn > * { scale: 1.4; transition: scale .18s cubic-bezier(.2, .8, .2, 1); }
.pawn-chosen .pawn { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #fff6d8) drop-shadow(0 0 10px #fff6d8) drop-shadow(0 6px 5px rgba(0, 0, 0, .5)); animation: pawn-lit 1.4s ease-in-out infinite; }
@keyframes pawn-lit { 50% { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff6d8) drop-shadow(0 0 5px #fff6d8) drop-shadow(0 6px 5px rgba(0, 0, 0, .5)); } }
.mark { fill: none; stroke: var(--c); stroke-width: 6; }
.mark.pulse { animation: pulse 1.3s ease-in-out infinite; }
.mark.pink { stroke: #ef7fb4; stroke-dasharray: 10 7; stroke-width: 5; }
.mark.chosen { stroke-width: 8; }
@keyframes pulse { 0%, 100% { opacity: 1; stroke-width: 7; } 50% { opacity: .35; stroke-width: 13; } }
.route { stroke-width: 8; stroke-linecap: round; stroke-dasharray: 2 14; }
.route-under { stroke: #120f0b; stroke-width: 4; stroke-linecap: round; opacity: .7; filter: drop-shadow(0 0 3px #000); }
/* The head points the way: outlined dark so a house's color reads on any ground. */
.route-head { stroke: #120f0b; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 3px #000); }
/* Where your chosen pawn could go: lighter, until you tap a place. */
.route-g.can { opacity: .8; }
.tiles { cursor: pointer; }
.tiles .hit { fill: transparent; }
.tile { stroke: #1a120c; stroke-width: 2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
/* Region tile fronts, as printed: epoch I red, II maroon, III rose red, IV magenta. */
.tile.e1 { fill: #b8322c; } .tile.e2 { fill: #8e3449; } .tile.e3 { fill: #cf3d55; } .tile.e4 { fill: #a5386b; }
.tiles .numeral { fill: #f6ecd2; font: 700 20px var(--display); text-anchor: middle; paint-order: stroke; stroke: #2b1a12; stroke-width: 4px; }
.tiles:not(.live) .numeral, .tiles:not(.live) .rg { opacity: .55; }
.road.ship { stroke: #7fd3ff; stroke-dasharray: 14 8; }
.road.submersible { stroke: #ffe066; stroke-dasharray: 3 9; stroke-linecap: round; }
.road.air { stroke: #ff9a9a; stroke-dasharray: 18 10; }
.road.ferry { stroke: #e9c25a; stroke-dasharray: 6 6; }
.road.draft { opacity: .75; }
.vessel-left, .pawn-vessel { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.road { stroke: #fff6; stroke-width: 6; stroke-linecap: round; }

/* view switch */
.views { display: none; gap: 2px; padding: 2px; border: 1px solid rgba(243, 239, 220, .45); border-radius: var(--radius); flex: none; }
body.playing .views { display: flex; }
.view { border: 0; border-radius: 2px; background: transparent; padding: 0 12px; min-height: 44px; font-weight: 700; font-size: 15px; cursor: pointer; color: var(--on-frame); }
.view.on { background: var(--paper); color: var(--ink); }
body.playing .status { text-align: right; font-size: 15px; }
/* The epoch marker accompanies the compact status line. */
.status .ep-ic { width: 17px; height: 17px; vertical-align: -3px; margin-right: 3px; }
@media (max-width: 420px) { .view { padding: 0 10px; } }

/* Navigation stays above a dedicated control tray, inside the device safe area. */
.play-controls {display:none;}
body.playing .top {
  display:grid;grid-template-columns:minmax(0,1fr) 44px;
  grid-template-areas:"views menu" "controls controls";
  gap:6px 8px;padding-bottom:8px;
}
body.playing .top .views {grid-area:views;min-width:0;max-width:100%;justify-self:start;}
body.playing .top .view {padding-inline:10px;min-width:44px;}
body.playing .top [data-act="menu"] {grid-area:menu;}
body.playing .play-controls {grid-area:controls;display:grid;gap:5px;border-top:1px solid rgba(184,151,63,.45);padding-top:6px;min-width:0;}
body.playing .top .status {text-align:left;font-size:14px;line-height:1.2;min-height:18px;}
.play-controls .regions {position:static;display:flex;align-items:center;gap:6px;overflow:visible;pointer-events:auto;min-width:0;}
.play-controls .gcols {min-width:0;flex:none;}
.play-controls #guildsR {margin-left:0;}
.play-controls .strip-tools {margin-left:auto;gap:4px;}
.play-controls .rchip.gside {padding:0 6px;gap:2px;min-width:0;box-shadow:none;}
.play-controls .rchip.gside img {width:18px;height:18px;}
.play-controls .recenter,.play-controls .icon {width:44px;height:44px;min-width:44px;padding:0;display:inline-grid;place-items:center;box-shadow:none;background:var(--paper);color:var(--ink);border:1px solid var(--rule-strong);}
.play-controls .recenter span {display:none;}
.play-controls .icon:disabled {opacity:.4;}

/* guilds */
[hidden] { display: none !important; }
.guilds { position: absolute; left: 0; right: 0; top: 0; z-index: 5; pointer-events: none; }
.guilds > * { pointer-events: auto; }
.gtabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 8px; flex: none; }
.gtab { display: grid; justify-items: center; gap: 2px; padding: 6px 0 5px; min-height: 44px; border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--paper-2); cursor: pointer; font-size: 12px; color: var(--ink-2); }
.gtab.on { background: var(--paper); color: var(--ink); border-color: var(--rule-strong); font-weight: 700; }
.gtab .dot { width: 8px; height: 8px; }
.dot.empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.gicon { width: 22px; height: 22px; }
.gpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border-top: 1px solid var(--rule-strong); padding: 6px 10px 8px; }
.gpanel h4 { margin: 14px 0 8px; }
.ranks-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rank { background: var(--parchment); border-radius: var(--radius); padding: 8px 10px; font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.rank b { color: var(--ink); font-size: 16px; display: flex; align-items: center; gap: 6px; }
.stars { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.stars span { display: inline-flex; align-items: center; gap: 5px; }
.grow-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.gname { width: 84px; flex: none; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.slots { display: flex; gap: 6px; flex-wrap: wrap; }
.slot { width: 36px; height: 36px; border-radius: 3px; border: 1.5px dashed var(--ink-2); background: transparent; cursor: pointer; padding: 0; }
.slot.on { background: var(--fill); border: 1.5px solid #120f0b; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25); }
.slot.barrels:nth-child(1), .slot.barrels:nth-child(3) { margin-right: 8px; }
.slot.barrels { width: 30px; height: 30px; border-radius: 50%; }
.slot.seal { width: 40px; height: 40px; border-radius: 50%; }
.gstep { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 15px; }
.gstep > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.beads { display: flex; flex-wrap: wrap; gap: 8px; min-height: 8px; }
.bead { width: 44px; height: 44px; border-radius: 50%; border: 1.5px dashed var(--ink-2); background: transparent; font-weight: 700; font-size: 16px; cursor: pointer; }
.bead.on { background: #8fc7a8; color: #10241a; border: 1.5px solid #120f0b; }
.add-beads { margin-top: 10px; }

/* location card: a note-paper callout over the board */
.card {
  position: absolute; z-index: 5; width: min(300px, calc(100% - 16px));
  max-height: calc(100% - 16px); overflow: auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: var(--float); padding: 12px;
  animation: pop .14s ease-out;
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card-head .kicker { margin-top: 2px; }
.x { display: inline-grid; place-items: center; border: 1px solid var(--rule); background: transparent; color: var(--ink); width: 44px; height: 44px; margin: -6px -6px 0 0; border-radius: var(--radius); cursor: pointer; flex: none; font-size: 0; padding: 0; }
.x::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--x-mark) center / contain no-repeat; mask: var(--x-mark) center / contain no-repeat; }
:root.pink-food { --food: #ef4f9d; }
:root { --x-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.facts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; font-size: 15px; }
.pips { display: inline-flex; gap: 3px; }
.stack { display: grid; gap: 6px; }
.stack .btn { justify-content: flex-start; text-align: left; }
.stack small { color: var(--ink-2); margin-left: 4px; }
.fix-toggle { margin-top: 8px; }
.fix { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 4px; }
.fix label, .field label, .field-label, fieldset.field > legend { display: block; font-size: 16px; font-variant-caps: small-caps; letter-spacing: .03em; color: var(--accent-ink); margin: 8px 0 4px; }
.mini-disc { border: 2px solid transparent; background: none; padding: 2px; border-radius: 50%; cursor: pointer; }
.mini-disc img { width: 40px; height: 40px; display: block; }
.mini-disc.on { border-color: var(--pick); }

/* bottom panel: score-track cream under the board's gold filigree */
.hud {
  grid-area: hud;
  position: relative;
  background: var(--rod), var(--parchment);
  padding: 22px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 16px);
  max-height: 52dvh; overflow: auto;
  box-shadow: 0 -8px 24px rgba(20, 16, 10, .32);
}
.row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.row.wrap { flex-wrap: wrap; margin-top: 0; }
.row.between { justify-content: space-between; flex-wrap: wrap; column-gap: 16px; row-gap: 0; }
.grow { flex: 1; }
a.btn { text-decoration: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 16px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); font-weight: 700;
}
.btn.primary { background: var(--act); color: var(--on-frame); border-color: var(--act-deep); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.btn.secondary { background: transparent; border: 1.5px solid var(--ink-2); }
.btn.danger { background: var(--danger); border-color: transparent; color: var(--on-frame); }
.btn.wide { width: 100%; margin-top: 10px; }
.btn.small { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 20px; line-height: 1; }
.btn:disabled { opacity: .4; cursor: default; }
.btn:active:not(:disabled), .tile:active { transform: scale(.97); }
.link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; background: none; border: 0; color: var(--accent-ink); padding: 0; cursor: pointer; font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(10, 77, 75, .4); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:disabled { opacity: .4; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--rule); font-size: 14px; white-space: nowrap; }
.chip.pick { border: 1px solid var(--rule-strong); min-height: 44px; padding: 0 12px 0 9px; cursor: pointer; font-size: 15px; }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1.5px rgba(30, 22, 12, .6) inset; flex: none; }
.disc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.disc-count { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 15px; color: var(--accent-ink); }
.disc-count img { width: 48px; height: 48px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.tile { min-height: 44px; border-radius: var(--radius); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 700; font-size: 15px; }
.tile.on, .seg.on { background: var(--pick); color: var(--on-frame); border-color: var(--pick-deep); }
.segs { display: flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.seg { flex: 1; min-height: 44px; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 700; font-size: 15px; }
.seg + .seg { border-left: 1px solid var(--rule-strong); }
.field { margin-bottom: 4px; }
/* Choice groups keep the same caption and chips as setup; no native fieldset frame. */
fieldset.field { border: 0; padding: 0; margin: 10px 0; min-width: 0; }
fieldset.field > legend { padding: 0; max-width: 100%; }
.field-label { min-width: 0; }
.field-label input, .field-label select, select[data-inv] {
  display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: 16px/1.4 var(--text);
  user-select: text; -webkit-user-select: text;
}
.house-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; margin-top: 8px; }
.house-head .muted { font-weight: 400; font-size: 14px; }
.houses { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--ink-2); }
.house { display: inline-flex; align-items: center; gap: 6px; }
.house b { color: var(--ink); }
.combat { display: flex; justify-content: space-around; font-size: 17px; padding: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); margin-top: 8px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.plain { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }

/* put-out lists */
.putout { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; font-size: 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; margin: 6px 0; }
.putout b { color: var(--accent-ink); font-weight: 400; font-size: 15px; font-variant-caps: small-caps; letter-spacing: .03em; }
.putout div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.gl { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* board animation */
.fx-pop { transform-box: fill-box; transform-origin: center; animation: fx-pop .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fx-pop { from { transform: scale(0); opacity: 0; } }
.site image.fx-flip { transform-box: fill-box; transform-origin: center; animation: fx-flip .6s ease-in-out; }
@keyframes fx-flip { 50% { transform: scaleX(0); } }
.fx-ghost { fill: rgba(255, 245, 220, .5); stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: fx-ghost .8s ease-out forwards; }
@keyframes fx-ghost { to { opacity: 0; transform: scale(1.8); } }
.fx .pawn { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55)); }

/* location goods */
.track-space { cursor: pointer; }
.track-space .hit { fill: transparent; }
.mil { stroke: #120f0b; stroke-width: 2.5; }
.site .good { stroke: #120f0b; stroke-width: 1.6; }
.site .more { fill: #fff; font: 700 13px var(--text); paint-order: stroke; stroke: #000; stroke-width: 3px; }
.loc-goods { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 0 4px; background: var(--paper-2); border-radius: var(--radius); font-size: 14px; }
.lg-have, .lg-add { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.lg-have .muted { padding-left: 6px; }
.lg-add { border-left: 1px solid var(--rule); padding-left: 4px; }
.cube-mini { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: var(--radius); }
.cube-mini .cube { width: 18px; height: 18px; display: block; }
.cube-mini.add { position: relative; }
.cube-mini.add::after { content: "+"; position: absolute; right: 7px; bottom: 6px; font: 700 13px var(--text); color: var(--accent-ink); }

/* guild art */
.gart { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 14px rgba(31, 24, 14, .35); }
.gart img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
.gart .tok { position: absolute; transform: translate(-50%, -50%); width: 7.4%; height: auto; aspect-ratio: 1; padding: 0; font-size: clamp(7px, 2.4cqw, 13px); }
.gart { container-type: inline-size; }
.gart .tok:not(.on) { background: rgba(255, 255, 255, .08); border: 1.5px dashed rgba(255, 245, 220, .55); }
.gart .tok.on { box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.gart .tok.take { outline: 2.5px solid #fff3c4; outline-offset: 2px; animation: take 1s ease-in-out infinite; }
@keyframes take { 50% { outline-color: #e9c25a; outline-offset: 4px; } }
.gart .tok.bead, .gart .tok.seal { width: 8.2%; }
.gart .tok.vessel { width: 7%; font-size: clamp(8px, 3cqw, 15px); }
.gart.edit .tok { cursor: pointer; }
.gart.edit button.tok:active { transform: translate(-50%, -50%) scale(.9); }
.gart .rank { position: absolute; display: block; padding: 0; transform: translate(-50%, -50%); width: 8.5%; aspect-ratio: 1; border-radius: 50%; background: var(--fill); border: 2px solid #120f0b; box-shadow: 0 2px 5px rgba(0, 0, 0, .6); }
.gart .pot { position: absolute; transform: translate(-50%, -50%); min-width: 9%; padding: 1px 6px; border-radius: 999px; background: #e9c25a; color: #241a08; font-weight: 700; font-size: clamp(9px, 3.4cqw, 16px); text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
/* The art keeps its proportions: as wide as the stage allows, or as tall, whichever is less. */
.gstage { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; container-type: size; }
.gstage .gart { height: auto; width: min(100cqw, calc(100cqh * var(--ar, .67))); }
.gextra { margin-top: 10px; }
.gx-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.gx-head b { color: var(--ink); }
.gx-head small { margin-left: auto; font-size: 13px; }
.gart.alchemist .tok { width: 6.4%; }
.gart.alchemist .tok.vessel { width: 5.8%; }
.gart .tok.add { background: rgba(20, 16, 12, .6); border: 1.5px dashed #e9dcb8; color: #f3e6c8; font-size: clamp(10px, 3.4cqw, 16px); }
.gart button.pot { border: 0; cursor: pointer; }
.gpicker { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: var(--radius); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: var(--float); z-index: 2; }
.gpicker .cube-btn { padding: 6px; }
.gpicker .cube-btn .cube { width: 22px; height: 22px; }
.bead-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #1c2b2d; background: radial-gradient(circle, #f7f1dc 0 46%, #1c2b2d 46% 50%, transparent 50%), repeating-radial-gradient(circle at 50% 130%, #f1dd45 0 6.5%, #37b9cb 6.5% 13%); color: #1c2b2d; font-weight: 700; letter-spacing: -.04em; box-shadow: 0 2px 3px rgba(0, 0, 0, .45); cursor: pointer; }
.gp-x { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2); font-size: 0; padding: 0; cursor: pointer; }
.gp-x::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--x-mark) center / contain no-repeat; mask: var(--x-mark) center / contain no-repeat; }
.gp-label { font-size: 15px; font-variant-caps: small-caps; color: var(--accent-ink); }
.gpanel .stars { flex: none; margin: 0 0 6px; font-size: 13px; justify-content: center; }

/* guild sheet: a second page slid over the board */
.gsheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 4; display: flex; flex-direction: column; overflow: hidden;
  background: var(--rod), var(--parchment); color: var(--ink);
  box-shadow: 0 -10px 28px rgba(20, 16, 10, .4); padding: 18px 8px 8px;
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); pointer-events: none;
}
.gsheet.open { transform: translateY(0); pointer-events: auto; }
.sheet-body { position: relative; flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: 8px; padding-top: 24px; }
.mguild { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.mguild h5 { align-self: flex-start; }
.mfit { flex: 1; min-height: 0; width: 100%; container-type: size; display: flex; justify-content: center; align-items: flex-start; }
.mguild .gart { box-shadow: 0 3px 10px rgba(31, 24, 14, .3); height: auto; width: min(100cqw, calc(100cqh * var(--ar, .67))); }
.mguild h5 { margin: 0 0 4px; font: 700 17px var(--display); font-variant-caps: small-caps; letter-spacing: .01em; color: var(--ink); }
/* The arrow sits on the seam between the two boards, so the boards get the width. */
.flow-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule-strong); box-shadow: 0 2px 6px rgba(20, 16, 10, .35); color: var(--accent-ink); font-size: 18px; font-weight: 700; }
.mrow { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 12px; color: var(--ink-2); }
.mrow > span { width: 50px; flex: none; overflow: hidden; text-overflow: ellipsis; }
.toks { display: flex; flex-wrap: wrap; gap: 3px; }
.mpot { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.tok { width: 15px; height: 15px; border-radius: 3px; display: inline-grid; place-items: center; border: 1px dashed var(--ink-2); font-style: normal; font-size: 9px; font-weight: 700; color: #10241a; }
.tok.on { background: var(--fill); border: 1px solid #120f0b; }
.tok.seal, .tok.bead { border-radius: 50%; }
.tok.marker { border-radius: 50%; }

.tok.seal.on { border: 0; background: none; }
.tok.vessel.on { background: #a3d5c6; width: 18px; overflow: hidden; }
.tok.vessel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sinks { position: absolute; top: 20px; right: 12px; display: flex; gap: 6px; font-size: 13px; color: var(--ink); }
.sink { padding: 2px 9px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--rule); }
.sink[data-sink="house"] { box-shadow: inset 0 0 0 1.5px var(--c); }
.fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.tok.flying { position: fixed; margin: 0; box-shadow: 0 6px 14px rgba(0, 0, 0, .55); }

/* cards */
.cardimg { display: inline-block; background: var(--c); border-radius: 7%/4.6%; line-height: 0; flex: none; box-shadow: 0 2px 5px rgba(31, 24, 14, .4); }
.cardimg img { width: 100%; height: auto; display: block; }
.cardimg.mini { width: 26px; border-radius: 3px; }
.cardimg.small { width: 46px; }
.cardimg.back { aspect-ratio: 178 / 272; width: 26px; display: inline-grid; place-items: center; color: rgba(0, 0, 0, .55); font-size: 12px; }
/* Your hand: a grid of cards at a readable size; on phones, one row you swipe. */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 92px)); gap: 8px; margin: 6px 0; }
@media (max-width: 600px) {
  .cardgrid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; margin: 6px calc(-16px - var(--safe-r)) 6px calc(-16px - var(--safe-l)); padding: 0 calc(16px + var(--safe-r)) 4px calc(16px + var(--safe-l)); scroll-padding-inline: 16px; scrollbar-width: none; }
  .cardgrid::-webkit-scrollbar { display: none; }
  .cardpick { flex: 0 0 72px; scroll-snap-align: start; }
}
.cardpick { border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--radius); }
.cardpick .cardimg { width: 100%; }
.cardpick span { display: block; font-size: 14px; color: var(--accent-ink); margin-top: 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardpick:disabled { opacity: .3; cursor: default; }
.cardpick:active:not(:disabled) { transform: scale(.95); }
.chosen { display: flex; gap: 10px; align-items: center; margin: 4px 0 8px; }
.chosen h2 { margin: 0; flex: 1; min-width: 0; }
.chosen .link { font-size: 15px; flex: none; }
.chosen .cardimg.small { width: 30px; }
.house-head .cardimg { margin-right: 4px; }
/* A house thinking (think.js): its card face down, breathing. It fades in late, so a quick
   answer never flashes it. */
.house-head.thinking { animation: think-in .2s ease-out .25s both; }
.house-head.thinking .cardimg.back { width: 46px; font-size: 18px; animation: think 1.6s ease-in-out .45s infinite; }
@keyframes think-in { from { opacity: 0; } }
@keyframes think { 50% { opacity: .45; } }
/* A long think (Hard on a phone) gets a slow bar in the house's color, from 1.5s in. */
.think-bar { height: 3px; margin: 8px 0 0; border-radius: 2px; background: var(--rule); overflow: hidden; animation: think-in .3s ease-out 1.5s both; }
.think-bar i { display: block; width: 32%; height: 100%; border-radius: 2px; background: var(--c); animation: think-slide 1.6s ease-in-out 1.5s infinite; }
@keyframes think-slide { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .house-head.thinking .cardimg.back, .think-bar i { animation: none; } .think-bar i { width: 100%; opacity: .5; } }
/* the starting player marker passing at the start of a round */
.marker-pass { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.marker-pass p { margin: 0; }
.marker-pass p .dot { vertical-align: -2px; margin-right: 5px; }
.spm-big { flex: none; height: 64px; width: auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.preview { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; margin: 6px 0; font-size: 15px; }
.preview p { margin: 4px 0 0; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip.pick.on { background: var(--pick); color: var(--on-frame); border-color: var(--pick-deep); }

/* The Guild card's choices: one block per guild, its icon and name over its buttons. The HUD
   scrolls the whole list, so nothing hides in a box of its own. */
.gopts { display: grid; margin: 4px 0 8px; }
.gorow { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.gorow:first-child { border-top: 0; padding-top: 2px; }
.gorow b { display: flex; align-items: center; gap: 7px; color: var(--accent-ink); font-weight: 400; font-size: 17px; font-variant-caps: small-caps; letter-spacing: .02em; }
.gorow b .gicon { width: 22px; height: 22px; flex: none; }
.gorow-opts { display: grid; gap: 6px; }
/* Your own push and pull, pinned on top: guild faces on the buttons. */
.gorow .btn .gicon { width: 18px; height: 18px; margin-right: 4px; vertical-align: -3px; fill: currentColor; }
.gorow.pinned b { color: var(--pick-deep); }
/* Your own push, pull or feast is filled; trades anyone can make stay paper. */
.gorow .btn.slim.fn { background: var(--pick); border-color: var(--pick-deep); color: var(--on-frame); }
.gorow .btn.slim.fn .dot { box-shadow: 0 0 0 1.5px var(--on-frame); }
.gorow .btn .ic { margin-left: 2px; }
.gorow .btn .ic .coin { width: 18px; height: 18px; }
.buy-strip { display: inline-flex; gap: 2px; margin-right: 6px; }
.buy-strip .cube { width: 12px; height: 12px; }
.gorow .chips { margin: 0; }
/* Choices that act at once (a destination, a site, a guild trade): buttons, not toggle chips. */
.btn.slim { min-height: 44px; padding: 0 12px; font-size: 15px; }
.btn.slim.fn { border: 1.5px solid var(--pick); color: var(--pick-deep); }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 6px; margin: 6px 0; }
.choices .btn { justify-content: flex-start; text-align: left; line-height: 1.2; padding-block: 6px; }
.gorow .chips .btn { flex: none; }

/* turn order */
.order { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 4px; font-size: 14px; }
.seat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 5px; border-radius: var(--radius); color: var(--ink-2); }
.seat small { letter-spacing: -1px; font-size: 11px; color: var(--ink-2); }
.seat.on { background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--ink); }
.seat.out { font-style: italic; text-decoration: line-through; text-decoration-color: rgba(57, 44, 28, .5); }
.seat.out .dot { opacity: .5; }
.seat .spm { display: inline-block; height: 22px; width: auto; margin: -3px 0 -2px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.seat.tall .spm { height: 32px; margin: -1px -2px -1px 0; }
/* a house's score disc: its color with its VP, light figures outlined for any color */
.dot.vp { width: auto; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; display: inline-grid; place-items: center; font: 700 12px/1 var(--text); font-style: normal; font-variant-numeric: lining-nums tabular-nums; color: #fff8e8; text-shadow: 0 0 2px #120f0b, 0 0 2px #120f0b, 0 1px 1px #120f0b; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 0 0 1.5px #120f0b; }
.arrow { color: var(--ink-2); }
.house-head b { color: var(--accent-ink); }
/* a house's personality, after its name */
.persona, .seat small.persona { font-size: 14px; font-weight: 400; font-style: normal; font-variant-caps: small-caps; letter-spacing: .03em; color: var(--accent-ink); }
.field label .dot { margin-right: 6px; vertical-align: -1px; }
.seat-name { display: inline-flex; flex-direction: column; line-height: 1.05; }
/* Phones, and the 360px side panel on wider screens. */
@media (max-width: 480px), (orientation: landscape) and (min-width: 640px) {
  .order.many { gap: 2px; }
  .order.many .seat { padding: 3px 4px; gap: 3px; }
  .order.many .seat:not(.on) small { font-size: 9px; letter-spacing: -1.5px; }
  .order.many .dot.vp { padding: 0 2px; font-size: 11px; letter-spacing: -.02em; }
  .order.many .seat:not(.on) .nm, .order.many .seat:not(.on) .persona { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.seat-name > span { display: inline-flex; align-items: center; gap: 5px; }
.cube { width: 13px; height: 13px; border-radius: 3px; display: inline-block; border: 1px solid #120f0b; box-shadow: inset 0 -.18em 0 rgba(0, 0, 0, .38), inset 0 .12em 0 rgba(255, 255, 255, .3); }
.cube.food { background: var(--food); } .cube.wood { background: #8a5a32; } .cube.iron { background: #4a4a4f; }
.cube.sulfur { background: #e3c247; } .cube.saltpeter { background: #efeadc; }
.draw { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 2px 12px 6px; margin-top: 8px; }
.draw-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--ink-2); padding: 2px 0; min-height: 44px; }
.draw-head b { color: var(--ink); }
.draw-head b.ok, .hud b.ok { color: var(--ok); }
.draw-head span { display: inline-flex; gap: 12px; align-items: center; }
.draw-head .link { font-size: 15px; }
.cubes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-bottom: 6px; }
.cube-btn { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 0 6px; border-radius: var(--radius); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--accent-ink); cursor: pointer; font-size: 13px; }
.cube-btn .cube { width: 22px; height: 22px; border-radius: 4px; }
.cube-btn b { position: absolute; top: -7px; right: -5px; background: var(--act); color: var(--on-frame); border-radius: 999px; min-width: 22px; height: 22px; font-size: 13px; display: grid; place-items: center; }
.cube-btn:disabled { opacity: .45; }
.supply { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; width: 100%; font-size: 15px; }
.supply .stepper { display: grid; grid-template-columns: 44px 30px 1fr 44px; gap: 6px; }
.supply .stepper b { text-align: right; font-variant-numeric: tabular-nums; }

/* menu */
.menu {
  border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--parchment); color: var(--ink);
  width: min(440px, calc(100vw - 24px)); padding: 0 16px 16px;
  box-shadow: 0 16px 48px rgba(10, 8, 4, .5);
  /* Centered inside the safe area, clear of the iPhone's status bar and home bar. */
  top: var(--safe-t); bottom: var(--safe-b); max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 24px);
}
:root { --scrim: rgba(16, 26, 24, .62); }
.menu::backdrop { background: var(--scrim); }
/* The head stays put while the menu scrolls, so Close is always in reach. */
.menu .card-head { position: sticky; top: 0; z-index: 1; align-items: center; padding: 14px 0 18px; margin-bottom: 4px; background: var(--rod-jewel) center bottom / 22px 18px no-repeat, var(--rod-end) left 0 bottom 3px / 12px 12px no-repeat, var(--rod-end) right 0 bottom 3px / 12px 12px no-repeat, var(--rod-shaft) center bottom 3px / calc(100% - 26px) 12px no-repeat, var(--parchment); }
.menu .card-head h2 { font-size: 24px; margin: 0; }
.menu .card-head .x { margin: 0 -6px 0 0; }
.menu h3.sub { margin: 18px 0 6px; font: 700 16px/1.2 var(--text); font-variant-caps: normal; letter-spacing: 0; }
.menu h3.sub:first-of-type { margin-top: 12px; }
.house-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.ranks { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ranks th { text-align: left; color: var(--accent-ink); font-weight: 400; font-size: 15px; font-variant-caps: small-caps; letter-spacing: .02em; }
.ranks td, .ranks th { padding: 5px 4px; border-bottom: 1px solid var(--rule); }
.toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.toggle input { width: 20px; height: 20px; accent-color: var(--act); }
.file { position: relative; }
.log { padding-left: 22px; margin: 0; font-size: 14px; color: var(--ink-2); display: grid; gap: 4px; }

.toast {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 60px); transform: translate(-50%, -20px);
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); padding: 10px 16px; border-radius: var(--radius);
  box-shadow: var(--float);
  opacity: 0; pointer-events: none; transition: .2s; z-index: 20; max-width: calc(100vw - 32px); font-size: 15px;
}
/* How to install, under the header until dismissed. */
.install {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 60px); transform: translateX(-50%); z-index: 15;
  display: flex; align-items: center; gap: 10px; width: min(420px, calc(100vw - 32px)); padding: 8px 8px 8px 14px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--float);
  font-size: 15px; line-height: 1.35;
}
.install[hidden] { display: none; }
.install-text { flex: 1; display: grid; gap: 2px; }
.install-text b { font: 700 16px/1.2 var(--display); }
.install-text span { color: var(--ink-2); }
.install .x { margin: 0; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border: 1.5px solid var(--danger); color: var(--danger); font-weight: 700; }

/* Landscape phones and desktop: the panel moves to the side. */
@media (orientation: landscape) and (min-width: 640px) {
  body {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "stage top" "stage hud";
  }
  .top { padding-top: calc(var(--safe-t) + 8px); }
  .brand { display: none; }
  .status { text-align: left; }
  .hud { max-height: none; box-shadow: none; border-left: 1px solid var(--frame-deep); }
  /* Toasts center over the board, clear of the side panel. */
  .toast { left: calc((100vw - 360px) / 2); max-width: calc(100vw - 360px - 32px); }
  .install { left: calc((100vw - 360px) / 2); width: min(420px, calc(100vw - 360px - 32px)); }
  /* In the side panel each guild's name sits beside its buttons, so all six fit. */
  .gorow { grid-template-columns: 108px 1fr; padding: 8px 0; }
  .gorow b { align-self: start; padding-top: 11px; font-size: 16px; }
}

/* Rosary beads, drawn like the tokens: yellow and teal arcs, value in white. */
/* The bead's stripes stay; its value sits on a pale boss in ink, readable at any size. */
.bead-face { display: inline-grid; place-items: center; width: 1em; height: 1em; border-radius: 50%; border: 1.5px solid #1c2b2d; background: radial-gradient(circle, #f7f1dc 0 46%, #1c2b2d 46% 50%, transparent 50%), repeating-radial-gradient(circle at 50% 130%, #f1dd45 0 6.5%, #37b9cb 6.5% 13%); color: #1c2b2d; font-weight: 700; letter-spacing: -.04em; box-shadow: 0 2px 3px rgba(0, 0, 0, .45); }
.bead-list { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.bead-list .bead-face { width: 22px; height: 22px; font-size: 11px; }
.bead-row { display: flex; justify-content: space-between; gap: 6px; padding: 4px 0 8px; }
.bead-pick { flex: 1; display: grid; place-items: center; min-height: 52px; padding: 0; border: 0; background: none; cursor: pointer; }
.bead-pick .bead-face { width: 48px; height: 48px; font-size: 18px; }
.bead-pick:active:not(:disabled) .bead-face { transform: scale(.92); }
.bead-pick:disabled { cursor: default; }
.bead-pick.on .bead-face { box-shadow: 0 0 0 3px var(--pick), 0 0 0 4.5px var(--pick-deep); }
.bead-pick:disabled .bead-face { opacity: .3; box-shadow: none; }
.tok.bead.on { background: radial-gradient(circle, #f7f1dc 0 46%, #1c2b2d 46% 50%, transparent 50%), repeating-radial-gradient(circle at 50% 130%, #f1dd45 0 6.5%, #37b9cb 6.5% 13%); color: #1c2b2d; text-shadow: none; border-color: #1c2b2d; box-shadow: 0 2px 3px rgba(0, 0, 0, .45); }

/* Guild buttons with the pawn face. */
.pawn-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; min-height: 0; color: var(--accent-ink); font-weight: 400; }
.pawn-tile.on { color: var(--on-frame); font-weight: 700; }
.pawn-face { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--c); border: 1.5px solid #120f0b; box-shadow: inset 0 5px 0 rgba(255, 255, 255, .16), 0 2px 3px rgba(0, 0, 0, .4); }
.pawn-face img { width: 82%; height: 82%; }
.tile.on .pawn-face { border-color: var(--on-frame); }

/* Merchant purchase: one row per good with − count +. */
.buy { display: grid; gap: 4px; margin-top: 6px; }
.buy-row { display: grid; grid-template-columns: 18px 1fr 44px 28px 44px; align-items: center; gap: 8px; padding: 2px 10px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--rule); font-size: 15px; }
.buy-row span { text-transform: capitalize; color: var(--ink-2); }
.buy-row.on span { color: var(--ink); font-weight: 700; }
.buy-row b { text-align: center; }
.buy-row .step { height: 44px; border-radius: var(--radius); border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font-size: 20px; font-weight: 700; cursor: pointer; }
.buy-row .step:disabled { opacity: .3; cursor: default; }
.tile:disabled { opacity: .35; cursor: default; }

/* Vessel tiles in buttons and lists. */
.vessel-ic { width: 28px; height: 22px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.pawn-tile .vessel-ic { width: 40px; height: 31px; margin: 0; }
.vessel-name { display: inline-flex; align-items: center; margin-right: 10px; white-space: nowrap; }

/* Keep the step's buttons in reach when the panel scrolls. */
.hud .actions { position: sticky; bottom: calc(-14px - var(--safe-b)); margin: 10px -16px calc(-14px - var(--safe-b)); padding: 10px 16px calc(14px + var(--safe-b)); background: linear-gradient(rgba(192, 184, 150, 0), var(--parchment) 12px); z-index: 1; }

/* Keyboard focus, in the jewels' teal. */
:focus-visible { outline: 2px solid var(--jewel); outline-offset: 2px; }
#map [tabindex]:focus { outline: none; }
#map .site:focus-visible .hit, #map .tiles:focus-visible .hit { fill: rgba(255, 246, 220, .16); stroke: #fff6dc; stroke-width: 4; stroke-dasharray: 8 5; }

/* Reduced motion: no looping pulses; pieces still change state. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; }
  .gart .tok.take, .mark { animation: none !important; }
}

/* Turn flow */
.undo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 10px; padding: 0 4px 0 12px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--rule); font-size: 15px; }
.undo-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-bar .link { min-height: 44px; padding: 0 12px; flex: none; }
.toast .toast-undo { margin-left: 8px; min-height: 44px; min-width: 44px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: transparent; color: var(--accent-ink); font-weight: 700; cursor: pointer; pointer-events: auto; }
.monster-ic { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
/* Invention pick: vessel tiles and a krud barrel in the − / + rows. */
.buy.invent .buy-row { grid-template-columns: 36px 1fr 44px 28px 44px; }
.buy.invent .vessel-ic { width: 36px; height: 28px; margin: 0; }
/* Your vessels on the Move card: each kind's count with − and +. */
.vessels-head { margin: 12px 0 4px; }
.your-vessels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vstep { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.vstep .vcount { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; font-variant-numeric: tabular-nums; }
.vstep .vessel-ic { margin: 0; }
.vstep .step { height: 44px; border-radius: var(--radius); border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font-size: 20px; font-weight: 700; cursor: pointer; }
.vstep .step:disabled { opacity: .3; cursor: default; }
.buy.invent .piece-ic { justify-self: center; width: 28px; height: 28px; margin: 0; }
/* Portrait tablets: the guild art fills the panel's width (up to three-quarters of the
   screen's height) and the panel scrolls, instead of shrinking the art to the gap above the HUD. */
@media (orientation: portrait) and (min-width: 600px) {
  .gpanel { overflow-y: auto; }
  .gstage { flex: none; container-type: normal; }
  .gstage .gart { height: auto; width: min(100%, calc(75dvh * 528 / 788)); }
}
/* Board pieces with depth: the side faces carry the outline too. */
.site .pip-side, .mil-side { stroke: #120f0b; stroke-width: 2.5; }
.site .good-side { stroke: #120f0b; stroke-width: 1.6; }
/* Pieces on the guild art read as wooden pieces too: a lit top edge and a shaded bottom edge. */
.gart .tok.on { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .28), 0 2px 4px rgba(0, 0, 0, .55); }
/* Tended landscapes on the map, and the landscape tiles you pick from. */
.site .landscape .ls-side { stroke: #120f0b; stroke-width: 1.6; }
.site .landscape image { filter: none; }
.site .ls-count text { fill: var(--ink); font: 700 14px var(--text); text-anchor: middle; }
.lscapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.lscape { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 6px 4px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); color: var(--accent-ink); font: 400 14px/1.15 var(--text); text-align: center; cursor: pointer; }
.lscape img { width: min(64px, 100%); aspect-ratio: 1; border-radius: 3px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.lscape.on { background: var(--pick); color: var(--on-frame); border-color: var(--pick-deep); }
.lscape:active { transform: scale(.97); }
.ls-fact { display: flex; align-items: center; gap: 8px; }
.ls-fact img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.ls-fact .stepper { margin-left: auto; }
/* A reeve on a guild, in its owner's color. */
.reeve { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.reeve::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); border: 1.5px solid #120f0b; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }

/* Expansions */
.alt-pick .cardpick:not(.on) .cardimg { opacity: .5; filter: saturate(.55); }
.cardpick.on .cardimg { outline: 3px solid var(--pick); outline-offset: 2px; }
.alt-pick .cardpick span { white-space: normal; line-height: 1.15; min-height: 2.3em; }

/* Epoch scoring and game over: each house's score on note paper, led by its marker in its seat color. */
.scores { display: grid; gap: 8px; margin: 6px 0 10px; }
@media (min-width: 560px) and (orientation: portrait) { .scores { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; } }
.score { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 12px 6px; }
.score-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.score-head .dot { align-self: center; width: 22px; height: 22px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 0 1.5px #120f0b, 0 2px 3px rgba(0, 0, 0, .35); }
.score-head h3 { font-size: 21px; }
.score-head .gain { margin-left: auto; font: 700 30px/1 var(--display); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.score-head .to { font-size: 14px; color: var(--ink-2); }
.score-head .to b { color: var(--ink); font-size: 16px; }
.score ul { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.score li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; min-height: 36px; padding: 3px 0; font-size: 15px; }
.score li + li { border-top: 1px solid var(--rule); }
.score li > b { font-variant-numeric: tabular-nums; font-size: 16px; }
.score li small { display: block; font-size: 13px; color: var(--accent-ink); line-height: 1.2; }
.score .pawn-face { width: 30px; height: 30px; }
.sl-art { display: grid; place-items: center; }
.ls-ic { width: 32px; height: 32px; border-radius: 3px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.score .sub { margin: 4px 0 2px; font-size: 13px; color: var(--accent-ink); }
.score.final { padding-bottom: 8px; }
.score.won { border: 2px solid var(--gold); padding: 7px 11px; }
.crown { font-size: 14px; font-weight: 700; color: var(--on-frame); background: var(--act); border-radius: var(--radius); padding: 1px 8px; align-self: center; }
.score .row { margin-top: 4px; font-size: 15px; }
.score-head .link { font-size: 14px; margin-left: 6px; }
.vp-in { margin-left: auto; width: 4.2ch; min-height: 44px; padding: 0 6px; border: 0; border-bottom: 2px solid var(--ink-2); background: transparent; color: var(--ink); font: 700 30px/1 var(--display); font-variant-numeric: lining-nums tabular-nums; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.vp-in::-webkit-outer-spin-button, .vp-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vp-in::placeholder { color: var(--ink-2); font-size: 22px; }
.vp-in:focus-visible { outline: none; border-bottom-color: var(--jewel); box-shadow: 0 2px 0 var(--jewel); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Art still loading: card faces and guild boards hold their size on a paper-inset ground.
   The card's printed face covers the inset once it arrives; its clear border keeps the seat color. */
.cardimg:not(.back) { background: linear-gradient(var(--paper-2) 0 0) center / 86% 90% no-repeat, var(--c); }
.cardimg img { aspect-ratio: 356 / 544; }
.gart { background-color: var(--paper-2); }
/* Menu: a house's supply opens from its row. */
.house-sum { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; padding: 0 30px 0 0; border: 0; background: none; text-align: left; cursor: pointer; font-size: 15px; position: relative; }
.house-sum::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; border: solid var(--ink-2); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.house-sum[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }

/* Then: the table's steps after an action, numbered, in reading size. */
.hud ol.steps { margin: 4px 0 10px; padding-left: 1.4em; display: grid; gap: 8px; font-size: 16px; line-height: 1.35; }
.hud ol.seat-steps { list-style: none; padding-left: 0; }
.gart .reeve { position: absolute; width: 6.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .35), transparent 45%), var(--fill); box-shadow: 0 2px 0 color-mix(in srgb, var(--fill) 58%, #000), 0 0 0 1px #2b1d10, 0 3px 4px rgba(0, 0, 0, .35); }
.seat-steps li { display: flex; align-items: flex-start; gap: 10px; }
.seat-steps .ic-svg.die { flex: none; width: 26px; height: 26px; margin-top: -2px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.seat-die { flex: none; display: block; }
.seat-die.faint { opacity: .5; }
.hud h3.seat-g { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: 16px; }
.hud h3.seat-g .gicon { width: 20px; height: 20px; }
.hud ol.steps li::marker { color: var(--accent-ink); font-weight: 700; }
/* What to tap on the board, in the panel. */
.hud .prompt { margin: 10px 0 4px; font-size: 17px; font-weight: 700; color: var(--accent-ink); }
/* Choices in the card on the map: each button with what it does under it. */
.stack.choose .hint { margin: -2px 2px 6px; }
/* Phones: the map card spans the board's width. */
.card.docked { width: calc(100% - 16px); max-height: calc(100% - 70px); }

/* loading screen: the board's sunset in a gold frame on the chocolate border, its jewel the
   feudum disc turning, and a guild roundel lighting for each sixth of the art */
.boot {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 38%, #4a3219 0%, var(--frame-deep) 72%);
  color: var(--on-frame);
  transition: opacity .45s ease, visibility .45s;
}
.boot.out { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { display: grid; justify-items: center; gap: 20px; padding: 16px; width: min(340px, 100%); opacity: 0; animation: boot-in .5s cubic-bezier(.2, .8, .2, 1) .3s forwards; }
@keyframes boot-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.boot-art { position: relative; width: 100%; margin-bottom: 30px; }
.boot-art > img { display: block; width: 100%; aspect-ratio: 630 / 413; object-fit: cover; border-radius: 10px 10px 4px 4px; border: 3px solid var(--gold); outline: 1.5px solid #120c05; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.boot-disc { position: absolute; left: 50%; bottom: -36px; width: 72px; height: 74px; margin-left: -36px; perspective: 500px; }
.boot-disc img {
  position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
  animation: boot-coin 3.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
.boot-disc img + img { animation-name: boot-coin-back; }
@keyframes boot-coin { 0%, 35% { transform: rotateY(0); } 50%, 85% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes boot-coin-back { 0%, 35% { transform: rotateY(180deg); } 50%, 85% { transform: rotateY(360deg); } 100% { transform: rotateY(540deg); } }
.boot-title {
  margin: 0; padding-bottom: 24px; font: 700 36px/1.1 var(--display); font-variant-caps: small-caps; letter-spacing: .02em; color: var(--on-frame);
  text-shadow: 0 2px 0 #120c05;
  background: var(--rod); background-position: center bottom, left 6px bottom 3px, right 6px bottom 3px, center bottom 3px;
  min-width: 240px; text-align: center;
}
.boot-pawns { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.boot-pawns li {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(184, 151, 63, .45); background: transparent;
  transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.boot-pawns img { width: 28px; height: 28px; object-fit: contain; display: block; opacity: .3; filter: grayscale(1) brightness(1.6); transition: opacity .35s ease, filter .35s ease; }
.boot-pawns li.lit { background: var(--paper); border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, .35); }
.boot-pawns li.lit img { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .boot-inner { animation: none; opacity: 1; }
  .boot-disc img { animation: none; }
  .boot-disc img + img { display: none; }
  .boot-pawns li, .boot-pawns img { transition: none; }
}

/* a push or pull drawn as goods with counts, from one guild to the next */
.goods-move { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0 10px; font-size: 17px; }
.goods-move .gm-good { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.goods-move .gm-good .cube { width: 20px; height: 20px; }
.goods-move .gm-route { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 15px; }
.goods-move .gm-route img { width: 20px; height: 20px; object-fit: contain; }
.goods-move .arrow { color: var(--accent-ink); font-weight: 700; margin: 0 2px; }

/* setup: the goods for the place you're setting out flash beside its disc */
.goods.flash { transform-box: fill-box; transform-origin: center; animation: goods-flash 1.1s ease-in-out infinite; }
@keyframes goods-flash { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.25); filter: drop-shadow(0 0 6px #fff6c8); } }
@media (prefers-reduced-motion: reduce) { .goods.flash { animation: none; filter: drop-shadow(0 0 5px #fff6c8); } }
.pawn-head { display: flex; align-items: center; gap: 8px; }
.pawn-head img { width: 28px; height: 28px; object-fit: contain; }

/* guild pieces on the board's guild panels */
.guild-pieces { pointer-events: none; }
.gp-n { font: 700 9px var(--text); fill: #10241a; text-anchor: middle; }
.bead-n { font-family: var(--text); font-weight: 700; fill: #1c2b2d; text-anchor: middle; letter-spacing: -.04em; }
.gp.flash { transform-box: fill-box; transform-origin: center; animation: goods-flash 1.1s ease-in-out infinite; }
/* A guild die whose status just changed rolls to its new face. */
.gp.flash .gdie { transform-box: fill-box; transform-origin: center; animation: die-roll .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes die-roll { from { rotate: -240deg; scale: .5; } 70% { scale: 1.15; } to { rotate: 0deg; scale: 1; } }
.gp-ring { fill: none; stroke: #fff3c4; stroke-width: 2.5; animation: gp-ring 1s ease-in-out infinite; }
@keyframes gp-ring { 50% { stroke: #e9c25a; stroke-width: 4; } }
@media (prefers-reduced-motion: reduce) { .gp.flash { animation: none; filter: drop-shadow(0 0 4px #fff6c8); } .gp-ring { animation: none; } }

/* pieces as inline icons */
.ic { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ic .cnt { font-weight: 700; font-variant-numeric: tabular-nums; }
.ic .cube { width: 18px; height: 18px; }
.ic .coin { width: 20px; height: 20px; object-fit: contain; display: block; }
.ic .tree-ic { width: 16px; height: 22px; display: block; overflow: visible; }
.hexm-ic { width: 20px; height: 20px; display: block; overflow: visible; }
.pawn-ic { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.pawn-cube { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--c); border: 1.5px solid #120f0b; }
.put { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 10px; font-size: 16px; }

/* a house's proposed piece blinks where it goes; a piece it moves or takes blinks too */
.ghost, .blink { animation: ghost 1s ease-in-out infinite; }
@keyframes ghost { 50% { opacity: .35; filter: drop-shadow(0 0 6px #fff3c4); } }
@media (prefers-reduced-motion: reduce) { .ghost, .blink { animation: none; filter: drop-shadow(0 0 5px #fff3c4); } }
/* VP as the game's own laurel with its number, a bead as the token's arcs */
.vp { position: relative; display: inline-block; width: 26px; height: 24px; vertical-align: -6px; }
.vp .ic-svg { width: 100%; height: 100%; }
.vp b { position: absolute; left: 0; right: 0; top: -1px; text-align: center; font: 700 13px/1 var(--display); color: #e8b92d; -webkit-text-stroke: 2.5px #4a2f05; paint-order: stroke fill; }
.bead-ic { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #1c2b2d; background: radial-gradient(circle, #f7f1dc 0 46%, #1c2b2d 46% 50%, transparent 50%), repeating-radial-gradient(circle at 50% 130%, #f1dd45 0 6.5%, #37b9cb 6.5% 13%); vertical-align: -3px; }
p .ic, li .ic, .hint .ic, b .ic { vertical-align: -3px; }
p .pawn-ic, li .pawn-ic, h2 .pawn-ic, .hint .pawn-ic, .btn .pawn-ic { width: 18px; height: 18px; margin-right: 2px; vertical-align: -3px; }
p .dot, li .dot, h2 .dot { margin-right: 3px; }

/* setup: the guild's own board, large, with what goes on it glowing */
.gart .tok.put { outline: 2.5px solid #fff3c4; outline-offset: 1px; animation: take 1.1s ease-in-out infinite; }
.sheet-body.setup { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .gart .tok.put { animation: none; } }
.ls-ic { width: 20px; height: 20px; border-radius: 3px; vertical-align: -4px; margin-right: 3px; }

/* the choice bar: what you picked on the board, at its foot, with Do it */
.choice {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6; margin: 0 auto; max-width: 520px;
  max-height: calc(100% - 70px); overflow: auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: var(--float); padding: 10px 12px 12px;
}
.choice .preview { border: 0; padding: 0; margin: 0 0 6px; background: none; }
.choice .preview > b { font: 700 19px/1.15 var(--display); font-variant-caps: small-caps; display: block; margin-bottom: 2px; }
.choice .preview p { margin: 2px 0 6px; }
.choice .row.actions { position: static; margin: 8px 0 0; padding: 0; background: none; }
.choice .stack.choose .hint { margin: 2px 0 8px; }

/* setup pieces: player discs, house piles, the final check */
.pdisc { display: inline-block; width: 20px; height: 14px; border-radius: 50%; background: var(--c); border: 1.5px solid #120f0b; box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.pile { margin: 4px 0 8px; }
.pile > b { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-variant-caps: small-caps; }
.pile .put { margin: 4px 0; }
.put .pawn-cube { width: 26px; height: 26px; }
.put .pawn-cube .pawn-ic { width: 18px; height: 18px; }
.big-vessels .vessel-ic { width: 40px; height: 32px; }
.bead-row.picked { margin-bottom: 8px; }
.chip.pick.seat { gap: 6px; }
.chip.pick.num { min-width: 48px; justify-content: center; padding: 0 12px; font-variant-numeric: tabular-nums; }
svg.checking .gp, svg.checking .site .pawn, svg.checking .goods, svg.checking .hexm { animation: check-glow 1.4s ease-in-out 2; }
@keyframes check-glow { 50% { filter: drop-shadow(0 0 6px #fff3c4) brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { svg.checking .gp, svg.checking .site .pawn, svg.checking .goods, svg.checking .hexm { animation: none; } }

/* the game's small icons, drawn as vectors (icons.js) */
.ic-svg { display: block; width: 20px; height: 21px; overflow: visible; }
.tok.marker.on, .tok.seal.on, .gart .rank { background: none !important; border: 0 !important; box-shadow: none !important; }
.tok .ic-svg, .gart .rank .ic-svg { width: 100%; height: 100%; filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .45)); }

/* the Guilds view over the board: tabs float like the region chips; tapping a panel's pieces fixes them */
.gtabs .gtab { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); box-shadow: 0 2px 6px rgba(20, 16, 10, .35); color: var(--ink); }
.gtabs .gtab.on { border: 2px solid var(--pick); box-shadow: inset 0 -4px 0 var(--pick), 0 2px 6px rgba(20, 16, 10, .35); font-weight: 700; }
.gpick-float { position: absolute; left: 8px; right: 8px; top: 72px; max-width: 420px; margin: 0 auto; }
.gpick-float .gpicker { position: static; transform: none; }
.guild-pieces.edit { pointer-events: auto; }
.guild-pieces.edit [data-act] { cursor: pointer; }
.gp-hit { fill: transparent; }
.gp-empty { fill: rgba(255, 255, 255, .12); stroke: #fff3c4; stroke-width: 1.2; stroke-dasharray: 2.5 2; }
.gp-add { font: 700 12px var(--text); fill: #fff3c4; text-anchor: middle; }
/* guild dice: on a seat's marker, or beside the track while waiting on a seat */
.gdie.off { opacity: .88; }
.gdie.faint { opacity: .62; filter: saturate(.45); }
.gart .rank .gdie { position: absolute; width: 62%; aspect-ratio: 1; right: -38%; top: -38%; }
.gart .rank.die .gdie { right: auto; top: auto; inset: 0; width: 72%; margin: auto; opacity: .88; }
.gart .rank.die.wait .gdie { inset: auto; right: -20%; top: -20%; }
.gart .rank.die.faint .gdie { opacity: .62; filter: saturate(.45); }
.gart .rank .gwait { position: absolute; inset: 8%; border-radius: 50%; border: 1.5px dashed #fff3c4; background: rgba(255, 255, 255, .12); }
/* the beads you've drawn, in slots that hold their place */
.bead-row.picked { justify-content: flex-start; gap: 8px; }
.bead-slot { width: 44px; height: 44px; border-radius: 50%; border: 1.5px dashed var(--rule-strong); box-sizing: border-box; }
.bead-fly { position: fixed; z-index: 60; pointer-events: none; display: grid; place-items: center; font-size: 22px; transform-origin: center; }
.bead-fly .bead-face { width: 100%; height: 100%; font-size: 18px; }

/* the center button: levels the board and brings the map back, from any zoom or turn */
.recenter {
  position: absolute; right: 10px; bottom: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: 700 15px var(--text); cursor: pointer; box-shadow: 0 2px 6px rgba(20, 16, 10, .35);
}
.recenter svg { width: 20px; height: 20px; color: var(--accent-ink); }
.recenter[hidden] { display: none; }
.score-discs .lap { font: 700 7px var(--text); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #120f0b; stroke-width: 2px; }

/* guild status: the Status chip on the board opens a table of every guild's dice and seats */
.standing-btn { right: auto; left: 10px; }
.standing-btn.on { background: var(--frame); color: var(--on-frame); border-color: var(--gold); }
.standing-btn.on svg { color: var(--gold); }
.standing {
  position: fixed; z-index: 30; left: calc(var(--safe-l) + 10px); top: calc(var(--safe-t) + 66px);
  width: min(400px, calc(100vw - 20px)); max-height: calc(100dvh - var(--safe-t) - 82px); overflow: auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--gold); border-radius: var(--radius);
  box-shadow: var(--float); padding: 4px 8px 6px;
  animation: standing-in .14s ease-out;
}
@keyframes standing-in { from { opacity: 0; transform: translateY(-4px); } }
.standing:focus { outline: none; }
.standing:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .standing { animation: none; } }
.standing-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.standing-t th, .standing-t td { padding: 4px 2px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.standing-t thead th { font: 400 14px var(--text); color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.standing-t thead th:first-child { width: 31%; }
.standing-t thead .dot { width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; }
.standing-t tbody th { text-align: left; font: 700 14px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.standing-t tbody th .gicon { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; }
.standing-t tbody td { height: 46px; }
.standing-t .sdie { display: block; width: 28px; height: 28px; margin: 0 auto; }
.standing-t .sdie .ic-svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.standing-t small { display: block; font-size: 12px; line-height: 1.15; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.standing-t td.st-seat small { color: var(--ink); font-weight: 700; }
.standing-t td.st-off .sdie { opacity: .88; }
.standing-t td.st-ghost .sdie { opacity: .62; filter: saturate(.45); }
.standing-t tfoot th { text-align: left; font: 400 13px var(--text); color: var(--ink-2); white-space: nowrap; }
.standing-t tfoot td, .standing-t tfoot th { border-bottom: 0; padding-top: 6px; }
.standing-t tfoot tr + tr td, .standing-t tfoot tr + tr th { padding-top: 2px; }
.standing-t.many thead th:first-child { width: 12%; }
.standing-t.many tbody th span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.standing-t.many tbody th .gicon { margin-right: 0; }
.standing-t.many small { font-size: 11px; white-space: normal; hyphens: manual; overflow-wrap: anywhere; }
.standing-t.many tfoot td { font-size: 13px; }
.standing-t.many tfoot .tf-label th { padding-top: 8px; }
.standing-t.many tfoot .tf-label + tr td { padding-top: 0; }

/* a guild payment, coin by coin: who pays, then each taker with their coins */
/* the houses' plays, back to back: each ticked off once it's done on the table */
.hud ol.batch { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
.bitem { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: start; padding: 6px 8px 8px 4px; border-radius: var(--radius); cursor: pointer; }
.bitem.on { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.bitem .house-head { margin-top: 0; font-size: 15px; }
.bitem h3 { font-size: 17px; margin: 4px 0 2px; }
.bitem p { margin: 2px 0 0; }
.bitem .steps { margin: 6px 0 0; font-size: 15px; }
.bitem.done .bbody { opacity: .5; }
.bitem.done h3 { text-decoration: line-through; text-decoration-color: rgba(57, 44, 28, .5); }
.tick { width: 28px; height: 28px; margin: 2px 0 0 2px; border-radius: 50%; border: 2px solid var(--ink-2); background: transparent; padding: 0; cursor: pointer; }
.tick::after { content: ""; display: block; width: 7px; height: 13px; margin: 3px auto 0; border: solid transparent; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.tick[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); }
.tick[aria-pressed="true"]::after { border-color: #fff8e8; }
.tick:focus-visible { outline: 2px solid var(--jewel); outline-offset: 2px; }
.money p { margin: 0 0 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.money .gicon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; }
.money ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.money li { display: grid; grid-template-columns: minmax(64px, auto) 18px 1fr; align-items: center; gap: 6px; }
.money .coins { display: inline-flex; flex-wrap: wrap; gap: 1px; }
.money .coins .ic { margin: 0; }
.money .to { color: var(--ink-2); text-align: center; }
.money .taker { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.money .taker small { color: var(--ink-2); font-size: 13px; }
.menu .version { align-self: center; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Region symbols from the icon sheet, filled with the text color. */
.rg-ic { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -.32em; margin-right: .15em; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.where { white-space: nowrap; }
/* Round-end region tiles drawn like the board's: the epoch color, the region's symbol, the numeral. */
.rtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; color: #f6ecd2; border-color: #1a120c; background: #6b5a4a; font: 700 18px var(--display); }
.rtile .rg-ic { width: 28px; height: 28px; margin: 0; }
.rtile.e1 { background: #b8322c; } .rtile.e2 { background: #8e3449; } .rtile.e3 { background: #cf3d55; } .rtile.e4 { background: #a5386b; }
.disc-ic { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 3px; }
.spm-ic { height: 20px; width: auto; vertical-align: -5px; margin-right: 3px; }
.reeve-ic { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 3px; border: 1.5px solid rgba(20, 14, 8, .8); background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .35), transparent 45%), var(--c); }
.piece-ic { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 3px; }
.piece-ic.castle-ic { width: auto; height: 20px; filter: drop-shadow(0 0 .6px #1c2b2d) drop-shadow(0 0 .6px #1c2b2d); }
.piece-ic.chicken-ic { width: 22px; height: 22px; }

/* The table camera: the real board in the phone's camera, the app's pieces warped over it. */
.tablecam { position: fixed; inset: 0; z-index: 90; background: #000; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.tablecam.placing { cursor: crosshair; }
.tc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-warp { position: absolute; left: 0; top: 0; width: 1900px; height: 750px; transform-origin: 0 0; pointer-events: none; }
.tc-warp svg { display: block; width: 1900px; height: 750px; }
.tc-warp .board-art, .tc-warp .guild-panels { display: none; }
.tc-warp.art .board-art, .tc-warp.art .guild-panels { display: inline; opacity: .45; }
.tc-quad { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-quad polygon, .tc-quad polyline { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 4; }
.tc-pt circle { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.tc-pt circle.tc-hit { fill: transparent; stroke: none; }
.tc-pt path { stroke: var(--on-frame); stroke-width: 1.5; }
.tc-pt.handle { cursor: grab; }
.tc-pt.handle circle:not(.tc-hit) { fill: rgba(39, 26, 12, .35); }
.tc-bar {
  position: absolute; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: calc(var(--safe-t) + 6px) calc(var(--safe-r) + 8px) 6px calc(var(--safe-l) + 12px);
  background: rgba(39, 26, 12, .82); color: var(--on-frame);
}
.tc-bar h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; color: inherit; font: 700 21px/1.15 var(--display); font-variant-caps: small-caps; letter-spacing: .01em; }
.tc-btn { flex: none; min-height: 44px; padding: 0 12px; border-radius: var(--radius); border: 1px solid rgba(243, 239, 220, .4); background: transparent; color: var(--on-frame); font-weight: 700; cursor: pointer; }
.tc-device { max-width: 14em; min-width: 0; flex: 0 1 auto; text-overflow: ellipsis; font: inherit; font-weight: 700; appearance: none; padding-right: 26px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f3efdc' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center / 11px 8px; }
/* On a phone the camera picker takes its own row under the buttons. */
@media (max-width: 520px) { .tc-device { order: 1; flex: 1 1 100%; max-width: none; } }
.tc-device option { color: #1f180e; background: #f3efdc; }
.tc-btn[aria-pressed="true"] { background: var(--on-frame); color: var(--frame-deep); border-color: var(--on-frame); }
.tablecam :focus-visible { outline: 2px solid var(--on-frame); outline-offset: 2px; }
.tc-prompt {
  position: absolute; left: 50%; bottom: calc(var(--safe-b) + 14px); transform: translateX(-50%);
  width: min(440px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: var(--float);
}
.tc-prompt p { margin: 0; }
.tc-thumb { position: relative; flex: none; width: 120px; line-height: 0; }
.tc-thumb img { width: 100%; border-radius: 2px; }
.tc-thumb i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--frame-deep); background: var(--paper-2); }
.tc-thumb i.done { background: var(--ok); }
.tc-thumb i.now { background: var(--act); box-shadow: 0 0 0 3px rgba(156, 48, 47, .35); }

/* Netlify's hosting badge, added to every page on the free plan, stays out of the game. */
#nl-badge-frame, #nl-hud-frame { display: none !important; }

/* An instruction's steps, one sentence to a bullet. */
.ins-steps { margin: 4px 0 0; padding-left: 1.2em; display: grid; gap: 3px; color: var(--ink-2); line-height: 1.35; }
.ins-steps li::marker { color: var(--accent-ink); }
.choice .ins-steps { margin: 2px 0 6px; }
.ins-steps ul { margin: 2px 0 0; padding-left: 1.1em; list-style: circle; }

/* Sulfur that just went into a house's wine barrel lands with a pulse. */
.barrel-new { animation: barrel-in .9s ease-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes barrel-in { 0% { transform: translateY(-14px) scale(1.4); opacity: 0; } 60% { transform: none; opacity: 1; filter: drop-shadow(0 0 6px #fff3c4); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .barrel-new { animation: none; filter: drop-shadow(0 0 5px #fff3c4); } }

/* Supply is another parchment page; confirmations reuse the menu's frame and header. */
.player-supply { position: absolute; inset: 0; z-index: 8; overflow: auto; background: var(--rod), var(--parchment); padding: 28px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); }
#supplyContents, .supply-owners { max-width: 900px; margin-inline: auto; }
.player-supply h3 { margin: 20px 0 8px; }
.supply-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 8px; margin: 12px 0; }
.supply-facts .rank { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.supply-allocations .rank { display: grid; justify-content: stretch; }
.supply-facts dt { font-size: 15px; }
.supply-facts dd { margin: 0; color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; }
.supply-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 4px 16px; }
.supply-item { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.supply-item .field-label { flex: 1 1 150px; }
.transaction-shade { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: grid; place-items: center; padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); }
.transaction-panel { overflow: auto; max-width: 100%; }
.transaction-panel .btn, .transaction-panel .chip, .disc-decision .chip { white-space: normal; padding-block: 6px; }
.transaction-panel .actions { justify-content: flex-end; }
.transaction-panel .pawn-ic { width: 22px; height: 22px; vertical-align: middle; }
@media (max-width: 600px) { .top .views { gap: 0; } }

/* Supply uses the same pieces as the board, with readable names for assistive tech. */
.resource-art {display:inline-flex;align-items:center;gap:7px;vertical-align:middle;}
.resource-picture {display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:30px;}
.resource-picture img,.resource-picture svg {width:30px;height:30px;object-fit:contain;}
.resource-picture .cube {width:22px;height:22px;}
.resource-picture .player-disc {display:block;width:23px;height:23px;border-radius:50%;background:var(--piece-color);border:1px solid var(--ink);box-shadow:inset 0 -3px #0003;}
.supply-facts dt .resource-picture {height:36px;}
.supply-facts dt .resource-picture img,.supply-facts dt .resource-picture svg {width:36px;height:36px;}
.supply-facts dd {font-variant-numeric:tabular-nums;}
.held-bead { display: inline-flex; padding: 4px; vertical-align: middle; }
.held-bead .bead-face { width: 36px; height: 36px; font-size: 15px; }
.held-tile {display:inline-flex;gap:8px;align-items:center;vertical-align:middle;}
.tile-face img {width:62px;height:62px;object-fit:contain;}
.held-tile small {display:flex;align-items:center;gap:4px;font-size:.85em;}
.tile-region img {width:23px;height:23px;object-fit:contain;}
#supplyView ul {list-style:none;padding:0;}
#supplyView li {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:7px 0;}
.transaction-panel li {display:flex;align-items:center;gap:5px;}

.monster-links {pointer-events:none;fill:none;stroke-linecap:round;}
.monster-link-halo {stroke:#f5eedc;stroke-width:6;}
.monster-link {stroke:#2b1d10;stroke-width:2.5;}

.supply-owners { margin-block: 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.supply-house-head h2 {display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.supply-house-head p {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:0;}
.house-loyalty img {width:30px;height:30px;object-fit:contain;}
.house-supply-counts {grid-template-columns:repeat(auto-fit,minmax(105px,1fr));}

.supply-holdings {display:flex;flex-wrap:wrap;gap:20px 40px;}
.supply-holdings h3 {margin-top:8px;}

/* Keep the pawn visible above its nourishment choices. */
.nourishment-review { place-items: end center; background: transparent; }
@media (orientation: landscape) and (min-width: 640px) { .nourishment-review { place-items: end end; } }
/* The die uses the six printed region faces; animation never generates game outcomes. */
.progress-roll { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.progress-roll p { margin: 4px 0 0; }
.progress-die { position: relative; display: grid; place-items: center; flex: none; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); box-shadow: var(--float); }
.progress-die img { width: 44px; height: 44px; object-fit: contain; }
.die-tumble { display: none; }
.rolling .progress-die { animation: die-roll .9s ease-out; }
.rolling .die-result { animation: die-reveal .9s step-end; }
.rolling .die-tumble { display: grid; position: absolute; top: 10px; animation: die-faces .9s steps(6,end) forwards; }
@keyframes die-roll { 0% { transform: rotate(-18deg) scale(.85); } 25% { transform: rotate(16deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(8deg); } 100% { transform: none; } }
@keyframes die-faces { 0% { transform: translateY(0); visibility: visible; } 99.9% { visibility: visible; } 100% { transform: translateY(-264px); visibility: hidden; } }
@keyframes die-reveal { 0% { visibility: hidden; } 100% { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .rolling .progress-die, .rolling .die-result { animation: none; } .rolling .die-tumble { display: none; } }

/* Your remaining selected hand fits in one row; card selection still scrolls. */
.cardgrid.hand { display: grid; grid-template-columns: repeat(var(--hand-size), minmax(0, 92px)); gap: 6px; overflow: visible; margin: 8px 0; padding: 3px; }
.cardgrid.hand .cardpick span { font-size: 13px; }
.cardpick[aria-disabled="true"] { opacity: .3; cursor: default; }
[data-card-preview] { -webkit-touch-callout: none; }
[data-card-preview] img { -webkit-user-drag: none; }
.card-preview { width:min(420px, calc(100vw - 24px), calc((100dvh - var(--safe-t) - var(--safe-b) - 32px) * 356 / 544)); padding:0; border:0; background:none; box-shadow:none; overflow:visible; }
.card-preview .card-head {position:absolute;top:8px;right:8px;padding:0;margin:0;background:none;}
.card-preview .card-head .x {margin:0;background:var(--frame);color:var(--on-frame);box-shadow:0 2px 8px rgba(0,0,0,.35);}
.card-preview-art {display:flex;justify-content:center;padding:0;}
.card-preview-art .cardimg {width:100%;}
.round-history { border-top: 1px solid var(--rule); margin-top: 12px; padding: 12px 2px 4px; }
.played-seat h4 { margin: 10px 0 6px; }
.played-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.played-cards .cardpick { width: 58px; }
.played-cards .cardpick span { font-size: 12px; }

/* Hover is a passive preview: it never captures a click or keyboard focus. */
.hover-preview { position: fixed; z-index: 80; inset: auto; margin: 0; width:min(360px, calc(100vw - 24px), calc((100dvh - var(--safe-t) - var(--safe-b) - 32px) * 356 / 544)); padding:0; pointer-events: none; }
.hover-preview .card-head {display:none;}
.hover-preview .card-head h2 { font-size: 21px; }

/* Keep a revealed improvement tile visible until acknowledged. */
.received-tile {padding:16px 0;}
.received-tile .held-tile {gap:16px;font-weight:700;font-size:1.2em;}
.received-tile .tile-face img {width:112px;height:112px;}

/* A compact personal supply on larger boards. Open the full Supply tab to make choices. */
.quick-supply {display:none;position:absolute;z-index:4;bottom:calc(var(--safe-b) + 12px);left:12px;right:12px;max-width:780px;margin-inline:auto;}
.quick-supply button {display:flex;align-items:center;gap:12px;min-height:48px;width:100%;padding:8px 12px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--paper);box-shadow:var(--float);text-align:left;cursor:pointer;}
.quick-supply-label {font-family:var(--display);font-weight:700;font-variant-caps:small-caps;flex:none;}
.quick-supply-items {display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
.quick-supply-group {display:inline-flex;flex-wrap:wrap;align-items:center;gap:inherit;}
.quick-supply-item {display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.quick-supply-item .resource-picture {width:24px;height:24px;}
.quick-supply-item img,.quick-supply-item svg {width:23px;height:23px;object-fit:contain;}
@media(min-width:768px) {.quick-supply {display:block;}}
@media(min-width:768px) and (max-width:1050px) {.quick-supply button {gap:8px;}.quick-supply-label {font-size:14px;}.quick-supply-items {gap:4px 8px;}}

/* Movement choices reuse the existing chip controls and board piece palette. */
.move-travel { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 8px; }
.move-travel .chip { min-height:44px; display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.move-travel small { flex-basis:100%; font-weight:normal; font-size:.75em; }
.tok.vessel.on { background:transparent; overflow:visible; box-shadow:none; }
.tok.vessel svg { width:100%; height:100%; display:block; overflow:visible; }