/* Plunder — visual theme. Ink & gold like the box cover, parchment like the
   rulebook pages, blood-red brush accents. Mobile-first; safe-area aware. */

:root {
  --ink: #0b1016;
  --ink-2: #121a23;
  --ink-3: #1b2631;
  --ink-line: rgba(201, 162, 74, 0.35);
  --gold: #d9ad46;
  --gold-hi: #f3d27c;
  --gold-lo: #8f6a1f;
  --parch: #efe1bf;
  --parch-2: #e3cf9f;
  --parch-ink: #2a1c10;
  --blood: #a3201b;
  --blood-hi: #d0382f;
  --sea: #1b4d63;
  --text: #f1e6cc;
  --text-dim: #b9ab8c;
  --ok: #5cc27a;
  --warn: #e7a33a;
  --font-display: "Pirata One", "IM Fell English SC", Georgia, serif;
  --font-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --font-body: "IM Fell English", Georgia, "Times New Roman", serif;
  --r: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --hud-h: 0px;
}

/* no text selection, callouts or double-tap zoom anywhere in the app (iOS
   home-screen apps especially) — only text fields select */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--ink); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none;
  touch-action: none; overscroll-behavior: none;
}
/* the page itself never scrolls: a nudged document leaves every tap off by the
   nudge on iPhones (only a rotation used to put it back) — see app.js guardViewport */
body { position: fixed; inset: 0; }
button, .btn, .live, .rcard, .build-item, .seat, .pchip, .swatch, .drawer, .modal { touch-action: manipulation; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; font-family: var(--font-body); }
button { font-family: inherit; color: inherit; }
img { -webkit-user-drag: none; }
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0; z-index: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%); }
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#ui > * { pointer-events: none; }
#ui .live, #ui button, #ui input, #ui a, #ui select, #ui textarea { pointer-events: auto; }
#screen { position: absolute; inset: 0; }
#hud { position: absolute; inset: 0; }
#overlay { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#modal-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#toast-root { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + 64px); z-index: 80; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px; }

/* ------------------------------------------------------------------ boot */
#boot { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: #07090c url("../assets/art/cover.jpg") center / cover no-repeat; transition: opacity 0.6s ease; }
#boot::before { content: ""; position: absolute; inset: 0; background: rgba(5, 7, 10, 0.55); }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { position: relative; text-align: center; width: min(84vw, 520px); }
.boot-logo { width: 100%; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.8)); }
.boot-bar { margin: 26px auto 10px; height: 6px; width: 70%; border-radius: 4px; background: rgba(255, 255, 255, 0.08);
  overflow: hidden; border: 1px solid var(--ink-line); }
