/* Touch UI of the game: one landscape screen, no scrolling. Colours come from the theme palette as --p-* (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:#b18d37;--p-item:#568564;--p-lead:#4f63a6;--p-hazard:#a34336;--p-urgent:#ad3f37;
  --gap:8px;--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:#b0392f;--cap-repair:#2c65a0;--cap-reveal:#8a6d05;--cap-restore:#2a7a4d;--cap-extra:#733a8f}
*{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}
.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}
.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}
#board .routes{position:absolute;left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 20px);pointer-events:none;overflow:visible}
#board .routes line{stroke:rgba(255,255,255,.75);stroke-width:10px;stroke-linecap:round;vector-effect:non-scaling-stroke}
#board .routes line.walk{stroke-dasharray:4 8}
#board .grid{position:relative;display:grid;gap:16px;height:100%}
.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;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:4px;background:var(--p-land);border-radius:12px;padding:5px 8px 6px;border:3px solid rgba(0,0,0,.15);min-height:0;min-width:0;overflow:hidden;box-shadow:0 3px 0 rgba(0,0,0,.25);transition:box-shadow .15s,border-color .15s,opacity .15s}
.place.base{border-color:#6b8f7a}.place.dest{border-color:#e0a92a}
.place.target{border-color:#fff;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:5px;min-height:28px}
.place-pic{color:var(--p-accent)}.place-pic .ic{width:24px;height:24px}
.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:14px;height:14px}
.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{color:var(--p-task)}.die.any{color:var(--p-item)}
.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:52px;border-radius:10px;--pawn:#888}
.pawn .disc,.portrait,.helper .disc{position:relative;width:40px;height:40px;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:22px;height:22px}
.pawn-name{font-size:11px;font-weight:700;max-width:52px;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:36px}.pawn.small .disc{width:28px;height:28px}.pawn.small .disc .ic{width:16px;height:16px}.pawn.small .pawn-name{font-size:9px;max-width:36px}
.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:44px;height:40px;border-radius:12px;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:28px;height:28px}
.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(118px,1fr));gap:5px;align-content:start;min-height:0;overflow:hidden}
.tile{position:relative;display:grid;grid-template-columns:22px 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:56px;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)}
.tile-type .ic{width:22px;height:22px}
.tile-name{font-weight:700;font-size:12px;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:16px;height:16px}
.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:#4a4038;color:#f4ead6;--type:#e0a92a}
.lasting-badge{right:-7px;top:-7px;background:#e0a92a;color:#222;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:18px;height:18px}
.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 .ic{width:18px;height:18px;color:var(--p-item)}
.item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:74px}
.piece .cap .ic{width:14px;height:14px}
.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:44px 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:14px;height:14px}
.mat-status{font-size:11px;width:100%}
.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:12px}
.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:20px;height:20px}
.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:#e0a92a;color:#222}
.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:14px 22px 16px;display:grid;gap:10px}
.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 .close{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.08);color:inherit}
.setup-block h2{margin:0 0 6px;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}
.scenario{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}
.scenario b{font-size:15px}
.scenario .who{font-size:12px;opacity:.75}
.scenario .info{font-size:12px}
.scenario.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:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border-radius:12px;border:3px solid rgba(0,0,0,.12);background:#fff;font-size:12px;--pawn:#888}
.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;align-items:center;gap:10px;justify-content:flex-end}
.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}
.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 .ic{width:72px;height:72px;color:var(--p-accent)}
.end.loss .end-pic .ic{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}}