/* Touch UI of the game: one landscape screen, no scrolling. Atmosphere colours come from the world palette as --p-*, kinds, pawns and states from src/colors.js (src/play/visuals.js). */
:root{--p-board:#2b4a4d;--p-water:#3a6266;--p-land:#e5e0cc;--p-paper:#fffdf5;--p-ink:#243c3d;--p-accent:#245e62;--p-task:#e8c46a;--p-item:#2e8a86;--p-lead:#5560b8;--p-hazard:#7a1f3a;--p-urgent:#243c3d;
  --gap:8px;--board-gap:clamp(26px,3.4vw,42px);--top:60px;--rail:clamp(232px,22vw,282px);--radius:14px;--coin:#e0a92a;--coin-ink:#7a5410;--wood:#5b3d21;
  --red:#c0392b;--blue:#2e6da4;--yellow:#b7950b;--green:#2e8b57;--purple:#7d3c98;
  --cap-drive:#ad3f37;--cap-repair:#316a98;--cap-reveal:#7f6306;--cap-restore:#36714d;--cap-extra:#775482}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--p-board);color:var(--p-ink);font:15px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;touch-action:manipulation;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none;vertical-align:middle;display:inline-block}
/* Generated emblems (art/<world>/, docs/art-direction.md): monochrome masks filled with the current colour, so one file serves every palette. */
.ic.art{background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
/* Textures are subtle greyscale tiles multiplied over the palette colour; without artwork the variables are unset and only the colour shows. */
.art #board,.art .place,.art .band,.art .swatch,.art .tile,.art .mat,.art #sheet,.art .bigcard{background-blend-mode:multiply;background-size:var(--t-size,256px 256px)}
.art .place{background-image:var(--t-place,none)}
/* Terrain textures of the routes; a world without them borrows the place tile for land and the board tile for a lane. */
.art .band.route,.art .swatch.route{background-image:var(--t-terrain-route,var(--t-place,none))}
.art .band.trail,.art .swatch.trail{background-image:var(--t-terrain-trail,var(--t-place,none))}
.art .band.lane,.art .swatch.lane{background-image:var(--t-terrain-lane,var(--t-board,none))}
.setup-head .cover{display:block;align-self:center}.setup-head .cover .ic{width:44px;height:44px;color:var(--p-accent)}.art .tile,.art .mat,.art #sheet,.art .bigcard{background-image:var(--t-paper,none)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[data-source]{touch-action:none}
.ghost{position:fixed;z-index:50;pointer-events:none;opacity:.92;margin:0;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))}
#app{height:100dvh;display:grid;grid-template-rows:var(--top) minmax(0,1fr);grid-template-columns:minmax(0,1fr) var(--rail);gap:var(--gap);padding:6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left))}
/* Top bar */
#topbar{grid-column:1/3;display:flex;align-items:center;gap:10px;padding:0 6px;color:#fff;min-width:0}
.ib{width:44px;height:44px;flex:none;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;display:inline-grid;place-items:center}
.ib:disabled{opacity:.35;cursor:default}
.ib .ic{width:24px;height:24px}
.crumbs{flex:0 1 auto;min-width:0;max-width:112px;font-size:10px;line-height:1.15;opacity:.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.days{display:flex;align-items:center;gap:8px;min-width:0}
.days-label{display:inline-flex;align-items:center;gap:4px;font-weight:700;white-space:nowrap}
.days-label .ic{color:#f1c40f}
.track{display:flex;gap:3px}
.day{width:24px;height:26px;border-radius:6px;display:inline-grid;place-items:center;background:rgba(255,255,255,.14);font-size:12px;font-weight:600}
.day.past{opacity:.35}
.day.now{background:#f1c40f;color:#222;transform:scale(1.18);box-shadow:0 2px 0 rgba(0,0,0,.4)}
.end-day{height:42px;border:0;border-radius:11px;background:var(--p-accent);color:#fff;font-weight:700;padding:0 12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.end-day:disabled{opacity:.4}
.coins-tray{display:flex;align-items:center;gap:8px;padding:0 10px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);min-width:0}
.coins-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.85;white-space:nowrap}
.coins{display:flex;gap:2px;flex-wrap:nowrap}
.coin{width:18px;height:18px;color:var(--coin)}
.coin.small{width:15px;height:15px}.coin.tiny{width:12px;height:12px}
.coin.spent{color:#8b8b8b;opacity:.35}
.coin.reserved{color:#fff;animation:blink .9s ease-in-out infinite alternate}
@keyframes blink{from{opacity:1}to{opacity:.45}}
.goal{height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;padding:0 12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pt{width:20px;height:20px;color:#f1c40f}
.pt-text{color:#f1c40f;font-weight:700}
.finish,.finish-here{height:44px;border:0;border-radius:12px;background:#f1c40f;color:#222;font-weight:800;padding:0 14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{from{box-shadow:0 0 0 0 rgba(241,196,15,.4)}to{box-shadow:0 0 0 8px rgba(241,196,15,0)}}
.spacer{flex:1}
/* Board */
#board{grid-row:2;grid-column:1;position:relative;background:var(--p-water);border-radius:var(--radius);padding:10px;min-height:0;min-width:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px);background-size:22px 22px}
.art #board{background-image:var(--t-board,none)}
#board.with-legend{--legend:24px;padding-bottom:calc(10px + var(--legend))}
/* Terrain: the board is the wild where no route runs; every route is a band of terrain filling the gap between two cards,
   measured from the cards (src/play/terrain.js). Bands lie under the cards, so their ends vanish beneath them. */
#board .terrain{position:absolute;inset:0;z-index:0;pointer-events:none}
.band,.swatch{position:absolute;transform-origin:center;border-radius:999px;--band:var(--p-route);background-color:var(--band);background-size:var(--t-size,256px 256px)}
.band.trail,.swatch.trail{--band:var(--p-trail)}
.band.lane,.swatch.lane{--band:var(--p-lane)}
/* Soft join: a halo in the band's own colour feathers its edge into the board (a browser without color-mix draws a crisp edge). */
.band{box-shadow:0 0 12px 5px color-mix(in srgb,var(--band) 55%,transparent)}
/* Between neighbours in a row or column the band fills the whole gap edge to edge; askew it is a narrower rounded ribbon. */
.band.straight{border-radius:0}.band.diagonal{border-radius:999px}
/* Land that continues a card keeps the card's crisp edge; only water lanes and ribbons askew get the halo. */
.band.straight.route,.band.straight.trail{box-shadow:none}
/* The mechanical cue over any texture and colour: a route has faint cobbles, a trail a dashed line along it, a lane two side lines. */
.band::before,.swatch::before{content:'';position:absolute;inset:0;border-radius:inherit}
.band.route::before,.swatch.route::before{background-image:radial-gradient(rgba(0,0,0,.11) 0 2.5px,transparent 3px),radial-gradient(rgba(0,0,0,.11) 0 2.5px,transparent 3px);background-size:14px 14px;background-position:0 0,7px 7px}
.band.trail::before,.swatch.trail::before{background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.38) 0 12px,transparent 12px 24px);background-size:100% 6px;background-repeat:repeat-x;background-position:center}
.band.lane::before,.swatch.lane::before{background-image:linear-gradient(transparent 0 28%,rgba(255,255,255,.4) 28% 34%,transparent 34% 66%,rgba(255,255,255,.4) 66% 72%,transparent 72%)}
.legend{position:absolute;left:12px;right:12px;bottom:6px;display:flex;align-items:center;gap:14px;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;color:#fff}
.legend span{display:inline-flex;align-items:center;gap:4px}
.swatch{position:relative;display:inline-block;width:28px;height:12px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.swatch.trail::before{background-size:100% 3px;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 5px,transparent 5px 10px)}
.place .no-landing{position:absolute;top:2px;right:4px;font-size:14px;line-height:1;color:#ad3f37}
#board .grid{position:relative;display:grid;gap:var(--board-gap);height:100%}
@media (max-height:760px){:root{--board-gap:clamp(22px,3vw,34px)}}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.rows-1{grid-template-rows:minmax(0,1fr)}.grid.rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.grid.rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}
.place[data-r="1"]{grid-row:1}.place[data-r="2"]{grid-row:2}.place[data-r="3"]{grid-row:3}
.place[data-c="1"]{grid-column:1}.place[data-c="2"]{grid-column:2}.place[data-c="3"]{grid-column:3}
.place{position:relative;z-index:1;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:4px;background:var(--p-land);padding:5px 8px 6px;border:0;border-radius:0;min-height:0;min-width:0;overflow:hidden;transition:box-shadow .15s,opacity .15s}
/* The base and the destination are told by a coloured rule under the header, not by an edge: a card has no edge, its land simply ends. */
.place.base .place-head{box-shadow:inset 0 -2px 0 #6b8f7a}.place.dest .place-head{box-shadow:inset 0 -2px 0 var(--coin)}
.place.target{box-shadow:0 0 0 4px rgba(255,255,255,.55),0 0 26px rgba(255,255,255,.7);cursor:pointer}
body.armed .place:not(.target){opacity:.8}
.place-head{display:flex;align-items:center;gap:8px;min-height:72px}
.place-pic{color:var(--p-accent);--frame:72px}
.place h2{font-size:clamp(13px,1.35vw,17px);font-weight:700;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.place-kind{display:inline-flex;align-items:center;gap:3px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:8px;background:rgba(0,0,0,.08)}
.place.dest .place-kind{background:#f1c40f;color:#222;font-weight:700}
.place.base .place-kind span{display:none}
.place-kind,.dice{flex:none}
.place-kind .ic{width:22px;height:22px}
.dice{display:flex;gap:3px}
.die{display:inline-flex;align-items:center;gap:1px;font-size:11px;font-weight:700;padding:1px 4px 1px 2px;border-radius:6px;background:#fff}
.die .ic{width:14px;height:14px}
.die.far{background:var(--p-ink);color:var(--p-paper)}.die.any{background:var(--p-paper);color:var(--p-ink);box-shadow:inset 0 0 0 1.5px var(--p-ink)}
.drop-cost{position:absolute;right:8px;top:6px;display:inline-flex;gap:1px;padding:3px 6px;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.drop-cost .ic{width:16px;height:16px;color:var(--p-accent)}
.pawns{display:flex;flex-wrap:wrap;gap:2px 4px;min-height:54px;align-items:flex-start;align-content:flex-start}
.pawn{display:inline-flex;flex-direction:column;align-items:center;gap:1px;background:none;border:0;padding:2px;width:80px;border-radius:10px;--pawn:#888}
.pawn .disc,.portrait,.helper .disc{position:relative;width:72px;height:72px;border-radius:50%;background:var(--pawn);display:grid;place-items:center;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.2);border:2px solid rgba(255,255,255,.9);transition:transform .15s,box-shadow .15s}
.pawn .disc .ic,.portrait .ic,.helper .disc .ic{width:46px;height:46px}
.pawn-name{font-size:12px;font-weight:700;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pawn.active .disc{outline:3px solid #fff;outline-offset:1px}
.pawn.armed .disc{transform:translateY(-5px) scale(1.1);box-shadow:0 10px 14px rgba(0,0,0,.4)}
.pawn.target .disc,.mat.target,.ship.target .ship-pic{outline:3px solid #fff;outline-offset:2px;animation:pulse .8s ease-in-out infinite alternate}
@keyframes pulse{from{box-shadow:0 0 0 0 rgba(255,255,255,.7)}to{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.pawn.small{width:52px}.pawn.small .disc{width:44px;height:44px}.pawn.small .disc .ic{width:28px;height:28px}.pawn.small .pawn-name{font-size:9px;max-width:52px}
.red{--pawn:var(--red)}.blue{--pawn:var(--blue)}.yellow{--pawn:var(--yellow)}.green{--pawn:var(--green)}.purple{--pawn:var(--purple)}
.impaired .disc,.mat.impaired .portrait,.ship.impaired .ship-pic{filter:saturate(.35) brightness(.9)}
.badge{position:absolute;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.badge .ic{width:12px;height:12px}
.impaired-badge{right:-6px;bottom:-4px;background:var(--p-hazard)}
.deck{display:inline-flex;align-items:flex-start;gap:3px;padding:2px 5px 2px 3px;border-radius:12px;background:rgba(0,0,0,.09);border:1.5px dashed rgba(0,0,0,.2)}
.deck .pawn.small{margin-top:2px}
.ship{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:2px;border-radius:10px}
.ship-pic{position:relative;width:100px;height:68px;border-radius:999px;background:var(--wood);color:#f3e6c9;display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.4);transition:transform .15s}
.ship-pic .ic{width:52px;height:52px}
.ship.armed .ship-pic{transform:translateY(-5px) scale(1.1)}
.ship-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.seats{display:flex;gap:2px}
.seat{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(0,0,0,.45)}.seat.taken{background:rgba(0,0,0,.6)}
.chip{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:0;border-radius:17px;background:var(--p-accent);color:#fff;font-size:12px;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.3);white-space:nowrap;align-self:center}
.chip .ic{width:16px;height:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:5px;align-content:start;min-height:0;overflow:hidden}
.tile{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:4px;row-gap:2px;align-items:center;text-align:left;background:var(--p-paper);border:0;border-left:6px solid var(--type,#999);border-radius:8px;padding:4px 6px 4px 5px;min-height:68px;box-shadow:0 1px 3px rgba(0,0,0,.3);--type:#999;transition:transform .15s}
.tile:active{transform:scale(.97)}
.tile.task{--type:var(--p-task)}.tile.item{--type:var(--p-item)}.tile.lead{--type:var(--p-lead)}.tile.hazard{--type:var(--p-hazard)}.tile.hidden{--type:#6d6d6d;background:repeating-linear-gradient(45deg,#d9d2bc 0 6px,#cbc3ab 6px 12px)}
.tile-type{grid-row:1/3;grid-column:1;color:var(--type);--frame:60px;height:60px;display:flex;align-items:center}
.bigcard .tile-type{--frame:96px}
.tile-name{font-weight:700;font-size:13px;line-height:1.15;grid-column:2/4;grid-row:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tile-rows{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.tile-row{display:inline-flex;align-items:center;gap:1px}
.tile-cost{display:inline-flex;margin-left:2px}
.tile-or{font-size:10px;font-style:italic;opacity:.7;margin:0 3px}
.tile-result{grid-column:3;grid-row:2;justify-self:end;display:inline-flex;align-items:center;gap:1px;color:var(--type)}
.tile-result .ic{width:18px;height:18px}
.tile .cap .ic{width:24px;height:24px}
.tile.urgent{transform:rotate(-3deg);outline:2px solid var(--p-urgent);margin:3px 4px 0 2px}
.urgent-badge{right:-7px;top:-7px;background:var(--p-urgent);width:22px;height:22px}
.tile.lasting{background:var(--state-lasting-bg,#4a4038);color:#f4ead6;--type:var(--coin)}
.lasting-badge{right:-7px;top:-7px;background:var(--coin);color:var(--coin-ink);width:22px;height:22px}
.tile.more{grid-template-columns:auto;grid-template-rows:auto;justify-items:center;min-height:40px;background:rgba(0,0,0,.08);border-left:0;font-weight:700}
.cap{display:inline-flex;align-items:center;gap:3px;color:var(--cap,#333);font-weight:700;font-size:12px;border-radius:14px;white-space:nowrap}
.cap .ic{width:22px;height:22px}
.cap-drive{--cap:var(--cap-drive)}.cap-repair{--cap:var(--cap-repair)}.cap-reveal{--cap:var(--cap-reveal)}.cap-restore{--cap:var(--cap-restore)}.cap-extra{--cap:var(--cap-extra)}
.cap.provided{background:var(--cap);color:#fff;padding:2px 8px 2px 4px}
.cap.missing{border:2px dashed var(--cap);padding:1px 6px 1px 3px;opacity:.85}
.cap.free{color:#666;font-weight:500;font-style:italic}
.free-tag{font-size:10px;font-style:italic;opacity:.75;padding:0 4px}
.ground{display:flex;flex-wrap:wrap;gap:4px}
.piece{display:inline-flex;align-items:center;gap:3px;height:30px;padding:0 6px 0 4px;border-radius:8px;background:#fff;border:1.5px solid rgba(0,0,0,.25);font-size:11px;font-weight:600;max-width:100%;min-width:0;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.piece .item-pic{--frame:52px;color:var(--p-item);display:inline-flex}
.item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:74px}
.piece .cap .ic{width:18px;height:18px}
.piece.armed{transform:translateY(-3px);box-shadow:0 6px 10px rgba(0,0,0,.3)}
.piece.ground{background:#f6f1de}
/* Rail */
#rail{grid-row:2;grid-column:2;display:grid;grid-template-rows:repeat(var(--mats,5),minmax(0,1fr)) auto;gap:6px;min-height:0;min-width:0}
.mat{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:3px;align-items:center;background:var(--p-paper);border-radius:12px;padding:5px 8px;border:3px solid transparent;min-height:0;overflow:hidden;cursor:pointer;--pawn:#888;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.mat .portrait{grid-row:1/3;align-self:center}
.mat-text{display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline;line-height:1.15;min-width:0}
.mat-name{font-size:14px}
.mat-role{font-size:11px;opacity:.75}
.mat-text .cap{font-size:11px}
.mat-text .cap .ic{width:18px;height:18px}
.mat-status{font-size:11px;width:100%}
.ship-mat .mat-status{width:auto}
.mat-range{font-size:11px;opacity:.75}
.mat-status.impaired{color:var(--p-hazard);font-weight:700}
.slots{display:flex;gap:4px;grid-column:2;min-width:0}
.slot.empty{width:44px;height:30px;border:2px dashed rgba(0,0,0,.25);border-radius:8px;flex:none}
.mat.active{border-color:var(--pawn)}
.mat.armed{border-color:var(--pawn);box-shadow:0 6px 14px rgba(0,0,0,.35)}
.mat .chip{position:absolute;right:6px;bottom:6px}
.ship-mat{--pawn:var(--wood)}
.ship-mat .portrait{border-radius:999px;width:80px;height:56px}.ship-mat .portrait .ic{width:42px;height:42px}
.seats-row{align-items:center}
.seat-slot{width:30px;height:30px;border-radius:8px;border:2px dashed rgba(0,0,0,.25);display:grid;place-items:center;color:rgba(0,0,0,.35)}
.seat-slot .ic{width:16px;height:16px}
.supply{display:flex;gap:6px}
.pile{flex:1;height:50px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11px;font-weight:700}
.pile .ic{width:32px;height:32px}
.pile.task .ic{color:#f0d27a}.pile.other .ic{color:#9ad3b8}.pile.lead .ic{color:#b7c2ee}
.pile.empty{opacity:.45}
/* Sheet */
#sheet{grid-row:2;grid-column:1;align-self:end;justify-self:stretch;z-index:6;background:var(--p-paper);border-radius:var(--radius);box-shadow:0 -8px 30px rgba(0,0,0,.4);max-height:min(60%,420px);overflow:auto;animation:rise .18s ease-out}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet-body{position:relative;padding:12px 60px 14px 16px}
.sheet-body>.close{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.08);color:inherit}
.sheet-body h2{margin:0 0 8px;font-size:18px;display:flex;align-items:center;gap:8px}
.sheet-body h3{margin:10px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.card-sheet{display:grid;grid-template-columns:minmax(230px,320px) minmax(0,1fr);gap:16px;align-items:start}
.bigcard{background:#fff;border-radius:12px;border-top:8px solid var(--type,#999);padding:8px 12px 10px;box-shadow:0 2px 6px rgba(0,0,0,.2);--type:#999}
.bigcard.task{--type:var(--p-task)}.bigcard.item{--type:var(--p-item)}.bigcard.lead{--type:var(--p-lead)}.bigcard.hazard{--type:var(--p-hazard)}
.bigcard header{display:flex;gap:6px;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--type)}
.bigcard .type-label{flex:1}
.bigcard .state{display:inline-flex;align-items:center;gap:3px;text-transform:none;letter-spacing:0;font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.07);color:#333}
.bigcard .state.urgent{background:var(--p-urgent);color:#fff}.bigcard .state.lasting{background:var(--coin);color:var(--coin-ink)}
.bigcard h2{margin:6px 0 8px;font-size:18px}
.rows{display:flex;flex-direction:column;gap:5px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;border:2px solid rgba(0,0,0,.12);background:none;text-align:left;width:100%}
.row.chosen{border-color:var(--p-accent);background:rgba(36,94,98,.08)}
.row.infeasible{opacity:.55}
.row-caps{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.row-plus{font-weight:700;opacity:.6}
.row-cost{display:inline-flex;gap:1px;flex:none}
.or{font-size:11px;font-style:italic;opacity:.7;text-align:center}
.card-result{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:13px}
.result{display:inline-flex;align-items:center;gap:4px}
.result.points .pt{width:24px;height:24px}
.card-back-note,.card-note{margin:8px 0 0;font-size:12px;display:flex;align-items:center;gap:6px;opacity:.85}
.sheet-side{min-width:0}
.where{margin:0;display:flex;align-items:center;gap:6px;font-weight:700}
.helpers{display:flex;flex-wrap:wrap;gap:8px}
.helper{display:flex;flex-direction:column;align-items:center;gap:3px;width:86px;padding:6px 4px;border-radius:12px;border:3px solid transparent;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);--pawn:#888}
.helper b{font-size:12px}
.helper-caps{display:flex;gap:2px}
.helper-caps .cap .ic{width:16px;height:16px}
.helper.chosen{border-color:var(--pawn);background:#f4f1e6}
.helper.useless{opacity:.45}
.recipients{display:flex;flex-wrap:wrap;gap:6px}
.recipient{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 12px;border-radius:20px;border:2px solid rgba(0,0,0,.2);background:#fff;font-weight:600}
.recipient.chosen{border-color:var(--p-accent);background:rgba(36,94,98,.1)}
.primary{height:52px;border:0;border-radius:14px;background:var(--p-accent);color:#fff;font-size:16px;font-weight:700;display:inline-flex;align-items:center;gap:8px;padding:0 18px;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.primary:disabled{opacity:.5}
.pay{margin-top:12px}
.pay-coins{display:inline-flex;gap:1px;margin-left:4px}
.blocked{margin:12px 0 0;background:rgba(163,67,54,.1);color:var(--p-hazard);border-radius:10px;padding:10px 12px;font-weight:600}
.note{margin:4px 0;font-size:13px;opacity:.85;display:flex;align-items:center;gap:6px}
.pile-list{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.pile-list .bigcard{width:230px;flex:none}
.pile-card{background:none;border:0;padding:0;text-align:left}
.goal-text{font-weight:700}
.round-sheet .round-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.round-sheet section{background:#fff;border-radius:10px;padding:8px 10px}
.round-sheet h3{margin:0 0 6px;display:flex;align-items:center;gap:6px}
.round-sheet ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.round-sheet li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13px}
.round-sheet .hit{color:var(--p-hazard);font-weight:700}
.round-sheet .tag{font-size:11px;padding:1px 6px;border-radius:8px;background:rgba(0,0,0,.08)}
.round-sheet .warn{font-weight:700;color:var(--p-hazard)}
.round-sheet footer{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.round-sheet footer button:not(.primary){height:52px;border:2px solid rgba(0,0,0,.2);border-radius:14px;background:#fff;padding:0 16px;font-weight:600}
.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.menu-item{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 12px;border-radius:12px;border:2px solid rgba(0,0,0,.12);background:#fff;color:inherit;text-decoration:none;font-weight:600;cursor:pointer}
.menu-item .ic{width:24px;height:24px;color:var(--p-accent)}
.menu-item.select select{flex:1;min-width:0;font:inherit;height:36px;border-radius:8px;border:1px solid rgba(0,0,0,.25);background:#fff}
.menu-sheet .seed{margin-top:8px;font-size:12px}
/* Overlay: setup and the end of the game */
#overlay{position:fixed;inset:0;z-index:20;background:rgba(8,28,34,.93);display:grid;place-items:center;padding:14px;overflow:auto}
.setup{position:relative;width:min(100%,1060px);max-height:100%;overflow:auto;background:var(--p-paper);border-radius:18px;padding:12px 22px 14px;display:grid;gap:8px}
.setup-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding-right:56px}
.setup-head h1{margin:0;font-size:22px}
.setup-head .story{margin:0;font-size:13px;opacity:.8}
.setup-head .crumbs{max-width:none;font-size:12px;display:block;flex:none;opacity:.7}
.difficulty{display:inline-flex;align-items:center;gap:3px;font-size:11px;opacity:.8}
.difficulty .pip{width:9px;height:9px;border-radius:50%;border:2px solid currentColor;box-sizing:border-box}.difficulty .pip.on{background:currentColor}.difficulty-text{margin-left:4px}
.map-card .map-number{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.setup-head .close{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.08);color:inherit}
.setup-block h2{margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.setup-block h2 small{text-transform:none;letter-spacing:0;font-weight:400;margin-left:8px}
.scenarios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.map-detail{margin:4px 2px 0;font-size:12px;opacity:.75}
.scenario,.map-card{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border-radius:12px;border:3px solid rgba(0,0,0,.12);background:#fff;min-height:72px}
.map-card{padding:7px 12px;min-height:0}
.scenario b,.map-card b{font-size:15px}
.map-card .info{font-size:12px}
.map-card .map-letter{display:inline-block;min-width:1.4em;margin:0 6px;padding:0 4px;border-radius:5px;background:rgba(0,0,0,.08);font:700 15px/1.3 Georgia,"Times New Roman",serif;text-align:center}
.scenario .who{font-size:12px;opacity:.75}
.scenario .info{font-size:12px}
.scenario.chosen,.map-card.chosen{border-color:var(--p-accent);background:rgba(36,94,98,.08)}
.team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.member{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:8px;align-items:center;text-align:left;padding:6px 8px;border-radius:12px;border:3px solid rgba(0,0,0,.12);background:#fff;font-size:12px;--pawn:#888}
.member .portrait{grid-row:1/4}.member b{font-size:14px}
.member .cap-line{opacity:.75}
.member.chosen{border-color:var(--pawn);background:#f4f1e6}
.member:not(.chosen) .portrait{filter:grayscale(1);opacity:.5}
.variants{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.variants h2{grid-column:1/3}
.toggle{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;border:2px solid rgba(0,0,0,.12);background:#fff;text-align:left}
.switch{width:46px;height:28px;border-radius:14px;background:#b9b9b9;position:relative;flex:none;transition:background .15s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left .15s}
.toggle.on .switch{background:var(--p-accent)}.toggle.on .switch::after{left:21px}
.toggle-text{display:flex;flex-direction:column;gap:1px;font-size:12px}
.toggle-text b{font-size:14px}
label.select{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:2px solid rgba(0,0,0,.12);background:#fff;font-weight:600}
label.select select{flex:1;font:inherit;height:36px;border-radius:8px;border:1px solid rgba(0,0,0,.25);background:#fff;min-width:0}
.setup-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;justify-content:flex-end}.setup-foot label.select{flex:1 1 200px;max-width:280px}
.setup-foot .seed{font-size:12px;opacity:.7;margin-right:auto}
.setup-foot .ib{background:rgba(0,0,0,.08);color:inherit}
.start{font-size:18px;height:56px}
/* Low tablets (iPad mini and 1024×768 landscape): scenario, map and team blocks together must still fit without scrolling the setup. */
.member .portrait{width:40px;height:40px}.member .portrait .ic{width:22px;height:22px}
@media (max-height:780px){.setup{padding:8px 22px 10px;gap:5px}.setup-block h2{margin-bottom:2px}.scenario{padding:7px 12px;min-height:0}.map-card{padding:5px 12px}.member{padding:5px 6px}.toggle,label.select{padding:5px 12px}label.select select{height:32px}.start{height:48px}.scenario{display:block}.scenario b{margin-right:8px}.scenario .info{display:block;margin-top:2px}.member .portrait{width:34px;height:34px}.toggle-text,.scenario .info,.map-card .info{line-height:1.2}.map-detail{margin-top:2px}}
.end{width:min(100%,560px);background:var(--p-paper);border-radius:18px;padding:24px 28px;text-align:center;display:grid;gap:8px;justify-items:center}
.end-pic{--frame:160px;color:var(--p-accent)}.end-pic>.ic{width:120px;height:120px}
.end.loss .end-pic{color:var(--p-hazard)}
.end h1{margin:0;font-size:28px}
.end p{margin:0}
.end-actions{display:flex;gap:10px;margin-top:8px}
.end-actions button:not(.primary){height:52px;border:2px solid rgba(0,0,0,.2);border-radius:14px;background:#fff;padding:0 16px;font-weight:600}
/* Toast, rotate hint */
#toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);opacity:0;transition:opacity .2s,transform .2s;background:#1c2a2c;color:#fff;padding:10px 16px;border-radius:12px;z-index:40;pointer-events:none;display:flex;align-items:center;gap:12px;box-shadow:0 6px 20px rgba(0,0,0,.4);max-width:min(90vw,560px);font-weight:600}
#toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast button{height:36px;border:0;border-radius:10px;background:#f1c40f;color:#222;font-weight:700;padding:0 12px}
#rotate{display:none;position:fixed;inset:0;z-index:30;margin:0;place-items:center;background:var(--p-board);color:#fff;font-size:22px;font-weight:700;text-align:center;padding:24px}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:grid}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Kind frames (src/shapes.js): the outline is drawn behind the picture, which sits in the shape's content box. */
.frame{position:relative;display:inline-block;flex:none;width:var(--frame,28px);height:var(--frame,28px)}
.frame>.frame-shape{position:absolute;inset:0;width:100%;height:100%;fill:var(--frame-fill,var(--p-paper));stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.frame>.ic{position:absolute;z-index:1;left:calc(var(--fx)*100%);top:calc(var(--fy)*100%);width:calc(var(--fw)*100%);height:calc(var(--fh)*100%)}
.frame-circle{--fx:.17;--fy:.17;--fw:.66;--fh:.66}
.frame-stadium{--fx:.18;--fy:.21;--fw:.64;--fh:.58}
.frame-pin{--fx:.2;--fy:.1;--fw:.6;--fh:.6}
.frame-rounded{--fx:.16;--fy:.16;--fw:.68;--fh:.68}
.frame-tag{--fx:.12;--fy:.22;--fw:.56;--fh:.56}
.frame-shield{--fx:.22;--fy:.14;--fw:.56;--fh:.56}
.frame-arrow{--fx:.1;--fy:.2;--fw:.6;--fh:.6}
.frame-octagon{--fx:.19;--fy:.19;--fw:.62;--fh:.62}
.frame-star{--fx:.3;--fy:.33;--fw:.4;--fh:.4}
.kind-hazard>.frame-shape{stroke-width:2.2}

.feature-badge{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:6px;background:rgba(0,0,0,.1)}.feature-badge .ic{width:16px;height:16px}
/* The top bar at 1024 px and below: the parts do not fit side by side with split effort and a breadcrumb, so the bar tightens before anything overlaps. */
@media (max-width:1100px){#topbar{gap:6px}.days{gap:6px;flex:none}.coins-tray{padding:0 8px;gap:6px}.goal{padding:0 9px}}
@media (max-width:800px){#topbar .crumbs{display:none}.days-label{display:none}.day{width:20px}.track{gap:2px}#topbar{gap:4px}#topbar .ib{width:38px}.end-day{padding:0 9px}.coins-label{display:none}.goal{padding:0 8px}}

/* Effects (docs/expeditions-spec.md §3.8): coins on the mats in split effort (one group, a touch target of 44 px, apart from the mat itself),
   the chips of an item with an effect, the guest of honour, the words of an effect, the decision and the revealed ⚡ cards. */
.coin-group{display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:22px;background:rgba(0,0,0,.08);color:inherit;font-weight:700;cursor:grab;touch-action:none}
.coin-group .coin{width:22px;height:22px}.coin-group.armed{outline:3px solid var(--pawn)}.coin-count{font-size:14px}
.mat-coins{grid-column:2;display:flex;align-items:center;gap:6px;min-width:0}.mat .mat-coins .chip{position:static}
.slot-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.slot-item .chip{height:30px;padding:0 8px}.used-mark .coin{width:14px;height:14px}
.guest-badge{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--p-accent)}.guest-badge .ic{width:14px;height:14px}
.result.effect{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.effect-text{display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.25;margin-top:4px}.effect-line.definition{font-style:italic}.effect-line.option{padding-left:6px;border-left:3px solid var(--p-accent)}
.tile-progress{font-weight:700;font-size:11px}
.coins-tray.split .coin-count{margin-left:4px}
.decide-sheet{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:16px;align-items:start}
.decider{margin:0 0 8px;font-weight:700}
.options{display:flex;flex-direction:column;gap:8px}.options .option{min-height:44px;display:flex;align-items:center;gap:8px;text-align:left}
.launched{list-style:none;margin:0;padding:0;display:flex;gap:12px;overflow-x:auto}.launched li{min-width:220px;flex:none}
.launch-sheet footer{display:flex;justify-content:flex-end;margin-top:8px}.launch-sheet footer button{min-height:44px}
@media (max-height:500px){.decide-sheet{grid-template-columns:minmax(0,1fr)}.decide-sheet .sheet-main{display:none}.launched li{min-width:200px}}