/* Almendra is free under the SIL Open Font License. See fonts/OFL.txt. */
@font-face { font-family: "Almendra"; src: url("fonts/Almendra-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Almendra"; src: url("fonts/Almendra-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Almendra"; src: url("fonts/Almendra-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Almendra"; src: url("fonts/Almendra-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --ink: #1d2b36;
  --muted: #5b6b78;
  --paper: #f6f1e4;
  --card: #fffdf7;
  --line: #cfc6ae;
  --accent: #0b6e8a;
  --card-event: #5a3d2b;
  --card-inspiration: var(--accent);
  --card-action: #8a8f94;
  --card-free: #c39a12;
  --card-event-face: #e8dfd7;
  --card-inspiration-face: #d6e7eb;
  --danger: #b3261e;
  --water: #bfdcea;
  --deep: #7fb0cd;
  --island: #e7d9a4;
  --port: #c4c4c4;
  --reach: #2e9e5b;
  --warn: #d6452f;
}

/* The color of a map, and of the flags and spots that show an item of that map. */
.bronze { --item-color: #a8703a; }
.silver { --item-color: #7d8a94; }
.gold { --item-color: #c39a12; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.35 "Almendra", Georgia, serif;
}

h1 { margin: 0 0 4px; font-size: 32px; }
h2 { margin: 0 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

button {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.active { outline: 2px solid var(--accent); }

.home { box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
/* The space between the centers of 2 adjacent tables. The pattern is 4.464 spaces wide and 3 spaces high. */
.table-list { --spacing: clamp(220px, min((100vw - 48px) / 4.464, (100vh - 330px) / 3), 236px); display: grid; grid-template-columns: repeat(auto-fill, var(--spacing)); justify-content: center; justify-items: center; grid-auto-rows: var(--spacing); gap: 8px 60px; margin-block: auto 0; padding-block: 8px; }
.table-tile { position: relative; box-sizing: border-box; display: flex; flex-direction: column; --radius: calc((var(--spacing) - 8px) / 4); align-self: center; align-items: center; justify-content: center; gap: 3px; width: calc(var(--radius) * 2); height: calc(var(--radius) * 2); padding: 4px; border: 2px solid var(--line); border-radius: 50%; background: #fff; text-align: center; }
/* The columns of the hexagon pattern are .866 spaces apart. The rows are .5 spaces apart. */
@media (min-width: 1016px) {
  .table-list { grid-template-columns: repeat(5, calc(var(--spacing) * .866)); grid-auto-rows: calc(var(--spacing) / 2); gap: 0; }
  .table-tile { grid-column: var(--column); grid-row: var(--row) / span 2; }
}
/* The button has no border. Its text shows it is a button when the mouse is on it. */
.table-tile [data-setup-table]:not(.chair) { border: 0; background: none; }
.table-tile [data-setup-table]:hover:not(:disabled) { text-decoration: underline; }
.table-name { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.table-name text { font-size: 10px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 2px; }
.table-tile .setup-board { position: absolute; inset: 0; padding: 0; border-radius: 50%; }
/* The right edge of a chair is the back of the chair. The rotation moves that edge away from the table. */
.chair { position: absolute; top: 50%; left: 50%; box-sizing: border-box; width: 24px; height: 36px; border: 2px solid var(--line); border-right-width: 8px; border-radius: 6px; background: var(--card); transform: translate(-50%, -50%) rotate(var(--angle)) translateX(calc(var(--radius) + 13px)); }
.chair.free { border-color: var(--ship); }
.chair.occupied { border-color: var(--ink); background: var(--ship); }
.chair-name { position: absolute; top: 50%; left: 50%; max-width: 60px; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 600; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; transform: translate(-50%, -50%) translate(calc(var(--cos) * (var(--radius) + 32px)), calc(var(--sin) * (var(--radius) + 13px) + var(--down))); }
/* The hexes have the color of the board and no borders. The stroke closes the small gaps between the hexes. */
.mini-board { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini-hex { stroke-width: 3; }
.mini-hex.water, .mini-hex.spawn, .mini-hex.cove { fill: var(--water); stroke: var(--water); }
.mini-hex.deepwater { fill: var(--deep); stroke: var(--deep); }
.mini-hex.island { fill: var(--island); stroke: var(--island); }
.mini-hex.port { fill: var(--port); stroke: var(--port); }
.mini-outline { fill: none; stroke: #000; stroke-width: .5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mini-dot { stroke: var(--ink); stroke-width: 1; }
.mini-treasure path { fill: var(--item-color); stroke: var(--ink); stroke-width: .8; }
.table-tile button { padding: 2px 8px; font-size: 13px; }
.table-buttons { display: flex; gap: 6px; }
.table-tile button.chair { padding: 0; }
.table-tile button.chair.free:hover:not(:disabled) { border-color: var(--ship); outline: 2px solid var(--ship); }
.table-tile button.chair.occupied:hover:not(:disabled) { border-color: var(--ink); outline: 2px solid var(--ink); }
.table-tile button.chair.spectator { border-color: var(--ink); font-size: 13px; line-height: 1; }
.table-tile button.chair.spectator:hover:not(:disabled) { border-color: var(--ink); outline: 2px solid var(--ink); }
/* The chair turns with its angle. The picture on the chair stays upright. */
.chair.spectator span { display: block; transform: rotate(calc(var(--angle) * -1)); }
/* The rose of the current ship is behind the chair. It uses the position of the chair and no rotation of the chair. */
.chair-rose { position: absolute; top: 50%; left: 50%; width: 62px; height: 62px; pointer-events: none; transform: translate(-50%, -50%) translate(calc(var(--cos) * (var(--radius) + 13px)), calc(var(--sin) * (var(--radius) + 13px))); }
.home-notice { color: var(--danger); }
.seat { position: absolute; top: 20px; left: 4px; z-index: 1; padding: 0 5px; border-radius: 4px; font-size: 11px; line-height: 1.5; }
.seat.open { border-color: var(--accent); background: var(--accent); color: #fff; }
.seat.mine { border-color: var(--ink); font-weight: 700; }
.seat.taken { color: var(--muted); }
.ship-card-head .party-name { flex: none; }
.player-name { min-width: 0; margin-left: 6px; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.home > h1, .home > p { text-align: center; }
.name-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.name-form[hidden] { display: none; }
.invite-code { display: block; margin: 8px 0; font-size: 20px; font-weight: 700; user-select: all; }
/* The button looks like a deck of cards. */
.deck-button { flex: none; align-self: center; margin-top: -30px; margin-bottom: auto; box-sizing: border-box; width: 72px; height: 100px; padding: 4px; border: 2px solid #fff; border-radius: 8px; background: var(--card-inspiration); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; box-shadow: 2px 2px 0 #fff, 3px 3px 0 var(--line), 5px 5px 0 #fff, 6px 6px 0 var(--line), 8px 8px 0 #fff, 9px 9px 0 var(--line); }
/* The button keeps its space, so the page does not move. */
body:has(#cards[open]) .deck-button { visibility: hidden; }
.deck-button:hover:not(:disabled) { border-color: #fff; transform: translate(-1px, -2px); }
/* The overlay has no background. Only the cards and the words on their labels cover the tables. */
.cards-dialog { box-sizing: border-box; width: min(1100px, 100vw - 32px); max-width: none; max-height: calc(100vh - 32px); padding: 0; overflow: hidden; border: 0; background: none; color: var(--ink); }
.cards-dialog, .cards-panel { outline: none; }
.cards-dialog::backdrop { background: none; }
.cards-dialog h2, .card-entry figcaption { background: rgb(246 241 228 / .85); border-radius: 6px; }
.cards-dialog h2 { width: fit-content; padding: 0 8px; }
.cards-panel { box-sizing: border-box; max-height: calc(100vh - 36px); padding: 16px; overflow-y: auto; scrollbar-color: #8a8f94 transparent; }
.cards-head { display: flex; justify-content: flex-end; }
.card-group { margin-top: 24px; }
.card-group h2 { margin: 0 auto 12px; font-size: 20px; }
.card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 26px; }
.card-grid + .card-grid { margin-top: 20px; }
/* A narrow window scrolls this row, so the cards stay on 1 row. */
.card-grid.one-row { flex-wrap: nowrap; justify-content: safe center; gap: 16px; overflow-x: auto; }
.card-entry { flex: none; width: 110px; margin: 0; }
/* Each copy of a card shows as 1 more card below the card. */
.card-entry .event-face { --stack-face: var(--card-event-face); --stack-edge: var(--card-event); }
.card-entry .hand-card { --stack-face: var(--card-inspiration-face); --stack-edge: var(--card-inspiration); }
.card-entry .stack-2 { box-shadow: 7px 7px 0 -2px var(--stack-face), 7px 7px 0 0 var(--stack-edge); }
.card-entry .stack-3 { box-shadow: 7px 7px 0 -2px var(--stack-face), 7px 7px 0 0 var(--stack-edge), 14px 14px 0 -2px var(--stack-face), 14px 14px 0 0 var(--stack-edge); }
/* The cards in this list are pictures. A click does nothing, so the cards have no hover effect. */
.card-entry > .event-face, .card-entry > .hand-card, .card-entry > .action-card { pointer-events: none; text-align: center; }
.card-entry .action-card { background: var(--card); color: var(--ink); }
.card-entry figcaption { margin-top: 20px; padding: 2px 4px; color: var(--ink); font-size: 12px; line-height: 1.25; text-align: center; }
.name-form label, .name-dialog label { font-weight: 600; }
.name-form input, .name-dialog input { width: 200px; max-width: 100%; padding: 4px 8px; border: 2px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; }
.name-dialog { padding: 16px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.name-dialog::backdrop { background: rgb(20 30 40 / .55); }
.name-dialog form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.name-dialog p { margin: 0; }
.setup { max-width: 1020px; margin: 10vh auto; padding: 0 16px; }
.setup-ship-table { display: flex; align-items: center; gap: 16px; width: 100%; }
.setup-ship-table .ship-picker { flex: 1; }
.setup-moves-box { flex: none; width: 280px; margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.setup-moves { display: block; width: 100%; }
.setup-moves .target { cursor: default; }
.target.fast { fill: var(--reach); fill-opacity: .12; stroke: var(--reach); stroke-width: 2; stroke-dasharray: 6 5; }
.arrow.fast { stroke: #1c7a43; stroke-width: 3; stroke-dasharray: 6 7; }
.arrow-head.fast { fill: #1c7a43; }
.setup form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 16px; }
.ship-picker { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 12px 16px; border: 2px solid var(--line); border-radius: 10px; }
.ship-picker legend { padding: 0 4px; font-weight: 600; }
.ship-list { display: grid; font-size: 20px; }
.ship-choice { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 61px; padding: 12px 8px; }
.ship-choice + .ship-choice { border-top: 2px dotted var(--line); }
.ship-choice input { width: 20px; height: 20px; margin: 0; }
.ship-name { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.ship-name .ship-icon { flex: none; width: 34px; height: 34px; }
.ship-choice label { display: grid; grid-template-columns: auto 68px 1fr; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.setup-toggles, .setup-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* These parts have the width of the ship list, so they have the same center. The moves picture and the gap use the rest. */
#setup-title, .setup > p, .setup-toggles, .setup-buttons { box-sizing: border-box; width: calc(100% - 296px); text-align: center; }
/* The row is wider than the form, and has its center on the center of the form. */
.setup-ships { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: min(1100px, calc(100vw - 32px)); margin: 24px 0 24px 50%; transform: translateX(-50%); }
.setup-ship { padding-bottom: 8px; border: 2px solid; border-radius: 10px; background: var(--card); overflow: hidden; text-align: center; }
.setup-ship .ship-card-head { padding: 3px 8px; font-size: 13px; }
.setup-ship .ship-card-head .party-name { font-size: 15px; }
.setup-ship .ship-art { height: 130px; margin-top: 6px; }
.setup-ship .ship-art .pip { width: 18px; height: 18px; }
.setup-ship .ship-special { padding: 6px 8px 0; font-size: 14px; line-height: 1.2; }
.turn-number { font-weight: 700; text-align: center; }
.setup-seat { flex: none; box-sizing: border-box; width: 100px; padding: 6px 4px; overflow: hidden; border-radius: 4px; font-size: 16px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.setup-seat.open { border-color: var(--accent); background: var(--accent); color: #fff; }
.setup-seat.mine { border-color: var(--ink); font-weight: 700; }
.setup-seat.taken { color: var(--muted); }
.ship-power { color: var(--muted); font-size: 14px; }
.drag-handle { flex: none; width: 22px; padding: 0; border: none; background: none; color: var(--muted); font-size: 16px; line-height: 1.4; text-align: center; }
button.drag-handle { cursor: grab; touch-action: none; }
.ship-choice.dragging { border-radius: 6px; background: var(--card); outline: 2px solid var(--accent); }
.ship-choice.dragging .drag-handle { cursor: grabbing; }

.game[hidden], .setup[hidden], .home[hidden] { display: none; }
.game {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 300px;
  grid-template-areas: "piles board side" "band band turn";
  grid-template-rows: auto auto;
  gap: 16px;
  padding: 16px;
  max-width: 1500px;
  margin: 0 auto;
}
/* This button is at the top of the side column. */
.game-top { grid-area: side; align-self: start; justify-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 225px; }
.game-top button { padding-inline: 4px; white-space: nowrap; }
#reveal-tiles, #reset-game { grid-column: 2; }
/* Undo is even with End turn, and has the same size as End turn. */
#undo { align-self: start; justify-self: start; width: 108.5px; min-height: 48px; border-radius: 8px; font-size: 16px; font-weight: 600; }
.piles { grid-area: piles; align-self: start; }
.board-column { grid-area: board; align-self: start; min-width: 0; }
/* The ship cards are above a short log. */
.panel { grid-area: side; align-self: start; width: 100%; }
.panel .log { height: 90px; max-height: none; }
/* The buttons have the width of the ship cards and of the space that the current ship moves into. */
.turn-column { grid-area: turn; display: flex; flex-direction: column; gap: 8px; width: 225px; justify-self: end; margin-top: 10px; }
.bottom-band { grid-area: band; display: grid; grid-template-columns: auto minmax(170px, auto) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 10px; min-width: 0; }
.action-area { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 8px 14px; min-width: 0; }
.board-wrap { position: relative; }
#board { display: block; width: 100%; max-height: calc(100vh - 350px); min-height: 300px; }
.hint { margin: 6px 0 0; color: var(--muted); text-align: center; min-height: 1.4em; }

.panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel section:empty { display: none; }
.panel section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.meta { color: var(--muted); }
.row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.row.current { font-weight: 600; }

.banner { padding: 10px 12px; border-radius: 8px; background: var(--accent); color: #fff; }
.banner.lost { background: var(--danger); font-weight: 600; }
.banner.won { background: var(--reach); font-weight: 600; }

.log { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; font-size: 13px; }
.log li { padding: 1px 0; border-bottom: 1px dotted var(--line); }

/* Board */
.hex { stroke: #fff; stroke-width: 1.5; }
.hex.water { fill: var(--water); }
.hex.island { fill: var(--water); }
.hex.deepwater { fill: var(--deep); }
.spot-question { font-size: 28px; font-weight: 700; fill: #0d3b8c; text-anchor: middle; pointer-events: none; }
.island-blob { fill: var(--island); stroke: #b9a66a; stroke-width: 1.5; pointer-events: none; }
.hex.spawn, .hex.cove { fill: var(--water); }
.cave-rock { fill: #6f5f50; stroke: #3b3026; stroke-width: 1; }
.cave-rock-line { fill: none; stroke: #4a3e33; stroke-width: 1; stroke-linecap: round; }
.cave-mouth { fill: #15191c; }
.cave-water { fill: none; stroke: #7fb0cd; stroke-width: 1.2; stroke-linecap: round; }
.hex.port { fill: var(--port); }
.target { fill: transparent; stroke: none; }
.target.sail { fill: var(--reach); fill-opacity: .28; stroke: var(--reach); stroke-width: 3; cursor: pointer; }
.target.danger { fill: var(--warn); fill-opacity: .35; stroke: var(--warn); stroke-width: 3; cursor: pointer; }
.target.choose { fill: #e0a100; fill-opacity: .3; stroke: #b98500; stroke-width: 3; cursor: pointer; }
.label { font-size: 11px; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.label.big { font-size: 15px; font-weight: 700; }
.label.muted { fill: var(--muted); }
.hex-coordinate { font-size: 12px; font-weight: 700; fill: #000; stroke: #fff; stroke-width: 3px; paint-order: stroke; text-anchor: middle; pointer-events: none; }
.piece { pointer-events: none; }
.ship-piece { fill: var(--accent); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; paint-order: stroke; }
.current-rose { animation: rose-turn 15s linear infinite; }
.rose-yellow { fill: #ffd400; stroke: #a88600; stroke-width: .5; }
.rose-white { fill: #fff; stroke: #a88600; stroke-width: .5; }
@keyframes rose-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .current-rose { animation: none; } }
.pirate-piece { fill: #222; stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; paint-order: stroke; }
.flag { fill: var(--item-color); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; paint-order: stroke; pointer-events: none; }
.flag-staff { fill: #222; pointer-events: none; }
.token-piece { stroke: #7a5b00; stroke-width: 1.5; fill: #ffd34d; }
.token-piece.treasure { fill: #ff9f1c; }
.mine-piece { fill: #000; stroke: var(--warn); stroke-width: 2; }
.arrow { stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.arrow.sail { stroke: #1c7a43; }
.arrow.danger { stroke: var(--warn); }
.arrow-head { pointer-events: none; }
.arrow-head.sail { fill: #1c7a43; }
.arrow-head.danger { fill: var(--warn); }
.gauge-hex { stroke: #444; stroke-width: .9; }
.gauge-hex.near { fill: #bbe; }
.gauge-hex.far { fill: #aad; }
.gauge-arrow { fill: none; stroke: #000; stroke-width: 4.5; stroke-linecap: round; }

.ship-icon { width: 1.4em; height: 1.4em; vertical-align: -0.35em; }
.ship-icon .ship-piece { stroke: none; }

/* Open and closed circles for provisions and cannon balls */
.pips { display: inline-flex; gap: 2px; vertical-align: -1px; }
.pip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid; }
.pip.provisions { border-color: #9a6a2f; }
.pip.cannons { border-color: #2b2b2b; }
.pip.provisions.closed { background: #9a6a2f; }
.pip.treasure { border: none; border-radius: 0; background: var(--item-color); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pip.cannons.closed { background: #2b2b2b; }
.stock { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }

/* Treasure map spots */
.map-spots { display: grid; grid-template-columns: repeat(3, 150px); justify-content: center; gap: 8px; margin-bottom: 8px; }
.map-spot {
  --metal: #a8703a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 110px;
  padding: 0 0 4px;
  overflow: hidden;
  border: 2px solid var(--metal);
  border-radius: 10px;
  background: var(--card);
  text-align: center;
}
.map-spot.silver { --metal: #7d8a94; }
.map-spot.gold { --metal: #c39a12; }
.map-spot.empty { border-style: dashed; background: none; color: var(--muted); }
.map-spot.stolen { outline: 3px solid var(--danger); outline-offset: 1px; }
.map-head { display: flex; justify-content: space-between; gap: 6px; padding: 1px 8px; background: var(--metal); color: #fff; font-size: 12px; }
.map-spot:not(.empty) { justify-content: flex-start; }
.map-name { font-weight: 600; }
.map-clue { margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.15; }
.map-note { margin-top: 2px; padding: 0 4px; font-size: 12px; line-height: 1.2; color: var(--muted); }
.map-status { margin-block: auto; line-height: 0; }
.map-status svg { width: 40px; height: 40px; }
.map-status[data-status="arrow"] svg { width: 73px; }

/* Ship cards */
/* The ship cards are at the right. The current ship moves half a card toward the board. */
.fleet-cards { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fleet-cards .ship-card { width: 150px; flex: none; }
.fleet-cards .ship-card.current { margin-right: 75px; }
.ship-card { position: relative; }
.fleet-cards .ship-card { height: 124px; border: 2px solid; border-radius: 10px; background: var(--card); overflow: hidden; text-align: center; }
.party.ship-card, .stage.compact .party.ship-card { width: 150px; min-height: 110px; padding: 0; overflow: hidden; }
.fleet-cards .ship-card.current { outline: 3px solid var(--ink); outline-offset: 1px; }
.ship-card-head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 1px 6px;
  font-size: 11px;
}
.ship-card-head .party-name { font-size: 12px; }
/* The box has the proportions of the outline, so the outline does not stretch. */
.ship-art { position: relative; height: 84px; aspect-ratio: 26 / 25; margin: 2px auto 0; }
.ship-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ship-art svg .ship-piece { stroke: none; }
.card-spot { position: absolute; display: flex; transform: translate(-50%, -50%); }
.ship-art .pip, .ship-art .item, .ship-art .slot { width: 15px; height: 15px; }
.ship-art .pip { box-shadow: 0 0 0 1.5px #fff; }
.fleet-cards .ship-art .pip { width: 12px; height: 12px; border-width: 1.5px; }
.ship-art .pip.open { background: #fff; }
.ship-art .item .shape { box-shadow: 0 0 0 1.5px #fff; }
.ship-art .slot { opacity: 1; }
.ship-art .slot .shape { background: #fff; box-shadow: 0 0 0 1.5px #fff; }
.ship-art .slot .shape.provisions { background: #fff; border-color: #9a6a2f; }
.ship-art .slot .shape.cannons { background: #fff; border-color: #2b2b2b; }
.ship-art .item[aria-disabled="true"] { opacity: .85; }
.ship-special { padding: 0 3px; font-size: 10px; line-height: 1.1; color: var(--ink); }
.card-note { position: absolute; top: 20px; right: 4px; font-size: 11px; line-height: 1; color: var(--ink); }
.party .slots { margin-top: 4px; }

/* Draw piles and the last event card */
.piles { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.piles h2 { margin-bottom: 6px; }
.pile-place { position: relative; }
.pile-pass { position: absolute; left: calc(50% + 66px); top: 50%; transform: translateY(-50%); font-size: 13px; line-height: 1.15; text-align: center; color: var(--muted); }
.pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 150px;
  margin: 0 auto;
  border-radius: 10px;
  border: 2px solid #fff;
  color: #fff;
  box-shadow: 3px 3px 0 #fff, 4px 4px 0 var(--line), 7px 7px 0 #fff, 8px 8px 0 var(--line);
}
.pile.event { background: var(--card-event); }
.pile.inspiration { background: var(--card-inspiration); }
.pile.empty { background: none; border: 2px dashed var(--line); color: var(--muted); box-shadow: none; }
.pile-icon { line-height: 0; }
.pile-icon .action-picture { width: 56px; height: 42px; }
.pile-count { font-size: 22px; font-weight: 700; }
.pile-label { font-size: 12px; }
.event-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 150px;
  margin: 0 auto;
  padding: 4px;
  overflow: hidden;
  background: var(--card-event-face);
  border: 2px solid var(--card-event);
  border-radius: 10px;
}
.event-face.none { justify-content: center; border: 2px dashed var(--line); background: none; color: var(--muted); }
.event-face { justify-content: flex-start; }
.event-title { font-size: 13px; font-weight: 700; line-height: 1.15; }
.event-body { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; color: #000; }
.event-wind { line-height: 0; }
.event-wind .action-picture { width: 46px; height: 34px; }
.card-note .action-picture { display: inline-block; width: 14px; height: 11px; vertical-align: -1px; }
.ship-symbol { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
.event-turn { font-size: 26px; line-height: 1.05; }
.event-steps { font-size: 13px; line-height: 1.1; }
.event-move { display: flex; align-items: center; gap: 2px; margin-top: 8px; font-size: 24px; line-height: 1; }
.event-move .pirate-face { width: 24px; height: 24px; }
.event-letters { font-size: 28px; line-height: 1.1; }
.pirate-face.large { width: 40px; height: 40px; }

/* Actions under the map */
.action-spots, .play-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.action-spot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 150px;
  padding: 4px;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}
.action-spot.empty { border: 2px dashed var(--line); }
.action-spot.filled { border: 2px solid var(--card-action); background: var(--card); color: var(--ink); }
.action-spot.filled.free { border-color: var(--card-free); }
.play-row section, #end-turn { display: contents; }
.turn-buttons { display: flex; gap: 8px; }
.turn-buttons button { flex: 0 0 calc(50% - 4px); min-height: 48px; border-radius: 8px; font-size: 16px; font-weight: 600; }
.play-row { align-items: center; }
.action-card {
  --edge: var(--card-action);
  width: 110px;
  height: 150px;
  padding: 6px;
  border: 2px solid var(--edge);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.action-card.free-action { --edge: var(--card-free); }
/* The second card is behind the first card. The top of the word Retrieve shows above the first card. */
.action-card.double-action { --stack-rise: 18px; position: relative; }
.action-card.double-action::before {
  content: "Retrieve";
  position: absolute;
  top: calc(-2px - var(--stack-rise));
  left: -2px;
  z-index: -1;
  box-sizing: border-box;
  width: 110px;
  height: 150px;
  padding: 6px;
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--card);
  text-align: center;
}
.action-card.double-action:disabled::before { color: rgb(29 43 54 / .5); }
/* A raised card paints the second card above its own background, so only the part above the first card shows. */
.action-card.double-action:hover::before, .action-card.double-action:focus-visible::before { clip-path: inset(-3px -3px calc(100% - var(--stack-rise) - 2px) -3px); }
.action-card.double-action:hover:not(:disabled)::before { outline: 3px solid var(--edge); }
.action-card.active { outline: 3px solid var(--accent); outline-offset: 1px; }
.action-card.special-power { box-shadow: 0 0 14px 6px rgb(255 212 0 / .9); }
.action-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.action-card span, .action-spot.filled span, .hand-card span, .action-spot.played { white-space: pre-line; }
.action-spot.filled { flex-direction: column; justify-content: space-between; }
.card-separator { align-self: center; flex: none; }
.rose-separator { display: block; width: 34px; height: 34px; }
.rose-black { fill: #111; stroke: #111; stroke-width: .5; }
.rose-paper { fill: #fff; stroke: #111; stroke-width: .5; }
.card-or { font-size: 10px; font-weight: 400; line-height: 1; }
.action-picture { display: block; width: 92px; height: 70px; pointer-events: none; }
.hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 346px; }
.hand-card {
  --edge: var(--card-inspiration);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 110px;
  min-width: 0;
  height: 150px;
  padding: 4px;
  justify-content: flex-start;
  background: var(--card-inspiration-face);
  border: 2px solid var(--edge);
  border-radius: 10px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}
/* A card keeps its border color in all states. A disabled card dims its contents only. */
.action-card:disabled, .hand-card:disabled { opacity: 1; }
.action-card:disabled > *, .hand-card:disabled > *, .hand-card:disabled::after { opacity: .5; }
.action-card:hover:not(:disabled), .hand-card:hover:not(:disabled) { border-color: var(--edge); }
.action-card:not(.active):hover:not(:disabled), .hand-card:not(.active):hover:not(:disabled) { outline: 3px solid var(--edge); }
.hand-card .action-picture, .action-spot.played .action-picture, .action-card .action-picture, .action-spot.filled .action-picture { margin-block: auto; }
.action-spot.free { box-shadow: 0 0 14px 6px rgb(255 212 0 / .9); }
.action-spot.played { flex-direction: column; justify-content: flex-start; background: var(--card-inspiration-face); border: 2px solid var(--card-inspiration); color: #000; }
.hand-card.active { outline: 3px solid var(--ink); outline-offset: 1px; }

/* Animations */
.motion-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.fly { position: absolute; }
.fly > * { margin: 0; }
.fly-flip { position: absolute; perspective: 700px; }
.fly-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fly-side { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; backface-visibility: hidden; box-shadow: none; }
.fly-side.back { transform: rotateY(180deg); }
.fx { pointer-events: none; }
.cannon-ball { fill: #222; stroke: #fff; stroke-width: 1.5; opacity: 0; }

/* Space information */
.space-card {
  position: absolute;
  z-index: 5;
  width: 250px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgb(20 30 40 / .25);
}
.space-card h3 { margin: 0 28px 2px 0; font-size: 17px; }
.space-card p { margin: 0 0 6px; color: var(--muted); }
.space-card ul { margin: 0; padding-left: 18px; }
.space-card .close { position: absolute; top: 6px; right: 6px; padding: 0 8px; min-height: 28px; }

@media (max-width: 900px) {
  .game { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "piles" "board" "band" "turn" "side"; grid-template-rows: none; padding: 16px; }
  .game-top { grid-area: top; }
  .fleet-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .fleet-cards .ship-card.current { margin-right: 0; }

  .bottom-band { grid-template-columns: minmax(0, 1fr); }
  .hand { max-width: none; }
  .piles { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  #board { max-height: none; }
}

/* Restock dialog */
.restock-dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 16px 16px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
}
.restock-dialog::backdrop { background: rgb(20 30 40 / .55); }
.restock-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.restock-head h2 { margin: 0 auto 0 0; font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.restock-help { margin: 4px 0 8px; color: var(--muted); min-height: 1.4em; }
.stage {
  position: relative;
  width: min(92vw, calc(100vh - 150px), 720px);
  min-width: 320px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage-lines line { stroke: var(--line); stroke-width: .4; stroke-dasharray: 1 1; }
.party {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 196px;
  padding: 6px 8px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  text-align: center;
}
.stage.compact .party { width: 132px; padding: 4px; font-size: 12px; }
.party.current { border-color: var(--ink); border-width: 3px; }
.party.valid { border-color: var(--reach); box-shadow: 0 0 0 3px rgb(46 158 91 / .3); cursor: pointer; }
.party.over { background: #dcf3e4; }
.party-name { font-weight: 600; }
.party-note { color: var(--muted); font-size: 12px; }
.hub { width: 212px; background: var(--island); }
.hub.port { background: var(--port); }
.hub.water, .hub.dinghy { background: var(--water); }
.stage.compact .hub { width: 140px; }
.hub-icon { font-size: 34px; line-height: 1.1; }
.hub-icon .action-picture { width: 56px; height: 42px; margin-inline: auto; }
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 3px; min-height: 22px; }
.item, .slot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  flex: none;
}
.item { cursor: grab; touch-action: none; }
.item[aria-disabled="true"] { cursor: default; opacity: .55; }
.item.selected { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 50%; }
.item.dragging { opacity: .25; }
.slot { opacity: .7; }
.shape { display: block; width: 100%; height: 100%; pointer-events: none; }
.shape .action-picture { width: 100%; height: 100%; }
.shape.provisions { border-radius: 50%; background: #9a6a2f; border: 1px solid #5f3f18; }
.shape.cannons { border-radius: 50%; background: #2b2b2b; border: 1px solid #2b2b2b; }
.shape.treasure { background: var(--item-color); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.shape.card { display: flex; align-items: center; justify-content: center; border: 1px solid var(--card-inspiration); border-radius: 3px; background: var(--card-inspiration-face); font-size: 12px; line-height: 1; }
.slot .shape.provisions, .slot .shape.cannons { background: none; border-width: 2px; }
.drag-ghost { position: fixed; z-index: 10; width: 26px; height: 26px; pointer-events: none; transform: translate(-50%, -50%); }

/* On a wide screen, the 3 sets of cards have the same width. The cards in a full set overlap. */
@media (min-width: 901px) {
  .bottom-band { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
  .action-area { display: contents; }
  .hand, .play-row, .action-spots { flex-wrap: nowrap; max-width: none; min-width: 0; }
  .hand > *, .play-row button, .action-spots > * { flex: none; position: relative; }
  .hand > :hover, .play-row button:hover, .play-row button:focus-visible, .action-spots > :hover { z-index: 1; }
}

@media (max-width: 700px) {
  .restock-dialog { padding: 8px; }
  .party, .stage.compact .party { width: 104px; padding: 3px; font-size: 11px; }
  .hub, .stage.compact .hub { width: 104px; }
  .hub-icon { font-size: 22px; }
  .hub-icon .action-picture { width: 34px; height: 26px; }
  .item, .slot { width: 18px; height: 18px; }
  .party.ship-card, .stage.compact .party.ship-card { width: 150px; }
}

/* The rows of the ship list must fit on a phone. */
@media (max-width: 560px) {
  .ship-picker { padding: 8px; }
  .setup-ship-table { flex-wrap: wrap; justify-content: center; }
  .setup-ship-table .ship-picker { flex-basis: 100%; }
  .ship-choice { min-height: 48px; }
  .ship-list { font-size: 15px; }
  .ship-choice { gap: 6px; padding: 10px 2px; }
  .ship-choice input { width: 16px; height: 16px; }
  .ship-choice label { grid-template-columns: auto 50px 1fr; gap: 6px; }
  .ship-name { gap: 4px; }
  .ship-name .ship-icon { width: 24px; height: 24px; }
  .setup-seat { width: 64px; padding: 5px 2px; font-size: 13px; }
}

/* The moves go below the ship list when the page is too narrow for both. */
@media (max-width: 900px) {
  .setup-ship-table { flex-wrap: wrap; justify-content: center; }
  .setup-ship-table .ship-picker { flex-basis: 100%; }
}

@media (max-width: 900px) {
  #setup-title, .setup > p, .setup-toggles, .setup-buttons { width: 100%; }
}