.boot-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  transition: width 0.3s ease; }
.boot-msg { color: var(--text-dim); font-style: italic; font-size: 15px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.5);
  font-family: var(--font-sc); font-size: 18px; letter-spacing: 0.02em; cursor: pointer;
  color: #23170a; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
  background: linear-gradient(180deg, #f6d47e 0%, #dcae45 48%, #b9862b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 220, 0.75), inset 0 -2px 0 rgba(90, 55, 10, 0.45), 0 3px 0 #5d3f10, 0 6px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.08s ease;
  white-space: nowrap; user-select: none;
}
.btn:hover { filter: brightness(1.07); }
.btn:active, .btn.pressed { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 250, 220, 0.6), inset 0 -1px 0 rgba(90, 55, 10, 0.4), 0 1px 0 #5d3f10, 0 3px 8px rgba(0, 0, 0, 0.4); }
.btn[disabled], .btn.disabled { filter: grayscale(0.85) brightness(0.62); cursor: default; transform: none; }
.btn .ico { font-size: 1.1em; line-height: 1; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 15px; border-radius: 8px; }
.btn.tiny { min-height: 30px; padding: 4px 10px; font-size: 14px; border-radius: 7px; }
.btn.wide { width: 100%; }
.btn.big { min-height: 58px; font-size: 22px; padding: 12px 26px; }
.btn.dark {
  color: var(--text); text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #2a3643 0%, #18212b 100%); border: 1px solid var(--ink-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 #05080b, 0 6px 14px rgba(0, 0, 0, 0.45);
}
.btn.red {
  color: #fff3e6; text-shadow: 0 1px 0 #3a0705;
  background: linear-gradient(180deg, #d9463b 0%, #a3201b 55%, #7d1410 100%);
  box-shadow: inset 0 1px 0 rgba(255, 200, 190, 0.55), inset 0 -2px 0 rgba(60, 5, 3, 0.5), 0 3px 0 #4a0806, 0 6px 14px rgba(0, 0, 0, 0.45);
}
.btn.green {
  color: #f2fff4; text-shadow: 0 1px 0 #0c3317;
  background: linear-gradient(180deg, #58c27a 0%, #2f8f4f 55%, #1f6a39 100%);
  box-shadow: inset 0 1px 0 rgba(220, 255, 230, 0.5), inset 0 -2px 0 rgba(10, 50, 20, 0.5), 0 3px 0 #103d1f, 0 6px 14px rgba(0, 0, 0, 0.45);
}
.btn.ghost { background: transparent; border: 1px solid var(--ink-line); color: var(--text); box-shadow: none; text-shadow: none; }
.btn.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,250,220,.75), inset 0 -2px 0 rgba(90,55,10,.45), 0 3px 0 #5d3f10, 0 0 0 0 rgba(243,210,124,.55); }
  50% { box-shadow: inset 0 1px 0 rgba(255,250,220,.75), inset 0 -2px 0 rgba(90,55,10,.45), 0 3px 0 #5d3f10, 0 0 0 10px rgba(243,210,124,0); } }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11, 16, 22, 0.78); border: 1px solid var(--ink-line); color: var(--gold-hi); font-size: 20px;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  position: relative;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--blood-hi); box-shadow: 0 0 0 2px var(--ink); }

/* ------------------------------------------------------------------ panels */
.panel {
  background: linear-gradient(180deg, rgba(20, 28, 37, 0.94), rgba(11, 16, 22, 0.96));
  border: 1px solid var(--ink-line); border-radius: var(--r); box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.parchment {
  color: var(--parch-ink);
  background: #e9d8b0 url("../assets/art/parchment.jpg") center / cover;
  border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(110, 70, 20, 0.35);
  border: 1px solid #a88a52;
}
.brush-title {
  font-family: var(--font-display); font-weight: normal; letter-spacing: 0.02em;
  font-size: 30px; margin: 0 0 10px; color: #f4e7c9; text-align: center; line-height: 1.1;
  padding: 10px 20px 12px; position: relative;
  background: radial-gradient(ellipse at center, rgba(8, 8, 8, 0.92) 30%, rgba(8, 8, 8, 0.75) 55%, transparent 72%);
  text-shadow: 0 2px 0 #000;
}
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 12px 0; border: 0; }
.muted { color: var(--text-dim); }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ screens */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; pointer-events: auto; touch-action: pan-y;
  animation: fadeIn 0.35s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.title-screen { justify-content: center; gap: 18px; }
.title-logo { width: min(92vw, 640px); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.9)); margin-bottom: 4px; animation: logoIn 1s cubic-bezier(.2,.8,.2,1); }
@keyframes logoIn { from { opacity: 0; transform: scale(0.92) translateY(-12px); } to { opacity: 1; transform: none; } }
.tagline { font-style: italic; color: var(--text); text-shadow: 0 2px 6px #000; text-align: center; font-size: 18px; margin-top: -10px; }
.menu { display: flex; flex-direction: column; gap: 12px; width: min(92vw, 380px); }
.menu .btn { width: 100%; }
.menu-foot { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.card-panel { width: min(94vw, 520px); padding: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-family: var(--font-sc); color: var(--gold-hi); font-size: 15px; letter-spacing: 0.04em; }
.input {
  width: 100%; min-height: 46px; padding: 10px 14px; font-size: 18px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.45); color: var(--text); border: 1px solid var(--ink-line); outline: none;
}
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 173, 70, 0.2); }
.input.code { text-transform: uppercase; letter-spacing: 0.4em; text-align: center; font-family: var(--font-display); font-size: 34px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.6); cursor: pointer; position: relative;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.swatch.on { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(243, 210, 124, 0.35), inset 0 -4px 8px rgba(0, 0, 0, 0.35); }
.swatch.taken { opacity: 0.3; cursor: default; }
.swatch.taken::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.seg { display: inline-flex; border: 1px solid var(--ink-line); border-radius: 10px; overflow: hidden; }
.seg button { background: rgba(0, 0, 0, 0.35); border: 0; color: var(--text); padding: 8px 12px; font-size: 15px; cursor: pointer; font-family: var(--font-sc); min-width: 44px; }
.seg button.on { background: linear-gradient(180deg, #f1cd71, #c39434); color: #2a1a06; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(201, 162, 74, 0.15); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .lbl { flex: 1; }
.toggle-row .lbl small { display: block; color: var(--text-dim); font-size: 13px; }
.slider { display: flex; align-items: center; gap: 8px; flex: none; }
.slider input[type="range"] { width: clamp(110px, 32vw, 180px); accent-color: var(--gold); touch-action: pan-x; }
.slider small, .slider .sv { font-size: 12px; color: var(--text-dim); min-width: 32px; text-align: center; }
/* ---- Settings, in tabs (src/ui/screens.js SC.settings): the tabs stay put above the page, which keeps
   one height whichever tab is open (no jumping sheet) */
.set-modal { width: min(96vw, 520px); height: min(86vh, 620px); }
.set-modal .mbody { flex: 1 1 auto; min-height: 0; }
.set-tabs { display: flex; gap: 4px; padding: 0 14px 8px; border-bottom: 1px solid rgba(201, 162, 74, 0.22); }
.set-tabs button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border: 1px solid transparent;
  border-radius: 10px; background: none; color: var(--text-dim); font-family: var(--font-sc); font-size: 14px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.set-tabs button .icon { width: 22px; height: 22px; }
.set-tabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.set-tabs button.on { color: #2a1a06; background: linear-gradient(180deg, #f1cd71, #c39434); border-color: rgba(255, 236, 180, 0.5); }
.set-page { padding-top: 2px; }
.set-group { margin: 14px 0 0; font-family: var(--font-sc); font-size: 13px; letter-spacing: 0.08em; color: var(--gold); }
.set-group:first-child { margin-top: 4px; }
.set-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 10px 0 4px; font-size: 14px; }
.set-keys b { font-weight: normal; color: var(--text); white-space: nowrap; }
.set-keys span { color: var(--text-dim); }
.set-page .hb-cloudset, .set-page .nt-box { margin-top: 0; }
.set-cats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.set-cats li { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.set-cats b { font-weight: normal; color: var(--text); }
.set-cats span { font-size: 13px; color: var(--text-dim); }
@media (max-width: 380px) {
  .set-tabs { gap: 2px; padding: 0 8px 6px; }
  .set-tabs button { font-size: 12.5px; padding: 6px 1px 5px; }
  .set-tabs button .icon { width: 20px; height: 20px; }
}
/* a row with a description and a slider with words at its ends (Animation speed, Island shallows): the words
   on top, the slider the full width beneath (the Settings window is phone-narrow everywhere) */
.toggle-row:has(> .slider > small):has(> .lbl > small) { flex-wrap: wrap; row-gap: 6px; }
.toggle-row:has(> .slider > small):has(> .lbl > small) > .lbl,
.toggle-row:has(> .slider > small):has(> .lbl > small) > .slider { flex: 1 1 100%; }
.toggle-row:has(> .slider > small):has(> .lbl > small) > .slider input[type="range"] { flex: 1; width: auto; min-width: 0; }
.switch { width: 52px; height: 30px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--ink-line); position: relative; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #c9bfa8; transition: transform 0.18s ease, background 0.18s ease; }
.switch.on { background: linear-gradient(180deg, #e2b74a, #a77c22); }
.switch.on::after { transform: translateX(22px); background: #fff7e0; }

/* lobby */
.lobby { width: min(96vw, 760px); gap: 14px; }
/* Leave / Set Sail! stay in reach while the seats and rules scroll by */
.lobby-acts { position: sticky; bottom: calc(-16px - var(--safe-b)); z-index: 3; margin-top: auto;
  padding: 12px 0 calc(var(--safe-b) + 16px); background: linear-gradient(to top, rgba(11, 16, 22, 0.96) 72%, rgba(11, 16, 22, 0)); }
.room-code-box { text-align: center; padding: 14px; }
.room-code { font-family: var(--font-display); font-size: 56px; letter-spacing: 0.18em; color: var(--gold-hi); line-height: 1; text-shadow: 0 3px 0 #000, 0 0 24px rgba(243, 210, 124, 0.25); }
.room-sub { color: var(--text-dim); font-size: 14px; margin-top: 4px; }
.qr { background: #fff; padding: 8px; border-radius: 8px; display: inline-block; line-height: 0; }
.qr img, .qr svg { width: 120px; height: 120px; image-rendering: pixelated; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.seat {
  position: relative; padding: 12px 10px 10px; border-radius: 12px; text-align: center; min-height: 128px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.25)); border: 1px solid var(--ink-line);
  display: flex; flex-direction: column; align-items: center; gap: 6px; animation: popIn 0.35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes popIn { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.seat.empty { border-style: dashed; color: var(--text-dim); justify-content: center; cursor: pointer; }
.seat .ship-ico { width: 64px; height: 50px; }
.seat .nm { font-family: var(--font-sc); font-size: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .tags { font-size: 12px; color: var(--text-dim); }
.seat .kick { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.45); color: #ddd; cursor: pointer; }
.seat .off { position: absolute; top: 6px; left: 8px; font-size: 11px; color: var(--warn); }
.lobby .watchers { margin-top: 10px; font-size: 14px; color: var(--text-dim); }
.big-screen-tag { color: var(--gold); letter-spacing: 0.12em; font-weight: bold; }
.mate-note { padding: 10px 14px; font-size: 14px; color: var(--gold-hi); border-color: rgba(217, 173, 70, 0.5); }
.tv-hint { font-size: 15px; justify-self: center; padding: 4px 14px; border-radius: 14px; background: rgba(11, 16, 22, 0.78); text-shadow: 0 1px 2px #000; }
.lobby.tv .tv-hint { font-size: clamp(15px, 1.2vw, 20px); color: var(--text); }
/* the big screen's lobby (host without a seat): code + QR on the left, big
   enough to read across the room; captains and rules on the right */
.lobby.tv { width: min(96vw, 1500px); display: grid; grid-template-columns: minmax(320px, 0.9fr) 1.4fr;
  grid-template-areas: "code seats" "code rules" "acts acts" "hint hint"; align-items: start; gap: 18px; }
.lobby.tv .room-code-box { grid-area: code; padding: 28px 22px; position: sticky; top: 0; }
.lobby.tv .seats-panel { grid-area: seats; }
.lobby.tv .rules-panel { grid-area: rules; }
.lobby.tv .lobby-acts { grid-area: acts; }
.lobby.tv .tv-hint { grid-area: hint; }
.lobby.tv .room-code-box > .row { flex-direction: column; align-items: center; gap: 22px; }
.lobby.tv .room-code { font-size: clamp(72px, 9vw, 150px); }
.lobby.tv .room-sub { font-size: clamp(15px, 1.3vw, 22px); }
.lobby.tv .qr svg { width: clamp(150px, 15vw, 260px); height: clamp(150px, 15vw, 260px); }
.lobby.tv .seats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.lobby.tv .seat { min-height: 160px; }
.lobby.tv .seat .ship-ico { width: 92px; height: 72px; }
.lobby.tv .seat .nm { font-size: clamp(18px, 1.6vw, 26px); }
.lobby.tv .watchers { font-size: clamp(14px, 1.2vw, 20px); }
@media (max-width: 900px) {
  .lobby.tv { display: flex; flex-direction: column; width: min(96vw, 760px); }
  .lobby.tv .room-code-box { position: static; }
}
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: rgba(217, 173, 70, 0.18); color: var(--gold-hi); border: 1px solid var(--ink-line); }

/* ------------------------------------------------------------------ HUD */
.hud-top {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 8px) 0 calc(var(--safe-l) + 8px);
}
.scoreboard { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; pointer-events: auto; touch-action: pan-x; }
.scoreboard::-webkit-scrollbar { display: none; }
.pchip {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border-radius: 24px;
  background: rgba(11, 16, 22, 0.82); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease;
  min-height: 42px;
}
.pchip.me .nm::after { content: " (you)"; color: var(--text-dim); font-size: 11px; }
.pchip .flag { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35); border: 2px solid rgba(0, 0, 0, 0.5); flex: none; }
.pchip .meta { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.pchip .nm { font-family: var(--font-sc); font-size: 14px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip .sub { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.pchip .pts { font-family: var(--font-display); font-size: 24px; color: var(--gold-hi); margin-left: 2px; min-width: 22px; text-align: right; }
.pchip .pts small { font-size: 12px; color: var(--text-dim); font-family: var(--font-body); }
.pchip .offline { color: var(--warn); font-size: 11px; }
.pchip.bump { animation: bump 0.6s ease; }
/* the bigger seas: up to 12 captains share the strip, so only the captain on the move keeps their tally */
.scoreboard.many .pchip { gap: 5px; padding-right: 8px; }
.scoreboard.many .pchip:not(.active) .sub { display: none; }
.scoreboard.many .pchip .nm { max-width: 84px; }
.scoreboard.many .pchip .pts { font-size: 20px; }
.scoreboard.many { flex-wrap: wrap; row-gap: 4px; overflow-x: visible; } /* (every captain in sight: two rows, not a scroll) */
@media (max-width: 480px) and (orientation: portrait) {
  .scoreboard.many { gap: 4px; }
  .scoreboard.many .pchip { padding: 2px 6px 2px 2px; gap: 3px; min-height: 28px; }
  .scoreboard.many .pchip .flag { width: 22px; height: 22px; font-size: 11px; }
  .scoreboard.many .pchip .pts { font-size: 16px; min-width: 10px; }
}
/* − n + (the setup screens' bot captains) */
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper .btn { min-width: 44px; min-height: 40px; padding: 2px 0; font-size: 22px; line-height: 1; }
.stepper b { min-width: 5.2em; text-align: center; font-family: var(--font-sc); font-size: 17px; color: var(--gold-hi); font-weight: normal; }
@keyframes bump { 30% { transform: scale(1.06); } }
.hud-icons { display: flex; flex-direction: column; gap: 8px; flex: none; }

/* the turn strip and, under it, the objective chip: one full-width column below
   the captains' row (full width so a strip can use it all: centring with left: 50%
   capped it at half the screen, and phones wrapped it into the chip below) */
.hud-mid {
  position: absolute; left: 0; right: 0; top: calc(var(--hudtop, 54px) + 8px); display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 calc(var(--safe-r) + 8px) 0 calc(var(--safe-l) + 8px); pointer-events: none;
}
.turn-strip {
  padding: 6px 16px; border-radius: 20px; background: rgba(11, 16, 22, 0.8); border: 1px solid var(--ink-line);
  font-size: 15px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.turn-strip b { font-family: var(--font-sc); }
.turn-strip .timer { color: var(--warn); margin-left: 6px; font-variant-numeric: tabular-nums; }

.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 calc(var(--safe-r) + 8px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 8px);
}
.hand { display: flex; gap: 6px; align-items: flex-end; pointer-events: auto; }
.rcard {
  position: relative; width: 50px; height: 72px; border-radius: 7px; background-size: cover; background-position: center;
  border: 2px solid rgba(255, 245, 220, 0.85); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55); flex: none;
  transition: transform 0.2s ease;
}
.rcard .n {
  position: absolute; right: -7px; bottom: -7px; min-width: 26px; height: 26px; border-radius: 13px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px;
  background: var(--ink); color: var(--gold-hi); border: 2px solid var(--gold); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.rcard.zero { filter: grayscale(0.9) brightness(0.55); }
.rcard .lbl { position: absolute; left: 0; right: 0; top: 2px; text-align: center; font-family: var(--font-sc); font-size: 11px;
  color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.rcard.wood { background-image: url("../assets/art/res-wood.png"); }
.rcard.iron { background-image: url("../assets/art/res-iron.png"); }
.rcard.rum { background-image: url("../assets/art/res-rum.png"); }
.rcard.gold { background-image: url("../assets/art/res-gold.png"); }
.rcard.ppc { background-image: url("../assets/art/plunder-card.png"); }
.rcard.flash { animation: cardFlash 0.8s ease; }
@keyframes cardFlash { 0% { transform: translateY(0); } 25% { transform: translateY(-12px) scale(1.1); box-shadow: 0 0 18px rgba(243, 210, 124, 0.9); } 100% { transform: none; } }
.rcard.drop { animation: cardDrop 0.8s ease; }
@keyframes cardDrop { 25% { transform: translateY(8px) scale(0.9); filter: brightness(0.6) sepia(1) hue-rotate(-40deg) saturate(4); } 100% { transform: none; } }
.hand-sep { width: 1px; align-self: stretch; background: var(--ink-line); margin: 0 2px; }
/* 5 Gold on your turn: the Plunder card offers to bury them (tap) */
.rcard.can-bury { cursor: pointer; border-color: #ffe08a; animation: buryGlow 1.6s ease-in-out infinite; }
@keyframes buryGlow { 0%, 100% { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(243, 210, 124, 0); }
  50% { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(243, 210, 124, 0.75), 0 0 18px rgba(243, 210, 124, 0.7); } }
.rcard .bury-tag { position: absolute; left: -7px; top: -8px; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; color: #1b1408; background: linear-gradient(180deg, #ffe9a6, #d9ad46); border: 1px solid #6b4c12; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); }

.actionbar { display: flex; gap: 8px; width: 100%; max-width: 620px; justify-content: center; pointer-events: auto; }
.actionbar .btn { flex: 1; min-width: 0; padding: 8px 6px; font-size: 16px; }
.actionbar .btn .sub { display: block; font-size: 11px; font-family: var(--font-body); opacity: 0.85; line-height: 1; }
.actionbar .btn .stack { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }

.shipcard {
  width: min(96vw, 680px); padding: 6px 8px 6px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; pointer-events: auto;
  animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.shipcard .info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; font-size: 14px; }
.shipcard .title { font-family: var(--font-sc); font-size: 15px; white-space: nowrap; }
.shipcard .st { white-space: nowrap; color: var(--text); }
.shipcard .st.mv { color: var(--gold-hi); }
.shipcard .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.shipcard .acts .btn { flex: 0 1 auto; }
.shipcard .x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink-line); background: rgba(0, 0, 0, 0.3); color: var(--text); cursor: pointer; flex: none; }
.pegs { display: inline-flex; gap: 3px; vertical-align: middle; }
/* life pegs: red, like the box's */
.peg { display: inline-block; width: 9px; height: 16px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #ff5b4f, #c41f19 55%, #8e130f);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.35); }
.peg.off { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.hint { font-size: 14px; color: var(--text-dim); font-style: italic; text-align: center; }

/* ------------------------------------------------------------------ TV
   a big-screen host or a spectator (src/ui/tv.js, src/render/director.js):
   a race board on the left, lower-thirds bottom-left, the play-by-play
   ticker bottom-right over the table code and the camera switch */
.letterbox { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.letterbox i { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 0.7s cubic-bezier(.3, .7, .3, 1); }
.letterbox i:first-child { top: 0; }
.letterbox i:last-child { bottom: 0; }
.letterbox.on i { height: 8vh; }
#hud.tv .hand { display: none; }
#hud.tv .turn-strip { font-size: clamp(15px, 1.15vw, 22px); }
.tv-board { position: absolute; left: calc(var(--safe-l) + 12px); top: calc(var(--hudtop, 54px) + 6px); width: clamp(230px, 19vw, 360px);
  display: none; flex-direction: column; gap: 8px; pointer-events: none; }
.tv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 4px;
  font-family: var(--font-sc); font-size: clamp(14px, 1.1vw, 21px); color: var(--gold-hi); text-shadow: 0 2px 4px #000; }
.tv-head .rnd { color: var(--text-dim); font-size: 0.85em; }
.tv-cap {
  position: relative; padding: 8px 10px 8px 12px; border-radius: 12px; background: rgba(11, 16, 22, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.08); border-left: 5px solid var(--cap); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tv-cap.active { transform: translateX(8px); box-shadow: 0 0 0 2px var(--glow), 0 0 26px rgba(243, 210, 124, 0.35), 0 4px 14px rgba(0, 0, 0, 0.45); }
.tv-cap .r1 { display: flex; align-items: center; gap: 8px; }
.tv-cap .flag { width: clamp(26px, 2vw, 38px); height: clamp(26px, 2vw, 38px); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: clamp(13px, 1vw, 19px); border: 2px solid rgba(0, 0, 0, 0.5); flex: none; }
.tv-cap .nm { flex: 1; min-width: 0; font-family: var(--font-sc); font-size: clamp(16px, 1.35vw, 26px); color: var(--glow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-cap .pts { font-family: var(--font-display); font-size: clamp(24px, 2.1vw, 40px); color: var(--gold-hi); line-height: 1; white-space: nowrap; }
.tv-cap .pts small { font-size: 0.45em; color: var(--text-dim); font-family: var(--font-body); }
.tv-board .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); margin: 6px 0 4px; overflow: hidden; }
.tv-board .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cap, var(--gold)), var(--glow, var(--gold-hi))); transition: width 0.8s ease; }
.tv-cap .st { font-size: clamp(12px, 0.95vw, 17px); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-cap .away { color: var(--warn); }
.tv-cap .now { font-size: clamp(12px, 0.95vw, 17px); color: var(--gold-hi); margin-top: 3px; }
.tv-cap.bump { animation: bump 0.6s ease; }
/* the bigger seas: up to 12 captains on the race board, so each card is slimmer */
.tv-board.many { gap: 4px; }
.tv-board.many .tv-cap { padding: 4px 8px 4px 10px; }
.tv-board.many .tv-cap:not(.active) .st { display: none; }
.tv-board.many .bar { margin: 3px 0 1px; height: 4px; }
.tv-board.many .tv-cap .pts { font-size: clamp(20px, 1.7vw, 32px); }
.tv-team { display: flex; justify-content: space-between; gap: 8px; padding: 4px 4px 0; font-family: var(--font-sc); font-size: clamp(14px, 1.1vw, 20px); text-shadow: 0 2px 4px #000; }
.tv-ticker { position: absolute; right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 60px); width: min(40vw, 640px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.tv-ticker .ln { padding: 5px 12px; border-radius: 8px; background: rgba(11, 16, 22, 0.74); font-size: clamp(13px, 1.05vw, 20px);
  opacity: 0.6; text-shadow: 0 1px 2px #000; max-width: 100%; }
.tv-ticker .ln.new { opacity: 1; border-right: 3px solid var(--gold); animation: tickIn 0.4s ease; }
@keyframes tickIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.tv-lower { position: absolute; left: calc(var(--safe-l) + 12px); bottom: calc(var(--safe-b) + 18px); max-width: min(56vw, 900px);
  padding: 10px 26px 12px 18px; border-radius: 4px 14px 14px 4px; background: linear-gradient(90deg, rgba(11, 16, 22, 0.95), rgba(11, 16, 22, 0.82));
  border-left: 8px solid var(--cap, var(--gold)); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55); pointer-events: none;
  transform: translateX(calc(-100% - 40px)); opacity: 0; transition: transform 0.45s cubic-bezier(.2, .9, .3, 1.1), opacity 0.3s ease; }
.tv-lower.show { transform: none; opacity: 1; }
.tv-lower .k { font-family: var(--font-sc); letter-spacing: 0.12em; text-transform: uppercase; color: var(--glow, var(--gold-hi)); font-size: clamp(13px, 1.05vw, 20px); }
.tv-lower .t { font-family: var(--font-display); font-size: clamp(24px, 2.5vw, 50px); color: #fff; line-height: 1.05; text-shadow: 0 3px 0 #000; }
.tv-corner { position: absolute; right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 12px); display: flex; align-items: center; gap: 8px; }
.tv-code { display: flex; align-items: baseline; gap: 8px; padding: 5px 12px; border-radius: 10px; background: rgba(11, 16, 22, 0.82); border: 1px solid var(--ink-line); }
.tv-code small { font-size: 11px; color: var(--text-dim); letter-spacing: 0.14em; }
.tv-code b { font-family: var(--font-display); font-size: clamp(20px, 1.7vw, 32px); color: var(--gold-hi); letter-spacing: 0.12em; line-height: 1; }
.tv-code .w { font-size: 14px; color: var(--text-dim); }
.tv-cam.on { border-color: var(--gold); color: var(--gold-hi); }
/* a big screen: the race board replaces the captains' chips */
@media (min-width: 900px) and (min-height: 560px) {
  .tv-board { display: flex; }
  #hud.tv .scoreboard { visibility: hidden; }
}
/* a TV across the room: the dice, compasses and treasure cards come up bigger */
@media (min-width: 1500px) and (min-height: 820px) {
  body.tv-mode .dice-panel, body.tv-mode .compass-layer > *, body.tv-mode .tcard-stage > * { zoom: 1.3; }
}
/* a spectator's phone: chips stay, the ticker runs along the bottom */
@media (max-width: 899px), (max-height: 559px) {
  .tv-ticker { left: calc(var(--safe-l) + 8px); right: calc(var(--safe-r) + 8px); width: auto; bottom: calc(var(--safe-b) + 8px); align-items: stretch; }
  .tv-ticker .ln:not(:nth-last-child(-n+2)) { display: none; }
  .tv-corner { right: calc(var(--safe-r) + 8px); bottom: calc(var(--safe-b) + 84px); }
  .tv-code { padding: 3px 8px; }
  .tv-code small { display: none; }
  .tv-lower { bottom: calc(var(--safe-b) + 128px); max-width: 92vw; padding: 8px 18px 9px 14px; }
  #hud.tv .hud-bottom { padding-bottom: calc(var(--safe-b) + 124px); }
}

.prompt-bar {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--hudtop, 54px) + 4px); z-index: 2;
  width: min(94vw, 560px); padding: 10px 14px; text-align: center; pointer-events: auto; animation: slideDown 0.25s ease;
}
@keyframes slideDown { from { transform: translate(-50%, -10px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.prompt-bar .ptxt { font-size: 16px; margin-bottom: 8px; }
.prompt-bar .row { justify-content: center; flex-wrap: wrap; }

/* drawers: log & chat */
.drawer {
  position: absolute; top: calc(var(--hudtop, 54px) + 6px); right: calc(var(--safe-r) + 8px); width: min(92vw, 380px);
  max-height: calc(100% - var(--safe-t) - var(--safe-b) - 240px); min-height: 200px; display: flex; flex-direction: column; pointer-events: auto;
  animation: slideIn 0.2s ease; z-index: 5;
}
@keyframes slideIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer .tabs { display: flex; border-bottom: 1px solid var(--ink-line); }
.drawer .tabs button { flex: 1; background: none; border: 0; padding: 10px; font-family: var(--font-sc); font-size: 16px; color: var(--text-dim); cursor: pointer; }
.drawer .tabs button.on { color: var(--gold-hi); box-shadow: inset 0 -2px 0 var(--gold); }
.drawer .body { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 14.5px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.logline { padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); line-height: 1.3; }
.logline.sys { color: var(--gold-hi); }
.chatline { padding: 3px 0; }
.chatline .who { font-family: var(--font-sc); }
.chatline.sys { color: var(--text-dim); font-style: italic; }
.chat-in { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--ink-line); }
.chat-in .input { min-height: 40px; font-size: 16px; }
.emotes { display: flex; gap: 4px; padding: 0 8px 8px; flex-wrap: wrap; }
.emotes button { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ink-line); border-radius: 16px; padding: 4px 10px; color: var(--text); font-size: 13px; cursor: pointer; }

.speech {
  position: absolute; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 12px; font-size: 14px; max-width: 220px;
  background: #fbf3dd; color: #2a1c10; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); pointer-events: none; animation: popIn 0.25s ease;
  white-space: normal; text-align: center; z-index: 3;
}
.speech::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fbf3dd; border-bottom: 0; }
.speech b { font-family: var(--font-sc); display: block; font-size: 12px; }

/* ------------------------------------------------------------------ modals */
.modal-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px;
  padding-top: calc(var(--safe-t) + 14px); padding-bottom: calc(var(--safe-b) + 14px); pointer-events: auto; animation: fadeOnly 0.2s ease; }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
.modal-wrap.dim { background: rgba(3, 5, 8, 0.55); }
.modal {
  width: min(96vw, 500px); max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn 0.28s cubic-bezier(.2,1.2,.4,1);
}
@keyframes modalIn { from { transform: translateY(24px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.modal .mhead { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.modal .mhead h2 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 28px; color: var(--gold-hi); flex: 1; line-height: 1.05; }
.modal.parchment .mhead h2 { color: #1b120a; }
.modal .mbody { padding: 4px 14px 12px; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.modal .mfoot { padding: 10px 14px calc(12px); display: flex; gap: 8px; border-top: 1px solid var(--ink-line); flex-wrap: wrap; }
.modal .mfoot .btn { flex: 1; }
.modal .close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ink-line); background: rgba(0, 0, 0, 0.3); color: var(--text); font-size: 18px; cursor: pointer; flex: none; }
.modal.parchment .close { color: #2a1c10; border-color: rgba(60, 40, 20, 0.4); background: rgba(255, 255, 255, 0.25); }
.countdown { height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; margin: 0 14px; }
.countdown i { display: block; height: 100%; background: linear-gradient(90deg, var(--blood-hi), var(--warn)); transition: width 0.25s linear; }

@media (max-width: 600px) {
  .modal-wrap.sheet { align-items: flex-end; padding: 0; }
  .modal-wrap.sheet .modal { width: 100%; border-radius: 16px 16px 0 0; max-height: 86%; padding-bottom: var(--safe-b); animation: sheetIn 0.3s cubic-bezier(.2,1,.3,1); }
  .modal-wrap.sheet .set-modal { height: 86%; } /* (Settings: one height for every tab, so it doesn't jump) */
  @keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }
}

.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.build-item {
  position: relative; border-radius: 12px; padding: 10px; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.25)); border: 1px solid var(--ink-line);
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 0.12s ease, border-color 0.12s ease;
}
.build-item:active { transform: scale(0.97); }
/* can't build it: the item dims, but its cost row stays bright so you can see
   which cards you already hold */
.build-item.off { cursor: default; }
.build-item.off > :not(.cost) { opacity: 0.45; }
.build-item.sel { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217, 173, 70, 0.35); }
.build-item img { height: 64px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.build-item .nm { font-family: var(--font-sc); font-size: 18px; }
.cost { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.mini { width: 22px; height: 31px; border-radius: 3px; background-size: cover; background-position: center; border: 1px solid rgba(255, 245, 220, 0.8); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.mini.wood { background-image: url("../assets/art/res-wood.png"); }
.mini.iron { background-image: url("../assets/art/res-iron.png"); }
.mini.rum { background-image: url("../assets/art/res-rum.png"); }
.mini.gold { background-image: url("../assets/art/res-gold.png"); }
.mini.miss { opacity: 0.35; filter: grayscale(0.85); }
/* a card you hold: lit; one that just came in: a flash as it lights */
.mini.have { border-color: #ffe08a; box-shadow: 0 0 0 1px rgba(243, 210, 124, 0.55), 0 0 9px rgba(243, 210, 124, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6); }
.mini.fresh { animation: miniLit 1.1s ease; }
@keyframes miniLit { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.32); filter: brightness(1.9); box-shadow: 0 0 18px rgba(255, 225, 140, 0.95); } 100% { transform: none; filter: none; } }
.build-item .why { font-size: 12px; color: var(--text-dim); min-height: 15px; }

/* resource steppers (UI.picker): each card wears its count (as the hand's cards do), − and + beneath,
   so four (or five) fit across a phone; minmax(0, 1fr) lets the columns give rather than spill */
.pickers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; justify-items: center; }
.picker { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.pk-card { position: relative; flex: none; }
.picker .rcard { width: 54px; height: 78px; }
.pk-n { position: absolute; right: -9px; bottom: -8px; min-width: 28px; height: 28px; padding: 0 5px; box-sizing: border-box; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; background: #151d26; border: 2px solid rgba(201, 162, 74, 0.45);
  color: var(--text-dim); font-family: var(--font-display); font-size: 19px; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); pointer-events: none; }
.pk-n.on { background: #2b220e; border-color: var(--gold); color: var(--gold-hi); }
.picker .step { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.picker .step button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink-line); background: rgba(0, 0, 0, 0.4); color: var(--gold-hi); font-size: 20px; cursor: pointer; line-height: 1; padding: 0; }
.picker .have { font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.15; }
.trade-cols { display: flex; flex-direction: column; gap: 12px; }
.trade-col h4 { margin: 0 0 6px; font-family: var(--font-sc); font-weight: normal; color: var(--gold-hi); font-size: 16px; }
/* house rules: lives in a trade — a Life card (the red peg) among the resource cards */
.rcard.life, .mini.life { background: radial-gradient(ellipse at 50% 42%, #fdf3da 0%, #ead5a8 60%, #c8a96f 100%); }
.rcard.life::after { content: ""; position: absolute; left: 14%; right: 14%; top: 19%; bottom: 7%; background: url("../assets/art/peg-life.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65)); pointer-events: none; }
.mini.life { position: relative; }
.mini.life::after { content: ""; position: absolute; inset: 3px 4px 2px; background: url("../assets/art/peg-life.png") center / contain no-repeat; }
.pickers.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
/* five cards across: the steppers tighten a little to fit */
.pickers.five .picker .rcard { width: 48px; height: 70px; }
.pickers.five .picker .step { gap: 4px; }
.pickers.five .picker .step button { width: 28px; height: 28px; font-size: 17px; }
.pickers.five .pk-n { min-width: 24px; height: 24px; font-size: 16px; right: -7px; bottom: -7px; }
.pickers.five .picker .have { font-size: 11px; text-align: center; line-height: 1.15; }
.picker.life.off { opacity: 0.45; }
.lives-ships { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.lives-ships .peg-ico, .lives-note::before { display: inline-block; width: 12px; height: 20px; flex: none; background: url("../assets/art/peg-life.png") center / contain no-repeat; }
.lives-note { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); margin-top: -2px; }
.lives-note::before { content: ""; }
.fort-row { padding: 8px 10px; border-radius: 10px; background: rgba(201, 180, 142, 0.12); border: 1px solid rgba(201, 180, 142, 0.3); }
.plist { display: flex; flex-direction: column; gap: 8px; }
.pbtn { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); color: var(--text); font-size: 16px; }
.pbtn.off { opacity: 0.4; cursor: default; }
.pbtn .flag { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.5); flex: none; }
.pbtn .nm { font-family: var(--font-sc); }
.pbtn .sub { font-size: 13px; color: var(--text-dim); margin-left: auto; }
.optlist { display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------------------------------------------ cards */
.tcard-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 1400px; pointer-events: auto; background: rgba(3, 5, 8, 0.6); animation: fadeOnly 0.25s ease; flex-direction: column; gap: 18px; padding: 16px; }
.tcard { position: relative; width: min(74vw, 300px); aspect-ratio: 184 / 260; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(.3,1.3,.5,1);
  container-type: inline-size; /* the card's text scales with the card (cqi), not the screen */ }
.tcard.flipped { transform: rotateY(180deg); }
.tcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); }
.tcard .back { background: #e6d3a6 url("../assets/art/treasure-back.png") center / cover; }
.tcard .front { transform: rotateY(180deg); background: #ead9b2 url("../assets/art/parchment.jpg") center / cover; display: flex; flex-direction: column; color: #2a1c10; }
.tcard .front::before { content: ""; position: absolute; inset: 7px; border: 2px solid rgba(160, 40, 30, 0.55); border-radius: 9px; pointer-events: none; }
.tcard .band { position: relative; margin-top: 9%; min-height: 26%; display: flex; align-items: center; justify-content: center; padding: 6% 8%; }
/* the red brush stroke: sized to the title by PL.cards.fitTitle (--bx/--by/--bw/--bh);
   it may spill past the band so a two-line title never pushes the story down */
.tcard .band::before { content: ""; position: absolute; left: -6%; right: -6%; top: 0; bottom: 0;
  background: url("../assets/art/brush-red.png") center / 100% 100% no-repeat; }
.tcard .band.fit::before { left: var(--bx); top: var(--by); right: auto; bottom: auto; width: var(--bw); height: var(--bh); }
.tcard .band h3 { position: relative; margin: 0; font-family: var(--font-sc); font-weight: normal; color: #fbeedd; text-align: center; font-size: clamp(13px, 10cqi, 30px); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.02em; text-shadow: 0 2px 3px rgba(60, 0, 0, 0.6); text-wrap: balance; }
.tcard .story { padding: 6% 10% 4%; text-align: center; font-style: italic; font-size: clamp(10px, 5.33cqi, 16px); line-height: 1.25; min-height: 22%; }
.tcard .fx { position: relative; margin: 2% 9% 0; flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 3% 8% 10%; font-size: clamp(10.5px, 5.5cqi, 16.5px); font-weight: bold; white-space: pre-line; line-height: 1.28; }
.tcard .fx::before, .tcard .fx::after { content: ""; position: absolute; top: 4%; bottom: 14%; width: 9px; border: 3px solid rgba(165, 35, 28, 0.85); }
.tcard .fx::before { left: 0; border-right: 0; border-radius: 3px 0 0 3px; }
.tcard .fx::after { right: 0; border-left: 0; border-radius: 0 3px 3px 0; }
.tcard .tone { position: absolute; left: 0; right: 0; bottom: 3.5%; text-align: center; font-family: var(--font-sc); font-size: clamp(9px, 4cqi, 12px); letter-spacing: 0.2em; color: rgba(140, 30, 25, 0.7); }
.tcard-caption { color: var(--text); text-shadow: 0 2px 6px #000; text-align: center; font-size: 17px; }

/* banners */
.banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(34px, 9vw, 64px); color: #fff3e2; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 0, 0, 0.6);
  padding: 14px 60px 20px; background: url("../assets/art/brush-red.png") center / 100% 100% no-repeat; animation: bannerIn 2.4s ease forwards;
}
.banner.gold { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.6) 55%, transparent 72%); color: var(--gold-hi); }
.banner small { display: block; font-family: var(--font-body); font-size: 0.32em; font-style: italic; margin-top: -2px; }
/* a captain's island under the storm (turn start): long enough to wrap */
.banner.storm { top: 21%; white-space: normal; width: min(92vw, 780px); font-size: clamp(28px, 7.2vw, 58px); line-height: 1.05; color: #e6f0ff;
  background: radial-gradient(ellipse at center, rgba(14, 24, 40, 0.92) 30%, rgba(14, 24, 40, 0.62) 58%, transparent 74%);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 26px rgba(130, 170, 255, 0.5); }
.banner.storm small { font-size: 0.42em; color: #c9d6ea; margin-top: 8px; }
@keyframes bannerIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(-4deg); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95) rotate(-2deg); } }

/* toasts */
.toast { max-width: min(92vw, 460px); padding: 10px 16px; border-radius: 12px; font-size: 15px; pointer-events: auto;
  background: rgba(11, 16, 22, 0.94); border: 1px solid var(--ink-line); box-shadow: var(--shadow); animation: toastIn 0.25s ease; }
.toast.warn { border-color: rgba(231, 163, 58, 0.6); }
.toast.err { border-color: rgba(208, 56, 47, 0.7); }
.toast.good { border-color: rgba(92, 194, 122, 0.6); }
.toast.out { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }

/* dice overlay */
.dice-layer { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.dice-panel { position: relative; width: min(94vw, 460px); pointer-events: auto; padding: 0 0 14px; overflow: hidden; animation: modalIn 0.25s ease; }
.dice-panel canvas { display: block; width: 100%; height: 180px; }
.dice-panel .dhead { text-align: center; padding: 10px 12px 0; font-family: var(--font-display); font-size: 26px; color: var(--gold-hi); }
.dice-panel .dlabels { display: flex; justify-content: space-around; padding: 0 12px; gap: 10px; }
.dice-panel .dlabel { text-align: center; flex: 1; }
.dice-panel .dlabel .who { font-family: var(--font-sc); font-size: 16px; }
.dice-panel .dlabel .sum { font-family: var(--font-display); font-size: 36px; color: var(--text); line-height: 1; min-height: 36px; }
.dice-panel .dlabel .mod { font-size: 13px; color: var(--text-dim); min-height: 17px; }
.dice-panel .dresult { text-align: center; margin-top: 8px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.dice-panel .dresult span { font-family: var(--font-display); font-size: 30px; color: #fff3e2; padding: 6px 38px 10px; background: url("../assets/art/brush-red.png") center / 100% 100% no-repeat; animation: popIn 0.4s cubic-bezier(.2,1.4,.4,1); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.dice-panel .dresult span.good { filter: hue-rotate(95deg) saturate(0.8); }
/* battles: the bonus guns rise from the bottom of the dice window and push the dice up */
.dice-panel .dstage { position: relative; overflow: hidden; }
.dice-panel .dstage canvas { transition: transform 0.5s cubic-bezier(.3, 1.25, .4, 1); transform-origin: 50% 15%; }
.dice-panel.bonus-up .dstage canvas { transform: translateY(-34px) scale(0.78); }
.dice-panel .dbonus { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; gap: 10px; padding: 0 12px; pointer-events: none;
  transform: translateY(130%); transition: transform 0.5s cubic-bezier(.3, 1.3, .4, 1); }
.dice-panel.bonus-up .dbonus { transform: none; }
.dice-panel .bcol { flex: 1; display: flex; justify-content: center; align-items: flex-end; gap: 5px; min-height: 56px; flex-wrap: wrap; }
.dice-panel .bnone { align-self: center; font-size: 13px; color: var(--text-dim); font-style: italic; }
.bonus-ico { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; animation: bonusPop 0.42s cubic-bezier(.2, 1.7, .4, 1) both; }
.bonus-ico.cannon { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f3e7cb, #b79f74); border: 2px solid #d9ad46; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6); }
.bonus-ico img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); }
.bonus-ico.skull { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3f48, #121418); border: 2px solid #d9ad46; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6); }
.bonus-ico .sk { font-size: 25px; color: #f6efdc; line-height: 1; }
.bonus-ico.fort { border-radius: 10px; background: linear-gradient(180deg, #8a8378, #4d4840); border: 2px solid #c9bfa8; }
.bonus-ico .fort-tag { position: absolute; bottom: -9px; font-family: var(--font-sc); font-size: 9px; letter-spacing: 0.1em; color: #e9dfc6; text-shadow: 0 1px 2px #000; }
.bonus-ico .plus { position: absolute; top: -11px; right: -10px; font-family: var(--font-display); font-size: 19px; color: var(--gold-hi); text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.8); }
@keyframes bonusPop { 0% { transform: translateY(40px) scale(0.3); opacity: 0; } 60% { transform: translateY(-6px) scale(1.18); opacity: 1; } 100% { transform: none; } }
.dice-panel .dlabel { transition: opacity 0.35s ease, filter 0.35s ease; }
.dice-panel .dlabel .sum { transition: transform 0.3s cubic-bezier(.2, 1.6, .4, 1), color 0.3s ease, text-shadow 0.3s ease; }
.dice-panel .dlabel .sum.bump { animation: sumBump 0.26s ease; }
@keyframes sumBump { 40% { transform: scale(1.3); color: var(--gold-hi); } }
.dice-panel .dlabel .sum.total { font-size: 44px; }
.dice-panel .dlabel.winner .sum { color: var(--gold-hi); transform: scale(1.3); text-shadow: 0 0 20px rgba(243, 210, 124, 0.9), 0 3px 0 #000; }
.dice-panel .dlabel.loser { opacity: 0.42; filter: grayscale(0.7); }
.dice-panel .dresult span.slam { animation: slamIn 0.5s cubic-bezier(.2, 1.5, .35, 1); }
@keyframes slamIn { 0% { transform: scale(2.1) rotate(-5deg); opacity: 0; } 55% { transform: scale(0.92) rotate(-1deg); opacity: 1; } 100% { transform: none; } }

/* compass overlay */
.compass-layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(3, 5, 8, 0.55); animation: fadeOnly 0.25s ease; pointer-events: auto; }
.compass-title { font-family: var(--font-display); font-size: 30px; color: var(--gold-hi); text-shadow: 0 3px 0 #000; text-align: center; }
.compasses { display: flex; gap: min(5vw, 28px); }
.compass { position: relative; width: min(40vw, 210px); aspect-ratio: 1; }
.compass .dial { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; border-radius: 50%; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7); will-change: transform; }
.compass .dial.ghost { box-shadow: none; z-index: 1; pointer-events: none; }
.compass .ptr { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); transform-origin: 50% 0; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid var(--blood-hi); filter: drop-shadow(0 2px 2px #000); z-index: 2; }
.compass-result { font-family: var(--font-display); font-size: 48px; color: #fff3e2; min-height: 58px; text-shadow: 0 3px 0 #000; }

/* game over */
.podium { width: min(96vw, 560px); padding: 18px; text-align: center; }
.podium .crown { font-size: 54px; line-height: 1; }
.podium h1 { font-family: var(--font-display); font-weight: normal; font-size: 48px; margin: 6px 0; color: var(--gold-hi); }
.standings { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; text-align: left; }
.standings .st { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.standings .st .rank { font-family: var(--font-display); font-size: 24px; width: 26px; color: var(--gold-hi); }
.standings .st .nm { font-family: var(--font-sc); font-size: 17px; flex: 1; }
.standings .st .pts { font-family: var(--font-display); font-size: 26px; }
.standings .st .brk { font-size: 12px; color: var(--text-dim); }

/* rules */
.rules h3 { font-family: var(--font-display); font-weight: normal; font-size: 24px; margin: 14px 0 6px; color: #1b120a; }
.rules p, .rules li { font-size: 15.5px; line-height: 1.45; }
.rules ul { padding-left: 20px; margin: 6px 0; }
.rules .costrow { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.rules .costrow b { width: 70px; flex: none; font-family: var(--font-sc); }
.rules .costrow .cost { flex: none; flex-wrap: nowrap; }
.rules .costrow span { flex: 1; min-width: 0; }

/* misc */
.conn-pill { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 170px); padding: 6px 14px; border-radius: 16px; background: rgba(163, 32, 27, 0.92); color: #fff; font-size: 14px; pointer-events: none; box-shadow: var(--shadow); }
.skull-ico { display: inline-block; }
.legend { font-size: 13px; color: var(--text-dim); }
.kbd { font-family: monospace; background: rgba(255, 255, 255, 0.1); padding: 1px 5px; border-radius: 4px; }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.float-label { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font-family: var(--font-display); font-size: 22px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px #000; white-space: nowrap; animation: floatUp 1.6s ease forwards; z-index: 4; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
/* your turn's income: a resource card pops up over each island that pays and
   flies down into your hand (game-view incomeShow; WAAPI does the moving) */
.fly-card { position: absolute; width: 58px; height: 84px; border-radius: 8px; background-size: cover; background-position: center;
  border: 2px solid rgba(255, 245, 220, 0.92); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 225, 140, 0.65);
  pointer-events: none; z-index: 6; transform: translate(-50%, -50%); will-change: transform; }
.fly-card.wood { background-image: url("../assets/art/res-wood.png"); }
.fly-card.iron { background-image: url("../assets/art/res-iron.png"); }
.fly-card.rum { background-image: url("../assets/art/res-rum.png"); }
.fly-card.gold { background-image: url("../assets/art/res-gold.png"); }
/* damage, repairs, islands changing hands: bigger, a pop, then up and away */
.float-label.big { font-size: clamp(26px, 3.4vw, 40px); -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.55); text-shadow: 0 3px 0 #000, 0 0 12px rgba(0, 0, 0, 0.9); animation: floatPop 2s ease forwards; }
@keyframes floatPop { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
  24% { transform: translate(-50%, -55%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%) scale(0.95); } }

/* ------------------------------------------------------------------ career */
.title-screen { justify-content: safe center; }
.who-btn { gap: 10px; padding: 6px 14px 6px 8px; align-items: center; background: rgba(11, 16, 22, 0.78); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.who-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.who-txt small { font-family: var(--font-body); font-size: 12.5px; color: var(--gold-hi); }
.who-xp { width: 64px; height: 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; border: 1px solid var(--ink-line); }
.who-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.menu-pair { display: flex; gap: 10px; }
.menu-pair .btn { flex: 1; min-width: 0; padding-left: 10px; padding-right: 10px; }
.btn { position: relative; }
.btn-badge { position: absolute; top: -7px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--blood-hi);
  color: #fff; font-family: var(--font-body); font-size: 13px; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--ink); }

.xpbar { height: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--ink-line); overflow: hidden; margin: 5px 0; }
.xpbar.big { height: 14px; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width 0.8s cubic-bezier(.3,.7,.3,1); }

/* daily challenges */
.daily-panel { width: min(96vw, 860px); }
.daily-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 4px; }
.daily-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); text-align: center; }
.daily-card.tier1 { box-shadow: inset 0 3px 0 #5cc27a; }
.daily-card.tier2 { box-shadow: inset 0 3px 0 var(--gold); }
.daily-card.tier3 { box-shadow: inset 0 3px 0 var(--blood-hi); }
.daily-card.done { opacity: 0.85; background: rgba(217, 173, 70, 0.08); }
.dc-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); }
.dc-tier { font-family: var(--font-sc); color: var(--gold-hi); }
.dc-xp { color: var(--gold-hi); }
.dc-icon { font-size: 40px; line-height: 1.1; }
.dc-name { font-family: var(--font-display); font-size: 26px; color: var(--gold-hi); line-height: 1; }
.dc-text { font-size: 15px; flex: 1; }
.dc-meta { font-size: 12.5px; color: var(--text-dim); }
.streak { color: var(--warn); font-family: var(--font-sc); margin-top: 4px; }
.daily-fair { font-size: 12.5px; margin-top: 8px; }

/* matchmaking */
.mm-panel { width: min(96vw, 680px); }
.mm-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
.mm-mode { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); }
.mm-mode.ranked { background: rgba(163, 32, 27, 0.12); }
.mm-icon { font-size: 40px; line-height: 1; }
.mm-name { font-family: var(--font-display); font-size: 28px; color: var(--gold-hi); line-height: 1; }
.mm-text { font-size: 14.5px; color: var(--text); flex: 1; }
.rank-badge, .rank-tag { font-family: var(--font-sc); color: var(--gold-hi); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--ink-line); border-radius: 14px; padding: 2px 10px; font-size: 14px; }
.rank-tag { font-size: 12.5px; padding: 1px 8px; }
.searching { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.srch-anchor { font-size: 44px; }
.srch-line { font-family: var(--font-sc); font-size: 18px; color: var(--gold-hi); }
.srch-info { font-size: 14px; }
.srch-offer { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 6px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 14px; }
.mm-found { text-align: center; }
.mm-seats { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.mm-seat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); text-align: left; flex-wrap: wrap; }
.mm-seat b { font-family: var(--font-sc); font-size: 17px; }
.mm-status { font-family: var(--font-sc); color: var(--gold-hi); font-size: 17px; min-height: 24px; }

/* game over: rewards */
.rewards { margin: 12px 0 4px; padding: 12px; border-radius: 12px; background: rgba(217, 173, 70, 0.08); border: 1px solid var(--ink-line); text-align: left; }
.rw-head { display: flex; align-items: baseline; justify-content: space-between; }
.rw-xp { font-family: var(--font-display); font-size: 30px; color: var(--gold-hi); }
.rw-lv { font-family: var(--font-sc); font-size: 18px; }
.rw-sub { font-size: 13px; }
.levelup { margin-top: 6px; padding: 6px 10px; border-radius: 10px; text-align: center; font-family: var(--font-sc); color: #2a1a06;
  background: linear-gradient(180deg, #f1cd71, #c39434); animation: bump 0.6s ease; }
.rw-challenge, .rw-rating { margin-top: 8px; font-family: var(--font-sc); font-size: 15.5px; }
.rw-challenge.done, .rw-rating.up { color: #8fe0a6; }
.rw-challenge.failed, .rw-rating.down { color: #ff9a8a; }
.rw-parts { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.rw-part { display: flex; justify-content: space-between; gap: 10px; }
.rw-part b { color: var(--gold-hi); white-space: nowrap; }

/* captain's log */
.log-panel { width: min(96vw, 640px); }
.log-tabs { display: flex; width: 100%; margin-bottom: 12px; }
.log-tabs button { flex: 1; padding: 8px 4px; min-width: 0; }
.log-body { display: flex; flex-direction: column; gap: 8px; min-height: 240px; }
.log-name { font-family: var(--font-display); font-size: 28px; color: var(--gold-hi); line-height: 1; }
.log-captain .ship-ico { width: 72px; height: 56px; flex: none; }
.log-captain { display: flex; flex-direction: column; gap: 10px; }
.log-level { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.log-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.log-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.log-card b { display: block; font-family: var(--font-sc); font-size: 17px; color: var(--gold-hi); }
.log-card small { color: var(--text-dim); font-size: 12.5px; }
.lc-icon { font-size: 28px; }
.quest { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.quest.done { background: rgba(92, 194, 122, 0.12); }
.q-icon { font-size: 24px; width: 30px; text-align: center; }
.q-text { font-size: 15px; }
.q-xp { font-family: var(--font-sc); color: var(--gold-hi); white-space: nowrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.stat { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.stat b { display: block; font-family: var(--font-display); font-size: 24px; color: var(--gold-hi); line-height: 1.1; }
.stat small { color: var(--text-dim); font-size: 12.5px; }
.stat-modes { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 14.5px; }
.hist { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 14.5px; border-left: 3px solid var(--ink-line); }
.hist.won { border-left-color: var(--gold); }
.hist.lost { border-left-color: rgba(255, 255, 255, 0.15); }
.hist small { font-size: 12px; }
.h-res { font-family: var(--font-display); font-size: 22px; width: 34px; text-align: center; color: var(--gold-hi); }
.h-xp { font-family: var(--font-sc); color: var(--gold-hi); font-size: 13px; text-align: right; white-space: nowrap; }

/* in game: the challenge objective & the replay controls */
/* (in .hud-mid, under the turn strip; too long for one line, the progress wraps onto a second) */
.goal-chip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 8px; row-gap: 0;
  padding: 4px 12px; border-radius: 16px; background: rgba(11, 16, 22, 0.78); border: 1px solid var(--ink-line); font-size: 13.5px;
  white-space: nowrap; max-width: 92vw; overflow: hidden; pointer-events: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.goal-chip b, .goal-chip .gp { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.goal-chip b { font-family: var(--font-sc); color: var(--gold-hi); }
.goal-chip .gp { color: var(--text-dim); }
.goal-chip.done { border-color: var(--gold); background: rgba(70, 52, 10, 0.85); }
.goal-chip.failed { border-color: rgba(208, 56, 47, 0.7); }
.replay-bar { display: flex; gap: 6px; align-items: center; justify-content: center; width: 100%; flex-wrap: wrap; }
.replay-bar .btn { flex: none; min-width: 46px; }
.rp-prog { font-family: var(--font-sc); color: var(--gold-hi); min-width: 64px; text-align: center; }

/* larger screens: roomier HUD */
@media (min-width: 820px) {
  .hud-bottom { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end; column-gap: 14px; }
  .hud-bottom .shipcard { flex-basis: 100%; max-width: 680px; margin: 0 auto; }
  .hud-bottom .actionbar { width: auto; flex: 0 1 520px; }
}
@media (min-width: 900px) and (min-height: 600px) {
  .rcard { width: 56px; height: 80px; }
  .actionbar .btn { font-size: 18px; min-height: 52px; }
  .pchip .nm { max-width: 150px; }
  .shipcard { width: min(70vw, 640px); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .rcard { width: 40px; height: 58px; }
  .rcard .n { min-width: 22px; height: 22px; font-size: 15px; }
  .actionbar .btn { min-height: 40px; font-size: 14px; }
  .hud-bottom { flex-direction: row; align-items: flex-end; justify-content: center; }
  .hud-mid { top: calc(var(--hudtop, 50px) + 4px); }
  .turn-strip { font-size: 13px; }
  .room-code { font-size: 40px; }
  .title-logo { width: min(60vw, 520px); }
  .dice-panel canvas { height: 150px; }
}
/* narrow portrait phones: one drawer button (the drawer has Log and Chat tabs),
   captains as flag + score only (the turn strip names whose turn it is), and
   a second row of captains rather than hiding any off the edge */
@media (max-width: 480px) and (orientation: portrait) {
  .hud-icons .log-btn { display: none; }
  .scoreboard { flex-wrap: wrap; row-gap: 4px; overflow-x: visible; }
  .scoreboard .pchip .meta { display: none; }
  .pchip { padding: 3px 7px 3px 3px; gap: 4px; min-height: 34px; }
  .pchip .flag { width: 25px; height: 25px; font-size: 12px; }
  .pchip .pts { font-size: 19px; min-width: 14px; }
  /* (no Log button beside the captains here, so the strip may run the full width;
     .hud-mid for weight: the max-width: 560px rules further down come later) */
  .hud-mid { top: calc(var(--hudtop, 46px) + 6px); }
  .hud-mid .turn-strip { max-width: calc(100vw - 24px); }
}
/* the narrowest phones (320–360 px): the order buttons keep their words, lose their icons */
@media (max-width: 360px) and (orientation: portrait) {
  .actionbar { gap: 5px; }
  .actionbar .btn { font-size: 14px; padding: 6px 2px; }
  .actionbar .btn .ico { display: none; }
  .hand { gap: 5px; }
  .rcard { width: 44px; height: 62px; }
  .title-screen { gap: 12px; }
  .title-logo { width: min(82vw, 640px); }
  .tagline { font-size: 15px; }
  .menu { gap: 9px; }
  .menu-pair .btn { font-size: 14px; padding-left: 4px; padding-right: 4px; }
  .menu-pair .btn .ico { display: none; }
}
/* small screens: only the captain whose turn it is shows a name; the rest are
   their flag colour and score, so up to six captains fit across */
@media (max-width: 560px), (orientation: landscape) and (max-height: 500px) {
  .scoreboard .pchip:not(.active) .meta { display: none; }
  .scoreboard .pchip:not(.active) { padding-right: 8px; }
}
/* landscape phones: the board gets the full height — resource cards in a
   column on the left, the orders on the right, a slim bar of captains on top
   (PL.hud.sideLayout / measure use the same query) */
@media (orientation: landscape) and (max-height: 500px) {
  .hud-top { padding-top: calc(var(--safe-t) + 4px); gap: 6px; align-items: center; }
  .hud-icons { flex-direction: row; gap: 6px; }
  .icon-btn { width: 38px; height: 38px; font-size: 17px; }
  .scoreboard { padding-bottom: 0; }
  .pchip { min-height: 34px; padding: 2px 8px 2px 3px; gap: 5px; }
  .pchip .flag { width: 26px; height: 26px; font-size: 13px; }
  .pchip .sub, .pchip.me .nm::after { display: none; }
  .pchip .nm { font-size: 13px; max-width: 76px; }
  .pchip .pts { font-size: 20px; }
  .pchip .pts small { font-size: 13px; }
  .hud-mid { top: calc(var(--hudtop, 40px) + 4px); gap: 3px; }
  .turn-strip { font-size: 13px; padding: 3px 12px; max-width: calc(100vw - 300px); white-space: nowrap; }
  .goal-chip { font-size: 12px; padding: 2px 10px; max-width: calc(100vw - 300px); }
  .prompt-bar { top: calc(var(--hudtop, 40px) + 2px); width: min(calc(100vw - 300px), 460px); padding: 6px 10px; }
  .prompt-bar .ptxt { font-size: 14px; margin-bottom: 4px; }
  .prompt-bar .btn { min-height: 34px; padding: 4px 10px; font-size: 14px; }
  .hud-bottom { position: absolute; inset: 0; padding: 0; display: block; pointer-events: none; }
  .hud-bottom .hand {
    position: absolute; left: calc(var(--safe-l) + 6px); top: calc(var(--hudtop, 40px) + 6px); bottom: calc(var(--safe-b) + 6px);
    flex-direction: column; justify-content: center; align-items: center; gap: 7px; max-width: 120px;
  }
  .hud-bottom .hand .hint { font-size: 12.5px; }
  .hud-bottom .hand-sep { width: 70%; height: 1px; align-self: center; margin: 0; }
  .hud-bottom .rcard { width: 40px; height: 50px; border-width: 1.5px; }
  .hud-bottom .rcard .lbl { font-size: 9.5px; top: 1px; }
  .hud-bottom .rcard .n { min-width: 20px; height: 20px; font-size: 13px; right: -8px; bottom: -5px; padding: 0 4px; }
  .hud-bottom .actionbar {
    position: absolute; right: calc(var(--safe-r) + 6px); top: calc(var(--hudtop, 40px) + 6px); bottom: calc(var(--safe-b) + 6px);
    width: 112px; flex-direction: column; justify-content: center; gap: 6px;
  }
  .hud-bottom .actionbar .btn { flex: none; min-height: 44px; font-size: 14px; padding: 5px 4px; }
  .hud-bottom .actionbar .hint { font-size: 12.5px; }
  .hud-bottom .actionbar .replay-bar { flex-direction: column; flex-wrap: nowrap; }
  .hud-bottom .actionbar .replay-bar .btn { width: 100%; min-height: 36px; }
  .hud-bottom .shipcard {
    position: absolute; left: 50%; bottom: calc(var(--safe-b) + 6px); width: min(calc(100vw - 280px), 560px);
    padding: 4px 6px 4px 10px; margin-left: calc(min(calc(100vw - 280px), 560px) / -2);
  }
  .hud-bottom .shipcard .acts .btn { min-height: 34px; padding: 4px 10px; font-size: 14px; }
  .drawer { top: calc(var(--hudtop, 40px) + 4px); right: calc(var(--safe-r) + 124px); width: min(46vw, 360px);
    max-height: calc(100% - var(--safe-t) - var(--safe-b) - 52px); min-height: 0; }
  .conn-pill { bottom: calc(var(--safe-b) + 66px); }

  /* menus: logo beside the menu, compact panels */
  .title-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 350px); column-gap: 22px; row-gap: 6px;
    align-content: safe center; justify-content: center; align-items: center; }
  .title-screen .title-logo { grid-column: 1; grid-row: 1; width: min(44vw, 400px); justify-self: center; margin: 0; }
  .title-screen .tagline { grid-column: 1; grid-row: 2; font-size: 14px; margin: 0; }
  .title-screen .who-btn { grid-column: 1; grid-row: 3; justify-self: center; }
  .title-screen > .muted { grid-column: 1; grid-row: 4; justify-self: center; }
  .title-screen .menu { grid-column: 2; grid-row: 1 / span 4; width: 100%; gap: 7px; }
  .title-screen .menu .btn { min-height: 38px; font-size: 15px; padding: 5px 10px; }
  .title-screen .menu .btn.big { min-height: 44px; font-size: 17px; }
  .title-screen .menu-pair .btn { font-size: 13.5px; padding: 5px 6px; gap: 5px; }
  .title-screen .menu-foot { width: 100%; gap: 6px; margin-top: 0; }
  .title-screen .menu-foot .btn { flex: 1; min-width: 0; font-size: 12.5px; padding: 5px 4px; gap: 4px; min-height: 34px; }
  .brush-title { font-size: 24px; padding: 6px 16px 8px; margin-bottom: 6px; }
  .card-panel { padding: 12px 14px; }
  .daily-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .daily-card { padding: 8px; gap: 4px; }
  .dc-icon { font-size: 28px; }
  .dc-name { font-size: 20px; }
  .dc-text { font-size: 13px; }
  .daily-card .btn { min-height: 38px; font-size: 15px; padding: 5px 8px; }
  .mm-mode { padding: 10px; gap: 6px; }
  .mm-icon { font-size: 30px; }
  .mm-text { font-size: 13.5px; }
  .podium .crown { font-size: 34px; }
  .podium h1 { font-size: 32px; margin: 2px 0; }
  .podium { width: min(96vw, 760px); padding: 10px 14px; }
  .podium-cols.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .podium-cols.two .rewards, .podium-cols.two .standings { margin: 8px 0 0; }
  .lobby-acts { padding-top: 6px; padding-bottom: calc(var(--safe-b) + 10px); bottom: calc(-16px - var(--safe-b)); }
  .lobby-acts .btn, .lobby-acts .btn.big { min-height: 42px; font-size: 16px; padding: 6px 14px; }
  .room-code { font-size: 40px; }

  /* dialogs & reveals sized by the height we have */
  .modal { width: min(96vw, 640px); }
  .modal .mhead { padding: 8px 12px 4px; }
  .modal .mhead h2 { font-size: 24px; }
  .modal .mfoot { padding: 8px 12px; }
  .modal .mfoot .btn { min-height: 38px; padding: 5px 10px; font-size: 15px; }
  .build-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .build-item { padding: 6px 4px; }
  .build-item img { height: 44px; }
  .build-item .nm { font-size: 16px; }
  .tcard-stage { gap: 8px; padding: 8px; }
  .tcard { width: min(74vw, 300px, calc((100vh - 120px) * 0.7077)); }
  .tcard { width: min(74vw, 300px, calc((100dvh - 120px) * 0.7077)); }
  .compass { width: min(40vw, 210px, 44vh); }
  .compass-title { font-size: 24px; }
  .compass-result { font-size: 34px; min-height: 40px; }
  .compasses { gap: 6vw; }
}
@media (max-width: 560px) {
  /* (phones: the Life card takes its own row under the four resource cards) */
  .pickers.five { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
  .pickers.five .picker.life { grid-column: 1 / -1; }
  .picker .step button { width: 30px; height: 30px; }
  .pchip { padding: 4px 8px 4px 4px; gap: 5px; min-height: 38px; }
  .pchip .sub { display: none; }
  .pchip .nm { max-width: 66px; font-size: 13px; }
  .pchip .flag { width: 26px; height: 26px; font-size: 13px; }
  .pchip .pts { font-size: 21px; }
  .pchip .pts small { font-size: 13px; margin-left: 0; }
  .turn-strip { max-width: calc(100vw - 120px); font-size: 13.5px; padding: 5px 12px; white-space: normal; line-height: 1.2; }
  .icon-btn { width: 40px; height: 40px; font-size: 18px; }
  .actionbar .btn { font-size: 15px; padding: 8px 4px; }
  .rcard { width: 46px; height: 66px; }
  .shipcard { padding: 6px 8px; }
  .goal-chip { font-size: 12.5px; }
  .menu-pair .btn { font-size: 16px; }
  .menu-foot { width: 100%; gap: 6px; }
  .menu-foot .btn { flex: 1; min-width: 0; font-size: 12.5px; padding: 6px 4px; gap: 4px; }
  .log-tabs button { font-size: 13px; padding: 8px 2px; }
  .daily-cards, .mm-modes { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------------ the cast talks (src/ui/talk.js) */
#talk-root { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
/* a dialog scene: portraits stand on the speech box */
.talk-scene { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; overflow: hidden;
  background: linear-gradient(0deg, rgba(4, 7, 10, 0.95) 0%, rgba(4, 7, 10, 0.74) 42%, rgba(4, 7, 10, 0.5) 100%);
  animation: fadeOnly 0.3s ease; }
.talk-scene.out { animation: fadeOut 0.26s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.ts-char { position: absolute; bottom: calc(var(--safe-b) + var(--boxh, 118px) + 2px); height: min(56vh, 500px); max-width: 54vw; object-fit: contain;
  object-position: bottom; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.7)); opacity: 0; transition: filter 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none; }
.ts-char.left { left: max(2vw, calc(50% - 470px)); transform-origin: bottom left; }
.ts-char.right { right: max(2vw, calc(50% - 470px)); transform-origin: bottom right; }
.ts-char.on { opacity: 1; }
.ts-char.dim { filter: brightness(0.42) saturate(0.55) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.7)); transform: scale(0.93); }
.ts-char.on.hop:not(.dim) { animation: charHop 0.32s ease; }
@keyframes charHop { 40% { transform: translateY(-10px); } }
.ts-box { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 14px); width: min(94vw, 760px); min-height: 118px;
  padding: 22px 20px 18px; border-radius: 14px; color: var(--parch-ink); font-size: 19px; line-height: 1.36;
  background: #e9d8b0 url("../assets/art/parchment.jpg") center / cover; border: 2px solid #8a6a2c;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), inset 0 0 40px rgba(110, 70, 20, 0.35); animation: boxUp 0.3s ease; }
@keyframes boxUp { from { transform: translate(-50%, 14px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.ts-name { position: absolute; top: -19px; left: 18px; padding: 2px 16px 3px; border-radius: 9px; background: var(--ink-2);
  border: 1px solid var(--gold); font-family: var(--font-display); font-size: 23px; line-height: 1.2; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
.ts-name.right { left: auto; right: 18px; }
.ts-text b { color: #7c1513; }
.ts-more { position: absolute; right: 16px; bottom: 6px; font-size: 14px; color: #6b4a1c; animation: moreBob 0.9s ease-in-out infinite; }
@keyframes moreBob { 50% { transform: translateY(3px); } }
.ts-skip { position: absolute; top: calc(var(--safe-t) + 12px); right: calc(var(--safe-r) + 12px); }
.ts-title { position: absolute; left: 0; right: 0; top: 34%; text-align: center; padding: 18px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0.55) 55%, transparent 75%); animation: fadeIn 0.5s ease; }
.ts-title.gone { animation: fadeOut 0.3s ease forwards; }
.tt-main { font-family: var(--font-display); font-size: clamp(34px, 8vw, 62px); color: var(--gold-hi); line-height: 1.05; text-shadow: 0 3px 0 #000; }
.tt-sub { font-family: var(--font-sc); font-size: clamp(15px, 3.6vw, 21px); color: var(--text); margin-top: 6px; }
.talk-scene.titled .ts-box, .talk-scene.titled .ts-char { visibility: hidden; }
.ts-card { margin: 2px 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(60, 35, 10, 0.12); border: 1px dashed rgba(90, 60, 20, 0.55); font-size: 16px; }
.ts-card .tc-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-sc); font-size: 18px; color: #5a1410; }
.ts-card .tc-ico { font-size: 22px; }
.ts-card ul { margin: 4px 0 0; padding-left: 20px; }
.ts-card li { margin: 2px 0; }
/* Plundy's card in the tutorial */
.talk-coach { position: absolute; left: 50%; transform: translateX(-50%); width: min(94vw, 560px); display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px 10px 10px; border-radius: 14px; pointer-events: auto; color: var(--parch-ink); font-size: 16.5px; line-height: 1.33;
  background: #e9d8b0 url("../assets/art/parchment.jpg") center / cover; border: 2px solid #8a6a2c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(110, 70, 20, 0.3); animation: boxUp 0.3s ease; }
.talk-coach.hop .tc-face img { animation: faceHop 0.32s ease; }
@keyframes faceHop { 40% { transform: translate(-20%, -10%); } }
.tc-face { flex: none; width: 78px; height: 78px; border-radius: 50%; overflow: hidden; border: 2px solid #8a6a2c;
  background: radial-gradient(circle at 50% 35%, #2f6f86, #123547 70%); }
.tc-face img { width: 170%; height: auto; transform: translate(-20%, -4%); }
.tc-body { flex: 1; min-width: 0; }
.tc-name { font-family: var(--font-display); font-size: 20px; line-height: 1; margin: 2px 0 3px; }
.tc-text b { color: #7c1513; }
.tc-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.tc-foot .tc-skip { margin-right: auto; }
.tc-foot:empty { display: none; }
/* pointing at a button */
.coach-ring { position: absolute; border-radius: 14px; border: 3px solid var(--gold-hi); pointer-events: none;
  box-shadow: 0 0 0 4px rgba(243, 210, 124, 0.3), 0 0 22px rgba(243, 210, 124, 0.8); animation: coachPulse 1.2s ease-in-out infinite; }
@keyframes coachPulse { 50% { box-shadow: 0 0 0 8px rgba(243, 210, 124, 0.12), 0 0 34px rgba(243, 210, 124, 1); } }
.coach-hand { position: absolute; line-height: 0; pointer-events: none; transform: translate(-50%, 0); color: var(--gold-hi); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7)); }
.coach-hand .icon { display: block; width: 34px; height: 34px; }
.coach-hand.below .icon { transform: rotate(180deg); }
.coach-hand.below { animation: handUp 0.9s ease-in-out infinite; }
.coach-hand.above { transform: translate(-50%, -100%); animation: handDown 0.9s ease-in-out infinite; }
@keyframes handUp { 50% { transform: translate(-50%, 8px); } }
@keyframes handDown { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, calc(-100% - 8px)); } }
/* a tap that has to wait for Next: the button shakes */
.talk-coach .btn.nudge { animation: nudge 0.45s ease; }
@keyframes nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* a quick line from the side */
.talk-bark { position: absolute; display: flex; align-items: flex-end; max-width: min(86vw, 400px); pointer-events: auto; animation: barkInL 0.32s ease; }
.talk-bark.left { left: calc(var(--safe-l) + 6px); }
.talk-bark.right { right: calc(var(--safe-r) + 6px); flex-direction: row-reverse; animation-name: barkInR; }
.talk-bark.out { animation: fadeOut 0.26s ease forwards; }
@keyframes barkInL { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes barkInR { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.talk-bark img { height: 112px; width: auto; flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)); }
.tb-bubble { position: relative; margin-bottom: 26px; padding: 8px 12px; border-radius: 12px; font-size: 15px; line-height: 1.3; color: var(--parch-ink);
  background: #fbf3dd; border: 1px solid #a88a52; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); }
.talk-bark.left .tb-bubble { margin-left: -14px; }
.talk-bark.right .tb-bubble { margin-right: -14px; }
@media (max-width: 560px) {
  .ts-box { font-size: 16.5px; padding: 20px 14px 16px; min-height: 104px; }
  .ts-char { height: min(46vh, 380px); max-width: 64vw; }
  .ts-char.left { left: -4vw; }
  .ts-char.right { right: -4vw; }
  .ts-name { font-size: 20px; }
  .talk-coach { font-size: 15px; padding: 8px 10px 8px 8px; }
  .tc-face { width: 60px; height: 60px; }
  .talk-bark img { height: 84px; }
  .tb-bubble { font-size: 13.5px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .ts-char { height: 62vh; }
  .ts-box { min-height: 86px; font-size: 15.5px; padding: 18px 16px 12px; }
  .talk-coach { width: min(70vw, 520px); }
}
/* ------------------------------------------------------------------ Adventure (src/ui/adventure.js, src/render/advmap.js) */
/* drawn icons (src/ui/icons.js) */
.icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: none; }
.btn .ico .icon { width: 1.05em; height: 1.05em; }
/* the coin barrel (the Merchant islands' mark) in buttons, info lines and the TV ticker */
img.ci { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: -0.3em; flex: none; }
.btn .ico img.ci { display: block; width: 1.4em; height: 1.4em; margin: -0.15em 0; }
.merchant-line { display: flex; align-items: center; gap: 8px; }
.merchant-line img.ci.md { width: 40px; height: 40px; }
.istars { display: inline-flex; gap: 1px; align-items: center; }
.istars .icon { color: rgba(255, 255, 255, 0.2); }
.istars .icon.on, .icon.star.on, .ah-stars .icon { color: var(--gold-hi); filter: drop-shadow(0 0 4px rgba(243, 210, 124, 0.55)); }
.istars.big .icon { width: 26px; height: 26px; }
/* captains' portraits (UI.avatar) */
.flag { flex: none; }
.flag.avatar { position: relative; padding: 0; overflow: visible; border: 2px solid; background: #1b2631; }
.flag.avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.flag.avatar .av-tag { position: absolute; right: -6px; top: -8px; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
.pchip.villain .flag.avatar { box-shadow: 0 0 0 2px #7c1513, 0 0 10px rgba(255, 90, 70, 0.6) !important; }
.seat .flag.avatar { width: 58px; height: 58px; margin: 2px auto 4px; }
.lobby.tv .seat .flag.avatar { width: 80px; height: 80px; }
.who-btn .flag.avatar { width: 28px !important; height: 28px !important; }
.standings .flag, .podium .flag { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.av-picks { display: flex; gap: 10px; flex-wrap: wrap; }
.av-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 6px 4px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); color: var(--text-dim); font-family: var(--font-body); }
.av-pick .flag { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.av-pick small { font-size: 12.5px; }
.av-pick.on { border-color: var(--gold); background: rgba(217, 173, 70, 0.14); color: var(--gold-hi); }
/* the title's Adventure button */
.adv-btn { gap: 10px; }
.adv-btn .adv-face { width: 44px; height: 44px; margin: -10px 0 -10px -8px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(90, 55, 10, 0.7); flex: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.btn.big.adv-btn .adv-face { width: 52px; height: 52px; }
.btn-badge.stars { display: inline-flex; align-items: center; gap: 3px; background: var(--ink-2); color: var(--gold-hi); border: 1px solid var(--gold); font-size: 12px; right: -8px; }
.btn-badge.stars .icon { width: 12px; height: 12px; }
.btn-badge.cove { left: -8px; right: auto; background: var(--blood-hi); color: #fff; border: 1px solid #fff3; min-width: 22px; text-align: center; }
/* the title's Pirate's Cove button (locked until its voyage is won) and its Hoard + Rubies corner */
.cove-btn { gap: 10px; }
.cove-btn .cove-face { width: 38px; height: 38px; margin: -8px 0 -8px -6px; border-radius: 9px; object-fit: cover; border: 2px solid rgba(90, 55, 10, 0.7); flex: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.cove-btn.locked { filter: saturate(0.5) brightness(0.82); }
.cove-btn .cove-lab { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.cove-btn .cove-lab small { display: flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0; text-transform: none; opacity: 0.85; }
.cove-btn .cove-lab small .icon { width: 12px; height: 12px; }
.title-purse { position: absolute; top: calc(var(--safe-t) + 10px); right: calc(var(--safe-r) + 10px); z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 10px; border-radius: 14px; border: 1px solid rgba(217, 173, 70, 0.45); background: rgba(11, 16, 22, 0.8);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); color: var(--text); cursor: pointer; font: inherit; }
.title-purse:hover { border-color: var(--gold); }
.tp-label { font-family: var(--font-sc); font-size: 12px; color: var(--gold); letter-spacing: 0.06em; white-space: nowrap; }
.tp-hoard { display: flex; gap: 10px; }
.tp-c { display: flex; align-items: center; gap: 4px; }
.tp-c img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.tp-c b { font-family: var(--font-display); font-weight: normal; font-size: 18px; color: var(--text); }
.tp-ruby { padding-left: 10px; border-left: 1px solid var(--ink-line); align-self: stretch; }
.tp-ruby b { color: #ffd0d0; }
@media (max-width: 560px) {
  .title-purse { padding: 5px 9px; gap: 8px; }
  .tp-label { display: none; }
  .tp-hoard { display: grid; grid-template-columns: auto auto; gap: 1px 10px; }
  .tp-c img { width: 20px; height: 20px; }
  .tp-c b { font-size: 15px; }
  .tp-ruby { padding-left: 8px; }
}
/* the chart: the sea is the 3D stage; only the header and the voyage card take taps */
.adv-screen { padding: 0 !important; justify-content: space-between !important; align-items: stretch !important; gap: 0 !important; overflow: hidden !important;
  pointer-events: none !important; touch-action: none !important; background: none; animation: none; }
.adv-head { display: flex; align-items: center; gap: 10px; margin: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 8px) 0 calc(var(--safe-l) + 8px);
  padding: 8px 12px; pointer-events: auto; flex: none; animation: fadeIn 0.35s ease; }
.ah-title { flex: 1; min-width: 0; text-align: center; line-height: 1.1; }
.ah-title b { display: block; font-family: var(--font-display); font-weight: normal; font-size: 26px; color: var(--gold-hi); }
.ah-title small { font-family: var(--font-sc); color: var(--text-dim); font-size: 14px; }
.ah-stars { display: flex; align-items: center; gap: 5px; font-family: var(--font-display); color: var(--gold-hi); font-size: 21px; white-space: nowrap; }
.adv-card { display: flex; align-items: center; gap: 10px; margin: 0 auto calc(var(--safe-b) + 10px); width: min(calc(100% - 16px), 700px);
  padding: 10px 8px; pointer-events: auto; flex: none; animation: slideUp 0.35s ease; }
.adv-step { flex: none; width: 36px; height: 52px; border-radius: 10px; border: 1px solid var(--ink-line); background: rgba(255, 255, 255, 0.05); color: var(--gold-hi);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 20px; }
.adv-step[disabled] { opacity: 0.3; cursor: default; }
.adv-medal { flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--font-display); font-size: 30px; color: #fff1cf; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at 42% 34%, #4aa3c2, #174c63 72%); border: 3px solid var(--gold); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 240, 200, 0.25); }
.adv-medal.locked { background: radial-gradient(circle at 42% 34%, #8d8473, #423b31 72%); border-color: #8f8471; color: #e9dfcb; }
.adv-medal.locked .icon { width: 26px; height: 26px; }
.adv-medal.boss { border-color: #b8322a; background: #250b08; }
.adv-medal.boss img { width: 100%; height: 100%; object-fit: cover; }
.adv-medal.boss.locked img { filter: grayscale(0.7) brightness(0.7); }
.ac-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.ac-info small { font-family: var(--font-sc); color: var(--text-dim); font-size: 13px; }
.ac-info b { font-family: var(--font-display); font-weight: normal; font-size: 23px; color: var(--gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-line i { font-size: 13.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-acts { display: flex; gap: 6px; flex: none; }
/* a voyage's briefing */
.adv-sheet .mbody { padding-top: 2px; }
.adv-sheet-head { display: flex; align-items: center; gap: 12px; }
.adv-sheet-head h2 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 30px; color: var(--gold-hi); line-height: 1.05; }
.adv-sheet-head small { font-family: var(--font-sc); color: var(--text-dim); }
.adv-sheet-head > div { flex: 1; min-width: 0; }
.adv-blurb { margin: 6px 0 2px; font-style: italic; color: var(--text); }
.adv-label { font-family: var(--font-sc); color: var(--gold); font-size: 14px; margin-top: 6px; letter-spacing: 0.04em; }
.adv-rivals { display: flex; flex-wrap: wrap; gap: 8px; }
.adv-rival { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 24px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); }
.adv-rival.ally { border-color: rgba(92, 194, 122, 0.6); }
.adv-rival.villain { border-color: rgba(208, 56, 47, 0.7); }
.adv-rival .flag { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.adv-rival span { display: flex; flex-direction: column; line-height: 1.1; }
.adv-rival small { color: var(--text-dim); font-size: 12px; }
.adv-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.adv-rule { padding: 3px 10px; border-radius: 12px; font-size: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ink-line); }
.adv-rule.new { border-color: var(--blood-hi); background: rgba(208, 56, 47, 0.18); }
.adv-rule.new::before { content: "NEW · "; font-family: var(--font-sc); color: #ff8a7a; }
.adv-goals { display: flex; flex-direction: column; gap: 6px; }
.ag-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); text-align: left; }
.ag-row > .icon { width: 22px; height: 22px; color: rgba(255, 255, 255, 0.2); }
.ag-row.got > .icon:first-child { color: var(--gold-hi); filter: drop-shadow(0 0 6px rgba(243, 210, 124, 0.7)); }
.ag-row .icon.ok { color: var(--ok); width: 18px; height: 18px; }
.ag-row.missed { opacity: 0.6; }
.ag-row span { flex: 1; }
.ag-row small { color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.adv-tip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(217, 173, 70, 0.1); border: 1px dashed var(--gold-lo); font-size: 14.5px; }
/* results */
.adv-over { width: min(94vw, 540px); }
.ao-kicker { font-family: var(--font-sc); color: var(--text-dim); font-size: 15px; }
.ao-title { margin: 2px 0 6px; font-family: var(--font-display); font-weight: normal; font-size: 46px; line-height: 1; color: var(--gold-hi); text-shadow: 0 3px 0 #000; }
.adv-over.lost .ao-title { color: #ff8a7a; }
.adv-bigstars { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 2px 0 12px; }
.adv-bigstars .icon { width: 58px; height: 58px; color: rgba(255, 255, 255, 0.14); }
.adv-bigstars .icon:nth-child(2) { width: 70px; height: 70px; transform: translateY(-8px); }
.adv-bigstars .icon.on { color: var(--gold-hi); filter: drop-shadow(0 0 14px rgba(243, 210, 124, 0.9)) drop-shadow(0 3px 0 #6b4a0c); animation: starPop 0.45s ease; }
.adv-bigstars .icon:nth-child(2).on { animation-name: starPop2; }
@keyframes starPop { 0% { transform: scale(2.2) rotate(-30deg); opacity: 0; } 70% { transform: scale(0.9); opacity: 1; } 100% { transform: none; } }
@keyframes starPop2 { 0% { transform: translateY(-8px) scale(2.2) rotate(-30deg); opacity: 0; } 70% { transform: translateY(-8px) scale(0.9); opacity: 1; } 100% { transform: translateY(-8px); } }
.adv-xp { margin: 10px 0 0; font-family: var(--font-sc); color: var(--gold-hi); font-size: 17px; }
.adv-plundy { display: flex; align-items: flex-end; justify-content: center; margin-top: 8px; }
.adv-plundy img { height: 120px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.adv-plundy .tb-bubble { margin-left: -10px; text-align: left; max-width: 260px; }
.tb-name { display: block; font-family: var(--font-sc); font-size: 12.5px; }
/* the goal chip's stars */
.goal-chip .gi .icon { width: 16px; height: 16px; color: var(--gold-hi); }
.goal-chip .gstars { display: inline-flex; gap: 1px; }
.goal-chip .gstars .icon { width: 13px; height: 13px; color: rgba(255, 255, 255, 0.25); }
.goal-chip .gstars .icon.met { color: var(--gold-hi); }
.goal-chip .gstars .icon.failed { color: #ff8a7a; width: 11px; height: 11px; }
.goal-chip.live { cursor: pointer; }
.ts-card .tc-ico { width: 22px; height: 22px; color: #5a1410; }
/* How to Play */
.howto { gap: 10px; }
.howto-opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); color: var(--text); font-family: var(--font-body); }
.howto-opt:hover { background: rgba(255, 255, 255, 0.09); }
.howto-opt img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--gold-lo); }
.howto-ico { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--gold-hi); }
.howto-ico .icon { width: 44px; height: 44px; }
.howto-opt b { display: block; font-family: var(--font-display); font-weight: normal; font-size: 24px; color: var(--gold-hi); }
.howto-opt small { color: var(--text-dim); font-size: 14px; }
@media (max-width: 560px) {
  .ah-title b { font-size: 20px; }
  .ah-title small { font-size: 12px; }
  .ah-stars { font-size: 17px; }
  .adv-card { flex-wrap: wrap; gap: 8px; padding: 8px; }
  .adv-card .adv-step { height: 44px; width: 30px; }
  .adv-medal { width: 48px; height: 48px; font-size: 26px; }
  .ac-info b { font-size: 20px; }
  .ac-acts { order: 5; width: 100%; }
  .ac-acts .btn { flex: 1; }
  .ao-title { font-size: 38px; }
  .adv-bigstars .icon { width: 48px; height: 48px; }
  .adv-bigstars .icon:nth-child(2) { width: 58px; height: 58px; }
  .adv-plundy img { height: 96px; }
  .adv-sheet-head h2 { font-size: 26px; }
}
/* ------------------------------------------------------------------ the tutorial (src/tutorial.js) */
.tut-intro { display: flex; align-items: center; gap: 12px; }
.tut-intro img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold-lo); flex: none; object-fit: cover; }
.tut-intro p { margin: 0; color: var(--text-dim); font-size: 15px; }
.tut-menu { gap: 8px; }
.tut-lesson { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); color: var(--text); font-family: var(--font-body); }
.tut-lesson:hover { background: rgba(255, 255, 255, 0.09); }
.tl-n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 22px; color: #fff1cf; background: radial-gradient(circle at 42% 34%, #4aa3c2, #174c63 72%); border: 2px solid var(--gold); }
.tut-lesson.done .tl-n { background: radial-gradient(circle at 42% 34%, #5cc27a, #1d5a33 72%); border-color: var(--ok); }
.tl-n .icon { width: 20px; height: 20px; }
.tl-txt { display: flex; flex-direction: column; line-height: 1.2; }
.tl-txt b { font-family: var(--font-display); font-weight: normal; font-size: 21px; color: var(--gold-hi); }
.tl-txt small { color: var(--text-dim); font-size: 13.5px; }
.tut-done { display: flex; align-items: center; gap: 14px; }
.tut-done img { height: 130px; flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.tut-done b { display: block; font-family: var(--font-display); font-weight: normal; font-size: 26px; color: var(--gold-hi); }
.tut-done p { margin: 4px 0; }
.tut-done small { color: var(--text-dim); font-family: var(--font-sc); }
@media (max-width: 560px) {
  .tut-done img { height: 100px; }
}
/* ------------------------------------------------------------------ the Pirate's Cove (src/ui/cove.js) */
.cv-icon { display: block; width: 52px; height: 52px; border-radius: 7px; object-fit: cover; flex: none; background: #0b0f14;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.45); }
.cv-icon.xs { width: 22px; height: 22px; border-radius: 4px; }
.cv-icon.sm { width: 30px; height: 30px; border-radius: 5px; }
.cv-icon.md { width: 56px; height: 56px; }
.cv-icon.lg { width: 68px; height: 68px; border-radius: 9px; }
.cv-icon.dim { filter: grayscale(1) brightness(0.45); }
.btn .ico .cv-icon { width: 24px; height: 24px; border-radius: 4px; }
.hi { width: 20px; height: 20px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.ri { width: 18px; height: 18px; object-fit: contain; flex: none; }
.cv-cost { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cv-cost .cc { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-sc); font-size: 15px; color: var(--text); white-space: nowrap; }
.cv-cost .cc.short, .cc.short { color: #ff8a7a; }
.cc.ruby { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-sc); color: #ffb3b3; }
.cv-prog { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.cv-prog i { display: block; height: 100%; background: linear-gradient(90deg, #4f9d3c, #8fdc6b); transition: width 0.9s linear; }
.cv-prog.full i { background: linear-gradient(90deg, #c9572f, #ff9a5a); }
.bad { color: #ff8a7a; }
.good { color: var(--ok); }
/* the screen: everything over the island takes taps only where it is */
.cove-screen { padding: 0 !important; pointer-events: none !important; touch-action: none !important; background: none; animation: none; overflow: hidden !important; }
.cove-screen > * { pointer-events: auto; }
.cove-top { position: absolute; left: calc(var(--safe-l) + 8px); right: calc(var(--safe-r) + 8px); top: calc(var(--safe-t) + 8px);
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; animation: fadeIn 0.35s ease; }
.ct-title { flex: 1; min-width: 0; text-align: center; line-height: 1.1; }
.ct-title b { display: block; font-family: var(--font-display); font-weight: normal; font-size: 26px; color: var(--gold-hi); }
.ct-title small { font-family: var(--font-sc); color: var(--text-dim); font-size: 13.5px; }
.xpbar { height: 4px; margin: 4px auto 0; width: min(220px, 70%); border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.ct-rubies { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 16px; background: rgba(120, 10, 20, 0.35); border: 1px solid rgba(255, 110, 110, 0.4); }
.ct-rubies b { font-family: var(--font-display); font-weight: normal; font-size: 21px; color: #ffd0d0; }
.ct-rubies .ri { width: 22px; height: 22px; }
.cove-hoard { position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; top: calc(var(--safe-t) + 78px); display: flex; align-items: center; gap: 12px;
  padding: 5px 12px; border-radius: 20px; animation: fadeIn 0.35s ease; }
.cove-hoard .hh { font-family: var(--font-sc); font-size: 12.5px; color: var(--gold); letter-spacing: 0.06em; white-space: nowrap; }
.cove-hoard .hc { display: flex; align-items: center; gap: 4px; }
.cove-hoard .hc .hi { width: 30px; height: 30px; }
.cove-hoard .hc b { font-family: var(--font-display); font-weight: normal; font-size: 21px; color: var(--text); min-width: 18px; }
.cove-left { position: absolute; left: calc(var(--safe-l) + 8px); top: calc(var(--safe-t) + 130px); display: flex; flex-direction: column; gap: 8px; width: min(270px, 44vw);
  pointer-events: none !important; }
.cove-left > * { pointer-events: auto; }
.cove-builders { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; color: var(--text); cursor: pointer; font-family: var(--font-body); align-self: flex-start; }
.cove-builders span { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.cove-builders b { font-family: var(--font-display); font-weight: normal; font-size: 19px; color: var(--gold-hi); }
.cove-builders small { font-size: 12px; color: var(--text-dim); }
.cove-tasks { padding: 6px 10px 8px; border-radius: 12px; }
.tk-head { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 2px 0; color: var(--gold-hi); cursor: pointer; font-family: var(--font-sc); font-size: 15px; }
.tk-head small { color: var(--text-dim); margin-left: auto; }
.tk-head .icon { width: 16px; height: 16px; }
.tk-head .tk-tog { transform: rotate(-90deg); }
.tk { display: flex; flex-direction: column; gap: 2px; padding: 5px 0 4px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 14px; color: var(--text); }
.tk .cv-cost .cc { font-size: 13px; }
.tk .hi { width: 16px; height: 16px; }
.cove-bar { position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: calc(var(--safe-b) + 12px); display: flex; gap: 8px; align-items: center; animation: slideUp 0.35s ease; }
.cove-bar .btn { min-height: 50px; padding: 6px 16px; position: relative; }
.cove-bar .cv-home { min-height: 50px; padding: 6px 12px; }
.cv-badge { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--blood-hi, #d0382f); color: #fff;
  font: bold 13px/22px var(--font-body); box-shadow: 0 0 0 2px var(--ink); }
.cove-place { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(var(--safe-b) + 12px); width: min(calc(100% - 16px), 620px);
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; animation: slideUp 0.25s ease; }
.cp-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.cp-text span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cp-text b { font-family: var(--font-display); font-weight: normal; font-size: 20px; color: var(--gold-hi); }
.cp-text small { font-size: 13.5px; color: var(--text-dim); }
.cp-text small.bad { color: #ff8a7a; }
/* a building's panel */
.cove-sheet { width: min(96vw, 560px); }
.cove-sheet .mbody { padding-top: 0; }
.cb-body { gap: 10px; }
.cb-head { display: flex; align-items: center; gap: 12px; }
.cb-head h2 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 28px; color: var(--gold-hi); line-height: 1.05; }
.cb-head small { font-family: var(--font-sc); color: var(--text-dim); }
.cb-npc { margin: 0; font-size: 15px; color: var(--text); }
.cb-npc b { color: var(--gold-hi); font-family: var(--font-sc); }
.cb-job, .cb-up, .cb-info { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); }
.cb-job { border-color: rgba(143, 220, 107, 0.45); }
.cb-jt, .cb-ut { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cb-jt b, .cb-ut b { font-family: var(--font-sc); color: var(--gold-hi); font-size: 16px; }
.cb-job .btn { align-self: flex-start; }
.cb-rp { align-self: flex-start; margin-top: -4px; font-size: 13px; }
.cb-up .btn { align-self: flex-start; }
.cb-up small { color: var(--text-dim); font-size: 13.5px; }
.cb-up small.bad { color: #ff8a7a; }
.cb-info small { color: var(--text-dim); font-size: 13.5px; }
.cb-info .btn { align-self: flex-start; }
.cb-stock { display: flex; align-items: center; gap: 8px; }
.cb-stock .hi { width: 26px; height: 26px; }
.cb-stock b { font-family: var(--font-display); font-weight: normal; font-size: 20px; flex: 1; }
.cb-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.lb-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.lb-row span { flex: 1; min-width: 0; }
.lb-row b { font-family: var(--font-sc); color: var(--gold-hi); }
.lb-row.off { opacity: 0.45; }
.wharf .wf-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf-row > small { width: 34px; color: var(--text-dim); }
.wf-pick, .wf-n { padding: 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); cursor: pointer; color: var(--text); font-family: var(--font-sc); }
.wf-pick .hi { width: 30px; height: 30px; }
.wf-n { padding: 4px 10px; font-size: 15px; }
.wf-pick.on, .wf-n.on { border-color: var(--gold); background: rgba(217, 173, 70, 0.18); }
.wf-arrow { width: 16px; height: 16px; color: var(--gold); }
/* the shop */
.shop-tabs { display: flex; gap: 4px; margin: -4px 0 10px; }
.st-tab { flex: 1; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); color: var(--text-dim); font-family: var(--font-sc); font-size: 15px; cursor: pointer; }
.st-tab.on { color: var(--gold-hi); border-color: var(--gold); background: rgba(217, 173, 70, 0.14); }
.shop-body { gap: 8px; max-height: min(62vh, 560px); overflow-y: auto; padding-right: 2px; }
.shop-card { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); }
.shop-card.off { opacity: 0.62; }
.sc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.sc-mid b { font-family: var(--font-display); font-weight: normal; font-size: 21px; color: var(--gold-hi); }
.sc-mid small { font-size: 13.5px; color: var(--text-dim); }
.sc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.sc-meta .muted { font-size: 13px; }
.sc-btns { display: flex; flex-direction: column; gap: 6px; }
.rar.common { color: #d8d0bf !important; }
.rar.rare { color: #6fb2ff !important; }
.rar.epic { color: #c99bff !important; }
.rar.legendary { color: #ffb347 !important; }
.shop-card.cache.rare { border-color: rgba(111, 178, 255, 0.45); }
.shop-card.cache.epic { border-color: rgba(201, 155, 255, 0.55); }
/* the tech trees, laid out like the old talent trees */
.talent-modal { width: min(96vw, 600px); max-height: calc(100% - 20px); overflow-y: auto; }
.talent-modal .mhead { position: absolute; right: 6px; top: 6px; z-index: 3; padding: 0; background: none; border: 0; }
.talent-modal .mhead h2 { display: none; }
.talent-modal .mbody { padding: 10px 12px 12px; }
.tf { --tree: #3f86b8; display: flex; flex-direction: column; gap: 8px; }
.tf-tabs { display: flex; gap: 4px; margin-right: 50px; }
.tf-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; border-radius: 10px 10px 4px 4px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); color: var(--text-dim); font-family: var(--font-sc); font-size: 15px; }
.tf-tab b { font-family: var(--font-display); font-weight: normal; color: var(--gold-hi); }
.tf-tab.on { color: var(--gold-hi); border-color: var(--gold); background: linear-gradient(180deg, rgba(217, 173, 70, 0.22), rgba(217, 173, 70, 0.05)); }
.tf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tf-head h2 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 30px; color: var(--gold-hi); line-height: 1; }
.tf-head small { font-family: var(--font-sc); color: var(--text-dim); }
.tf-pts { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tf-pts b { font-family: var(--font-display); font-weight: normal; font-size: 30px; color: #8fdc6b; }
.tf-pts small { font-size: 12px; }
.tf-note { font-size: 13.5px; color: var(--text-dim); }
.tf-board { position: relative; border-radius: 12px; padding: 14px 10px; border: 2px solid #4a3b22;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--tree) 26%, #0d1218), #070a0e 80%);
  box-shadow: inset 0 0 0 1px rgba(243, 210, 124, 0.15), inset 0 0 40px rgba(0, 0, 0, 0.8); }
.tf-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 74px); align-items: center; justify-items: center; }
.tf-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tf-arrows .arw { fill: none; stroke: #5d5a52; stroke-width: 7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tf-arrows .arw.met { stroke: #f2c94c; filter: drop-shadow(0 0 3px rgba(242, 201, 76, 0.6)); }
.tf-arrows .arh { fill: #5d5a52; }
.tf-arrows .arh.met { fill: #f2c94c; }
.tal { position: relative; width: 58px; height: 58px; padding: 0; border-radius: 7px; cursor: pointer; background: #000;
  border: 2px solid #4b4b4b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); z-index: 1; }
.tal .cv-icon.ti { width: 100%; height: 100%; border-radius: 5px; box-shadow: none; }
.tal.locked .cv-icon { filter: grayscale(1) brightness(0.55); }
.tal.open { border-color: #4fd36b; box-shadow: 0 0 0 1px #0b2a12, 0 0 10px rgba(79, 211, 107, 0.45); }
.tal.maxed { border-color: #f2c94c; box-shadow: 0 0 0 1px #3a2a06, 0 0 12px rgba(242, 201, 76, 0.5); }
.tal.busy { border-color: #8fdc6b; animation: talPulse 1.4s ease-in-out infinite; }
@keyframes talPulse { 50% { box-shadow: 0 0 0 3px rgba(143, 220, 107, 0.35), 0 0 18px rgba(143, 220, 107, 0.7); } }
.tal.sel { outline: 2px solid #fff3c4; outline-offset: 2px; }
.tal .rk { position: absolute; right: -8px; bottom: -8px; min-width: 30px; padding: 1px 4px; border-radius: 4px; background: #060606; border: 1px solid #555;
  font: bold 12.5px/1.2 var(--font-body); color: #8fdc6b; text-align: center; }
.tal.locked .rk { color: #9a9a9a; }
.tal.maxed .rk { color: #f2c94c; border-color: #7a6020; }
.tal .tb { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; background: #12321a; border: 1px solid #4fd36b;
  font: 11.5px/1.3 var(--font-body); color: #c9f5c0; white-space: nowrap; }
.tf-det { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--ink-line); min-height: 84px; }
.td-head { display: flex; align-items: center; gap: 10px; }
.td-head b { display: block; font-family: var(--font-display); font-weight: normal; font-size: 22px; color: var(--gold-hi); }
.td-head small { font-family: var(--font-sc); color: var(--text-dim); }
.td-now, .td-next { display: flex; flex-direction: column; gap: 1px; font-size: 15px; }
.td-now small, .td-next small { font-family: var(--font-sc); color: #8fdc6b; font-size: 12.5px; letter-spacing: 0.05em; }
.td-next small { color: var(--gold); }
.td-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* opening a Loot Cache */
.loot-open { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px;
  background: radial-gradient(ellipse at 50% 42%, rgba(60, 44, 14, 0.92), rgba(3, 5, 8, 0.96) 70%); animation: fadeIn 0.25s ease; cursor: pointer; pointer-events: auto; }
.loot-open.rare { background: radial-gradient(ellipse at 50% 42%, rgba(24, 48, 88, 0.92), rgba(3, 5, 8, 0.96) 70%); }
.loot-open.epic { background: radial-gradient(ellipse at 50% 42%, rgba(62, 30, 88, 0.92), rgba(3, 5, 8, 0.96) 70%); }
.lo-title { font-family: var(--font-display); font-size: 36px; color: var(--gold-hi); text-shadow: 0 3px 0 #000; }
.lo-chest { position: relative; display: flex; align-items: center; justify-content: center; }
.lo-chest .cv-icon.chest { width: 150px; height: 150px; border-radius: 16px; animation: chestShake 0.5s ease-in-out infinite; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(243, 210, 124, 0.35); }
@keyframes chestShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.02); } 75% { transform: rotate(4deg) scale(1.02); } }
.loot-open.open .lo-chest .cv-icon.chest { animation: chestOpen 0.5s ease forwards; }
@keyframes chestOpen { 40% { transform: scale(1.25); } 100% { transform: scale(0.72); opacity: 0.85; } }
.lo-burst { position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; opacity: 0; }
.loot-open.open .lo-burst { animation: burst 0.7s ease-out; }
@keyframes burst { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 235, 170, 0.95); } 100% { opacity: 0; box-shadow: 0 0 120px 160px rgba(255, 235, 170, 0); } }
.lo-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 620px; }
.lc { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 112px; padding: 10px 6px 8px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(30, 38, 48, 0.95), rgba(12, 16, 22, 0.98)); border: 2px solid rgba(255, 255, 255, 0.18); animation: cardIn 0.4s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes cardIn { from { transform: translateY(30px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.lc .lci { width: 60px; height: 60px; object-fit: contain; }
.lc img.lci.cv-icon { width: 60px; height: 60px; }
.lc b { font-family: var(--font-display); font-weight: normal; font-size: 21px; color: var(--text); line-height: 1.05; }
.lc small { font-size: 12px; color: var(--text-dim); }
.lc.ruby { border-color: rgba(255, 110, 110, 0.55); }
.lc.cos { width: 140px; }
.lc.cos b { font-size: 18px; }
.lc.common { border-color: rgba(216, 208, 191, 0.6); }
.lc.rare { border-color: #6fb2ff; box-shadow: 0 0 16px rgba(111, 178, 255, 0.5); }
.lc.epic { border-color: #c99bff; box-shadow: 0 0 18px rgba(201, 155, 255, 0.6); }
.lc.legendary { border-color: #ffb347; box-shadow: 0 0 24px rgba(255, 179, 71, 0.75); }
.lc .dupe { color: #ffb3b3; }
.lci-wrap { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; }
.lci-wrap .flag { width: 46px !important; height: 46px !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lo-foot { display: flex; gap: 10px; min-height: 48px; }
.lo-hint { color: var(--text-dim); font-family: var(--font-sc); }
.loot-open.open .lo-hint { visibility: hidden; }
/* the pay-out after a game, the briefing's edge */
.cv-pay { display: flex; flex-direction: column; gap: 6px; margin: 10px auto 0; padding: 8px 12px; border-radius: 12px; max-width: 460px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); text-align: left; }
.cp-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-h > b { font-family: var(--font-sc); color: var(--gold); font-size: 14px; letter-spacing: 0.05em; }
.cp-h > span { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-c { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--text); }
.cp-cache { display: inline-flex; align-items: center; gap: 6px; }
.cp-open { display: flex; align-items: center; gap: 8px; color: var(--gold-hi); font-size: 15px; flex-wrap: wrap; }
.cp-open small { color: var(--text-dim); }
.adv-rule.cove { border-color: rgba(143, 220, 107, 0.5); background: rgba(79, 160, 60, 0.14); }
/* the talents Blacktooth's captains bring to a voyage (the briefing and the goals sheet) */
.adv-talents { display: flex; flex-direction: column; gap: 8px; }
.adv-tal-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(208, 56, 47, 0.08); border: 1px solid rgba(208, 56, 47, 0.35); }
.adv-tal-row.ally { background: rgba(79, 160, 60, 0.1); border-color: rgba(92, 194, 122, 0.45); }
.adv-tal-who { display: flex; align-items: center; gap: 8px; }
.adv-tal-who .flag { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.adv-tal-who small { color: var(--text-dim); font-size: 12px; }
.adv-tal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 10px; }
.adv-tal { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adv-tal > span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.adv-tal b { font-size: 14px; }
.adv-tal small { color: var(--text-dim); font-size: 12px; }
.adv-talents.compact .adv-tal-row { padding: 6px 8px; }
.adv-talents.compact .cv-icon.sm { width: 24px; height: 24px; }
.cv-perks { font-size: 13px; color: var(--text-dim); }
.cv-perks b { color: #8fdc6b; font-weight: 600; }
/* titles worn under a name */
.cv-title { display: block; font-family: var(--font-sc); font-size: 12.5px; color: var(--gold); font-style: italic; line-height: 1.1; }
/* portrait frames (UI.avatar's frame) */
.flag.framed { position: relative; overflow: visible; }
.flag.framed::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; }
.flag.pf-rope::after { border: 3px dashed #c9a46a; box-shadow: 0 0 0 2px #6b4a24, inset 0 0 0 1px #6b4a24; }
.flag.pf-drift::after { border: 4px solid #8a6038; box-shadow: 0 0 0 1px #3d2814, inset 0 0 0 1px #3d2814; }
.flag.pf-brass::after { border: 4px solid transparent; background: conic-gradient(#f3d27c, #8f6a1f, #f3d27c, #8f6a1f, #f3d27c) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.flag.pf-anchor::after { border: 3px solid #cfd8e0; box-shadow: 0 0 0 2px #46525e, 0 0 8px rgba(207, 216, 224, 0.6); }
.flag.pf-doubloon::after { border: 4px solid #f2c94c; box-shadow: 0 0 0 2px #7a5a10, 0 0 12px rgba(242, 201, 76, 0.85); }
.flag.pf-kraken::after { border: 4px dotted #4fb38a; box-shadow: 0 0 0 2px #10402e, 0 0 10px rgba(79, 179, 138, 0.7); }
.flag.pf-ghost::after { border: 3px solid #9dffc4; box-shadow: 0 0 10px 2px rgba(120, 255, 180, 0.75); animation: ghostGlow 2.2s ease-in-out infinite; }
@keyframes ghostGlow { 50% { box-shadow: 0 0 18px 5px rgba(120, 255, 180, 0.35); opacity: 0.7; } }
.flag.pf-crown::after { border: 4px solid #ffb347; box-shadow: 0 0 0 2px #7a3d00, 0 0 16px rgba(255, 179, 71, 0.9); }
.flag.pf-crown::before { content: ""; position: absolute; left: 50%; top: -15px; width: 22px; height: 12px; transform: translateX(-50%); z-index: 2;
  background: linear-gradient(#ffd77a, #c98a12); clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); filter: drop-shadow(0 1px 1px #000); }
/* the profile's cosmetics */
.cos-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.cos-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 4px; border-radius: 12px; cursor: pointer; min-width: 64px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); color: var(--text-dim); font-family: var(--font-body); }
.cos-pick .flag { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cos-pick small { font-size: 12px; max-width: 90px; text-align: center; line-height: 1.1; }
.cos-pick.on { border-color: var(--gold); background: rgba(217, 173, 70, 0.14); color: var(--gold-hi); }
.cos-pick.title { min-width: 0; padding: 6px 10px; font-family: var(--font-sc); font-size: 14px; }
@media (max-width: 560px) {
  .cove-top { padding: 6px 8px; gap: 6px; }
  .cove-top > .btn > span:not(.ico) { display: none; } /* (Chart and Conquest: icons only, so the title keeps its line) */
  .cove-top > .btn { padding-left: 10px; padding-right: 10px; }
  .ct-title b { font-size: 21px; }
  .ct-title small { font-size: 11.5px; }
  .ct-rubies { padding: 3px 8px; }
  .ct-rubies b { font-size: 18px; }
  .cove-hoard { top: calc(var(--safe-t) + 66px); gap: 8px; padding: 4px 10px; }
  .cove-hoard .hh { display: none; }
  .cove-hoard .hc .hi { width: 26px; height: 26px; }
  .cove-hoard .hc b { font-size: 18px; }
  .cove-left { top: calc(var(--safe-t) + 112px); width: min(230px, 62vw); }
  .cove-bar .btn { min-height: 46px; padding: 6px 12px; font-size: 15px; }
  .cove-bar .btn .ico .cv-icon { width: 20px; height: 20px; }
  .cb-head h2 { font-size: 24px; }
  .tf-grid { grid-template-rows: repeat(5, 64px); }
  .tal { width: 50px; height: 50px; }
  .tf-head h2 { font-size: 25px; }
  .lc { width: 96px; }
  .lc.cos { width: 120px; }
  .lo-chest .cv-icon.chest { width: 120px; height: 120px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .cove-hoard { top: calc(var(--safe-t) + 8px); left: auto; right: calc(var(--safe-r) + 130px); transform: none; }
  .cove-top { right: auto; width: min(44vw, 420px); }
  .cove-left { top: calc(var(--safe-t) + 70px); }
}
/* (wide screens: the talent tree and the chosen talent side by side) */
@media (min-width: 820px) {
  .talent-modal { width: min(96vw, 880px); }
  .tf { display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-areas: "tabs tabs" "head head" "note note" "board det"; column-gap: 14px; row-gap: 8px; }
  .tf-tabs { grid-area: tabs; }
  .tf-head { grid-area: head; }
  .tf-note { grid-area: note; }
  .tf-board { grid-area: board; }
  .tf-det { grid-area: det; align-self: stretch; }
}
@media (max-height: 760px) and (min-width: 820px) {
  .tf-grid { grid-template-rows: repeat(5, 66px); }
}
/* Settings → Motion: Reduced (html.reduce-motion, set by PL.ui.applyMotion).
   Full motion is the default whatever the device asks for. UI transitions
   snap; loading spinners keep turning (a frozen one looks like a hang) and the
   compass dials run on the Web Animations API, which this doesn't touch. */
html.reduce-motion *:not(.spin), html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }

/* ===================================================================== the Harbour (src/ui/harbour.js) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hb-panel { width: min(96vw, 680px); }
.hb-body { display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.hb-head:empty { display: none; }
.hb-me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); }
.hb-me .grow { display: flex; flex-direction: column; min-width: 0; }
.hb-me small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.hb-face { width: 38px; height: 38px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hb-face.big { width: 64px; height: 64px; }
.hb-intro { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 4px 10px; }
.hb-intro h2 { margin: 0; font-family: var(--font-display); font-weight: normal; color: var(--gold-hi); font-size: 28px; }
.hb-intro-icon .icon { width: 54px; height: 54px; color: var(--gold-hi); }
.hb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%; }
.hb-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.hb-list li .icon { width: 22px; height: 22px; flex: none; color: var(--gold); margin-top: 1px; }
.hb-fine { font-size: 13px; text-align: left; }
.hb-warn { padding: 10px 12px; border-radius: 10px; background: rgba(208, 56, 47, 0.14); border: 1px solid rgba(208, 56, 47, 0.45); color: #ffd0c8; }
.hb-cats { display: flex; width: 100%; }
.hb-cats button { flex: 1; min-width: 0; padding: 6px 2px; font-size: 13.5px; }
.hb-live { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hb-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex: none; }
.hb-dot.on { background: #6fdc84; box-shadow: 0 0 0 0 rgba(111, 220, 132, 0.6); animation: hbPulse 2.2s infinite; }
@keyframes hbPulse { 0% { box-shadow: 0 0 0 0 rgba(111, 220, 132, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(111, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 220, 132, 0); } }
.hb-rows { display: flex; flex-direction: column; gap: 6px; }
.hb-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent;
  color: var(--text); font: inherit; text-align: left; width: 100%; cursor: pointer; }
.hb-row:hover { border-color: var(--ink-line); }
.hb-row.me { border-color: rgba(217, 173, 70, 0.55); background: rgba(217, 173, 70, 0.1); }
.hb-row.unread { border-color: rgba(111, 220, 132, 0.5); }
.hb-place { width: 26px; text-align: center; font-family: var(--font-display); font-size: 19px; color: var(--text-dim); flex: none; }
.hb-place.top { color: var(--gold-hi); }
.hb-who { display: flex; flex-direction: column; min-width: 0; }
.hb-who b, .hb-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-who small { font-size: 12px; }
.hb-link { background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.hb-val { font-family: var(--font-display); font-size: 18px; color: var(--gold-hi); white-space: nowrap; }
.hb-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #3fae5b; color: #fff; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.hb-hint { font-size: 13.5px; text-align: center; padding: 10px 6px; }
.hb-add, .hb-mylink, .hb-compose { display: flex; gap: 8px; align-items: center; }
.hb-mylink { font-size: 13px; flex-wrap: wrap; }
.hb-mylink .muted { flex: 1; min-width: 160px; }
.hb-input, .hb-text { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--ink-line); background: rgba(0, 0, 0, 0.28); color: var(--text); font: inherit; font-size: 15px; }
.hb-text { resize: none; }
.hb-letters { display: flex; flex-direction: column; gap: 8px; max-height: min(52vh, 460px); overflow-y: auto; padding: 4px 2px; }
.hb-lrow { display: flex; }
.hb-lrow.mine { justify-content: flex-end; }
.hb-letter { max-width: 82%; padding: 8px 11px; border-radius: 14px; display: flex; flex-direction: column; gap: 5px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--ink-line); }
.hb-letter.mine { background: rgba(217, 173, 70, 0.14); border-color: rgba(217, 173, 70, 0.4); border-bottom-right-radius: 4px; }
.hb-letter.theirs { border-bottom-left-radius: 4px; }
.hb-letter small { font-size: 11px; align-self: flex-end; }
.hb-words { white-space: pre-wrap; word-break: break-word; }
.hb-gift { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hb-gift .icon { width: 18px; height: 18px; color: var(--gold-hi); }
.hb-bundle { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.hb-bundle > span { display: inline-flex; align-items: center; gap: 3px; }
.hb-res { width: 22px; height: 22px; object-fit: contain; }
.hb-pick { display: flex; align-items: center; gap: 8px; }
.hb-pick .stepper b { min-width: 2.6em; }
.hb-pick .stepper .btn { min-width: 38px; min-height: 34px; }
.hb-card-head { display: flex; gap: 12px; align-items: center; }
.hb-name { font-family: var(--font-display); font-size: 26px; color: var(--gold-hi); line-height: 1.05; }
.hb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hb-stat { display: flex; flex-direction: column; align-items: center; padding: 7px 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.hb-stat b { font-family: var(--font-display); font-weight: normal; font-size: 20px; color: var(--gold-hi); }
.hb-stat small { font-size: 11.5px; color: var(--text-dim); text-align: center; }
.hb-acts { gap: 6px; }
@media (max-width: 480px) {
  .hb-cats button { font-size: 12px; padding: 6px 1px; }
  .hb-letter { max-width: 92%; }
}

/* ---- Co-op Voyages (src/ui/coop.js) and the cloud-save choice (src/net/drive.js) */
.co-panel { width: min(96vw, 660px); }
.co-head { display: flex; align-items: center; gap: 10px; }
.co-head h1 { margin: 0; }
.co-lede { margin: 6px 0 10px; color: var(--text-dim); font-size: 14.5px; }
.co-small { font-size: 13px; }
.co-invite-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px; background: rgba(92, 194, 122, 0.12); border: 1px solid rgba(92, 194, 122, 0.45); font-size: 14px; }
.co-invite-note .icon { width: 20px; height: 20px; flex: none; color: var(--ok); }
.co-list { display: flex; flex-direction: column; gap: 8px; }
.co-mission { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 14px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); color: var(--text); font: inherit; }
.co-mission:hover { background: rgba(255, 255, 255, 0.09); }
.co-mission.locked { opacity: 0.72; }
.co-mission.boss { border-color: rgba(208, 56, 47, 0.55); }
.co-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-info small { font-family: var(--font-sc); color: var(--text-dim); font-size: 12.5px; }
.co-info b { font-family: var(--font-display); font-weight: normal; font-size: 21px; color: var(--gold-hi); line-height: 1.1; }
.co-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--text-dim); }
.co-crew { display: inline-flex; align-items: center; gap: 4px; }
.co-crew .icon { width: 16px; height: 16px; }
.co-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.co-status .istars .icon { width: 16px; height: 16px; }
.co-go .icon { width: 20px; height: 20px; color: var(--text-dim); }
.co-time { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 12px; font-size: 13px; }
.co-time .icon { width: 15px; height: 15px; }
.co-time.sunset { background: rgba(240, 132, 64, 0.18); border: 1px solid rgba(240, 132, 64, 0.55); color: #ffb27a; }
.co-time.dusk { background: rgba(122, 108, 214, 0.18); border: 1px solid rgba(122, 108, 214, 0.55); color: #c4b8ff; }
.adv-rules .co-time { font-size: 14px; padding: 3px 10px 3px 8px; }
.co-berths { display: flex; flex-wrap: wrap; gap: 8px; }
.co-berth { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px dashed var(--ink-line); }
.co-berth.me { border-style: solid; border-color: rgba(92, 194, 122, 0.6); }
.co-berth .icon { width: 18px; height: 18px; }
.co-berth small { color: var(--text-dim); font-size: 12.5px; }
.co-rewards { display: flex; flex-direction: column; gap: 4px; }
.co-reward { display: flex; gap: 10px; align-items: baseline; padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); font-size: 14px; }
.co-reward b { flex: none; min-width: 7.5em; font-family: var(--font-sc); color: var(--gold); font-weight: normal; }
.co-lobby-head h2 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 28px; color: var(--gold-hi); line-height: 1.05; }
.co-lobby-head small { font-family: var(--font-sc); color: var(--text-dim); }
.co-code-row { align-items: center; gap: 14px; margin-top: 10px; }
.co-code-row .room-code { font-size: 46px; }
.co-code-row .qr { width: 104px; height: 104px; flex: none; background: #fff; padding: 6px; border-radius: 8px; }
.co-code-row .qr svg { width: 100%; height: 100%; display: block; }
.co-panel-title { font-family: var(--font-sc); font-size: 18px; color: var(--gold-hi); font-weight: normal; }
.co-crew-panel, .co-rules { padding: 12px; }
.co-rules { display: flex; flex-direction: column; gap: 6px; }
.co-seat .flag.avatar { width: 58px; height: 58px; margin: 2px auto 4px; }
.co-open { cursor: default; gap: 2px; }
.co-open .icon { width: 30px; height: 30px; opacity: 0.6; }
.co-mirror { font-size: 13px; color: var(--text-dim); }
.co-invites { gap: 6px; max-height: min(56vh, 460px); overflow-y: auto; }
.co-friend { align-items: center; gap: 10px; }
.co-fleets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; text-align: left; }
.co-side { padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); display: flex; flex-direction: column; gap: 4px; }
.co-side.won { border-color: rgba(243, 210, 124, 0.6); background: rgba(217, 173, 70, 0.1); }
.co-side-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-sc); color: var(--gold); }
.co-side-head span { font-family: var(--font-display); font-size: 22px; color: var(--gold-hi); }
.co-side-row { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
.co-side-row .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-side-row.me { color: var(--gold-hi); }
.co-side-row .flag { width: 26px; height: 26px; flex: none; }
/* ---- which progress to keep (src/net/drive.js DR.chooser): two cards side by side with the same rows,
   the bigger number lit, the one further along in green; the whole card is the button */
.cs-modal { width: min(96vw, 540px); }
.cs-body { gap: 10px; }
.cs-lead { margin: 0; text-align: center; }
.cs-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs-pick { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
.cs-pick:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.08); }
.cs-pick:active { transform: scale(0.98); }
.cs-pick.best { border-color: rgba(92, 194, 122, 0.75); background: rgba(92, 194, 122, 0.1); }
.cs-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-head .icon { width: 26px; height: 26px; flex: none; color: var(--gold-hi); }
.cs-head b { font-family: var(--font-sc); font-weight: normal; font-size: 18px; color: var(--gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 21px; }
.cs-tag { font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); color: var(--text-dim); white-space: nowrap; }
.cs-tag.best { background: rgba(92, 194, 122, 0.24); color: #d2f5dc; }
.cs-rows { display: flex; flex-direction: column; }
.cs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 14px; color: var(--text-dim); }
.cs-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-row b { font-size: 19px; font-weight: normal; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-row.up b { color: var(--ok); }
.cs-when { font-size: 13px; color: var(--text-dim); }
.cs-keep { display: block; margin-top: auto; padding: 8px 10px; border-radius: 10px; text-align: center; font-family: var(--font-sc); font-size: 16px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--ink-line); color: var(--text); }
.cs-pick.best .cs-keep { color: #f2fff4; text-shadow: 0 1px 0 #0c3317; border-color: rgba(160, 240, 180, 0.55); background: linear-gradient(180deg, #58c27a 0%, #2f8f4f 55%, #1f6a39 100%); }
.cs-safe { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--text-dim); }
.cs-safe .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--gold); }
@media (max-width: 380px) { /* (still side by side on a 320 px phone: the point is comparing them) */
  .cs-picks { gap: 8px; }
  .cs-pick { padding: 10px 9px; gap: 7px; }
  .cs-head { gap: 6px; }
  .cs-head .icon { width: 20px; height: 20px; }
  .cs-head b { font-size: 15px; }
  .cs-tag { font-size: 11px; padding: 3px 6px; }
  .cs-row { font-size: 13px; }
  .cs-row b { font-size: 17px; }
  .cs-keep { padding: 7px 4px; font-size: 14px; }
}
/* the title's menu waits, when the app opens, for the cloud save and the sign-in question (src/ui/screens.js) */
.menu.menu-held { visibility: hidden; pointer-events: none; position: relative; }
.menu-wait { visibility: visible; position: absolute; top: 12px; left: 0; right: 0; margin: 0 auto; width: fit-content; display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; background: rgba(11, 16, 22, 0.82); border: 1px solid var(--ink-line); box-shadow: var(--shadow); font-size: 15px; color: var(--text); }
.menu-wait .icon { width: 22px; height: 22px; color: var(--gold-hi); animation: menuWait 1.6s ease-in-out infinite; }
@keyframes menuWait { 50% { transform: translateY(-3px); opacity: 0.65; } }
.menu.menu-in { animation: fadeIn 0.35s ease both; }
@media (max-width: 480px) {
  .co-code-row .qr { display: none; }
  .co-fleets { grid-template-columns: 1fr; }
  .co-info b { font-size: 19px; }
}
.dc-time { display: flex; justify-content: center; margin: 2px 0 4px; }
.hb-cloudset { gap: 4px; margin-top: 8px; }
.hb-backups { gap: 6px; max-height: min(56vh, 460px); overflow-y: auto; }
/* ---- the sign-in question (src/ui/harbour.js) and Settings › Notifications (src/notify.js) */
.hb-signin .hb-list { margin: 4px 0; }
.hb-skip { align-self: center; margin-top: 2px; padding: 4px 8px; border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
.hb-skip:hover { color: var(--text); }
.nt-box { gap: 4px; margin-top: 8px; }
.nt-note { font-size: 13.5px; padding: 4px 0 2px; }
.nt-acts { gap: 6px; flex-wrap: nowrap; }
/* ---- phones (v1.9.1): the title's Continue buttons in two lines, menu labels that wrap rather than
   spill, the Hoard purse in the page's flow (never over the logo), replay rows that stack */
.btn-2l { display: flex; flex-direction: column; align-items: center; line-height: 1.12; min-width: 0; max-width: 100%; }
.btn-2l b { font-weight: normal; }
.btn-2l small { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; opacity: 0.92; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .btn { white-space: normal; text-align: center; line-height: 1.12; }
.menu .btn > span { min-width: 0; }
.menu .btn.cont-btn { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 560px) and (orientation: portrait) {
  .title-purse { position: relative; top: auto; right: auto; align-self: center; margin: 0 0 -6px; }
  .menu .btn.big { font-size: 20px; padding-left: 14px; padding-right: 14px; }
  .hist.replay { flex-wrap: wrap; row-gap: 8px; }
  .hist.replay > .grow { flex: 1 1 calc(100% - 50px); min-width: 0; }
  .hist.replay > .btn { flex: 0 0 auto; }
  .hist.replay > .btn:first-of-type { margin-left: 44px; }
  .hist.replay > .btn.tiny { margin-left: auto; }
}
@media (max-width: 420px) and (min-width: 361px) and (orientation: portrait) {
  .menu-pair .btn { font-size: 16.5px; gap: 6px; }
}
@media (max-width: 560px) and (orientation: portrait) {
  /* a row with a description and a several-way switch: the words on top, the switch beneath */
  .toggle-row:has(> .seg):has(> .lbl > small) { flex-wrap: wrap; row-gap: 8px; }
  .toggle-row:has(> .seg):has(> .lbl > small) > .lbl { flex: 1 1 100%; }
  .toggle-row:has(> .seg):has(> .lbl > small) > .seg { margin-left: auto; }
  /* the Adventure chart's header: Port and Cove keep their icons, the saga's name gets the room */
  .adv-head { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .adv-head > .btn { padding-left: 9px; padding-right: 9px; }
  .adv-head > .btn > span:not(.ico) { display: none; }
  .ah-title b { font-size: 19px; }
  .ah-title small { font-size: 11.5px; }
}
.co-lobby-head { padding: 12px 14px; }
/* the Play Online menu (src/ui/screens.js SC.playOnline) */
.play-online .howto-ico .icon { width: 40px; height: 40px; }
.play-online .po-extra { display: block; margin-top: 3px; color: var(--gold); font-family: var(--font-sc); font-size: 13px; letter-spacing: 0.02em; }
.menu-foot .btn { white-space: nowrap; } /* (the footer's small buttons size to their words) */
.menu-pair .btn { white-space: nowrap; } /* (side by side, one line each: the phones' smaller type makes the room) */
@media (min-width: 561px) { .menu { width: min(92vw, 400px); } }
.hb-keyrow { flex-wrap: wrap; row-gap: 8px; }
.hb-keyrow > .lbl { flex: 1 1 100%; }
.hb-keyset { flex: 1 1 100%; gap: 8px; flex-wrap: nowrap; }
.hb-keyset .hb-input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
/* ---- the Harbour on phones (v1.9.5): who ye are on one row, the buttons on the next; even action grids */
.hb-me { flex-wrap: wrap; row-gap: 8px; }
.hb-me-id { display: flex; align-items: center; gap: 10px; flex: 1 1 250px; min-width: 0; }
.hb-me-id .grow { display: flex; flex-direction: column; min-width: 0; }
.hb-me-id b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-me-acts { display: flex; gap: 6px; margin-left: auto; flex-wrap: nowrap; }
@media (max-width: 560px) {
  .hb-me-acts { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; }
  .hb-me-acts > .btn:not(.hb-out) { flex: 1 1 28%; min-width: 0; padding-left: 8px; padding-right: 8px; } /* (three a row: My link, Conquest, Clans; then the rest) */
  .hb-me-acts > .btn:not(.hb-out) .ico { display: none; } /* (words, not icons, where room is short) */
  .hb-me-acts > .btn > span:not(.ico) { overflow: hidden; text-overflow: ellipsis; }
  .hb-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
  .hb-acts > .btn { width: 100%; }
  .hb-mylink .muted { flex: 1 1 100%; }
  .hb-live > .muted { flex: 1 1 0; min-width: 0; } /* (the words wrap beside the dot; the button keeps its place) */
  .hb-live > .spacer { display: none; }
}
@media (max-width: 360px) {
  .hb-me-acts > .btn:not(.hb-out) .ico { display: none; }
  .hb-me-acts > .btn { padding-left: 8px; padding-right: 8px; }
  .hb-cats { flex-wrap: wrap; }
  .hb-cats button { flex: 1 1 30%; }
}
/* Settings > Check connection (src/ui/harbour.js HU.checkSheet) */
.hb-checks { gap: 6px; }
.hb-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); }
.hb-check .grow { display: flex; flex-direction: column; min-width: 0; }
.hb-check small { color: var(--text-dim); font-size: 13px; overflow-wrap: anywhere; }
.hb-check-ico .icon { width: 20px; height: 20px; margin-top: 2px; }
.hb-check.ok { border-color: rgba(92, 194, 122, 0.5); }
.hb-check.ok .hb-check-ico { color: var(--ok); }
.hb-check.bad { border-color: rgba(208, 56, 47, 0.55); background: rgba(208, 56, 47, 0.08); }
.hb-check.bad .hb-check-ico { color: #ff8a7a; }
.hb-check.na .hb-check-ico { color: var(--text-dim); }
/* the title's Continue buttons, each with a red X on its right end to give that game up (src/ui/screens.js) */
.cont-row { display: flex; align-items: stretch; width: 100%; }
.cont-row > .btn.cont-btn { flex: 1 1 auto; min-width: 0; z-index: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.menu .cont-row > .btn.cont-x { flex: 0 0 auto; width: 56px; min-height: 0; padding: 0; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cont-x .icon { width: 24px; height: 24px; }
@media (max-width: 560px) and (orientation: portrait) {
  .menu .cont-row > .btn.cont-x { width: 52px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .menu .cont-row > .btn.cont-x { width: 44px; }
  .cont-x .icon { width: 20px; height: 20px; }
}
/* the lobby: a voyage saved together (carry on / start afresh), or who's still to come (src/ui/screens.js) */
.resume-panel { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; border-color: var(--gold); background: linear-gradient(180deg, rgba(217, 173, 70, 0.12), rgba(11, 16, 22, 0.86)); }
.resume-panel .rp-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-sc); color: var(--gold-hi); font-size: 17px; }
.resume-panel .rp-head .icon { width: 20px; height: 20px; }
.resume-panel .rp-acts { gap: 8px; flex-wrap: wrap; }
.resume-panel .rp-wait-row + .rp-wait-row { border-top: 1px solid var(--ink-line); padding-top: 8px; margin-top: 4px; }
/* ===================================================================== Global Conquest (src/ui/gc.js) */
.gc-screen { justify-content: safe center; }
.gc-panel { width: min(96vw, 600px); padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.gc-title { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold-hi); margin-bottom: 2px; }
.gc-title h2 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 32px; }
.gc-title .icon { width: 30px; height: 30px; }
.gc-body { gap: 10px; }
.gc-lede { margin: 0 auto; max-width: 52ch; line-height: 1.45; text-align: center; }
/* (a screen's main buttons sit centred at their own width, not stretched across a wide panel) */
.gc-body > .btn { align-self: center; min-width: min(100%, 260px); }
.gc-foot { gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ink-line); }
@media (max-width: 560px) { .gc-panel { padding: 14px 14px 16px; } .gc-lede { text-align: left; } }
.gc-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-world-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left; color: var(--text);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); font: inherit; }
.gc-world-card:hover { border-color: var(--gold); }
.gc-world-card .icon { width: 26px; height: 26px; color: var(--gold-hi); flex: none; }
.gc-world-card .grow, .gc-world-row .grow { display: flex; flex-direction: column; min-width: 0; }
.gc-world-card small { color: var(--text-dim); }
.gc-world-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); }
.gc-how summary { cursor: pointer; font-family: var(--font-sc); color: var(--gold-hi); }
.gc-how ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.4; }
/* the world view: the 3D chart takes the taps; the bars sit over it */
.gc-world { padding: 0 !important; overflow: hidden !important; pointer-events: none !important; touch-action: none !important; background: none; animation: none; }
.gc-world > * { pointer-events: auto; }
.gc-hud { position: absolute; left: calc(var(--safe-l) + 8px); right: calc(var(--safe-r) + 8px); top: calc(var(--safe-t) + 8px); padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.gc-hud-row { display: flex; align-items: center; gap: 10px; }
.gc-hud-title { flex: 1; min-width: 0; line-height: 1.1; text-align: center; }
.gc-hud-title b { display: block; font-family: var(--font-display); font-weight: normal; font-size: 22px; color: var(--gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-hud-title small { font-family: var(--font-sc); color: var(--text-dim); font-size: 13px; }
.gc-ap { display: flex; align-items: baseline; gap: 2px; padding: 2px 10px; border-radius: 10px; background: rgba(92, 194, 122, 0.16); border: 1px solid rgba(92, 194, 122, 0.55); }
.gc-ap b { font-family: var(--font-display); font-size: 26px; color: #9ff0b6; }
.gc-ap small { font-family: var(--font-sc); font-size: 12px; color: var(--text-dim); }
.gc-ap.out { background: rgba(208, 56, 47, 0.14); border-color: rgba(208, 56, 47, 0.55); }
.gc-ap.out b { color: #ff9a8a; }
.gc-hold { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gc-res, .gc-renown { display: inline-flex; align-items: center; gap: 3px; }
.gc-res b, .gc-renown b { font-family: var(--font-sc); }
.gc-res-img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
.gc-renown .icon { width: 18px; height: 18px; color: var(--gold-hi); }
.gc-side { position: absolute; right: calc(var(--safe-r) + 8px); top: calc(var(--safe-t) + 108px); display: flex; flex-direction: column; gap: 6px; }
.gc-side .btn { justify-content: flex-start; }
.gc-banner { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 104px); padding: 8px 14px; border-radius: 12px; text-align: center;
  background: rgba(11, 16, 22, 0.88); border: 1px solid var(--gold); color: var(--text); max-width: min(92vw, 520px); }
.gc-banner b { color: var(--gold-hi); font-family: var(--font-sc); }
.gc-card { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 10px); width: min(calc(100% - 16px), 720px); max-height: 46vh; overflow-y: auto;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.gc-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gc-card-head b { font-family: var(--font-sc); font-size: 18px; color: var(--gold-hi); }
.gc-card-head .spacer { flex: 1; }
.gc-face { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink-line); }
.gc-hq { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 9px; background: rgba(217, 173, 70, 0.16); color: var(--gold-hi); font-size: 13px; }
.gc-hq .icon { width: 15px; height: 15px; }
.gc-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-dim); font-size: 14px; }
.gc-stats b { color: var(--text); }
.gc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-note { color: var(--text-dim); line-height: 1.4; }
.gc-loading { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 18px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: min(92vw, 420px); }
.gc-offer, .gc-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gc-pick { gap: 6px; padding: 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.gc-pick b { min-width: 18px; text-align: center; font-family: var(--font-sc); }
.gc-odds { padding: 6px 10px; border-radius: 10px; background: rgba(217, 173, 70, 0.1); border: 1px solid rgba(217, 173, 70, 0.4); }
.gc-timer { font-family: var(--font-sc); color: #ff9a8a; font-variant-numeric: tabular-nums; }
.gc-ev { padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); line-height: 1.35; }
.gc-trade-row { display: flex; align-items: center; gap: 8px; }
.gc-trade-row .spacer { flex: 1; }
.gc-trade-n { min-width: 30px; text-align: center; font-family: var(--font-sc); }
.gc-pay { gap: 8px; align-items: center; margin-top: 6px; }
.gc-dot { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.gc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.btn.gc-cost { display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start; column-gap: 8px; row-gap: 0; min-height: 0; padding: 5px 10px; text-align: left; }
.btn.gc-cost .ico { grid-row: span 2; }
.gc-cost-line { display: flex; flex-wrap: wrap; gap: 0 8px; font-family: var(--font-body); font-size: 13px; letter-spacing: 0; color: var(--text-dim); text-shadow: none; }
.gc-cost-line span { display: inline-flex; align-items: center; gap: 2px; }
.gc-cost-line .gc-res-img { width: 16px; height: 16px; }
@media (max-width: 560px) and (orientation: portrait) {
  .gc-side { top: auto; bottom: calc(var(--safe-b) + 46vh + 18px); right: calc(var(--safe-r) + 6px); }
  .gc-side .btn { flex-direction: column; gap: 1px; min-height: 0; min-width: 58px; padding: 5px 4px 4px; font-size: 10.5px; justify-content: center; }
  .gc-side .btn .ico { font-size: 19px; }
  .gc-hud-title b { font-size: 19px; }
  .gc-card { max-height: 42vh; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* (a phone on its side: the hold sits beside the title, the card clear of the side buttons) */
  .gc-hud { flex-direction: row; align-items: center; gap: 12px; padding: 4px 10px; }
  .gc-hud-row { flex: 1; min-width: 0; }
  .gc-hold { flex: none; }
  .gc-card { max-height: 38vh; width: min(calc(100% - 170px), 720px); left: calc(50% - 75px); }
  .gc-side { top: calc(var(--safe-t) + 72px); }
}
/* ===================================================================== Pirate Clans (src/ui/clans.js, src/ui/clanlogo.js) */
.clan-logo { display: inline-block; width: 60px; height: 42px; flex: none; line-height: 0; }
.clan-logo svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
.clan-head { display: flex; align-items: center; gap: 14px; }
.clan-head h3 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 28px; color: var(--gold-hi); }
.clan-motto { font-style: italic; color: var(--text); }
.clan-preview { display: flex; justify-content: center; padding: 6px 0; }
/* (the editor: the flag stays in sight while the colours and icons scroll under it) */
.clan-editor .clan-preview { position: sticky; top: -4px; z-index: 2; margin: 0 -14px; padding: 6px 14px 8px; background: rgba(16, 23, 31, 0.97); border-bottom: 1px solid var(--ink-line); }
.clan-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; padding: 2px; }
.clan-icon { aspect-ratio: 1; padding: 6px; border-radius: 10px; cursor: pointer; color: var(--text); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ink-line); }
.clan-icon svg { width: 100%; height: 100%; display: block; }
.clan-icon.on { border-color: var(--gold); background: rgba(217, 173, 70, 0.2); color: var(--gold-hi); }
.clan-colors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.clan-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.clan-swatch.on { border-color: var(--gold-hi); box-shadow: 0 0 0 2px var(--gold); }
.clan-custom { width: 36px; height: 30px; padding: 0; border: 1px solid var(--ink-line); border-radius: 8px; background: none; cursor: pointer; }
.hb-clan { display: inline-flex; flex: none; }
.hb-clan .clan-logo { width: 30px; height: 21px; }

/* ---- the captains' pills: how close each is to winning (src/ui/hud.js drawScore) ----
   a fill from faint red to solid green across the pill, a bigger ratio, and the one
   in the lead pulsing slowly (team play: the team's group fills and pulses) */
.pchip, .tgrp { position: relative; overflow: hidden; isolation: isolate; }
.pfill { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pchip .nm, .pchip .pts, .pchip .sub, .tgrp .tbadge { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.5); }
.pchip .pts { white-space: nowrap; }
.pchip .pts small { font-size: 16px; color: var(--text); opacity: 0.82; margin-left: 1px; }
.tgrp { flex: none; display: flex; align-items: center; gap: 4px; border-radius: 26px; background: rgba(0, 0, 0, 0.3); }
.tbadge { display: flex; flex-direction: column; align-items: center; min-width: 34px; padding: 0 3px; line-height: 1; }
.tbadge .tpts { font-family: var(--font-display); font-size: 23px; }
.tbadge .tof { font-size: 13px; color: var(--text); opacity: 0.82; }
/* the leader: a slow pulse that stays INSIDE the pill (an inner gold ring, and a gold wash behind the
   words that brightens and fades), so nothing grows past its edge for the strip to crop */
.pchip.lead, .tgrp.lead { border-color: #ffd86b; animation: leadPulse 2.8s ease-in-out infinite; }
.pchip.lead::after, .tgrp.lead::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 222, 120, 0.42), rgba(255, 210, 90, 0.12) 70%, transparent);
  opacity: 0; animation: leadWash 2.8s ease-in-out infinite; }
@keyframes leadPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 216, 107, 0.45), 0 3px 10px rgba(0, 0, 0, 0.4); border-color: rgba(255, 216, 107, 0.75); }
  50% { box-shadow: inset 0 0 0 2px rgba(255, 220, 115, 0.95), inset 0 0 12px rgba(255, 210, 90, 0.5), 0 3px 10px rgba(0, 0, 0, 0.4); border-color: #ffe9a3; }
}
@keyframes leadWash { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* (Settings > Motion: Reduced stills the pulse; the leader keeps an inner gold ring) */
html.reduce-motion .pchip.lead, html.reduce-motion .tgrp.lead { box-shadow: inset 0 0 0 2px rgba(255, 216, 107, 0.9), 0 3px 10px rgba(0, 0, 0, 0.4) !important; }

/* ---- bot captains (src/ui/captains.js): initials on their colours, traits as pips, the picker and the forge ---- */
.flag.mono { font-family: var(--font-sc); font-weight: bold; color: #fff; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); font-size: 13px; }
.pchip .flag.mono { font-size: 12px; }
.flag.mono.dice { background: radial-gradient(circle at 35% 30%, #4a5664, #26303b 60%, #151b22); color: var(--gold-hi); }
.flag.mono .icon, .flag.dice .icon { width: 62%; height: 62%; }
.cap-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; margin-top: 4px; }
.cap-traits.small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; }
.cap-trait { display: flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 12.5px; min-width: 0; }
.cap-trait .icon { width: 14px; height: 14px; flex: none; }
.cap-trait.up { color: var(--gold-hi); }
.cap-trait.down { color: #8fa3b3; }
.cap-trait .cap-tn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-pips { display: inline-flex; gap: 2px; flex: none; }
.cap-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.cap-pips i.on { background: currentColor; }
.cap-sheet .mbody { max-height: min(72vh, 640px); overflow-y: auto; }
.cap-list { gap: 6px; }
.cap-head { font-family: var(--font-sc); color: var(--gold-hi); font-size: 16px; margin: 8px 2px 0; }
.cap-none { font-size: 13px; padding: 2px 4px; }
.cap-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); font: inherit; }
.cap-row:hover { border-color: var(--ink-line); background: rgba(255, 255, 255, 0.07); }
.cap-row.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(217, 173, 70, 0.35); }
.cap-row.off { opacity: 0.45; cursor: default; }
.cap-row .flag { width: 40px; height: 40px; flex: none; font-size: 15px; }
.cap-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.cap-mid b { font-family: var(--font-sc); font-weight: normal; font-size: 16.5px; color: var(--gold-hi); }
.cap-style { font-size: 13px; color: var(--text); opacity: 0.85; }
.cap-blurb { font-size: 12.5px; color: var(--text-dim); }
.cap-tick { width: 22px; height: 22px; color: var(--gold-hi); flex: none; }
.cap-forged { display: flex; align-items: stretch; gap: 6px; }
.cap-forged .cap-row { flex: 1; }
.cap-tools { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.cap-tools .btn { min-width: 38px; min-height: 34px; padding: 4px; }
.cap-tools .icon { width: 17px; height: 17px; }
.cap-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cap-slot { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 12px; cursor: pointer; text-align: left; color: var(--text); font: inherit;
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.1); min-width: 0; }
.cap-slot:hover { border-color: var(--ink-line); }
.cap-slot .flag { width: 34px; height: 34px; flex: none; }
.cap-slot.ally { border-color: rgba(108, 196, 255, 0.55); }
.cap-slot.rival { border-color: rgba(255, 138, 107, 0.45); }
.cap-tag { font-family: var(--font-sc); font-size: 12px; padding: 2px 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); flex: none; }
.cap-slot.ally .cap-tag { color: #6cc4ff; }
.cap-slot.rival .cap-tag { color: #ff8a6b; }
.cap-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.cap-btn .icon { width: 14px; height: 14px; }
.cap-forge { gap: 8px; }
.cap-top { gap: 12px; align-items: center; }
.cap-pbadge .flag { width: 56px; height: 56px; font-size: 20px; }
.cap-name { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ink-line); background: rgba(0, 0, 0, 0.35); color: var(--text); }
.cap-preview { font-size: 13.5px; color: var(--gold-hi); margin-top: 4px; }
.cap-lbl { font-family: var(--font-sc); color: var(--gold-hi); font-size: 15px; margin-top: 4px; }
.cap-faces { display: flex; flex-wrap: wrap; gap: 8px; }
.cap-face { padding: 3px; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; }
.cap-face.on { border-color: var(--gold); }
.cap-face .flag { width: 38px; height: 38px; }
.cap-from { font: inherit; font-size: 15px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--ink-line); background: rgba(0, 0, 0, 0.35); color: var(--text); }
.cap-sliders { display: flex; flex-direction: column; gap: 10px; }
.cap-sl { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.cap-sl-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cap-sl-h .icon { width: 15px; height: 15px; align-self: center; color: var(--gold-hi); }
.cap-sl-h b { font-family: var(--font-sc); font-weight: normal; font-size: 15px; }
.cap-sl-h small { font-size: 12px; flex-basis: 100%; }
.cap-sl .slider { flex-wrap: wrap; }
.cap-sl .slider input[type="range"] { flex: 1; width: auto; min-width: 120px; }
.cap-sl .slider .sv { min-width: 7.5em; color: var(--gold-hi); font-size: 13px; text-align: right; }
.cap-note { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
@media (max-width: 480px) {
  .cap-traits.small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 5px; }
  .cap-slots { grid-template-columns: 1fr; }
  .cap-sl .slider small { display: none; }
}
/* (the captains' badges outside the pills: round, initials centred) */
.cap-row .flag, .cap-slot .flag, .cap-face .flag, .cap-pbadge .flag, .seat .flag.mono {
  border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35); border: 2px solid rgba(0, 0, 0, 0.5); }
.seat .flag.mono { width: 58px; height: 58px; margin: 2px auto 4px; font-size: 22px; }
.lobby.tv .seat .flag.mono { width: 80px; height: 80px; font-size: 30px; }
.add-bot-ico { color: var(--gold-hi); }
.add-bot-ico .icon { width: 34px; height: 34px; }

/* ---- friends at sea (src/net/presence.js, src/ui/harbour.js): a light by each friend's portrait,
   what they're up to, and a count of friends at sea on the title's Harbour button ---- */
.hb-facewrap { position: relative; flex: none; display: inline-flex; }
.hb-pres { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; background: #4a525c;
  border: 2px solid var(--ink-2); box-sizing: border-box; }
.hb-pres.on { background: #6fdc84; box-shadow: 0 0 8px rgba(111, 220, 132, 0.75); }
.hb-pres.away { background: #e7b04a; box-shadow: 0 0 6px rgba(231, 176, 74, 0.6); }
.hb-atsea .hb-pres, .hb-atsea .row > .hb-pres { position: static; flex: none; }
.hb-row.at-sea { border-color: rgba(111, 220, 132, 0.28); background: rgba(111, 220, 132, 0.06); }
.hb-act { color: #8fe3a0; font-size: 12.5px; }
.hb-who small { display: block; overflow: hidden; text-overflow: ellipsis; }
.hb-seaword { margin: 2px 0 4px; }
.hb-atsea { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(111, 220, 132, 0.07);
  border: 1px solid rgba(111, 220, 132, 0.3); }
.hb-atsea .row { gap: 8px; align-items: center; }
.hb-atsea b { font-family: var(--font-sc); font-weight: normal; color: #b6f0c0; }
.hb-recent { display: flex; flex-direction: column; gap: 1px; }
.btn-sea { position: absolute; top: -7px; left: -6px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 5px;
  border-radius: 11px; background: #173a24; border: 1px solid #6fdc84; color: #c9f7d2; font-size: 12px; font-family: var(--font-body); }
.btn-sea[hidden] { display: none; }
.btn-sea i { width: 8px; height: 8px; border-radius: 50%; background: #6fdc84; box-shadow: 0 0 6px rgba(111, 220, 132, 0.9); }
.btn-sea b { font-weight: bold; }
/* the narrowest phones (320 px): the steppers tighten so four cards still fit across */
@media (max-width: 360px) {
  .pickers { gap: 6px; }
  .picker .rcard, .pickers.five .picker .rcard { width: 46px; height: 67px; }
  .picker .step { gap: 4px; }
  .picker .step button { width: 28px; height: 28px; font-size: 17px; }
  .pk-n { min-width: 24px; height: 24px; font-size: 16px; right: -7px; bottom: -7px; }
}
/* phones: How to Play's building costs put their words under the cards (a Man O' War's ten cards
   don't leave room beside them); the forge's name box gives way to its dice; Join and Watch share
   their row; the narrowest phones drop the title's foot-row icons */
@media (max-width: 560px) {
  .rules .costrow { flex-wrap: wrap; row-gap: 2px; }
  .rules .costrow .cost { flex-wrap: wrap; justify-content: flex-start; }
  .rules .costrow span { flex: 1 1 100%; }
}
.cap-name { width: 0; }
.cap-top > .grow { min-width: 0; }
.join-row .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
@media (max-width: 360px) {
  .menu-foot .btn .ico, .join-row .btn .ico { display: none; }
  .menu-foot .btn { padding-left: 4px; padding-right: 4px; }
}
/* the narrowest phones: the Cove's bottom bar (Build, Talents, Loot, home) tightens, then drops its
   pictures; the title's subtitle keeps to one line */
@media (max-width: 380px) {
  .cove-bar { gap: 5px; max-width: calc(100vw - 12px); }
  .cove-bar .btn { padding: 6px 9px; font-size: 14px; }
  .cove-bar .cv-home { padding: 6px 9px; }
  .ct-title small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 340px) {
  .cove-bar .btn:not(.cv-home) .ico { display: none; }
}
/* landscape phones: the Cove's title bar as compact as on portrait ones (icon-only Chart and Conquest,
   a one-line subtitle), so its words don't pile up under the Carpenters' panel */
@media (orientation: landscape) and (max-height: 500px) {
  .cove-top { padding: 6px 8px; gap: 6px; }
  .cove-top > .btn > span:not(.ico) { display: none; }
  .cove-top > .btn { padding-left: 10px; padding-right: 10px; }
  .ct-title b { font-size: 21px; }
  .ct-title small { font-size: 11.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ct-rubies { padding: 3px 8px; }
  .ct-rubies b { font-size: 18px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .cove-hoard { right: calc(var(--safe-r) + 8px); gap: 8px; padding: 4px 10px; }
  .cove-hoard .hh { display: none; }
  .cove-hoard .hc .hi { width: 26px; height: 26px; }
  .cove-hoard .hc b { font-size: 18px; }
}

/* whose turn it is: a white bar under their pill that slides from captain to captain (src/ui/hud.js placeTurnBar);
   the gold highlight is the leader's alone. Room under the pills (and between two rows of them) for it */
.scoreboard { position: relative; padding-bottom: 11px; }
.scoreboard.many { row-gap: 12px; }
@media (max-width: 480px) and (orientation: portrait) { .scoreboard { row-gap: 12px; } }
@media (orientation: landscape) and (max-height: 500px) { .scoreboard { padding-bottom: 9px; } }
.turn-bar { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 5px; border-radius: 3px; pointer-events: none; opacity: 0;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.7);
  transition: transform 0.55s cubic-bezier(0.3, 0.9, 0.3, 1), width 0.55s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.3s ease; }
.turn-bar.on { opacity: 1; }
.turn-bar.still { transition: none; }

/* ------------------------------------------------------------------ the captain designer (src/ui/captain.js, from Captain Clash) */
/* the profile's "Design yer own" tile among the portraits: a dashed blank with a pencil, then their design */
.av-pick.own { position: relative; }
.av-pick.own.fresh { border-style: dashed; border-color: var(--gold); color: var(--gold-hi); }
.av-pick .own-blank { background: rgba(0, 0, 0, 0.28); border: 2px dashed var(--gold); color: var(--gold-hi); }
.av-pick .own-blank .icon { width: 22px; height: 22px; }
.av-pick .own-edit { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffe9a6, var(--gold)); color: #1b1408; border: 1px solid #6b4c12; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); cursor: pointer; }
.av-pick .own-edit .icon { width: 14px; height: 14px; }
/* the designer's sheet: the captain up top, the parts' tabs, their options scrolling under them */
.modal.cd-modal { height: min(92vh, 760px); }
.cd-modal .mbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.cd { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.cd-top { flex: none; display: flex; align-items: center; gap: 14px; }
.cd-ring { flex: none; width: 150px; height: 150px; border-radius: 50%; border: 4px solid; overflow: hidden; background: #1b2631; }
.cd-face { width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
.cd-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cd-lv { font-family: var(--font-sc); font-weight: normal; font-size: 16px; color: var(--gold-hi); }
.cd-next { font-size: 13px; line-height: 1.25; color: var(--text-dim); }
.cd-undo:disabled { opacity: 0.45; }
.cd-tabs { flex: none; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 7px; border-bottom: 1px solid var(--ink-line); touch-action: pan-x; }
.cd-tabs::-webkit-scrollbar { display: none; }
.cd-tabs button { flex: 1 0 auto; min-height: 38px; padding: 6px 5px; border-radius: 19px; border: 1px solid var(--ink-line); background: rgba(0, 0, 0, 0.3);
  color: var(--text-dim); font-family: var(--font-sc); font-size: 14px; cursor: pointer; }
.cd-tabs button.on { border-color: var(--gold); background: rgba(217, 173, 70, 0.18); color: var(--gold-hi); }
.cd-opts { flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 4px 2px 12px; }
.cd-group + .cd-group { margin-top: 12px; }
.cd-glabel { margin: 0 0 6px; font-family: var(--font-sc); font-size: 14px; letter-spacing: 0.06em; color: var(--gold); }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.cd-grid.cd-swatches { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 10px 8px; }
.cd-tile { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 3px 3px; border-radius: 12px;
  border: 2px solid var(--ink-line); background: rgba(255, 255, 255, 0.04); color: var(--text-dim); font-family: var(--font-body); cursor: pointer; }
.cd-tile img { width: 100%; max-width: 76px; aspect-ratio: 1 / 1; border-radius: 9px; display: block; -webkit-user-drag: none; }
.cd-tile small { max-width: 100%; font-size: 11.5px; line-height: 1.1; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cd-tile.on { border-color: var(--gold-hi); background: rgba(217, 173, 70, 0.16); color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(243, 210, 124, 0.25); }
.cd-sw { position: relative; justify-self: center; width: 100%; max-width: 44px; aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.55); cursor: pointer;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.3); }
.cd-sw.on { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(243, 210, 124, 0.45), inset 0 -4px 8px rgba(0, 0, 0, 0.3); }
.cd-tile.locked img { filter: grayscale(0.85) brightness(0.55); }
.cd-sw.locked { filter: grayscale(0.7) brightness(0.6); }
.cd-tile.locked { color: var(--text-dim); }
/* a locked piece: a padlock and the level it opens at */
.cd-lock { position: absolute; top: 3px; right: 3px; display: flex; align-items: center; gap: 2px; padding: 1px 5px 1px 3px; border-radius: 9px; pointer-events: none;
  background: rgba(11, 16, 22, 0.88); border: 1px solid var(--ink-line); color: var(--gold-hi); font-family: var(--font-sc); font-size: 11px; line-height: 1.25; white-space: nowrap; }
.cd-lock .icon { width: 11px; height: 11px; }
.cd-sw .cd-lock { top: auto; right: 50%; bottom: -7px; transform: translateX(50%); filter: none; }
@media (max-width: 600px) {
  .modal-wrap.sheet .cd-modal { height: 88%; max-height: 88%; }
}
@media (max-height: 700px) {
  .cd-ring { width: 116px; height: 116px; }
}
/* the portrait's stage: the ring, the head-to-toe toggle on its corner, the 3D captain in it (src/render/captain3d.js) */
.cd-left { flex: none; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cd-stage { position: relative; flex: none; }
.cd-ring { position: relative; }
.cd-ring.in3d .cd-face { visibility: hidden; }
.cd-3d-btn { position: absolute; right: -4px; bottom: -2px; min-width: 40px; height: 32px; padding: 0 8px; border-radius: 16px; cursor: pointer;
  border: 1px solid #6b4c12; background: linear-gradient(180deg, #ffe9a6, var(--gold)); color: #1b1408; font-family: var(--font-display); font-size: 17px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.cd-3d-btn[aria-pressed="true"] { background: linear-gradient(180deg, #7dd3a0, #2f9c52); border-color: #145a2b; color: #f4fff6; }
.cd-3d-btn .ico { display: flex; align-items: center; justify-content: center; }
.cd-3d-btn .ico svg { display: block; }
/* the expressions: a strip of the captain's face in each, a tap plays it on the portrait */
.cd-exprs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 1px 1px 3px; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.cd-exprs::-webkit-scrollbar { display: none; }
.cd-expr { flex: none; width: 61px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 1px 2px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--ink-line); background: rgba(255, 255, 255, 0.04); color: var(--text-dim); font-family: var(--font-body); }
.cd-expr img { width: 38px; height: 38px; border-radius: 50%; display: block; background: #1b2631; -webkit-user-drag: none; }
.cd-expr small { max-width: 100%; font-size: 10.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-expr.on { border-color: var(--gold-hi); background: rgba(217, 173, 70, 0.16); color: var(--gold-hi); }
.cd-tile img, .cd-expr img { object-fit: cover; }
@media (min-width: 700px) {
  .modal.cd-modal { width: min(94vw, 820px); height: min(90vh, 720px); }
  .cd { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px 18px; }
  .cd-left { grid-row: 1 / span 2; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .cd-top { flex-direction: column; justify-content: flex-start; text-align: center; padding-top: 6px; }
  .cd-ring { width: 200px; height: 200px; }
  .cd-side { align-items: center; }
  .cd-exprs { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 3px; }
  .cd-expr { width: 61px; }
  .cd-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}
/* the designer's 3D captain in the ring; head to toe, the ring stands taller */
.cd-face.cd-face3d, .cd-ring.in3d .cd-face.cd-face3d { visibility: visible; position: relative; width: 100%; height: 100%; }
.cd-ring.in3d { border-radius: 22px; height: 196px; }
@media (max-height: 700px) { .cd-ring.in3d { height: 156px; } }
@media (min-width: 700px) { .cd-ring.in3d { height: 262px; } }
/* (a portrait's ring is round wherever it shows, as its picture, its frame and a 3D captain are) */
.flag.avatar { border-radius: 50%; }
/* (a 3D captain's ring where nothing sizes it, as on the captain's card: as big as a stock portrait's picture shows
   there, 88 px in its 2 px ring. Any rule that sizes a ring wins: this one weighs nothing) */
:where(.flag.avatar.a3d) { width: 92px; height: 92px; }
/* the Captain's Log: their portrait (a stock one or their own design) by their name */
.log-captain .flag.avatar.log-face { width: 64px; height: 64px; flex: none; }
/* a matchmade table's seats: each captain's portrait, or their colours */
.mm-seat .flag { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------------------ the captains' 3D portraits (src/render/portrait3d.js) */
/* a portrait's canvas (a still's picture), its stand-in behind it till the captain's drawn: their colour, a silhouette */
.p3d-cv { display: block; width: 100%; height: 100%; background: transparent center / contain no-repeat; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
.p3d-cv.p3d-round, .flag.avatar > .p3d-cv { border-radius: 50%; }
img.p3d-cv { object-fit: cover; }
.p3d-cv.p3d-turn { touch-action: none; cursor: grab; }
.p3d-cv.p3d-turn.grabbing { cursor: grabbing; }

/* ------------------------------------------------------------------ the captain's own 3D captain in the Adventure's story
   (src/ui/talk.js, src/ui/adventure.js, src/render/advmap.js): only for a captain wearing a design of their own */
/* the talk scenes: the one the cast speak to, standing on the speech box across from whoever speaks (as the cast
   stand), turned to them, nearly all in view; a rise as they turn to the other side */
.ts-me { position: absolute; bottom: calc(var(--safe-b) + var(--boxh, 118px) - 4px); height: min(48vh, 430px); aspect-ratio: 5 / 8;
  display: none; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)); }
.ts-me.on { display: block; }
.ts-me.left { left: calc(50% - min(47vw, 380px) + 6px); }
.ts-me.right { right: calc(50% - min(47vw, 380px) + 6px); }
.ts-me.rise { animation: tsMeRise 0.3s ease both; }
@keyframes tsMeRise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.talk-scene.titled .ts-me { visibility: hidden; }
html.reduce-motion .ts-me.rise { animation: none; }
@media (max-width: 560px) {
  .ts-me { height: min(29vh, 245px); bottom: calc(var(--safe-b) + var(--boxh, 118px) + 12px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .ts-me { height: 48vh; }
}
/* a voyage's briefing: the captain beside their rivals (or their crew) */
.adv-rival.you { border-color: var(--gold); background: rgba(217, 173, 70, 0.1); }
.adv-rival.you .flag { width: 44px; height: 44px; }
.adv-vs { display: flex; align-items: center; color: var(--gold); padding: 0 2px; }
.adv-vs .icon { width: 22px; height: 22px; }
/* the results: Plundy speaks to the captain, whose 3D captain answers */
.adv-plundy .adv-me { flex: none; align-self: center; margin-left: 8px; }
.adv-plundy .adv-me .flag { width: 72px; height: 72px; }
@media (max-width: 560px) {
  .adv-plundy .adv-me .flag { width: 58px; height: 58px; }
  .adv-plundy.with-me .tb-bubble { max-width: 200px; }
}