/* GRAVETIDE — dark nautical gothic UI. See docs/07_UI_UX.md for tokens and rules. */
:root {
  --ink: #0b0d10;
  --graphite: #1b1f25;
  --slate: #2a313a;
  --steel: #5d6a78;
  --steel-text: #7d8996; /* muted words: 5.4:1 on the dark wood (docs/22; steel itself was 3.5:1) */
  --fog: #9aa6b2;
  --bone: #d8d2c4;
  --silver: #b9bcc0;
  --brass: #b08d57;
  --brass-dim: #6f5a38;
  --burgundy: #4a1519;
  --blood: #8e2a2a;
  --turq: #2ee6c8;
  --turq-dim: rgba(46, 230, 200, 0.18);
  --good: #7fb58a;
  --bad: #d06a5e;
  --gold: #e0b862;
  --xp: #8fb3d9;
  --display: 'IM Fell English SC', 'Cormorant Garamond', Georgia, serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--bone); font-family: var(--sans); font-size: 13px; overflow: hidden; }
canvas#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair; }
canvas#world-sea, canvas#world-sky { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; }
.hidden { display: none !important; }
button { font-family: var(--sans); }

.panel {
  background: linear-gradient(180deg, rgba(22, 20, 19, 0.96), rgba(12, 12, 13, 0.97));
  border: 1px solid var(--brass-dim);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(0, 0, 0, 0.6), 0 20px 60px rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
.title { font-family: var(--display); font-size: 64px; letter-spacing: 0.08em; margin: 0; color: var(--bone); text-shadow: 0 0 24px rgba(46, 230, 200, 0.15); font-weight: 400; }
.title-sm { font-family: var(--display); font-size: 30px; margin: 0 0 12px; font-weight: 400; letter-spacing: 0.05em; }
.subtitle { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--fog); margin: 4px 0 26px; }
.hint { color: var(--steel-text); font-size: 11px; margin-top: 18px; }
.error { color: var(--bad); min-height: 1em; }

.btn {
  background: linear-gradient(180deg, #2a2521, #17140f);
  color: var(--bone);
  border: 1px solid var(--brass-dim);
  padding: 7px 14px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.btn:hover:not(:disabled) { border-color: var(--brass); color: #fff; box-shadow: 0 0 10px rgba(176, 141, 87, 0.25); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { border-color: var(--brass); color: var(--gold); font-weight: 600; }
.btn-danger { border-color: var(--blood); color: #e6a39a; }
.btn-small { padding: 3px 8px; font-size: 11px; }

/* ---------- shared pieces (rows, labels, bars) used by the HUD and every screen */
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lbl { color: var(--fog); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.val { font-variant-numeric: tabular-nums; }
.gold { color: var(--gold); }
.wanted { color: var(--bad); letter-spacing: 2px; }
.bar { height: 7px; background: #15181c; border: 1px solid #000; position: relative; margin: 3px 0 6px; border-radius: 2px; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--steel); transition: width 0.15s; }
.bar.hull > i { background: linear-gradient(90deg, #6e2a24, #a4523f); }
.bar.sails > i { background: linear-gradient(90deg, #6e6a5c, #b9b19b); }
.bar.crew > i { background: linear-gradient(90deg, #3e5566, #6f8ea3); }
.bar.morale > i { background: linear-gradient(90deg, #4d4630, #b08d57); }
.bar.sanity > i { background: linear-gradient(90deg, #3a2c3e, #8e7aa0); }
.bar.dread > i { background: linear-gradient(90deg, #06302b, #2ee6c8); }
.bar.xp > i { background: linear-gradient(90deg, #2b4660, #8fb3d9); }
.sail-steps { display: flex; gap: 3px; margin-top: 4px; }
.sail-steps span { flex: 1; height: 10px; border: 1px solid var(--brass-dim); background: #111; border-radius: 2px; }
.sail-steps span.on { background: var(--silver); }
.sail-steps span.target { border-color: var(--gold); }

/* ---------- screens */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; }
.keyart { position: absolute; inset: 0; background: #06080b center / cover no-repeat; filter: saturate(0.9) brightness(0.8); }
.keyart::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%); }
.login-panel { position: relative; padding: 38px 46px; width: 520px; text-align: center; background: rgba(8, 9, 11, 0.82); backdrop-filter: blur(3px); }
.login-panel label { display: block; text-align: left; color: var(--fog); font-size: 12px; margin-bottom: 14px; }
.login-panel input, #chat-input, .field {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; background: #0e1013; border: 1px solid var(--slate); color: var(--bone); font-size: 15px; font-family: var(--serif); border-radius: 2px; outline: none;
}
.login-panel input:focus, .field:focus { border-color: var(--brass); }

.captain-wrap { width: min(1180px, 96vw); height: min(760px, 94vh); padding: 22px; display: grid; grid-template-rows: auto 1fr; grid-template-columns: 330px 1fr; gap: 18px; }
.captain-wrap h2 { grid-column: 1 / 3; }
.captain-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.captain-card { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 8px; border: 1px solid var(--slate); background: #0f1114; cursor: pointer; align-items: center; }
.captain-card:hover, .captain-card.active { border-color: var(--brass); background: #16140f; }
.captain-card .portrait { width: 64px; height: 80px; background: #111 center / cover; border: 1px solid #000; }
.captain-card .arch { font-family: var(--display); font-size: 17px; }
.captain-card .nm { color: var(--fog); font-size: 12px; font-family: var(--serif); font-style: italic; }
.premium { color: var(--turq); font-size: 10px; letter-spacing: 0.12em; }
.captain-detail { display: grid; grid-template-columns: 300px 1fr; gap: 20px; overflow-y: auto; }
.captain-detail .big-portrait { width: 300px; height: 400px; background: #0c0c0c center / cover; border: 1px solid var(--brass-dim); box-shadow: inset 0 0 60px rgba(0,0,0,0.8); }
.captain-detail h3 { font-family: var(--display); font-size: 28px; margin: 0; font-weight: 400; }
.captain-detail .epithet { font-family: var(--serif); font-style: italic; color: var(--brass); font-size: 18px; }
.captain-detail p { font-family: var(--serif); font-size: 16px; line-height: 1.4; color: #cfc8b9; }
.ability { border-left: 2px solid var(--brass-dim); padding: 4px 10px; margin: 8px 0; }
.ability b { color: var(--bone); }
.ability .key { display: inline-block; min-width: 20px; text-align: center; border: 1px solid var(--brass-dim); color: var(--gold); font-size: 11px; margin-right: 6px; }
.ability.ult { border-left-color: var(--turq); }
.ability small { display: block; color: var(--fog); font-size: 12px; }

/* ---------- HUD (Phase 11: mobile-first; phones first, then tablets and desktops) */
:root {
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --mm: 108px; --uf-p: 56px; --slot: 42px; --stick: 124px; --fire: 64px; --touch-h: 0px; --top-h: 150px;
}
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
/* Layers in the HUD's frame: the toasts over the windows (a sale, a refusal, a quest taken are seen in port too),
   the chat under the windows unless it is open (a whisper from the list of friends opens it over them). */
.hud-layer { position: fixed; inset: 0; pointer-events: none; }
#hud-toasts { z-index: 40; }
#hud-chat { z-index: 10; }
#hud-chat:has(#chat.open) { z-index: 40; }
.hud-block { position: absolute; pointer-events: auto; background: rgba(10, 11, 13, 0.82); border: 1px solid rgba(111, 90, 56, 0.55); border-radius: 3px; padding: 8px 10px; }

/* Unit frame: the captain's portrait in its ring, name, silver and the ship's three lives. */
.unit-frame { position: absolute; top: calc(var(--sa-t) + 8px); left: calc(var(--sa-l) + 8px); width: min(calc(100vw - var(--mm) - 36px), 340px); display: flex; gap: 10px; align-items: center; pointer-events: auto; cursor: pointer; }
.uf-portrait { position: relative; flex: none; width: var(--uf-p); height: var(--uf-p); border-radius: 50%; background: #111 center 18% / cover; box-shadow: 0 0 0 2px var(--brass-dim), 0 0 12px #000; }
.skinned .uf-portrait { box-shadow: 0 0 10px #000; }
.skinned .uf-portrait::after { content: ''; position: absolute; inset: -17% -21% -21% -17%; background: var(--ui-portrait-ring) center / 100% 100% no-repeat; pointer-events: none; }
.uf-level { position: absolute; right: -10%; bottom: -10%; width: 38%; height: 38%; display: flex; align-items: center; justify-content: center; z-index: 2; font: 700 11px var(--sans); color: var(--gold); background: radial-gradient(circle, #16110b 55%, transparent 60%); border-radius: 50%; }
.uf-body { flex: 1; min-width: 0; padding: 4px 8px 5px; background: linear-gradient(90deg, rgba(10, 11, 13, 0.9), rgba(10, 11, 13, 0.6)); border: 1px solid rgba(111, 90, 56, 0.5); border-radius: 3px; }
.uf-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.uf-name { font-family: var(--display); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf-sub { font-size: 10px; color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: space-between; gap: 6px; }
.fbar { position: relative; height: 13px; margin: 3px 0 0; background: #0a0c0e; border: 1px solid #000; }
.skinned .fbar { border-style: solid; border-width: 3px 7px; border-color: transparent; border-image: var(--ui-bar) 24 36 fill / 3px 7px stretch; background-clip: padding-box; }
.fbar > i { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.2s; }
.fbar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 5px; font: 600 9px/1 var(--sans); color: var(--bone); text-shadow: 0 1px 2px #000; letter-spacing: 0.03em; }
.fbar.hull > i { background: linear-gradient(180deg, #a4523f, #5e2219); }
.fbar.sails > i { background: linear-gradient(180deg, #b9b19b, #5f5a4c); }
.fbar.crew > i { background: linear-gradient(180deg, #6f8ea3, #2f4452); }
.fbar.xp { height: 5px; border-width: 1px; border-image: none; margin-top: 3px; }
.fbar.xp > i { background: linear-gradient(90deg, #2b4660, #8fb3d9); }
/* Rest ashore (docs/11 P6): the stretch of the bar that will fill double, in a paler violet. */
.fbar.xp > .xp-rest { position: absolute; top: 0; bottom: 0; background: rgba(176, 140, 230, 0.45); box-shadow: inset 0 0 0 1px rgba(200, 170, 255, 0.35); }

/* Minimap: the chart in a compass ring; tap for the world chart. */
.minimap-frame { position: absolute; top: calc(var(--sa-t) + 8px); right: calc(var(--sa-r) + 8px); width: var(--mm); height: var(--mm); pointer-events: auto; cursor: pointer; }
#minimap { position: absolute; inset: 11%; width: 78%; height: 78%; border-radius: 50%; background: #070a0d; box-shadow: 0 0 0 2px var(--brass-dim), inset 0 0 20px #000; }
.skinned #minimap { box-shadow: inset 0 0 18px #000; }
.mm-ring { position: absolute; inset: 0; pointer-events: none; }
.skinned .mm-ring { background: var(--ui-minimap-ring) center / contain no-repeat; }
#hud-region { position: absolute; top: calc(var(--sa-t) + var(--mm) + 10px); right: calc(var(--sa-r) + 6px); width: max(var(--mm), 150px); text-align: right; font-family: var(--serif); font-size: 12px; line-height: 1.25; color: var(--fog); text-shadow: 0 1px 2px #000, 0 0 6px #000; pointer-events: none; }
#hud-region .rg-extra { display: none; }
#unread { position: absolute; top: 2px; left: 2px; font-size: 13px; color: var(--gold); text-shadow: 0 1px 2px #000; pointer-events: none; z-index: 2; }

/* Top stack: boss, the First Watch, captain's goals — one column, never on top of each other. */
#hud-stack { position: absolute; top: calc(var(--sa-t) + var(--top-h)); left: calc(var(--sa-l) + 8px); right: calc(var(--sa-r) + 8px); display: flex; flex-direction: column; gap: 6px; align-items: stretch; pointer-events: none; }
#hud-stack > * { position: relative !important; left: auto !important; top: auto !important; right: auto !important; transform: none !important; width: auto !important; margin: 0; }
#hud-stack > .hud-block, #hud-goals { pointer-events: auto; }
/* The fold (owner, 2026-10-03): the goals, news, holiday and hints behind one round button at the head of the stack,
   the count of them on it; what is happening now stays out. */
#hud #hud-stack > .hud-fold { order: -100; align-self: flex-start; flex: none; width: 40px !important; max-width: 40px !important; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(10, 11, 13, 0.85); cursor: pointer; pointer-events: auto; }
.hud-fold::after { content: ''; position: absolute; inset: -3px; background: var(--ui-ring) center / contain no-repeat; pointer-events: none; }
.hud-fold img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; border-radius: 50%; }
.hud-fold b { position: absolute; right: -5px; top: -5px; z-index: 1; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--gold);
  color: #1a1208; font: 700 10.5px/17px var(--sans); text-align: center; box-shadow: 0 1px 3px #000; }
.hud-fold b:empty { display: none; }
.hud-fold.hidden { display: none; }
body:not(.hud-folded) .hud-fold { filter: drop-shadow(0 0 5px rgba(232, 196, 106, 0.7)); }
/* (the First Watch's lesson is what is happening now: never folded away from a captain who has yet to learn the fold) */
body.hud-folded #hud-stack > :is(#hud-tip, #hud-fish, #hud-order, #hud-holiday, #hud-world, #hud-goals, #hud-feed) { display: none !important; }
/* Party frames (docs/11 P6): a groupmate a card — name, level, hull, where — in a wrapping row atop the stack. */
#hud-party { display: flex; flex-wrap: wrap; gap: 4px; pointer-events: auto; }
#hud-party.hidden { display: none; }
.pf { display: grid; gap: 2px; width: 150px; padding: 3px 6px 4px; background: rgba(10, 11, 13, 0.72); border: 1px solid rgba(111, 90, 56, 0.55); border-left: 2px solid #7fd48a; color: var(--bone); font: 11px var(--sans); text-align: left; cursor: pointer; }
.pf.off { opacity: 0.55; border-left-color: #5a5347; }
.pf-top { display: flex; justify-content: space-between; gap: 6px; min-width: 0; }
.pf-top b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-lv { color: var(--gold); font-variant-numeric: tabular-nums; }
.pf .fbar.pf-hull { height: 4px; margin: 0; border-width: 1px; border-image: none; }
.pf .fbar.pf-hull > i { background: linear-gradient(90deg, #7a2a24, #c0463a); }
.pf-where { color: var(--fog); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-arrow { display: inline-block; font-style: normal; font-size: 8px; margin-right: 3px; color: #7fd48a; }
.pf-more { align-self: center; color: var(--fog); font: 11px var(--sans); }
@media (max-width: 480px) { .pf { width: calc(50% - 2px); } }
body.touch #hud-stack { right: calc(var(--sa-r) + 60px); }

/* Bottom stack: hints, the prompt, the context action and the action bar. */
#hud-bottom { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sa-b) + 8px + var(--touch-h)); width: max-content; max-width: calc(100vw - 16px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
#hud-bottom > * { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; }
#hud-prompt { font-family: var(--serif); font-size: 16px; color: var(--bone); text-shadow: 0 1px 3px #000, 0 0 8px #000; text-align: center; max-width: 92vw; }
#hud-prompt:empty { display: none; }
#hud-prompt kbd { border: 1px solid var(--brass); color: var(--gold); padding: 0 6px; font-family: var(--sans); font-size: 12px; margin-right: 4px; }

/* Action bar: slots in brass bezels on a carved beam. */
.action-bar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 8px 8px; pointer-events: auto; }
.skinned .action-bar::after { content: ''; position: absolute; left: -7%; right: -7%; bottom: -10px; height: 38px; background: var(--ui-actionbar) center bottom / 100% 100% no-repeat; pointer-events: none; z-index: -1; }
.ab-reload { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.rl { width: 74px; font: 600 9px var(--sans); color: var(--fog); text-align: center; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
.rl .fbar { height: 7px; border-width: 1px; border-image: none; margin-top: 1px; }
.rl .fbar > i { background: var(--brass-dim); }
.rl.ready { color: var(--gold); }
.rl.ready .fbar > i { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.ab-row { display: flex; gap: 5px; align-items: flex-end; max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; padding: 5px 4px 1px; }
.ab-row::-webkit-scrollbar { display: none; }
.ab-group { display: flex; gap: 5px; flex: none; }
.ab-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: linear-gradient(transparent, var(--brass-dim), transparent); flex: none; }
.slot { position: relative; flex: none; width: var(--slot); height: var(--slot); background: #0b0d10; border: 1px solid var(--brass-dim); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.skinned .slot { border-color: transparent; }
.skinned .slot::after { content: ''; position: absolute; inset: -4px; background: var(--ui-slot) center / 100% 100% no-repeat; pointer-events: none; z-index: 4; }
.slot > img, .slot > .glyph { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; display: flex; align-items: center; justify-content: center; font-size: calc(var(--slot) * 0.42); color: var(--bone); }
.slot .nm { position: absolute; left: 2px; right: 2px; bottom: 2px; font: 600 8px/1.05 var(--sans); color: var(--bone); text-align: center; text-shadow: 0 1px 2px #000, 0 0 3px #000; z-index: 3; pointer-events: none; }
.slot.has-art .nm { display: none; }
.slot .k { position: absolute; left: 3px; top: 2px; font: 700 10px var(--sans); color: var(--gold); text-shadow: 0 1px 2px #000; z-index: 5; }
.slot .q { position: absolute; right: 3px; bottom: 2px; font: 700 10px var(--sans); color: var(--bone); text-shadow: 0 1px 2px #000, 0 0 3px #000; z-index: 5; }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.72); z-index: 3; }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 15px var(--sans); color: var(--bone); text-shadow: 0 1px 3px #000; z-index: 5; }
.slot .charge { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--turq); z-index: 5; }
.slot.sel { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(224, 184, 98, 0.55); }
.slot.ult { box-shadow: 0 0 10px rgba(46, 230, 200, 0.35); }
.slot.locked > img, .slot.locked > .glyph { filter: grayscale(1) brightness(0.45); }
.slot.talent { box-shadow: 0 0 8px rgba(224, 184, 98, 0.25); }
.slot:active { transform: translateY(1px); }
body.touch .slot .k { display: none; }
.ab-mode { font: 600 9px var(--sans); color: var(--fog); letter-spacing: 0.05em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }

/* Ship panel: detailed condition (desktop column; a sheet on phones, opened from the unit frame). */
.ship-panel { display: none; }
body.ship-open .ship-panel { display: block; top: calc(var(--sa-t) + var(--uf-p) + 24px); left: calc(var(--sa-l) + 8px); width: min(300px, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto; z-index: 3; }
.ship-panel .bar { height: 6px; margin: 2px 0 5px; }

/* Compass and the micro menu (desktop). */
#hud-nav { display: none; }
.micro-menu { display: none; }
.micro-menu button { position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid var(--brass-dim); border-radius: 50%; background: #111316; color: var(--bone); cursor: pointer; font-size: 16px; }
.skinned .micro-menu button { border: 0; background: rgba(10, 11, 13, 0.85); }
.skinned .micro-menu button::after { content: ''; position: absolute; inset: -3px; background: var(--ui-ring) center / contain no-repeat; pointer-events: none; }
.micro-menu button img, .micro-menu button .glyph { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.micro-menu button:hover { filter: brightness(1.25); }
.compass { width: 100%; height: auto; margin: 0 auto; display: block; }

/* Touch controls. */
#touch { display: none; }
body.touch #touch { display: block; }
#tc-stick { position: absolute; left: calc(var(--sa-l) + 10px); bottom: calc(var(--sa-b) + 10px); width: var(--stick); height: var(--stick); border-radius: 50%; pointer-events: auto; touch-action: none; background: radial-gradient(circle, rgba(30, 26, 20, 0.85) 0 60%, rgba(111, 90, 56, 0.9) 61% 64%, rgba(10, 11, 13, 0.6) 65%); }
.skinned #tc-stick { background: var(--ui-stick-base) center / contain no-repeat; }
#tc-stick.held { filter: brightness(1.2); }
#tc-knob { position: absolute; left: 50%; top: 50%; width: 66%; height: 66%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #8c6b3a 0 18%, #2a2118 20% 60%, #6f5a38 62% 66%, transparent 68%); pointer-events: none; }
.skinned #tc-knob { background: var(--ui-helm) center / contain no-repeat; filter: drop-shadow(0 3px 5px #000); }
#tc-course { position: absolute; inset: -6px; pointer-events: none; }
#tc-course::before { content: ''; position: absolute; left: 50%; top: 0; margin-left: -7px; border: 7px solid transparent; border-bottom: 12px solid var(--gold); border-top: 0; filter: drop-shadow(0 0 4px rgba(224, 184, 98, 0.8)); }
@keyframes ctx-pulse { 50% { filter: brightness(1.3); } }
body.touch #hud-prompt { display: none; }

/* Phones: touch controls take the bottom row, so the action bar sits above them. */
body.touch { --touch-h: calc(var(--stick) + 12px); }
@media (max-width: 380px) { :root { --slot: 38px; --stick: 112px; --fire: 58px; --mm: 96px; --uf-p: 50px; } }
/* Phones held sideways: short screens; the action bar goes between the helm and the guns. */
@media (max-height: 520px) {
  :root { --mm: 86px; --uf-p: 46px; --top-h: 108px; --stick: 112px; --fire: 58px; --slot: 40px; }
  body.touch { --touch-h: 0px; }
  body.touch #hud-bottom { max-width: calc(100vw - 2 * (var(--stick) + 64px)); }
  /* The row inside the bar's own padding (8px a side), so the bar fits between the helm and the guns. */
  body.touch #hud-bottom .ab-row { max-width: calc(100vw - 2 * (var(--stick) + 64px) - 16px); }
  #hud-region { display: none; }
  #hud-stack { left: calc(var(--sa-l) + 360px); right: calc(var(--sa-r) + var(--mm) + 64px); top: calc(var(--sa-t) + 8px); }
  body.touch #hud-stack { right: calc(var(--sa-r) + var(--mm) + 64px); }
}
/* Tablets and up. */
@media (min-width: 700px) and (min-height: 521px) {
  :root { --mm: 150px; --uf-p: 70px; --slot: 48px; --top-h: 12px; --stick: 140px; --fire: 72px; }
  .unit-frame { width: 340px; }
  .uf-name { font-size: 17px; }
  .fbar { height: 15px; }
  #hud-stack, body.touch #hud-stack { left: 50%; right: auto; transform: translateX(-50%); width: min(460px, calc(100vw - 2 * var(--mm) - 420px)); min-width: 240px; }
  body.touch { --touch-h: 0px; }
  body.touch #hud-bottom { max-width: calc(100vw - 2 * (var(--stick) + 68px)); }
  /* A portrait tablet (820×1180): the row inside the bar's padding, and a long bar breaks into rows between its
     groups rather than spilling past the helm and the guns. */
  body.touch #hud-bottom .ab-row { max-width: calc(100vw - 2 * (var(--stick) + 68px) - 16px); }
  body.touch #hud-combat .ab-row { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 4px; }
  body.touch #hud-combat .ab-sep { display: none; }
}
/* Desktops (a mouse): the ship column, compass and micro menu come out. */
@media (min-width: 1100px) and (min-height: 600px) {
  :root { --mm: 184px; --uf-p: 82px; --slot: 52px; }
  body:not(.touch) .ship-panel { display: block; top: calc(var(--sa-t) + 134px); left: 12px; width: 270px; max-height: calc(100vh - 134px - 260px); overflow-y: auto; }
  body:not(.touch) #hud-nav { display: block; bottom: 62px; right: 12px; width: 176px; padding: 6px; }
  body:not(.touch) .micro-menu { display: flex; gap: 6px; position: absolute; bottom: 12px; right: 12px; pointer-events: auto; }
  #hud-region .rg-extra { display: block; }
  #hud-region { width: 240px; }
}

#hud-boss .bname { font-family: var(--display); font-size: 20px; color: var(--bone); letter-spacing: 0.05em; }
#hud-boss .bphase { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 13px; }
#hud-boss .bbar { height: 9px; background: #1b1512; border: 1px solid rgba(111,90,56,0.8); margin: 5px 0 3px; }
#hud-boss .bbar i { display: block; height: 100%; background: linear-gradient(90deg, #6a1f24, #b23a3a); }
#hud-boss .bparts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 6px; font-size: 10px; color: var(--fog); text-align: left; }
#hud-boss .bpart { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: center; padding: 3px 6px; border: 1px solid rgba(111,90,56,0.5); background: linear-gradient(90deg, #6a1f24, #b23a3a) 0 100% / var(--hp, 100%) 2px no-repeat, rgba(8, 7, 6, 0.55); }
#hud-boss .bpart b { display: flex; min-width: 0; font-weight: 500; white-space: nowrap; }
#hud-boss .bpart b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#hud-boss .bpart .bp-lamp { flex: none; width: 13px; height: 13px; margin-left: 4px; }
#hud-boss .bpart .bp-lamp.out { filter: grayscale(1) brightness(0.45); }
#hud-boss .bpart em { font-style: normal; font-weight: 700; color: var(--bone); font-variant-numeric: tabular-nums; }
#hud-boss .bpart.dead { opacity: 0.4; }
#hud-boss .bpart.dead b { text-decoration: line-through; }
#hud-boss .bhint { font-size: 12px; color: var(--fog); margin-top: 4px; }
#hud-boss .byou { font-size: 12px; color: var(--gold); margin-top: 2px; }
#hud-boss .balert { font-size: 13px; color: var(--bad); font-weight: 600; margin-top: 3px; }
#hud-dive .dname { font-family: var(--serif); color: var(--bone); font-size: 15px; }
#hud-dive .dmaze { position: relative; margin: 6px auto; background: #040506; }
#hud-dive .dcell { position: absolute; box-sizing: border-box; color: var(--gold); font-size: 13px; text-align: center; line-height: 22px; }
#hud-dive .dcell b { color: #9fe8f2; }
#hud-dive .dlog { max-height: 70px; overflow: hidden; color: var(--fog); font-size: 11px; margin: 4px 0; }
#hud-dive .dctl { text-align: center; }
#hud-dive .dctl button { min-width: 30px; margin: 1px; }
.map-maps { max-height: 150px; overflow-y: auto; font-size: 12px; padding: 6px 10px; border-top: 1px solid rgba(111,90,56,0.4); }
.toast { background: rgba(10, 11, 13, 0.85); border-left: 3px solid var(--steel); padding: 6px 10px; font-size: 12px; } /* its motion: ui/kit/kit.css */
.toast.good { border-color: var(--good); }
.toast.bad { border-color: var(--bad); }
.toast.gold { border-color: var(--gold); color: #f0d9a0; }
.toast.xp { border-color: var(--xp); color: #cfe0f2; }
#chat-log { max-height: 140px; overflow: hidden; font-size: 12px; text-shadow: 0 1px 2px #000; }
#chat-log div b { color: var(--brass); }
#chat.open #chat-input { display: block; }
#hud-boss { text-align: center; }
#hud-dive { font-size: 12px; }
#toasts { position: absolute; pointer-events: none; } /* its place: the popup budget at the end of this file */
#chat { position: absolute; left: calc(var(--sa-l) + 8px); right: calc(var(--sa-r) + 8px); top: calc(var(--sa-t) + var(--top-h) + 40px); pointer-events: auto; display: none; }
#chat.open { display: block; }
#chat-input { display: none; font-size: 15px; padding: 8px 10px; }
@media (min-width: 1100px) and (min-height: 600px) {
  #chat { display: block; top: auto; right: auto; bottom: 12px; left: 12px; width: 340px; }
}
/* ---------- modal panels */
#modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); }
#modal-panel { width: min(1100px, 95vw); height: min(760px, 92vh); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 8px; border-bottom: 1px solid rgba(111, 90, 56, 0.4); }
.modal-head h2 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: 0; }
.modal-head .sub { font-family: var(--serif); font-style: italic; color: var(--fog); font-size: 15px; }
.tabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid rgba(111, 90, 56, 0.4); }
.tab { padding: 8px 14px; cursor: pointer; color: var(--fog); border: 1px solid transparent; border-bottom: none; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.tab.active { color: var(--gold); border-color: rgba(111, 90, 56, 0.5); background: #14120e; }
.modal-body { flex: 1; overflow: auto; padding: 14px 18px; }
table.grid { width: 100%; border-collapse: collapse; font-size: 12px; }
table.grid th { text-align: left; color: var(--fog); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px; border-bottom: 1px solid var(--slate); position: sticky; top: 0; background: #121212; }
table.grid td { padding: 5px 6px; border-bottom: 1px solid #1a1d21; font-variant-numeric: tabular-nums; }
table.grid tr:hover td { background: #15171a; }
.up { color: var(--bad); }
.down { color: var(--good); }
.contra { color: #b99ad6; }
.card { border: 1px solid var(--slate); padding: 10px 12px; margin-bottom: 8px; background: #0f1114; }
.chip { display: inline-block; padding: 1px 6px; margin: 1px 2px 1px 0; border: 1px solid var(--slate); font-size: 11px; }
.chip.good { border-color: rgba(111, 191, 143, 0.5); color: #9fd3b0; }
.chip.bad { border-color: rgba(208, 106, 94, 0.5); color: #e0958a; }
.card h4 { margin: 0 0 4px; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.card p { margin: 0 0 6px; color: #bdb6a8; font-family: var(--serif); font-size: 15px; }
.card > p:last-child { margin-bottom: 0; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.muted { color: var(--steel-text); }

/* talent tree */
.trees { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tree { border: 1px solid var(--slate); background: #0e1013; padding: 8px; }
.tree h3 { font-family: var(--display); font-weight: 400; margin: 0; font-size: 20px; }
.tree .motto { font-family: var(--serif); font-style: italic; color: var(--fog); font-size: 13px; margin-bottom: 6px; }
.tier-label { color: var(--steel-text); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin: 8px 0 3px; }
.talent { border: 1px solid #2a2f36; padding: 6px; margin-bottom: 5px; cursor: pointer; background: #12151a; }
.talent:hover { border-color: var(--brass); }
.talent.has { border-color: var(--brass); background: #19160f; }
.talent.max { border-color: var(--gold); }
.talent.keystone { border-style: double; border-width: 3px; }
.talent.keystone.has { border-color: var(--turq); background: #0c1a18; }
.talent.locked { opacity: 0.45; }
.talent b { font-size: 12px; }
.talent .rank { float: right; color: var(--gold); font-size: 11px; }
.talent small { display: block; color: #aaa39a; font-size: 11px; margin-top: 2px; }

/* world map */
#worldmap-canvas { width: 100%; height: 100%; display: block; background: #05070a; cursor: grab; }
.map-wrap { position: relative; flex: 1; }
.map-legend { position: absolute; left: 12px; bottom: 12px; background: rgba(8, 9, 11, 0.8); border: 1px solid var(--brass-dim); padding: 8px 10px; font-size: 11px; }

/* boarding & death */
.center-card { max-width: 560px; margin: 40px auto; text-align: center; }
.loot-row { display: grid; grid-template-columns: 1fr 70px 120px; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid #1a1d21; }
.loot-row input[type=range] { width: 100%; }

#connection { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--burgundy); padding: 6px 14px; border: 1px solid var(--blood); }
kbd { font-family: var(--sans); border: 1px solid var(--brass-dim); padding: 0 5px; border-radius: 2px; color: var(--gold); font-size: 11px; }

.tier-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.talent .forget { float: right; margin-right: 8px; color: var(--bad); cursor: pointer; font-weight: bold; }

.login-account { margin-top: 10px; text-align: left; }
.login-account summary { cursor: pointer; color: var(--fog); font-size: 13px; }
.login-account form label { display: block; margin: 6px 0; }
#reset-form { margin-top: 10px; }
#chat-log div.chat-group, #chat-log div.chat-group b { color: #9fe0a8; }
#chat-log div.chat-guild, #chat-log div.chat-guild b { color: #9fc3e8; }
#chat-log div.chat-whisper, #chat-log div.chat-whisper b { color: #e0a8e8; }
/* The chat's channels (docs/11 P6): tabs while open; a channel shows its own lines; closed, the last eight. */
#chat-tabs { display: none; gap: 4px; margin-bottom: 6px; }
#chat.open #chat-tabs { display: flex; }
#chat-tabs .ct { padding: 2px 8px; font: 600 11px var(--sans); color: var(--fog); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(111, 90, 56, 0.45); cursor: pointer; }
#chat-tabs .ct.on { color: var(--gold); border-color: var(--brass); }
#chat:not(.open) #chat-log > div:nth-last-child(n+9) { display: none; }
#chat.open #chat-log { max-height: 36vh; overflow-y: auto; }
#chat.open[data-filter="group"] #chat-log > div:not(.chat-group),
#chat.open[data-filter="guild"] #chat-log > div:not(.chat-guild),
#chat.open[data-filter="whisper"] #chat-log > div:not(.chat-whisper) { display: none; }
#unread { position: absolute; top: 6px; left: 8px; font-size: 13px; color: var(--brass); text-shadow: 0 1px 2px #000; pointer-events: none; }
.card.letter.unread { border-color: var(--brass); }

/* The First Watch (docs/07 §13) */
.tut-hidden { display: none !important; }
/* (backwards, not both: a fill that held the last frame kept clip-path: inset(0) on the block for good — the key chips
   under «Огонь» and «Цель» hung half cut off below the frame, and its own filter and opacity were overridden; QA
   2026-10-09. The wipe reaches 40 px past the frame, so the rings and chips come in with it.) */
.tut-reveal { animation: tut-draw 900ms ease-out backwards; }
@keyframes tut-draw { from { opacity: 0; clip-path: inset(-40px 100% -40px -40px); filter: brightness(1.6); } to { opacity: 1; clip-path: inset(-40px -40px -40px -40px); filter: brightness(1); } }
#hud-watch { left: 50%; top: 12px; transform: translateX(-50%); width: min(520px, 60vw); font-family: var(--sans); font-size: 13px; color: var(--bone); }
#hud-watch .w-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 4px; }
#hud-watch .w-head span { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--brass); }
#hud-watch .w-head b { font-family: var(--serif); font-size: 17px; font-weight: 600; }
#hud-watch .w-body { line-height: 1.4; }
#hud-watch .w-act { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
#hud-goals { position: absolute; right: 12px; top: 292px; max-width: 260px; font-family: var(--sans); font-size: 12px; color: var(--bone); background: rgba(10, 11, 13, 0.86); padding: 5px 8px 6px; border-left: 2px solid var(--brass); pointer-events: auto; }
#hud-goals .g-lbl { color: var(--brass); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; margin-right: 4px; }
#hud-goals .g-x { background: none; border: 0; color: var(--fog); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
#prologue { position: fixed; inset: 0; z-index: 50; background: radial-gradient(ellipse at 50% 60%, rgba(10, 16, 22, 0.9), rgba(3, 5, 8, 0.99)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; cursor: pointer; transition: opacity 0.6s; }
#prologue.fade { opacity: 0; }
#prologue p { font-family: var(--serif); font-size: 24px; color: var(--bone); max-width: 720px; text-align: center; opacity: 0; animation: prologue-line 1.6s ease-out forwards; }
#prologue p:nth-child(2) { animation-delay: 2.8s; }
#prologue p:nth-child(3) { animation-delay: 6s; }
#prologue small { position: absolute; bottom: 24px; color: var(--fog); font-family: var(--sans); font-size: 12px; }
@keyframes prologue-line { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.edge-list { text-align: left; max-width: 560px; margin: 16px auto; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--bone); }
label.check { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-family: var(--sans); font-size: 13px; color: var(--fog); cursor: pointer; }

/* Options & accessibility (docs/07 §11) */
:root { --ui-scale: 1; --text-scale: 1; --density: 1; }
#hud, .hud-layer { zoom: var(--ui-scale); }
/* The interface's density (docs/16 #40): compact / normal / large — one scale on what the HUD's plates say (each
   plate of the top stack, the ship's panel, the toasts), most felt on a phone (settings.ts DENSITY_SCALE). The plates
   keep their places and their one width; the helm, the guns and the buttons keep their size for the fingers. */
body.dens-compact { --density: 0.86; }
body.dens-large { --density: 1.14; }
#hud-stack > *, #hud-ship > *, #toasts > .toast { zoom: var(--density); }
#modal-panel { zoom: calc(var(--ui-scale) * var(--text-scale)); }
#toasts, #chat, #hud-watch { font-size: calc(1em * var(--text-scale)); }
body.hi-contrast .hud-block, body.hi-contrast #hud-goals, body.hi-contrast .toast { background: rgba(4, 5, 7, 0.92) !important; border-width: 2px; border-color: var(--bone); backdrop-filter: none; }
body.hi-contrast .panel { background: #07080a; border-width: 2px; }
body.hi-contrast { --fog: #c9d1d9; --steel: #9aa6b2; }
body.plain-font { --display: 'Inter', system-ui, sans-serif; --serif: 'Inter', system-ui, sans-serif; }
body.plain-font * { font-style: normal !important; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
body.cb-protan { --bad: #e8a13a; --turq: #3a8fe8; --turq-dim: rgba(58, 143, 232, 0.2); --good: #5a9bd8; --xp: #9cc8ff; }
body.cb-deutan { --bad: #f0a030; --turq: #4a8cff; --turq-dim: rgba(74, 140, 255, 0.2); --good: #6a8ad8; --xp: #a8c8ff; }
body.cb-tritan { --turq: #e84ac8; --turq-dim: rgba(232, 74, 200, 0.2); --xp: #e89ab8; --gold: #f2f2f2; }
.term { border-bottom: 1px dotted currentColor; cursor: help; }
.term.bad { color: var(--bad); }
.options label.opt-range { display: grid; grid-template-columns: 220px 1fr 56px; gap: 12px; align-items: center; margin: 10px 0; font-family: var(--sans); font-size: 13px; color: var(--bone); }
.options label.opt-range output { color: var(--fog); text-align: right; }
.options .keymap td { padding: 3px 8px; }
.options .bind { min-width: 84px; }
.options .bind.clash { border-color: var(--bad); color: var(--bad); }
.options .bind.wait { border-color: var(--gold); color: var(--gold); }
.options .opt-presets { margin: 8px 0 12px; font-family: var(--sans); font-size: 13px; }
.options p.bad { color: var(--bad); }
#captions { position: absolute; inset: 0; pointer-events: none; }
#captions .caption { position: absolute; font-family: var(--sans); font-size: 14px; color: var(--bone); background: rgba(10, 11, 13, 0.8); border: 1px solid var(--brass-dim); padding: 3px 8px; white-space: nowrap; }
#captions .cap-ahead { top: 90px; left: 50%; transform: translateX(-50%); }
#captions .cap-astern { bottom: 250px; left: 50%; transform: translateX(-50%); }
#captions .cap-port { left: 330px; top: 45%; }
#captions .cap-starboard { right: 290px; top: 45%; }
#captions .cap-near { top: 38%; left: 50%; transform: translateX(-50%); }
dl.glossary dt { font-weight: 600; margin-top: 6px; }
dl.glossary dd { margin: 0 0 4px 0; color: var(--fog); font-size: 13px; }

/* Gamepad (docs/07 §12) */
#pad-cursor { position: fixed; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 6px #000; z-index: 60; pointer-events: none; }

/* Phase 11 fixes for the stacks: a hidden hint takes no room; sound captions keep to the screen edges on phones. */
@media (max-width: 1099px) {
  #captions .cap-port { left: 8px; }
  #captions .cap-starboard { right: 8px; }
  #captions .cap-astern { bottom: calc(var(--touch-h) + 120px); }
}
/* Phones: only the loaded shot shows (tap it for the next); key hints are for keyboards. */
@media (max-width: 699px) { body.touch .ab-ammo .slot:not(.sel) { display: none; } }
@media (max-height: 520px) { body.touch .ab-ammo .slot:not(.sel) { display: none; } }
#hud-region { font-size: 11.5px; }
@media (max-width: 699px) { #hud-region { width: 170px; } }

/* ---------- Phase 11 skin: panels, plates, buttons and tabs in the Higgsfield UI kit; windows as sheets on phones */
.x-btn { position: absolute; top: 21px; right: 10px; width: 38px; height: 38px; padding: 0; border: 1px solid var(--brass-dim); border-radius: 50%; background: #16110d; color: var(--bone); font: 700 18px var(--sans); cursor: pointer; z-index: 5; }
.x-btn::before { content: '×'; }
.skinned .x-btn { border: 0; background: var(--ui-close) center / contain no-repeat; filter: drop-shadow(0 2px 4px #000); }
.skinned .x-btn::before { content: ''; }
.x-btn:hover { filter: brightness(1.3) drop-shadow(0 2px 4px #000); }
#modal-panel { position: relative; }
.modal-head { padding-right: 56px; }
body.touch .modal-head > .muted { display: none; }

.skinned .panel, .skinned #modal-panel {
  border: 20px solid transparent; border-image: var(--ui-frame) 70 / 20px round; border-radius: 0;
  background: linear-gradient(180deg, rgba(14, 12, 10, 0.9), rgba(9, 9, 10, 0.94)), var(--tex-ebony, none) center / 640px;
  background-color: #0c0b0a; background-clip: padding-box; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
}
.skinned .login-panel { background: linear-gradient(180deg, rgba(10, 9, 8, 0.86), rgba(8, 8, 9, 0.92)), var(--tex-ebony, none) center / 640px; background-clip: padding-box; }
.skinned .modal-head { border-bottom-color: rgba(140, 107, 58, 0.35); }
.skinned .modal-head h2 { display: inline-block; border-style: solid; border-color: transparent; border-width: 10px 42px; border-image: var(--ui-plate) 56 110 53 110 fill / 10px 42px stretch; padding: 1px 6px; font-size: 24px; line-height: 1.15; text-shadow: 0 1px 3px #000; }
.skinned .title-sm { display: inline-block; border-style: solid; border-color: transparent; border-width: 10px 42px; border-image: var(--ui-plate) 56 110 53 110 fill / 10px 42px stretch; padding: 1px 6px; }

.skinned .btn { border-style: solid; border-color: transparent; border-width: 7px 11px; border-image: var(--ui-button) 40 fill / 7px 11px stretch; background: none; padding: 3px 8px; border-radius: 0; text-shadow: 0 1px 2px #000; }
.skinned .btn:hover:not(:disabled) { filter: brightness(1.25); box-shadow: none; }
.skinned .btn-primary { color: var(--gold); text-shadow: 0 0 8px rgba(224, 184, 98, 0.35), 0 1px 2px #000; }
.skinned .btn-small { border-width: 5px 8px; border-image-width: 5px 8px; padding: 1px 6px; }
.skinned .tab { border: 0; }
.skinned .tab.active { border-style: solid; border-color: transparent; border-width: 6px 10px 0; border-image: var(--ui-button) 40 fill / 6px 10px 0 stretch; padding: 6px 6px 6px; background: none; }
.skinned .card { border-color: rgba(140, 107, 58, 0.35); background: rgba(6, 6, 7, 0.55); box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.6); }
.skinned table.grid th { background: rgba(14, 12, 10, 0.95); color: var(--brass); }

/* The captain's cabin (menu) tiles. */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; padding: 6px; }
.menu-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; background: rgba(8, 8, 9, 0.6); border: 1px solid rgba(140, 107, 58, 0.4); color: var(--bone); font: 600 15px var(--serif); letter-spacing: 0.04em; cursor: pointer; }
.menu-tile:hover, .menu-tile:active { border-color: var(--brass); filter: brightness(1.2); }
.menu-tile .ico-lg { width: 64px; height: 64px; object-fit: contain; display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--brass); }
.skinned .menu-tile .ico-lg { padding: 6px; background: var(--ui-ring) center / contain no-repeat; }
.ico { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.35em; margin-right: 3px; }
span.ico.glyph { display: inline-block; text-align: center; width: auto; }

/* Phones: windows fill the screen; tabs scroll; columns stack. */
@media (max-width: 699px), (max-height: 520px) {
  #modal { align-items: stretch; }
  #modal-panel { width: 100vw; height: 100vh; height: 100dvh; max-width: none; }
  .skinned #modal-panel { border-width: 12px; border-image-width: 12px; }
  .modal-head { flex-wrap: wrap; gap: 4px; padding: 8px 50px 6px 8px; }
  .modal-head h2, .skinned .modal-head h2 { font-size: 19px; }
  .modal-head .sub { font-size: 13px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; padding: 0 6px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; padding: 10px 11px; flex: none; }
  .modal-body { padding: 10px 8px; overflow-x: auto; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .trees { grid-template-columns: 1fr 1fr; }
  .btn { min-height: 34px; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .x-btn { width: 42px; height: 42px; top: 10px; right: 4px; }
  .login-panel { width: min(520px, 94vw); padding: 26px 18px; }
  .title { font-size: clamp(30px, 9.5vw, 64px); letter-spacing: 0.05em; }
  .captain-wrap { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; height: 100dvh; width: 100vw; padding: 12px; overflow-y: auto; }
  .captain-wrap h2 { grid-column: 1; }
  .captain-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; flex: none; }
  .captain-card { flex: 0 0 210px; }
  .captain-detail { grid-template-columns: 1fr; }
  .captain-detail .big-portrait { width: 100%; height: 46vw; max-height: 320px; background-position: center 20%; }
}

/* Icons in lists; the market becomes cards on phones. */
.ico-md { width: 40px; height: 40px; object-fit: contain; flex: none; }
.with-ico { display: flex; gap: 10px; align-items: center; }
table.grid td .ico { width: 1.9em; height: 1.9em; vertical-align: middle; margin-right: 6px; }

/* Painted headers and screen backgrounds (Higgsfield `bg.*`), under a dark wash so text stays readable. */
.ico-crest { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.28em; margin-right: 8px; filter: drop-shadow(0 2px 3px #000); }
#modal-panel[data-modal="boarding"] .modal-head,
#modal-panel[data-modal="menu"] .modal-head { min-height: 118px; align-items: flex-start; background-size: cover; background-position: center; border-bottom: 1px solid rgba(140, 107, 58, 0.45); }
#modal-panel[data-modal="boarding"] .modal-head { background-image: linear-gradient(90deg, rgba(8, 8, 9, 0.9), rgba(8, 8, 9, 0.35)), var(--bg-boarding, none); }
#modal-panel[data-modal="menu"] .modal-head { background-image: linear-gradient(90deg, rgba(8, 8, 9, 0.85), rgba(8, 8, 9, 0.3)), var(--bg-cabin, none); }
#modal-panel[data-modal="sunk"] { background-image: linear-gradient(rgba(6, 7, 9, 0.55), rgba(6, 7, 9, 0.85)), var(--bg-sunk, none); background-size: cover; background-position: center; }
#screen-captain { background: linear-gradient(rgba(5, 6, 8, 0.45), rgba(5, 6, 8, 0.8)), var(--bg-captain, none) center / cover no-repeat; }
#prologue { background: radial-gradient(ellipse at 50% 55%, rgba(10, 16, 22, 0.35), rgba(3, 5, 8, 0.92)), var(--bg-prologue, none) center / cover no-repeat, #05070a; }
#prologue p { text-shadow: 0 2px 8px #000, 0 0 20px #000; }
.tab .ico { width: 22px; height: 22px; vertical-align: -6px; margin-right: 6px; border-radius: 3px; }
.ability .ab-ico { float: left; width: 46px; height: 46px; margin: 2px 10px 2px 0; border: 1px solid var(--brass-dim); object-fit: cover; }
.ability { overflow: hidden; }
.card h4 .ico-md { float: left; margin: -2px 10px 4px 0; }

/* Layout fixes (Phase 11): the top stack sits under the unit frame on tablets and is centred only on wide desktops;
   the micro menu is there for every mouse (a column under the minimap, a row at the bottom right on desktops). */
body:not(.touch) .micro-menu { display: flex; flex-flow: column wrap-reverse; align-content: flex-start; gap: 8px; position: absolute; pointer-events: auto; right: calc(var(--sa-r) + 10px);
  /* Under the chart's lines however many they run to (they ran under the buttons), and into a second column when the
     window is too low for one (the buttons ran into each other and the action bar). */
  top: max(calc(var(--sa-t) + var(--mm) + 58px), calc(var(--rg-bottom, 0px) + 8px));
  max-height: calc(100vh - max(calc(var(--sa-t) + var(--mm) + 58px), calc(var(--rg-bottom, 0px) + 8px)) - var(--hb-top, 150px) - 10px); }
body:not(.touch) #hud-stack { right: calc(var(--sa-r) + 60px); }
@media (min-width: 700px) and (min-height: 521px) {
  #hud-stack, body.touch #hud-stack, body:not(.touch) #hud-stack { top: calc(var(--sa-t) + var(--uf-p) + 54px); left: calc(var(--sa-l) + 8px); right: calc(var(--sa-r) + var(--mm) + 28px); transform: none; width: auto; min-width: 0; max-width: 500px; }
}
@media (min-width: 1100px) and (min-height: 600px) {
  #hud-stack, body.touch #hud-stack, body:not(.touch) #hud-stack { top: calc(var(--sa-t) + 12px); left: 50%; right: auto; transform: translateX(-50%); width: min(440px, calc(100vw - 2 * 380px)); }
  body:not(.touch) .micro-menu { flex-direction: row; top: auto; bottom: 12px; right: 12px; }
}
/* Centre cards (the edge of safe water, mutiny, shipwreck): the plate stays one line tall on phones. */
@media (max-width: 699px) {
  .center-card .title-sm { font-size: 22px !important; line-height: 1.2; }
  .center-card { margin: 16px auto; }
  .edge-list { font-size: 15px; }
}
.ico-round { border-radius: 50%; object-fit: cover; border: 1px solid var(--brass-dim); }
/* Boss panel over its painted card; legendary ships under theirs. */
#hud-boss { background: linear-gradient(90deg, rgba(8, 8, 9, 0.92) 0%, rgba(8, 8, 9, 0.7) 55%, rgba(8, 8, 9, 0.45) 100%), var(--card, none) center / cover no-repeat, rgba(10, 11, 13, 0.82); border-color: rgba(178, 58, 58, 0.55); }
.card-art { height: 110px; margin: -2px -4px 8px; background: center / cover no-repeat; border: 1px solid rgba(140, 107, 58, 0.45); box-shadow: inset 0 -30px 40px rgba(0, 0, 0, 0.6); }
/* Phones: the boss panel keeps to name, phase, strength and alarms; toasts rise from above the action bar. */
@media (max-width: 699px), (max-height: 520px) {
  #hud-boss .bparts, #hud-boss .bhint, #hud-boss .byou { display: none; }
  #hud-boss .bname { font-size: 17px; }
}
@media (max-width: 699px) { .captain-wrap .title-sm { font-size: 22px; } }

/* ---- Round 2 (owner's notes) ---- */
/* The portrait's ring and skull stand above the portrait: the frame sits low enough to show them whole. */
.unit-frame { top: calc(var(--sa-t) + 16px); left: calc(var(--sa-l) + 12px); }
:root { --top-h: 164px; }
@media (max-height: 520px) { :root { --top-h: 112px; } }
@media (min-width: 700px) and (min-height: 521px) { :root { --top-h: 12px; } }
/* Slots: the bezel is drawn inside the slot, the icon sits inside the bezel, every slot the same box. */
.slot { overflow: hidden; border-radius: 2px; }
.skinned .slot::after { inset: 0; }
.slot > img, .slot > .glyph { inset: 14%; width: 72%; height: 72%; object-fit: cover; }
.ab-group.ab-ammo .slot > img { object-fit: contain; }
.ab-row { align-items: center; }
.ab-group { align-items: center; }
.slot .cdt { font-size: 12px; }
.slot .k, .slot .q { z-index: 6; }
.slot .q { right: 5px; bottom: 4px; }
.slot .k { left: 5px; top: 3px; }
/* The region line: two short lines under the minimap, never wrapping into a third. */
#hud-region > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tablets: the region lines reach left over the empty sea (as far as the stack of panels allows) rather than being cut short. */
@media (min-width: 700px) and (max-width: 1099px) { #hud-region { width: max(150px, min(240px, calc(100vw - 522px))); } }
@media (max-width: 699px) { #hud-region { width: calc(var(--mm) + 70px); font-size: 11px; } }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: calc(100% - 24px); }
.map-legend span { white-space: nowrap; display: inline-flex; align-items: center; }
.map-legend .ico { width: 22px; height: 22px; }
/* Round 2: pictures beside the numbers. */
.ico-sm { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; margin-right: 3px; }
.ico-bar { width: 13px; height: 13px; object-fit: contain; vertical-align: -3px; margin-right: 3px; filter: drop-shadow(0 1px 1px #000); }
.fbar > span em { font-style: normal; }
@media (max-width: 699px) { .fbar > span em { display: none; } }
.uf-silver { display: inline-flex; align-items: center; }
.rl { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 4px; align-items: center; width: 84px; text-align: left; }
.rl .ico-rl { grid-row: 1 / 3; width: 22px; height: 22px; object-fit: contain; }
.rl.flip .ico-rl { transform: scaleX(-1); }
.rl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl .fbar { grid-column: 2; }
@media (max-width: 699px) { .rl { width: 64px; } .rl > span { font-size: 8px; } }
.toast { display: flex; gap: 8px; align-items: center; }
.ico-toast { width: 22px; height: 22px; object-fit: contain; flex: none; }
#hud-goals { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 6px; row-gap: 2px; }
#hud-goals .ico-goal { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
#hud-goals .g-lbl { grid-column: 2; grid-row: 1; }
#hud-goals .g-x { grid-column: 3; grid-row: 1; justify-self: end; }
#hud-goals .g-t { grid-column: 2 / 4; grid-row: 2; line-height: 1.3; }
/* Before the icon has loaded (or without it) the two lines keep their places, flush left. */
#hud-goals:not(:has(> .ico-goal)) { grid-template-columns: 0 1fr auto; column-gap: 0; }
#hud-goals:not(:has(> .ico-goal)) .g-x { margin-left: 6px; }
.ico-goal { width: 22px; height: 22px; object-fit: contain; flex: none; }
/* Round 2 fixes found by the overlap check at 375x812 in a boss fight. */
body.touch { --touch-h: calc(var(--stick) + 20px); }
@media (min-width: 700px) and (min-height: 521px) { body.touch { --touch-h: 0px; } }
@media (max-height: 520px) { body.touch { --touch-h: 0px; } }
@media (max-width: 699px) {
  /* The region line: a narrow column under the minimap — name, safety, then weather and time. */
  #hud-region { width: calc(var(--mm) + 12px); right: calc(var(--sa-r) + 2px); text-align: center; line-height: 1.2; }
  #hud-region .rg-dot, #hud-region .rg-season { display: none; }
  #hud-region .rg-name, #hud-region .rg-safe { display: block; overflow: hidden; text-overflow: ellipsis; }
  .unit-frame { width: calc(100vw - var(--mm) - 44px); }
  .uf-sub .wanted .muted { display: none; }
  .rl { width: 50px; grid-template-columns: auto 1fr; }
  .rl > span { display: none; }
  .rl .ico-rl { grid-row: 1; width: 20px; height: 20px; }
  .rl .fbar { grid-row: 1; align-self: center; }
}

/* ---- Round 3: a strict grid for shop rows and contracts; coins and stars on every sum ---- */
.money, .xpv { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money { color: var(--gold); }
.xpv { color: var(--xp); }
.reward { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; }


/* Contracts: the kind's picture in a column, then the text; the reward row keeps its button to the right. */
.quest-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; }
.quest-ico { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
.quest-body h4 { margin-top: 2px; }
.quest-body .row { flex-wrap: wrap; row-gap: 6px; }
.btn .ico-sm { margin-right: 4px; }
/* Tabs on phones: the harbour's seven as a row of equal icon cells; any other tab row wraps instead of scrolling
   its last tabs out of sight. */

@media (max-width: 699px), (max-height: 520px) {
  .tabs { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
}

/* Shipyard rows on the shop grid; hulls for sale as cards with the painted ship lying across. */
.item-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 104px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(140, 107, 58, 0.18); }
.item-row:first-of-type { border-top: 0; }
.item-ico { width: 40px; height: 40px; object-fit: contain; }
.item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.item-text b { font-size: 13px; }
.item-text .muted { font-size: 11px; line-height: 1.3; }
.item-btn { width: 100%; display: flex; justify-content: center; align-items: center; white-space: nowrap; }
.hull-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 8px; }
.hull-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) 104px; gap: 10px; align-items: center; margin: 0; }
/* «Research her first» / «Сначала исследуйте» with its icon is wider than the column: the words wrap (they ran 7–16px out). */
.hull-card .item-btn { white-space: normal; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.hull-card .item-btn .ico-sm { flex: none; }
.hull-art { width: 76px; height: 50px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hull-art img { height: 76px; width: auto; transform: rotate(90deg); filter: drop-shadow(0 3px 4px #000); }
.hull-text b { font-family: var(--serif); font-size: 16px; }
.hull-text .muted { font-size: 11px; display: block; line-height: 1.3; }
.hull-stats { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font: 600 11px var(--sans); color: var(--bone); font-variant-numeric: tabular-nums; }
.hull-stats span { display: inline-flex; align-items: center; }
@media (max-width: 380px) { .hull-card { grid-template-columns: 60px minmax(0, 1fr) 92px; } .hull-art img { height: 60px; } }
/* Tavern: four equal hire buttons; tradesmen on the row grid. */

/* ---- P6: the ship and her hold ---- */
.ship-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ship-hero { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle, rgba(40, 60, 70, 0.9), rgba(8, 12, 16, 0.95)); box-shadow: inset 0 0 0 2px rgba(201, 162, 90, 0.55), 0 2px 6px #000; }
.ship-hero img { height: 58px; width: auto; filter: drop-shadow(0 2px 3px #000); }
.ship-passive { display: flex; gap: 6px; align-items: flex-start; }
.ship-passive .ico-sm { flex: none; margin-top: 1px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.stat-tile { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 6px 8px; background: rgba(10, 14, 18, 0.55); border: 1px solid rgba(140, 107, 58, 0.3); border-radius: 6px; min-width: 0; }
.stat-ico { grid-row: 1 / 3; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.stat-ico.flip { transform: scaleX(-1); }
.stat-l { font: 600 10px var(--sans); letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; color: var(--fog); min-width: 0; overflow-wrap: anywhere; }
.stat-v { font: 600 13px var(--sans); color: var(--bone); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.stat-v small { display: block; font-weight: 400; font-size: 10px; color: var(--fog); line-height: 1.25; }
.cargo-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid rgba(140, 107, 58, 0.18); }
.cargo-row:first-child { border-top: 0; }
.has-sale .cargo-row { grid-template-columns: 36px minmax(0, 1fr) 44px 76px; }
.has-dump .cargo-row { grid-template-columns: 36px minmax(0, 1fr) 44px 34px; }
.has-sale.has-dump .cargo-row { grid-template-columns: 36px minmax(0, 1fr) 44px 76px 34px; }
.cargo-row .item-ico { width: 36px; height: 36px; }
.cargo-qty { text-align: right; font-variant-numeric: tabular-nums; }
.cargo-sale { text-align: right; }
.cargo-row .btn { padding-left: 0; padding-right: 0; }
.cargo-row .contra { color: #d98a6a; }
.ammo-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.ammo-chip { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px; background: rgba(10, 14, 18, 0.55); border: 1px solid rgba(140, 107, 58, 0.3); border-radius: 6px; font-variant-numeric: tabular-nums; }
.forge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.forge-grid .btn { display: flex; align-items: center; justify-content: center; }
.quest-card.small { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; margin-bottom: 6px; }
.quest-card.small .quest-ico { width: 36px; height: 36px; }
@media (max-width: 699px), (max-height: 520px) {
  .ship-head { grid-template-columns: 52px minmax(0, 1fr); }
  .ship-head > .muted { display: none; }
  /* «Снаряжение» and «Облик» in a row under the name, not a column under the 52 px picture that pushed the figures
     down to y 225 of 375; the key's «[I] закрыть» is a keyboard's (QA 2026-10-09). */
  .ship-head > .ship-head-r { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-left: 0; }
  .ship-head-r > .muted { display: none; }
  .ship-head .sub.ship-passive { white-space: normal; text-overflow: clip; } /* (640×360 cut «…у кораблей кр» 28 px short) */
  .ship-hero { width: 52px; height: 52px; }
  .ship-hero img { height: 48px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile { grid-template-columns: 28px minmax(0, 1fr); padding: 5px 6px; column-gap: 6px; }
  .stat-ico { width: 28px; height: 28px; }
  .cargo-row { gap: 6px; }
  .has-sale.has-dump .cargo-row { grid-template-columns: 32px minmax(0, 1fr) 36px 68px 30px; }
  .ammo-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cargo-row .item-ico { width: 32px; height: 32px; }
}
/* ---- P6: the company ---- */
.stat-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stars { color: var(--gold); letter-spacing: 1px; }
.alert-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border: 1px solid rgba(170, 60, 50, 0.5); border-radius: 6px; background: rgba(60, 10, 10, 0.4); }
.prof-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 48px; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid rgba(140, 107, 58, 0.18); }
.prof-row:first-child { border-top: 0; }
.prof-row .item-text .muted { display: inline-flex; align-items: center; }
.prof-n { text-align: right; font: 600 18px var(--sans); color: var(--bone); font-variant-numeric: tabular-nums; }
.card-h { display: flex; align-items: center; gap: 8px; }
.card-h .ico-md, .card h4.card-h .ico-md { float: none; margin: 0; width: 32px; height: 32px; flex: none; }
input[type=range] { accent-color: var(--gold); }
.officer-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; }
.officer-ico { width: 56px; height: 56px; object-fit: contain; }
.officer-ico.ico-round { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(201, 162, 90, 0.6), 0 2px 5px #000; }
.with-ico { display: inline-flex; align-items: center; gap: 4px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 640px; margin: 16px auto; }
.btn.choice { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; white-space: normal; padding: 8px 12px; min-height: 56px; }
.choice-ico { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
@media (max-width: 699px), (max-height: 520px) {
  .stat-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid { grid-template-columns: 1fr; }
  .officer-card { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .officer-ico { width: 44px; height: 44px; }
}
/* ---- P6: talents — the painted wind rose ---- */
.tal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border: 1px solid rgba(140, 107, 58, 0.45); border-radius: 14px; background: rgba(10, 14, 18, 0.6); font: 600 12px var(--sans); color: var(--bone); }
.chip-stat.hot { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 8px rgba(224, 184, 98, 0.35); }
.tal-loadout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.tal-loadout .muted { font-size: 11px; }
.tal-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "side main" "respec main"; gap: 8px 18px; margin-top: 10px; align-items: start; }
.tal-side { grid-area: side; }
.tal-main { grid-area: main; min-width: 0; }
.tal-respec { grid-area: respec; }
.tal-rules { font-size: 11px; text-align: center; margin: 6px 0 0; }
.rose { position: relative; width: 290px; height: 290px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 34, 42, 0.95) 0 36%, rgba(10, 14, 18, 0.55) 37% 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.8); }
.rose::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201, 162, 90, 0.25); }
.rose-node { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  transform: rotate(var(--a)) translateY(-112px) rotate(calc(-1 * var(--a)));
  background: conic-gradient(var(--gold) var(--f), rgba(240, 230, 200, 0.14) 0); box-shadow: 0 2px 6px #000; transition: box-shadow 0.15s; }
.rose-node .rose-ico { position: absolute; inset: 4px; width: 48px; height: 48px; border-radius: 50%; background: #0b1015; object-fit: cover; }
.rose-node.active { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(224, 184, 98, 0.75); }
.rose-node.off .rose-ico { filter: grayscale(1) brightness(0.55); }
.rose-pts { position: absolute; right: -5px; bottom: -3px; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px; background: #1a1208; border: 1px solid var(--gold); color: var(--gold); font: 700 10px/16px var(--sans); text-align: center; }
.rose-native { position: absolute; left: -3px; top: -3px; color: var(--gold); font-size: 13px; font-style: normal; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.rose-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 128px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; pointer-events: none; }
.rose-core-ico { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
.rose-core b { font: 400 15px var(--serif); color: var(--bone); line-height: 1.1; }
.rose-core span { font-size: 11px; color: var(--gold); }
.rose-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.rose-extra .btn { display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.rose-extra .btn b { color: var(--gold); margin-left: 2px; }
.tree-h { display: flex; align-items: center; gap: 8px; margin: 0; }
.tree-h .ico-md { width: 36px; height: 36px; }
.tier-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.talent { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; border-radius: 6px; margin: 0; padding: 7px 8px; }
.talent-ico { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(140, 107, 58, 0.6); }
.talent.has .talent-ico { box-shadow: 0 0 0 2px var(--gold); }
.talent.keystone .talent-ico { box-shadow: 0 0 0 2px var(--turq), 0 0 8px rgba(80, 200, 190, 0.5); }
.talent-body { min-width: 0; }
.talent-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.talent-top b { font-size: 13px; margin-right: auto; }
.talent .tag { font: 600 9px var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); border: 1px solid rgba(224, 184, 98, 0.5); border-radius: 3px; padding: 0 4px; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 8px; height: 8px; border-radius: 50%; background: rgba(240, 230, 200, 0.15); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.5); }
.pips i.on { background: var(--gold); box-shadow: 0 0 4px rgba(224, 184, 98, 0.8); }
.talent .forget { float: none; margin: 0; }
.talent small.why { display: flex; align-items: center; gap: 4px; color: #c98a70; }
.ico-xs { width: 14px; height: 14px; object-fit: contain; flex: none; }
.respec-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.respec-btns .btn { white-space: normal; }
.deed-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid rgba(140, 107, 58, 0.18); }
.deed-row:first-child { border-top: 0; }
.deed-row .item-ico { width: 36px; height: 36px; filter: grayscale(0.9) brightness(0.6); }
.deed-row.done .item-ico { filter: none; }
.deed-tick { font-size: 16px; }
@media (max-width: 699px), (max-height: 520px) {
  .tal-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main" "respec"; }
  .rose { width: 272px; height: 272px; }
  .rose-node { width: 50px; height: 50px; margin: -25px 0 0 -25px; transform: rotate(var(--a)) translateY(-106px) rotate(calc(-1 * var(--a))); }
  .rose-node .rose-ico { width: 42px; height: 42px; }
  .rose-core { width: 116px; }
  .rose-core-ico { width: 52px; height: 52px; }
  .tier-row { grid-template-columns: minmax(0, 1fr); }
}
/* ---- P6: handbook and options ---- */
button.tab { background: none; font-family: var(--sans); }
.help-list { display: flex; flex-direction: column; }
.help-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(140, 107, 58, 0.18); font-size: 13px; line-height: 1.4; }
.help-row:first-child { border-top: 0; }
.help-row .item-ico { width: 36px; height: 36px; }
.help-row kbd { margin-right: 4px; white-space: nowrap; }
.options label.opt-range.sel { grid-template-columns: 220px minmax(0, 1fr); }
.opt-l { display: inline-flex; align-items: center; gap: 6px; }
.options select.field { margin-top: 0; padding: 7px 10px; font-family: var(--sans); font-size: 14px; }
input[type=checkbox] { accent-color: var(--gold); width: 18px; height: 18px; flex: none; }

@media (max-width: 699px), (max-height: 520px) {
  .options label.opt-range { grid-template-columns: minmax(0, 1fr) 48px; gap: 4px 10px; }
  .options label.opt-range .opt-l { grid-column: 1 / -1; }
  .options label.opt-range.sel { grid-template-columns: minmax(0, 1fr); }
  .options .keymap td { padding: 3px 4px; }
  .options .bind { min-width: 64px; }
}
/* The ship column: every line with its picture. */
.ship-panel .lbl { display: inline-flex; align-items: center; gap: 5px; }
.ship-panel .sp-head b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--serif); font-size: 16px; }
/* Her level (canon D12): the anchor and the number, in the gold of the brass fittings. */
.ship-panel .sp-head .lbl b.ship-lvl { display: inline; font-family: var(--sans, Inter, sans-serif); font-size: 12px; color: #e8c46a; }
/* The First Watch's head: the step count on one line, the step's name under it — never squeezed into two columns. */
#hud-watch .w-head { flex-wrap: wrap; row-gap: 0; }
#hud-watch .w-head span { white-space: nowrap; }
#hud-watch .w-head b { margin-left: auto; text-align: right; }
@media (max-width: 699px), (max-height: 520px) {
  #hud-watch .w-head { flex-direction: column; align-items: flex-start; }
  #hud-watch .w-head b { margin-left: 0; text-align: left; }
}
/* A short screen's lesson in the top stack's 104 px: the count and the step's name on one line, the words in a smaller
   type, the two skips in a low row; while the captain's plate is not yet in (the first four steps) the stack takes the
   whole top band from the left edge. The step's words were cut after their first line (the stack ends above the
   screen's middle). */
@media (max-height: 520px) {
  #hud-watch { padding: 5px 8px 6px; font-size: 12px; }
  #hud-watch .w-head { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; gap: 8px; margin-bottom: 2px; }
  #hud-watch .w-head span { font-size: 10px; flex: none; }
  #hud-watch .w-head b { margin-left: 0; min-width: 0; font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #hud-watch .w-body { line-height: 1.3; }
  #hud-watch:not(.hidden) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
  #hud-watch .w-head { flex: 1 1 140px; min-width: 0; }
  #hud-watch .w-act { flex: none; margin: 0 0 2px auto; gap: 6px; }
  #hud-watch .w-body { flex: 1 1 100%; order: 3; }
  #hud-watch .w-act .btn { min-height: 0; height: 24px; padding-top: 0; padding-bottom: 0; font-size: 11px; line-height: 1; }
  /* the fold's round button beside the lesson, not a row above it */
  #hud #hud-stack:has(> #hud-watch:not(.hidden):not(.tut-hidden)) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 6px; row-gap: 4px; align-content: start; }
  #hud #hud-stack:has(> #hud-watch:not(.hidden):not(.tut-hidden)) > * { grid-column: 2; }
  #hud #hud-stack:has(> #hud-watch:not(.hidden):not(.tut-hidden)) > .hud-fold { grid-column: 1; grid-row: 1; }
  #hud #hud-stack:has(> #hud-watch:not(.hidden):not(.tut-hidden)):has(> .hud-fold.hidden) { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
  body:has(#hud-captain.tut-hidden) #hud #hud-stack { left: calc(var(--sa-l) + 8px); width: calc(100vw - var(--sa-l) - var(--sa-r) - var(--mm) - 80px); }
}
/* ---- P6: boarding, the sinking, the edge of safe water, barter ---- */
.loot-grid { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(140, 107, 58, 0.18); }
.loot-grid:first-of-type { border-top: 0; }
.loot-grid .item-ico { width: 36px; height: 36px; grid-row: 1 / 3; }
.loot-grid .loot-take { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); }
.loot-grid input[type=range] { grid-column: 2 / 4; width: 100%; }
.spoils { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spoils > .money { font-size: 16px; margin-right: 6px; }
.choice-grid.one { grid-template-columns: minmax(0, 1fr); margin: 8px 0 0; max-width: none; }
.loss-list { max-width: 380px; margin: 16px auto; text-align: left; }
.loss-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(140, 107, 58, 0.25); font-size: 14px; }
.loss-row:first-child { border-top: 0; }
.edge-list { text-align: left; max-width: 460px; margin: 12px auto; }
.barter-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 96px; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid rgba(140, 107, 58, 0.18); }
.barter-row:first-child { border-top: 0; }
.barter-row .item-ico { width: 36px; height: 36px; }
.barter-row .field { margin: 0; padding: 6px 8px; font-size: 14px; }
.barter-row > b { text-align: right; }
@media (max-width: 699px), (max-height: 520px) {
  .center-card .title-sm { margin-left: 36px; margin-right: 36px; }
}
/* ---- P6: company — painted tabs, the same grid as the harbour's ---- */
.tab { position: relative; }

/* Every field in a window: dark, brass-edged, legible. */
#modal-panel input[type=text], #modal-panel input[type=number], #modal-panel input:not([type]), #modal-panel select, #modal-panel textarea {
  background: #0e1013; border: 1px solid var(--slate); color: var(--bone); border-radius: 3px; padding: 7px 9px; font: 14px var(--sans); outline: none; min-width: 0; }
#modal-panel input:focus, #modal-panel select:focus, #modal-panel textarea:focus { border-color: var(--brass); }
/* A row of a field and its button: the field takes the room, the button keeps its words. */
#modal-panel .row > input { flex: 1 1 auto; width: auto; }
#modal-panel .row > .btn { flex: none; }
.rent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rent-grid .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; white-space: nowrap; }
.lot-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(140, 107, 58, 0.18); }
.lot-row:first-of-type { border-top: 0; }
.lot-row .item-ico { width: 36px; height: 36px; }
.lot-bid { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
/* The region herald on a phone: a card in the toast column. */
.toast.herald { border-left: 0; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); text-align: center; padding: 6px 12px 7px; background: rgba(8, 9, 11, 0.9); }
.toast.herald b { display: block; font: 400 20px var(--display); color: var(--bone); letter-spacing: 0.05em; }
.toast.herald small { display: block; font: italic 13px var(--serif); color: var(--fog); line-height: 1.25; }
/* A game screen, not a page: no text selection on the HUD and the controls (a long press on a phone would
   otherwise paint everything blue); fields and the chat still take text. */
#hud, .hud-layer, #touch, #world { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#hud input, #hud textarea, #chat, #chat * { -webkit-user-select: text; user-select: text; }
.toast.herald { display: block; }
/* A narrow window with a mouse (no touch controls): the whole action bar fits, and the toasts keep clear of the
   menu column on the right. */
@media (max-width: 699px) {
  body:not(.touch) { --slot: min(42px, calc((100vw - 64px) / 10)); }
}
/* A long action bar on a narrow screen (a level-60 captain: six shot, four abilities, five talents) breaks into
   rows between its groups instead of scrolling its last slots out of sight. */
@media (max-width: 699px) {
  #hud-combat .ab-row { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 4px; }
  #hud-combat .ab-sep { display: none; }
}
/* Rows of fields (the account claim: e-mail, password, save) wrap on a phone instead of pushing past the edge. */
#modal-panel .row:has(> input) { flex-wrap: wrap; }
#modal-panel .row > input { min-width: 0; flex: 1 1 120px; }
#modal-panel input[type=email], #modal-panel input[type=password] {
  background: #0e1013; border: 1px solid var(--slate); color: var(--bone); border-radius: 3px; padding: 7px 9px; font: 14px var(--sans); outline: none; }
/* Wide ledgers (holdings, the exchange) on a phone: the table scrolls within itself, the window never does. */
@media (max-width: 699px) {
  #modal-panel table.grid:not(.market) { display: block; max-width: 100%; overflow-x: auto; font-size: 12px; }
  #modal-panel table.grid:not(.market) td, #modal-panel table.grid:not(.market) th { white-space: nowrap; padding: 4px 6px; }
}
/* The diving bell: stats as chips, a d-pad of brass buttons, the surface order under it. */
#hud-dive .dstats { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font: 600 12px var(--sans); color: var(--bone); margin: 2px 0; }
#hud-dive .dstats > span { display: inline-flex; align-items: center; gap: 4px; }
#hud-dive .dctl { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-top: 4px; text-align: left; }
#hud-dive .dpad { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); gap: 3px; }
#hud-dive .dpad .btn { min-width: 0; width: 34px; height: 34px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
#hud-dive .dpad-mid { display: flex; align-items: center; justify-content: center; opacity: 0.7; }
#hud-dive .dsurface { display: flex; align-items: center; justify-content: center; gap: 6px; }
body.touch #hud-dive .dhint { display: none; }
@media (max-width: 699px) { #hud-dive .dlog { max-height: 30px; } }
/* A tall stack (the diving bell under the goals) scrolls within itself and leaves room above the bottom block
   for two toasts. */
@media (max-width: 699px), (max-height: 520px) {
  /* (its foot no lower than 30% of the height — the popup budget's centre — however short the screen: it ended at 112 px
     of 360, the boss's card in its last 4 px; QA circle, 2026-10-05) */
  #hud-stack { max-height: max(min(104px, calc(30vh - var(--sa-t) - 8px)), calc(100vh - var(--hb-top, 200px) - 250px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  #hud-stack::-webkit-scrollbar { display: none; }
}
/* While the bell is down on a phone, the goals step aside: the maze and its helm need the room. */
@media (max-width: 699px), (max-height: 520px) {
  #hud-stack:has(#hud-dive:not(.hidden)) #hud-goals { display: none; }
  #hud-dive .dpad { grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); }
  #hud-dive .dpad .btn { width: 30px; height: 30px; }
}
/* ==== Grid pass (lead QA): window heads, plates, game scrollbars ==== */
/* The title plate: the crest and the name centred on one line inside the plate, a fixed small gap. */
.modal-head h2, .skinned .modal-head h2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
.modal-head h2 .ico-crest, .skinned .modal-head h2 .ico-crest { margin: 0; vertical-align: 0; width: 1.25em; height: 1.25em; flex: none; }
.modal-head h2 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; }
/* The harbour head: title and description on the left, the ship's figures and the sail order on the right. */

.ph-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid rgba(140, 107, 58, 0.45); border-radius: 15px; background: rgba(8, 9, 11, 0.7); font: 600 13px var(--sans); color: var(--bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-chip.gold { color: var(--gold); font-size: 15px; }
.ph-chip .money { gap: 5px; }
.ph-chip .ico-sm { width: 18px; height: 18px; margin: 0; }

@media (max-width: 699px), (max-height: 520px) {
  /* The chips take the width their numbers need (a big purse never spills past its frame) and share the rest. */
  .ph-chip { flex: 1 1 auto; min-width: max-content; padding: 0 8px; }
}
/* A phone on its side: the head in one band (name and line | figures and the sail order), the tabs and their caption
   tighter — the page had 117 of 375 px left under them. */
@media (max-height: 520px) and (min-width: 600px) and (orientation: landscape) {
  #modal-panel[data-modal="boarding"] .modal-head, #modal-panel[data-modal="menu"] .modal-head { min-height: 0; }
}
/* …the name and the figures in one band where the width allows (at 640 px the name had 170 px and ran out of its
   plate); a narrower phone keeps the figures and the sail order in a row under the name. */
@media (max-height: 520px) and (min-width: 760px) and (orientation: landscape) {
  .ph-chip { flex: 0 0 auto; }
}
@media (max-height: 520px) and (min-width: 600px) and (orientation: landscape) {
  /* The cabin's twelve doors in two rows of six (two columns showed two and a half of them). */
  #modal-panel[data-modal="menu"] .menu-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  #modal-panel[data-modal="menu"] .menu-tile { gap: 4px; padding: 10px 4px 6px; font-size: 13px; }
  #modal-panel[data-modal="menu"] .menu-tile .ico-lg { width: 48px; height: 48px; }
  #modal-panel[data-modal="menu"] .menu-tile > span { max-width: 100%; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
  .ph-chip { height: 30px; }
  /* A boarding's spoils: the hold | the coin and her fate side by side, the fates two to a row and low (they stood
     516–916 px down a 258 px page). */
  #modal-panel[data-modal="boarding"] .cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 12px; }
  #modal-panel[data-modal="boarding"] .cols { grid-auto-flow: row dense; align-items: start; }
  #modal-panel[data-modal="boarding"] .cols > div:first-child, #modal-panel[data-modal="boarding"] .cols > div:last-child > .card { grid-column: 1; }
  #modal-panel[data-modal="boarding"] .cols > div:last-child { display: contents; }
  #modal-panel[data-modal="boarding"] .cols > div:last-child > .card:last-child { grid-column: 2; grid-row: 1 / span 4; }
  #modal-panel[data-modal="boarding"] .modal-head .sub { font-size: 12px; margin-top: 0; }
  #modal-panel[data-modal="boarding"] .modal-head > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; align-content: center; }
  #modal-panel[data-modal="boarding"] .modal-head > div > h2 { grid-row: 1 / span 3; }
  #modal-panel[data-modal="boarding"] .cols .card h4.card-h { margin: 0 0 2px; font-size: 15px; }
  #modal-panel[data-modal="boarding"] .cols .card h4.card-h .ico-md { width: 24px; height: 24px; }
  #modal-panel[data-modal="boarding"] .spoils .ammo-chip .ico-md { width: 24px; height: 24px; }
  #modal-panel[data-modal="boarding"] .cols .card { margin-bottom: 8px; padding: 8px 10px; }
  #modal-panel[data-modal="boarding"] .cols .card p { margin: 2px 0; font-size: 11.5px; line-height: 1.3; }
  #modal-panel[data-modal="boarding"] .choice-grid.one { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
  #modal-panel[data-modal="boarding"] .btn.choice { min-height: 44px; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 3px 8px; font-size: 11.5px; line-height: 1.15; } /* a finger's 44 (docs/23 item 92) */
  #modal-panel[data-modal="boarding"] .choice-ico { width: 22px; height: 22px; }
}
/* …and on a desk's short screen (1500×600, 1280×720) the same plan in the desk's type: four of the five fates stood
   under the window's foot (568–878 px of a window that ends at 576), QA 2026-10-09. */
@media (min-height: 521px) and (max-height: 820px) and (min-width: 1000px) {
  #modal-panel[data-modal="boarding"] .cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 16px; grid-auto-flow: row dense; align-items: start; }
  #modal-panel[data-modal="boarding"] .cols > div:first-child, #modal-panel[data-modal="boarding"] .cols > div:last-child > .card { grid-column: 1; }
  #modal-panel[data-modal="boarding"] .cols > div:last-child { display: contents; }
  #modal-panel[data-modal="boarding"] .cols > div:last-child > .card:last-child { grid-column: 2; grid-row: 1 / span 4; }
  #modal-panel[data-modal="boarding"] .cols .card { margin-bottom: 10px; }
  #modal-panel[data-modal="boarding"] .choice-grid.one { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  #modal-panel[data-modal="boarding"] .btn.choice { min-height: 52px; padding: 6px 12px; font-size: 13.5px; line-height: 1.2; }
}
/* A boarded ship's fates in a word on a narrow phone (dialogs.ts): at 640×360 the prize's line ran to five rows and the
   fifth fate stood under the window's foot (332–392 px of a window ending at 342), QA 2026-10-09. */
.choice .ch-short { display: none; }
@media (max-width: 699px) {
  #modal-panel[data-modal="boarding"] .choice .ch-long { display: none; }
  #modal-panel[data-modal="boarding"] .choice .ch-short { display: inline; }
}
/* Scrollbars in the game's own hand: a thin brass rail on a dark groove, everywhere. */
/* Firefox takes the standard properties; Chromium keeps its own (setting both would disable the brass thumb). */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #8c6b3a rgba(8, 8, 10, 0.55); } }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(8, 8, 10, 0.55); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(140, 107, 58, 0.18); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #5d4527, #b08d57 50%, #5d4527); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.6); }
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg, #5d4527, #b08d57 50%, #5d4527); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #6f5530, #d4ae6a 50%, #6f5530); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; }
.card h4.card-h .ico-md.flip { transform: scaleX(-1); }

/* Section plates never break onto a second line (a two-line plate tears its frame): smaller type on a phone,
   an ellipsis if even that does not fit. */
.skinned .title-sm { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
@media (max-width: 699px) { .skinned .title-sm { font-size: 18px !important; } }
.btn .money { gap: 4px; }
/* The close button is on every window: a phone needs no "[O] close" hint beside it. */
@media (max-width: 699px), (max-height: 520px) { .modal-head > .muted:last-child { display: none; } }
/* Checkboxes in the game's hand: a dark well with a brass rim, a gold tick when set. */
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 1px solid var(--brass); border-radius: 4px; background: #0b0d10; box-shadow: inset 0 1px 3px #000; cursor: pointer; position: relative; vertical-align: middle; }
input[type=checkbox]:checked { background: linear-gradient(180deg, #d8b25e, #a07b3a); border-color: #e8cf8a; box-shadow: 0 0 6px rgba(224, 184, 98, 0.45); }
input[type=checkbox]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #1a1206; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
input[type=checkbox]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Range sliders: a brass groove with a gold knob. */
input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(180deg, #151210, #2a221a); box-shadow: inset 0 0 0 1px rgba(140, 107, 58, 0.55); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3dc9c, #b8893f 60%, #6b4c22); border: 1px solid #2a1c0a; box-shadow: 0 1px 3px #000; }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: #1d1813; box-shadow: inset 0 0 0 1px rgba(140, 107, 58, 0.55); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3dc9c, #b8893f 60%, #6b4c22); border: 1px solid #2a1c0a; }
/* Tablets and small desktops: the harbour's and the company's tabs share the row in equal cells, the picture
   over a small caption, so seven or eight of them never run past the window. */

/* A plate in a half-width column takes a smaller type so it stays on one line. */
.cols .title-sm { font-size: 18px !important; }
/* The market's three orders stand in one row of equal buttons. */

/* Ledgers on a phone: every row a small card, each figure under its column's name; no sideways scrolling. */
@media (max-width: 699px) {
  #modal-panel table.grid[data-ledger] { display: block; overflow: visible; font-size: 13px; }
  #modal-panel table.grid[data-ledger] tbody { display: block; }
  #modal-panel table.grid[data-ledger] tr:first-child { display: none; }
  #modal-panel table.grid[data-ledger] tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; padding: 8px; margin-bottom: 6px; border: 1px solid rgba(140, 107, 58, 0.3); border-radius: 4px; background: rgba(6, 6, 7, 0.5); }
  #modal-panel table.grid[data-ledger] td { display: block; border: 0; padding: 0; white-space: normal; }
  #modal-panel table.grid[data-ledger] td:first-child { grid-column: 1 / -1; font-weight: 600; }
  #modal-panel table.grid[data-ledger] td[data-l]:not(:first-child)::before { content: attr(data-l); display: block; font-size: 10px; color: var(--fog); text-transform: uppercase; letter-spacing: 0.05em; }
  #modal-panel table.grid[data-ledger] td:empty { display: none; }
  #modal-panel table.grid[data-ledger] td:has(> .btn):last-child { grid-column: 1 / -1; display: flex; gap: 6px; }
  #modal-panel table.grid[data-ledger] td:has(> .btn):last-child::before { display: none; }
  #modal-panel table.grid[data-ledger] td:has(> .btn):last-child .btn { flex: 1; }
}
/* The harbour's name: the faction's crest stands beside the plate (not squeezed inside it), the name alone in
   the plate's middle. */

/* Every title plate: the words sit on the plate's centre line (the display face rides a little high). */
.skinned .modal-head h2, .skinned .title-sm { line-height: 1.2; padding-top: 2px; padding-bottom: 1px; }
/* The captain's ring sits true: the painted ring keeps its own proportions and its hole is centred on the
   portrait (the old box stretched it and set the hole low, so the face looked pushed up and left). */
.skinned .uf-portrait::after { inset: -28.6% -20.9% -19.8% -19.1%; background-size: 100% 100%; }
/* The level: a brass-rimmed medallion on the ring's lower right, the number in its middle. */
.uf-level { right: -12%; bottom: -10%; width: 44%; height: 44%; background: radial-gradient(circle at 40% 35%, #2a2016, #0c0906 70%); border: 2px solid #c9a25a; box-shadow: 0 1px 4px #000, inset 0 0 4px rgba(0, 0, 0, 0.8); font: 700 12px/1 var(--sans); color: #f0d48e; text-shadow: 0 1px 2px #000; z-index: 3; }
/* The touch block is as tall as its tallest column (the sail arrows and their steps), so the action bar
   never sits on the upper arrow. */
@media (max-width: 699px) and (min-height: 521px) { body.touch { --touch-h: calc(var(--stick) + 40px); } }

/* Cards stand 8px apart everywhere: the last one in a column keeps no margin, and a phone's stacked columns
   are as far apart as two cards. */
.cols > * > :last-child { margin-bottom: 0; }
@media (max-width: 699px) { .cols { gap: 8px; } }

/* A count at the end of a card's heading (sailors ashore): a brass chip, not a word that wraps alone. */
.card-h .h-count { margin-left: auto; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; min-width: 0; }
.sec-head .title-sm { margin: 0; min-width: 0; }
.h-count { flex: none; min-width: 32px; height: 26px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(201, 162, 90, 0.55); border-radius: 13px; background: rgba(12, 9, 6, 0.8); font: 700 14px/1 var(--sans); color: var(--gold); }
/* The tavern's other orders sit in the hiring grid, two cells wide each. */


/* The button art carries a clear margin (19 of its 40px corners): its painted rim is drawn out to the box's
   edge, so a button's visible frame lines up with the fields, cards and chips around it and a row of buttons
   stands exactly its gap apart. */
.skinned .btn, .skinned .tab.active { border-image-outset: 0.475; }
/* An icon on the chosen tab's wood: the dark ones (the market's scales) all but vanished into it. */

/* Every tab keeps its chosen twin's edges (a clear border where the frame will be), so a label does not drop
   when its tab is chosen and the row reads as one line; the label sits in the middle under the frame's rim. */
.skinned .tab:not(.active) { border-style: solid; border-color: transparent; border-width: 6px 10px 0; }
.skinned .tab.active, .skinned .tab:not(.active) { padding: 3px 6px 6px; }

/* The title screen on one axis: the guest order as wide as the name field; the account drawer opens on a brass
   chevron, not the browser's triangle, and its buttons share the field's width. */
.login-panel #login-form .btn-primary { display: block; width: 100%; min-height: 44px; font-size: 15px; }
.login-account { margin-top: 14px; }
.login-account summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; }
.login-account summary::-webkit-details-marker { display: none; }
.login-account summary::before { content: ''; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border: solid var(--brass); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s; }
.login-account[open] summary::before { transform: rotate(45deg); margin-top: -4px; }
.login-account form .row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; }
.login-account form .row .btn { width: 100%; min-height: 40px; }
.login-account form .row #forgot-btn { grid-column: 1 / -1; min-height: 32px; }
.login-panel .hint { margin-top: 18px; }
/* A screen taller than the window scrolls instead of losing its top (a phone on its side): the panel centres
   by its margins, which give way when there is no room. A low window gets the compact title screen. */
#screen-login, #screen-captain { overflow-y: auto; align-items: flex-start; -webkit-overflow-scrolling: touch; }
#screen-login > .login-panel, #screen-captain > .captain-wrap { margin: auto; }
@media (max-height: 520px) {
  .login-panel { padding: 16px 22px; width: min(560px, 94vw); }
  .login-panel .title { font-size: 40px; }
  .login-panel .subtitle { font-size: 14px; margin: 0 0 12px; }
  .login-panel label { margin-bottom: 8px; }
  .login-panel input { padding: 8px 10px; }
  .login-panel .hint { margin-top: 10px; }
}
/* The game's name fits the title panel's field at every width (it ran 52px past it on a desktop); the trailing
   letter-space is given back so the word sits in the middle. */
.login-panel .title { font-size: clamp(30px, 11vw, 54px); letter-spacing: 0.06em; margin-right: -0.06em; white-space: nowrap; }

/* The captain's order stays in reach: pinned to the foot of the scrolling description, full width on a phone. */
.captain-detail .pick-bar { position: sticky; bottom: 0; z-index: 2; margin-top: 12px; padding: 10px 0 2px; background: linear-gradient(180deg, rgba(10, 9, 8, 0), rgba(10, 9, 8, 0.97) 12px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* «I know the sea» rides in the pinned bar beside the order (it lay under the scrolled story, below the screen). */
.captain-detail .pick-bar label.know-sea { margin: 0; flex: 1 1 150px; min-height: 44px; gap: 10px; }
.captain-detail .pick-bar label.know-sea input { width: 20px; height: 20px; accent-color: var(--brass); }
.captain-detail .pick-bar label.know-sea span { display: flex; flex-direction: column; line-height: 1.25; }
.captain-detail .pick-bar label.know-sea b { color: var(--bone); font-weight: 600; font-size: 14px; }
.captain-detail .pick-bar label.know-sea small { color: var(--fog); font-size: 12px; }
.captain-detail .pick-bar .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 699px), (max-height: 520px) {
  .captain-detail .pick-bar .btn { flex: 1 1 auto; min-height: 44px; font-size: 14px; padding-inline: 12px; max-width: 100%; }
  .captain-detail .pick-bar label.know-sea { flex-basis: 120px; }
}
/* A phone on its side: the captains in a column on the left, the chosen one's story on the right with a small
   portrait beside it — the stacked phone layout left the story 70px of height. */
@media (max-height: 520px) and (min-width: 600px) {
  .captain-wrap { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; overflow: hidden; gap: 8px 12px; padding: 10px 14px; }
  .captain-wrap h2 { grid-column: 1 / -1; margin: 0; }
  .captain-list { flex-direction: column; overflow-x: hidden; overflow-y: auto; min-height: 0; }
  .captain-card { flex: none; grid-template-columns: 44px 1fr; padding: 6px; gap: 8px; }
  .captain-card .portrait { width: 44px; height: 56px; }
  .captain-card .arch { font-size: 15px; }
  .captain-detail { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; min-height: 0; }
  .captain-detail .big-portrait { width: 150px; height: 200px; max-height: none; position: sticky; top: 0; }
  .captain-detail h3 { font-size: 22px; }
}
/* A tablet: the chosen captain's portrait over the story (side by side left the story 133px and ran past the
   screen). */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 521px) {
  .captain-wrap { grid-template-columns: 260px minmax(0, 1fr); }
  .captain-detail { grid-template-columns: minmax(0, 1fr); }
  .captain-detail .big-portrait { width: 100%; height: 300px; background-position: center 20%; }
}
/* The prologue's lines keep a margin from the screen's edges and a size a phone can hold. */
#prologue { padding: 24px max(24px, env(safe-area-inset-left)) 56px; box-sizing: border-box; }
@media (max-width: 699px), (max-height: 520px) {
  #prologue { gap: 12px; }
  #prologue p { font-size: 20px; line-height: 1.35; }
  #prologue small { bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* The ship's condition opened from the portrait: a solid sheet dropping from under the unit frame (it lay over
   the crew bar and let the goals show through), as wide as the screen on a phone. */
body.ship-open .ship-panel { top: calc(var(--uf-bottom, 104px) + 6px); background: linear-gradient(180deg, #0e0c0a, #080809); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); z-index: 6; }
@media (max-width: 699px) { body.ship-open .ship-panel { width: auto; right: calc(var(--sa-r, 0px) + 8px); max-height: calc(100dvh - var(--uf-bottom, 104px) - var(--hb-top, 0px) - 24px); } }
/* Small forms in cards (a buy order, the bank): labelled fields and equal buttons on one two-column grid. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; align-items: end; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; color: var(--fog); text-transform: uppercase; letter-spacing: 0.05em; }
.form-grid input, .form-grid select { width: 100%; min-width: 0; }
.form-grid .fg-wide { grid-column: 1 / -1; }
.form-grid .btn { width: 100%; min-height: 36px; }
.good-qty { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.good-qty > span { min-width: 0; }
@media (max-width: 699px), (max-height: 520px) { #modal-panel table.grid[data-ledger] td:has(> .good-qty):not(:first-child), #modal-panel table.grid[data-ledger] td.lg-wide { grid-column: span 2; } }
.good-qty .ico { margin: 0; }
/* A card's picture bleeds into the card's padding only when it stands straight in a card; inside a legend's
   ship block (no padding) it keeps to its column. */
.card-art { margin: 0 0 8px; }
.card > .card-art { margin: -2px -4px 8px; }

/* A good's marks (contraband, perishable, dangerous, deal of the day): small caps pills that wrap as whole
   words beside the name, not loose coloured words. */
.tag { display: inline-block; vertical-align: 2px; margin: 0 0 0 4px; padding: 1px 6px; border: 1px solid rgba(154, 166, 178, 0.35); border-radius: 9px; font: 600 9px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fog); white-space: nowrap; }
.tag-gold { color: var(--gold); border-color: rgba(224, 184, 98, 0.5); }
/* A tablet's windows read in one column: two half-width columns squeezed the ledgers (a forwards table ran 187px
   past its card), the tradesmen's names and the yard's notes. */
@media (max-width: 979px) { .cols { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* A policy line: the serif words sit 2px low in their line box beside a sans button (the face's long descent),
   so they are lifted to the button's optical middle. */
.ins-row { padding: 3px 0; align-items: center; gap: 10px; }
.ins-row > span:first-child { position: relative; top: -2px; }

/* The yard's build order on the form grid; its checkbox reads as a sentence, not a caps label. */
.form-grid label.check { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--bone); }
.form-grid > p { margin: 0; }

/* What a build needs: one chip per material, what you have over what it takes; short ones in red. */
.mats { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.mat { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border: 1px solid rgba(140, 107, 58, 0.4); border-radius: 12px; font: 500 12px/1.3 var(--sans); color: var(--bone); }
.mat .ico { width: 20px; height: 20px; margin: 0; }
.mat b { font-weight: 700; color: var(--gold); }
.mat.short { border-color: rgba(255, 120, 100, 0.45); }
.mat.short b { color: #ff8a7a; }

.btn-block { display: block; width: 100%; margin-top: 8px; }
.nowrap { white-space: nowrap; }
.order-row { padding: 4px 0; gap: 10px; align-items: center; }

/* Talent sets: the label and the sets on one grid of equal cells, the hint under them; the set in use is lit,
   not greyed as if it could not be had. */
.tal-loadout:has(> button) { display: grid; grid-template-columns: auto repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
.tal-loadout > .muted { grid-column: 1 / -1; }
.tal-loadout .btn { width: 100%; }
.tal-loadout .btn.is-current { cursor: default; box-shadow: 0 0 10px rgba(224, 184, 98, 0.35); }

/* Until the game has put the page's words in Russian, the English ones are not shown (index.html). */
html.i18n-pending [data-i18n], html.i18n-pending [data-i18n-ph]::placeholder { visibility: hidden; animation: i18n-show 0s 3s forwards; }
@keyframes i18n-show { to { visibility: visible; } } /* should the script never come, the English shows after 3 s */
/* The current quest under the minimap (desktops) wraps to its full words instead of being cut with an ellipsis. */
#hud-region > .rg-extra { white-space: normal; overflow: visible; }

/* Key chips on the gauges and the fire mode: the bound key (rebinding shows), then the word. */
.kchip { display: inline-block; margin-right: 4px; padding: 0 3px; border: 1px solid rgba(154, 166, 178, 0.45); border-radius: 3px; font: 700 8px/1.5 var(--sans); color: var(--bone); letter-spacing: 0; text-transform: none; vertical-align: 1px; }
.rl > span { white-space: nowrap; }
@media (min-width: 700px) { .rl { width: auto; min-width: 84px; } }

/* A repeated toast's count. */
.toast .t-count { margin-left: auto; padding: 0 6px; border-radius: 8px; background: rgba(224, 184, 98, 0.18); color: var(--gold); font: 700 11px/1.5 var(--sans); flex: none; }

/* A low window with a mouse (a short browser window, a tablet on its side with a mouse): the top stack keeps
   at least room for a boss's card (it was squeezed to nothing), and the micro menu stands in two columns under
   the minimap instead of one running off the bottom of the screen. */
@media (max-height: 520px) {
  body:not(.touch) .micro-menu { display: grid; grid-template-columns: repeat(2, 40px); gap: 6px; }
  body:not(.touch) #hud-stack { right: calc(var(--sa-r) + var(--mm) + 64px); } /* clear of the minimap */
}

/* Talent points under the portrait: the key, the mark and the number (the sentence was cut off beside the law's
   word on a desktop). */
.uf-sub .uf-pts { display: inline-flex; align-items: center; gap: 3px; flex: none; font-weight: 700; }
.uf-sub .wanted { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The open chat on phones and tablets: a panel of its own over the top stack (its lines lay over the goals and
   the sea), words that do not fit break. */
#chat-log div { overflow-wrap: anywhere; }
@media (max-width: 1099px), (max-height: 599px) {
  #chat.open { z-index: 7; padding: 8px 10px 10px; background: linear-gradient(180deg, rgba(14, 12, 10, 0.96), rgba(8, 8, 9, 0.96)); border: 1px solid rgba(140, 107, 58, 0.55); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); }
  #chat.open #chat-log { max-height: 30vh; overflow-y: auto; margin-bottom: 8px; }
  #chat.open #chat-input { width: 100%; margin: 0; }
}
/* …and it takes the goals' place while open: the goals step aside, the chat starts where they stood and keeps
   clear of the touch menu's button on the right. */
@media (max-width: 1099px), (max-height: 599px) {
  body:has(#chat.open) #hud-goals { visibility: hidden; }
  #chat { top: calc(var(--sa-t) + var(--top-h)); }
  body.touch #chat { right: calc(var(--sa-r) + 60px); }
}
@media (max-height: 520px) {
  #chat { top: calc(var(--sa-t) + 8px); left: calc(var(--sa-l) + 350px); right: calc(var(--sa-r) + var(--mm) + 64px); }
  body.touch #chat { right: calc(var(--sa-r) + var(--mm) + 64px); }
}
/* Tablets: the chat opens where the top stack stands (under the unit frame, left of the minimap column). */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 521px) {
  #chat, body.touch #chat { top: calc(var(--sa-t) + var(--uf-p) + 54px); right: calc(var(--sa-r) + var(--mm) + 28px); }
}
/* A large touch screen: the helm and the sail steps own the bottom-left corner, so the chat opens under the
   unit frame instead; the quest line under the minimap (a mouse's extra) gives the touch menu its room. */
@media (min-width: 1100px) and (min-height: 600px) {
  body.touch #chat { top: calc(var(--sa-t) + 134px); bottom: auto; left: calc(var(--sa-l) + 12px); right: auto; width: 340px; }
  body.touch #chat.open { z-index: 7; padding: 8px 10px 10px; background: linear-gradient(180deg, rgba(14, 12, 10, 0.96), rgba(8, 8, 9, 0.96)); border: 1px solid rgba(140, 107, 58, 0.55); border-radius: 4px; }
}
body.touch #hud-region .rg-extra { display: none; }

/* The centre cards (a mutiny, the edge of safe water, a shipwreck) stand in the middle of the sheet, not at
   its top with the lower half empty; they still scroll from the top when taller than the screen. */
.modal-body:has(> .center-card) { display: flex; flex-direction: column; }
.modal-body > .center-card { margin-block: auto; width: 100%; box-sizing: border-box; }
/* The one button of a loss (sunk, boarded) a finger high on a phone (docs/23 item 92: 150×35 px). */
body.touch .center-card .btn { min-height: 44px; padding-inline: 18px; }
/* A centre card's title fits its plate on every width (the edge of safe water's was cut at 34px in 560px). */
.center-card .title-sm { font-size: clamp(20px, 2.6vw, 28px) !important; max-width: 100%; }
@media (max-width: 699px) { .center-card .title-sm { white-space: normal; text-wrap: balance; margin-left: 0; margin-right: 0; overflow: visible; } }

/* The bell's maze and its helm side by side (stacked, the helm fell below a phone's fold); a dive gives the top
   stack more of the screen. */
#hud-dive .dplay { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0; }
#hud-dive .dplay .dmaze { margin: 0; flex: none; }
#hud-dive .dplay .dctl { margin: 0; grid-template-columns: auto; justify-items: center; }
@media (max-width: 699px), (max-height: 520px) {
  #hud-stack:has(#hud-dive:not(.hidden)) { max-height: max(104px, calc(100vh - var(--hb-top, 200px) - 70px)); }
}
/* The bell's helm buttons are small squares: a thin painted rim, no side padding, so the arrow has room. */
.skinned #hud-dive .dpad .btn { padding: 0; border-width: 5px; border-image-width: 5px; }
/* The bell's air: a thin sea-blue bar (it had no style outside the boss panel and stood 0px high). */
#hud-dive .bbar { height: 6px; background: #0b1618; border: 1px solid rgba(88, 184, 200, 0.4); margin: 4px 0; }
#hud-dive .bbar i { display: block; height: 100%; }
/* The bell's log keeps its newest lines in sight (it showed the oldest and cut the rest). */
#hud-dive .dlog { display: flex; flex-direction: column; justify-content: flex-end; }
/* A phone on its side: title and «Surface» on one line, the maze beside its helm and the counts, one line of log;
   the panel may reach down to the bottom block, and toasts step aside under the unit frame. */
@media (max-height: 520px) {
  #hud-stack:has(#hud-dive:not(.hidden)) { max-height: calc(100vh - var(--hb-top, 120px) - var(--sa-t) - 16px); }
  #hud-dive { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "name name surf" "stat stat stat" "maze pad info" "bar bar bar" "haul haul haul" "log log log"; gap: 4px 10px; align-items: center; }
  #hud-dive .dplay, #hud-dive .dctl { display: contents; }
  #hud-dive .dname { grid-area: name; }
  #hud-dive .dsurface { grid-area: surf; justify-self: end; margin: 0; }
  #hud-dive .dstatus { grid-area: stat; }
  #hud-dive .dplay .dmaze { grid-area: maze; margin: 0; }
  #hud-dive .dpad { grid-area: pad; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); }
  #hud-dive .dpad .btn { width: 28px; height: 28px; }
  #hud-dive .dally { grid-column: 2 / 4; grid-row: 3; }
  #hud-dive .dstats { grid-area: info; flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; }
  #hud-dive .bbar { grid-area: bar; margin: 0; }
  #hud-dive .dhaul { grid-area: haul; }
  #hud-dive .dlog { grid-area: log; max-height: 14px; margin: 0; }
  #hud-dive .dhint { display: none; }
}
/* A room's mark sits in the middle of its cell at every cell size (a fixed 22px line dropped it 4.5px in 17px). */
#hud-dive .dcell { display: flex; align-items: center; justify-content: center; line-height: 1; }
@media (max-height: 520px) { #hud-dive .dsurface { height: 28px; padding-block: 0; } }
/* The prompt over the action bar keeps to the middle column and wraps in balanced lines (a bell buoy's line ran
   704px across a phone on its side and under the micro menu). */
#hud-prompt { max-width: min(92vw, 560px); text-wrap: balance; }
/* The drowned maze shows its bounds while most of it is still dark, and the helm's hint sits under the maze and
   the helm instead of as a third column. */
#hud-dive .dmaze { outline: 1px solid rgba(111, 90, 56, 0.55); outline-offset: 1px; }
#hud-dive .dplay { flex-wrap: wrap; }
#hud-dive .dplay > .dhint { flex-basis: 100%; text-align: center; }
/* The log shows whole entries only (a clipped box cut the older one mid-line): the last three; on a phone, upright
   or on its side, the last one in two lines at most. */
#hud-dive .dlog { max-height: none; }
#hud-dive .dlog > div:nth-last-child(n+4) { display: none; }
@media (max-width: 699px), (max-height: 520px) {
  #hud-dive .dlog > div:not(:last-child) { display: none; }
  #hud-dive .dlog > div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
/* The world chart fills what the window leaves and never sizes itself: its canvas drew at the device's pixel
   ratio and fed that back as its own height (on a phone it grew with every redraw — 2700px — and the key fell
   off the screen). The treasure maps sit under the chart. */
.map-wrap { min-height: 0; overflow: hidden; }
#worldmap-canvas { position: absolute; inset: 0; }
/* On a phone the chart's key stands under the chart instead of over its lower third. */
@media (max-width: 699px) {
  .map-wrap { display: flex; flex-direction: column; }
  #worldmap-canvas { position: static; flex: 1 1 0; min-height: 0; height: auto; }
  .map-legend { position: static; max-width: none; margin: 0; border-width: 1px 0 0; gap: 2px 10px; padding: 6px 10px; }
  .map-legend .ico { width: 18px; height: 18px; }
}
/* The chart's key folds: open on a tall screen, a small plate in a low window (it covered a third of the chart). */
.map-legend { display: block; }
.map-legend > summary { cursor: pointer; list-style: none; font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.map-legend > summary::-webkit-details-marker { display: none; }
.map-legend > summary::before { content: '▸ '; }
.map-legend[open] > summary { margin-bottom: 6px; }
.map-legend[open] > summary::before { content: '▾ '; }
.map-legend .lg-items { display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* Folded, the legend's items are not laid out at all (they were, 38px wide behind the summary, «you» 6px past it). */
.map-legend:not([open]) .lg-items { display: none; }
@media (max-width: 699px) { .map-legend .lg-items { gap: 2px 10px; } }
/* The chart closes with the X like every window (its own «[M] закрыть» line wrapped beside it); the menu shows
   the key. */

/* The game's own question (in place of the browser's confirm()/alert()): since docs/23 phase 1 the kit's bottom sheet
   (ui/kit/sheet.ts, kit.css) sized to its words — the text, «Отмена» and the verb as two equal kit buttons at its foot
   (one in the middle for a notice). */
.k-sheet.confirm-panel { width: min(460px, 100%); zoom: calc(var(--ui-scale) * var(--text-scale)); }
.confirm-panel p { margin: 0 0 4px; font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--bone); text-align: center; text-wrap: pretty; }
.k-sheet-foot > .confirm-row { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.k-sheet-foot > .confirm-row.one { grid-template-columns: minmax(0, 240px); justify-content: center; }

/* ==== Boarding 2.0: the deck fight (client/src/ui/boardfight.ts) ==== */
#board-fight { position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); bottom: calc(var(--hb-top, 170px) + 10px); width: min(760px, calc(100vw - 32px)); pointer-events: auto; }
.bf-panel { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; max-height: calc(100vh - var(--hb-top, 170px) - 30px); overflow-y: auto; scrollbar-width: none; zoom: calc(var(--ui-scale) * var(--text-scale)); }
.skinned .bf-panel { border-width: 14px; border-image-width: 14px; }
/* The boarding painting (bg.boarding) behind the fight, dark enough under the orders to read them. */
.bf-panel.decked, .skinned .bf-panel.decked { background: linear-gradient(180deg, rgba(12, 10, 8, 0.78), rgba(8, 7, 6, 0.9)), var(--bf-deck) center 40% / cover no-repeat; background-color: #0c0b0a; background-clip: padding-box; }
.bf-info, .bf-act { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bf-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.bf-side { display: flex; gap: 8px; align-items: center; min-width: 0; }
.bf-side.foe { flex-direction: row-reverse; }
.bf-face { width: 52px; height: 52px; flex: none; border-radius: 50%; background: #111 center / cover no-repeat; border: 2px solid var(--brass-dim); box-shadow: 0 0 0 1px #000, 0 2px 8px rgba(0, 0, 0, 0.6); }
.bf-side.foe .bf-face { border-color: rgba(178, 58, 58, 0.75); }
.bf-meters { flex: 1; min-width: 0; display: grid; gap: 3px; }
.bf-name { font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-side.foe .bf-name { text-align: right; }
.bf-meter { display: grid; grid-template-columns: 60px minmax(0, 1fr) 26px; align-items: center; gap: 6px; font: 600 10px var(--sans); color: var(--fog); letter-spacing: 0.04em; text-transform: uppercase; }
.bf-side.foe .bf-meter { grid-template-columns: 26px minmax(0, 1fr) 60px; }
.bf-side.foe .bf-meter span { order: 3; text-align: right; }
.bf-side.foe .bf-meter em { order: 1; text-align: left; }
.bf-meter i { position: relative; height: 7px; background: #0b0d10; border: 1px solid rgba(111, 90, 56, 0.6); }
.bf-side.foe .bf-meter i { transform: scaleX(-1); }
.bf-meter u { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.4s; }
.bf-meter.crew u { background: linear-gradient(90deg, #5f7384, #a9bccb); }
.bf-meter.nerve u { background: linear-gradient(90deg, #8a6a2c, #e0b862); }
.bf-meter.mom u { background: linear-gradient(90deg, #7a2323, #d06a5e); }
.bf-meter s { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(240, 230, 200, 0.5); }
.bf-meter em { font-style: normal; color: var(--bone); text-align: right; font-variant-numeric: tabular-nums; }
.bf-mid { text-align: center; min-width: 120px; }
.bf-title { font-family: var(--display); font-size: 21px; color: var(--gold); line-height: 1.1; }
.bf-round { font: 600 11px var(--sans); color: var(--fog); text-transform: uppercase; letter-spacing: 0.06em; margin: 3px 0 5px; }
.bf-timer { height: 4px; background: #0b0d10; border: 1px solid rgba(111, 90, 56, 0.45); }
.bf-timer i { display: block; height: 100%; background: linear-gradient(90deg, #b23a3a, #e0b862); }
.bf-news { min-height: 38px; font-family: var(--serif); font-size: 15px; line-height: 1.3; text-align: center; text-wrap: balance; }
.bf-last.win { color: #a8dca2; }
.bf-last.lose { color: #e3998a; }
.bf-last.even { color: var(--bone); }
.bf-toll { color: var(--fog); font-size: 13px; white-space: nowrap; }
.bf-log { font-size: 13px; color: var(--fog); font-style: italic; margin-top: 2px; }
.bf-log .you { color: #cdbf97; }
.bf-status { font: 600 12px var(--sans); color: var(--fog); text-align: center; }
.bf-status.given { color: var(--gold); }
.bf-orders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 1200px) and (min-height: 521px) { .bf-orders { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bf-orders.specials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bf-order { position: relative; display: flex; align-items: center; gap: 8px; text-align: left; min-height: 54px; }
.skinned .bf-order { border-image-outset: 0; padding: 2px 6px; }
.bf-order .ico { width: 30px; height: 30px; flex: none; }
.bf-on { display: grid; gap: 1px; min-width: 0; }
.bf-on b { font-size: 13px; line-height: 1.15; font-weight: 600; }
.bf-on small { font-size: 11px; color: var(--fog); line-height: 1.15; }
.bf-order.on { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(224, 184, 98, 0.45); }
.bf-order.on .bf-on b { color: var(--gold); }
.bf-order[disabled] { opacity: 0.45; filter: grayscale(0.6); }
.bf-order kbd { position: absolute; top: 2px; right: 4px; font: 600 9px var(--sans); color: var(--gold); opacity: 0.8; border: 0; padding: 0; background: none; }
.bf-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.bf-foot .btn { min-height: 38px; }
.bf-duel { display: grid; gap: 8px; text-align: center; }
.bf-duel p { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--bone); }
.bf-duel-title { font-family: var(--display); font-size: 21px; color: var(--gold); }
.bf-answer { color: var(--gold); font-family: var(--sans); }
.bf-sweep { position: relative; height: 28px; margin: 2px 12px; background: linear-gradient(180deg, #0b0d10, #171a1f); border: 1px solid rgba(111, 90, 56, 0.75); }
.bf-sweet { position: absolute; top: 0; bottom: 0; width: 22%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(245, 236, 210, 0.85), rgba(224, 184, 98, 0.3) 45%, rgba(224, 184, 98, 0) 72%); }
.bf-blade { position: absolute; left: 0; top: -5px; bottom: -5px; width: 3px; transform: translateX(-50%); background: #eef6f8; box-shadow: 0 0 10px #bfe3ee; }
.bf-pips { display: flex; justify-content: center; align-items: center; gap: 6px; font: 600 11px var(--sans); color: var(--fog); min-width: 0; }
.bf-pips span:last-child { max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-pips i { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1px solid rgba(240, 230, 200, 0.45); }
.bf-pips i.hit { background: var(--gold); }
.bf-pips i.graze { background: #8a7650; }
.bf-pips i.miss { background: #4a2222; }
.bf-pips .sep { width: 16px; }
.bf-strike { min-height: 50px; font-size: 18px; }
.bf-hint { font-size: 12px; color: var(--fog); }
.bf-duel p.bf-duel-end { font-size: 17px; }
.bf-duel p.bf-duel-end.win { color: #a8dca2; }
.bf-duel p.bf-duel-end.lose { color: #e3998a; }
.modal-head .sub.board-report { color: var(--gold); }
/* A phone: the fight is a sheet from the bottom up to under the unit frame; the helm and the guns wait. */
@media (max-width: 699px) {
  #board-fight { left: 0; right: 0; bottom: 0; transform: none; width: auto; }
  .bf-panel { max-height: calc(100dvh - var(--uf-bottom, 110px) - 6px); padding: 8px 10px calc(8px + var(--sa-b, 0px)); gap: 6px; }
  .skinned .bf-panel { border-width: 10px; border-image-width: 10px; }
  .bf-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
  .bf-mid { grid-column: 1 / -1; grid-row: 1; }
  .bf-face { width: 40px; height: 40px; }
  .bf-meter { grid-template-columns: 44px minmax(0, 1fr) 22px; font-size: 9px; gap: 4px; }
  .bf-side.foe .bf-meter { grid-template-columns: 22px minmax(0, 1fr) 44px; }
  .bf-orders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-orders.specials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bf-orders.specials .bf-order { flex-direction: column; justify-content: center; gap: 2px; text-align: center; min-height: 64px; }
  .bf-orders.specials .bf-on b { font-size: 11.5px; line-height: 1.1; }
  .bf-orders.specials .bf-order .ico { display: none; }
  .bf-orders.specials .bf-on small { font-size: 10px; }
  .bf-news { font-size: 14px; min-height: 0; }
  body.boarding #hud-bottom, body.boarding #touch, body.boarding #toasts { display: none; }
}
/* A low window (a phone on its side): the fight over the whole screen, what happened on the left, the orders on
   the right. */
@media (max-height: 520px) {
  #board-fight { left: calc(var(--sa-l, 0px) + 6px); right: calc(var(--sa-r, 0px) + 6px); top: 6px; bottom: 6px; transform: none; width: auto; }
  .bf-panel { height: 100%; max-height: none; flex-direction: row; gap: 12px; padding: 8px 10px; }
  .skinned .bf-panel { border-width: 10px; border-image-width: 10px; }
  .bf-info { flex: 1 1 0; justify-content: center; }
  .bf-act { flex: 1.25 1 0; justify-content: center; }
  .bf-face { width: 40px; height: 40px; }
  .bf-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
  .bf-mid { grid-column: 1 / -1; grid-row: 1; }
  .bf-meter { grid-template-columns: 44px minmax(0, 1fr) 22px; font-size: 9px; gap: 4px; }
  .bf-side.foe .bf-meter { grid-template-columns: 22px minmax(0, 1fr) 44px; }
  .bf-orders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-order { min-height: 44px; }
  .bf-orders.specials .bf-order { justify-content: center; text-align: center; }
  .bf-orders.specials .bf-order .ico { display: none; }
  .bf-news { font-size: 14px; }
  body.boarding #hud-bottom, body.boarding #touch, body.boarding #hud-stack { display: none; }
}

/* A narrow window with a mouse keeps the micro menu down the right edge: the fight stays clear of it. */
@media (max-width: 1099px) and (min-width: 700px) and (min-height: 521px) { body:not(.touch) #board-fight { width: min(760px, calc(100vw - 150px)); left: calc(50% - 30px); } }
/* While the captains fight, the round's clock stands still. */
.bf-panel.dueling .bf-timer { visibility: hidden; }

/* The quest log under the chart (docs/11 P4): a row a quest, the chart turns to its target. */
.map-quests { max-height: 160px; overflow-y: auto; padding: 6px 10px; border-top: 1px solid rgba(111, 90, 56, 0.4); display: grid; gap: 4px; }
.mq-head { display: flex; align-items: center; gap: 6px; font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.mq-row { display: grid; gap: 1px; text-align: left; padding: 4px 6px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(111, 90, 56, 0.35); color: var(--bone); cursor: pointer; font: 13px var(--sans); }
.mq-row b { font-weight: 600; }
.mq-row .muted { font-size: 12px; }
.mq-row.off { cursor: default; opacity: 0.8; }
/* The logs under the chart (maps, orders, the common cause, tasks, quests) share one box that scrolls, at most
   two fifths of the window: on a phone they had squeezed the chart to a strip. */
.map-logs { flex: 0 1 auto; max-height: 40%; overflow-y: auto; min-height: 0; border-top: 1px solid rgba(111, 90, 56, 0.4); }
.map-logs > :first-child { border-top: 0; }
.map-logs .map-quests, .map-logs .map-maps { max-height: none; overflow: visible; }
.map-wrap { flex: 1 1 auto; min-height: 45%; }
/* A low, wide window (a phone on its side, a 640×360 window too — stacked there, the chart was a 124 px strip: QA,
   2026-10-04) or a wide one: the logs stand in a column beside the chart, which keeps the height. */
@media (max-height: 520px) and (min-width: 600px), (min-width: 1100px) {
  #modal-panel:has(> .map-logs) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); grid-template-rows: auto minmax(0, 1fr); }
  #modal-panel:has(> .map-logs) > .modal-head { grid-column: 1 / -1; }
  #modal-panel:has(> .map-logs) > .map-wrap { grid-column: 1; grid-row: 2; min-height: 0; }
  #modal-panel:has(> .map-logs) > .map-logs { grid-column: 2; grid-row: 2; max-height: none; border-top: 0; border-left: 1px solid rgba(111, 90, 56, 0.4); }
}
/* Tasks of the sea (docs/11 P6): orange rows; done ones greyed. */
.map-tasks .mq-head { color: #f2b27a; }
.mq-row.task { border-color: rgba(232, 140, 64, 0.45); }
.mq-row.task.done { opacity: 0.6; border-color: rgba(111, 90, 56, 0.35); }
.mq-row:not(.off):hover { border-color: var(--brass); }
/* The quest the captain follows: a gold edge in the chart's log. */
.mq-row.tracked { border-color: var(--gold); background: rgba(217, 178, 90, 0.08); }
/* A quest shared with the group: the button sits on the row's right, the row's words keep clear of it. */
.mq-item { position: relative; display: grid; }
.mq-row.shareable { padding-right: 104px; }
.mq-share { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.giver-shared { margin: 0 0 10px; font: 600 12px var(--sans); letter-spacing: 0.04em; color: var(--gold); text-transform: uppercase; }
.mq-row.tracked b { display: flex; align-items: center; gap: 4px; }
/* Daily orders (docs/11 P6): three lines, a tick when done, the chest below. */
.dl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 3px 0; font-size: 13px; }
.dl-row.done .dl-text { color: var(--fog); text-decoration: line-through rgba(201, 162, 90, 0.5); }
.dl-mark { color: var(--good); font-weight: 700; width: 16px; text-align: center; }
.dl-count { color: var(--gold); font-variant-numeric: tabular-nums; }
.dl-foot { margin-top: 4px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.map-daily { padding: 6px 10px; border-top: 1px solid rgba(111, 90, 56, 0.4); }
/* The common cause: the goal, a bar the whole sea fills, one's own part. */
.cm-text { font-size: 13px; margin: 2px 0 5px; }
.cm-bar { position: relative; height: 16px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(111, 90, 56, 0.6); }
.cm-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6b4a2a, #c9a25a); }
.cm-bar.done i { background: linear-gradient(90deg, #3e5a3a, #7fa05a); }
.cm-bar span { position: relative; display: block; text-align: center; font: 600 11px/16px var(--sans); color: var(--bone); text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
/* The quest giver's window (docs/11 P6): face and words side by side, the steps, the pay; on a phone, stacked. */
.confirm-panel.giver-panel { width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; text-align: left; }
/* The words scroll in a low window; the two buttons stay in sight. */
.giver-panel .confirm-body { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.giver-panel .giver-pay { margin-bottom: 10px; }
@media (max-height: 480px) { .giver { grid-template-columns: 92px minmax(0, 1fr); } .giver-face { width: 92px; height: 115px; } .giver-steps { margin: 8px 0 6px; } }
.giver { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.giver-face { width: 120px; height: 150px; background: #111 center 18% / cover no-repeat; border: 2px solid var(--brass-dim); box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.7); }
.giver-words { min-width: 0; }
.giver-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--bone); line-height: 1.1; }
.giver-who { margin: 2px 0 8px; font-family: var(--serif); font-style: italic; font-size: 15px; }
.confirm-panel .giver-say { margin: 0; text-align: left; font-size: 17px; }
.giver-steps { margin: 12px 0 8px; font-size: 14px; }
.giver-steps ol { margin: 4px 0 0 20px; padding: 0; color: var(--fog); }
.giver-steps li { margin: 2px 0; }
.giver-h { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); }
.giver-pay { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.giver:not(:has(.giver-face)) { grid-template-columns: minmax(0, 1fr); }
/* The pay to choose from (docs/11 P6): three rows, the chosen one lit in brass. */
.giver-pay-pick { margin-bottom: 6px; }
.pay-pick { display: grid; gap: 6px; margin-bottom: 12px; }
.pay-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 7px 10px; border: 1px solid rgba(111, 90, 56, 0.4); background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.pay-opt:has(input:checked) { border-color: var(--brass); background: rgba(176, 138, 72, 0.12); box-shadow: inset 0 0 0 1px rgba(176, 138, 72, 0.35); }
.pay-opt input { grid-row: span 2; margin: 0; accent-color: var(--brass); }
.pay-name { font-family: var(--serif); font-size: 15px; color: var(--bone); }
.pay-what { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--fog); }
.pay-rep, .pay-shot { color: var(--fog); }
/* A phone on its side: the giver and her words | the steps and the pay to choose, side by side in a wider card (the
   choice of pay lay a whole screen down its scroll, under «Взяться»). */
@media (max-height: 520px) and (min-width: 600px) and (orientation: landscape) {
  .confirm-panel.giver-panel { width: min(780px, calc(100vw - 24px)); }
  .giver-panel .confirm-body { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: 16px; align-content: start; }
  .giver-panel .confirm-body > * { grid-column: 2; }
  .giver-panel .confirm-body > .giver { grid-column: 1; grid-row: 1 / span 6; }
  .giver-panel .giver-steps { margin: 0 0 4px; font-size: 12.5px; }
  .giver-panel .giver-steps li { margin: 1px 0; }
  .giver-panel .giver-pay { margin-bottom: 4px; }
  .giver-panel .pay-pick { gap: 4px; margin-bottom: 4px; }
  .giver-panel .pay-opt { grid-template-columns: auto auto minmax(0, 1fr); padding: 3px 8px; gap: 0 8px; }
  .giver-panel .pay-opt input { grid-row: auto; }
  .giver-panel .pay-name { font-size: 13px; }
  .giver-panel .pay-what { font-size: 12px; gap: 2px 8px; }
}
@media (max-width: 520px) {
  .giver { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .giver-face { width: 84px; height: 105px; }
  .giver-name { font-size: 20px; }
  .confirm-panel .giver-say { font-size: 15px; }
}
/* The quest journal (docs/11 P6): the list and the day on the left, the chosen quest in full on the right;
   one column on a phone. */
.journal { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.jr-side { display: grid; gap: 10px; min-width: 0; }
.jr-list { display: grid; gap: 4px; }
.jr-row { display: grid; gap: 1px; text-align: left; padding: 6px 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(111, 90, 56, 0.35); color: var(--bone); cursor: pointer; font: 14px var(--sans); }
.jr-row b { font-weight: 600; display: flex; align-items: center; gap: 4px; }
.jr-row .muted { font-size: 12px; }
.jr-row:hover { border-color: var(--brass); }
.jr-row .muted .ico-sm { vertical-align: -3px; margin-right: 2px; }
/* Groupmates on the same quest (docs/11 P6): their names and steps under the steps. */
.jr-mates { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: -2px 0 12px; font-size: 13px; }
.jr-mate { padding: 2px 8px; border: 1px solid rgba(127, 212, 138, 0.35); background: rgba(127, 212, 138, 0.06); color: #cfe8cf; }
.jr-row.on { border-color: var(--gold); background: rgba(217, 178, 90, 0.08); }
.jr-day .map-daily { border: 1px solid rgba(111, 90, 56, 0.35); margin-bottom: 8px; }
.jr-day .map-tasks { border: 1px solid rgba(111, 90, 56, 0.35); margin-bottom: 8px; max-height: none; overflow: visible; }
/* Quests done (docs/11 P6): the count, and the last ten under it. */
.jr-done { margin-top: 4px; font-size: 13px; }
.jr-done > summary { cursor: pointer; color: var(--gold); font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.jr-done ol { margin: 6px 0 0 18px; padding: 0; color: var(--fog); }
.jr-done li { margin: 1px 0; }
.jr-detail { min-width: 0; }
.jr-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.jr-steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; margin: 3px 0; }
.jr-steps li.done { color: var(--steel-text); text-decoration: line-through rgba(201, 162, 90, 0.4); }
.jr-steps li.now { color: var(--bone); }
.jr-steps li.ahead { color: var(--fog); }
.jr-mark { text-align: center; color: var(--good); }
.jr-mark.now { color: var(--gold); }
.jr-count { color: var(--gold); font-variant-numeric: tabular-nums; }
.jr-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 699px) {
  .journal { grid-template-columns: minmax(0, 1fr); }
  .jr-detail { order: -1; }
}
/* The guild's members on a phone: the name and rank on a line, the orders for them below (no sideways scroll). */
@media (max-width: 520px) {
  table.g-members tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid #1a1d21; }
  table.g-members td { border-bottom: 0; }
  table.g-members td:nth-child(3) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 0; }
  table.g-members td:nth-child(3):empty { display: none; }
}
/* A job the port's news asks for (an epidemic, a blockade): a small red seal on the notice. */
.q-urgent { margin-left: 6px; padding: 0 5px; border: 1px solid rgba(178, 58, 58, 0.7); color: #e08a7a; font: 600 10px/16px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; }
.giver-group { margin: 0 0 10px; padding: 6px 10px; border-left: 3px solid var(--brass); background: rgba(176, 138, 72, 0.08); font-size: 14px; color: var(--bone); }
.jr-fast { color: var(--gold); font-size: 13px; }
.cm-leaders { font-size: 12px; margin-top: 3px; }
.cm-leaders b { color: var(--bone); font-weight: 600; }
/* Looking for a group: who, how seasoned, where, what for; the call aboard on the right. */
.lfg-list { display: grid; gap: 6px; margin-top: 8px; }
.lfg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid rgba(111, 90, 56, 0.35); background: rgba(255, 255, 255, 0.03); }
.lfg-row .muted { font-size: 12px; }
.lfg-note { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--bone); }
.lfg-form { flex-wrap: wrap; }
.lfg-form input { flex: 1 1 180px; min-width: 0; }
/* Friends (docs/11 P6): a dot for at sea, the name and where, the buttons wrapping under on a narrow screen. */
.fr-list { display: grid; gap: 6px; margin-top: 8px; }
.fr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid rgba(111, 90, 56, 0.35); background: rgba(255, 255, 255, 0.03); }
.fr-row:not(.on) { opacity: 0.62; }
.fr-dot { width: 9px; height: 9px; border-radius: 50%; background: #5a5347; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.fr-row.on .fr-dot { background: #7fd48a; box-shadow: 0 0 6px rgba(127, 212, 138, 0.7); }
.fr-who { min-width: 0; overflow-wrap: anywhere; }
.fr-who .muted { font-size: 12px; }
.fr-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.fr-count { font-size: 12px; font-weight: normal; margin-left: auto; }
.fr-ign { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.fr-ign .muted { font-size: 12px; }
.who-tag { color: var(--brass); font-size: 12px; }
.fresh-tag { padding: 0 5px; border: 1px solid rgba(127, 212, 138, 0.6); color: #9fe0a8; font: 600 10px/15px var(--sans); text-transform: uppercase; letter-spacing: 0.05em; }
.who-here + .who-here { margin-left: 10px; }
/* Inspecting a captain (docs/11 P6): a tapped name, and the card with its figures. */
.insp-name { cursor: pointer; text-decoration: underline dotted rgba(201, 162, 90, 0.6); text-underline-offset: 3px; }
.insp-name:hover { color: var(--gold); }
.insp-guild { color: var(--brass); font-size: 14px; margin: -4px 0 6px; }
.confirm-panel .insp-line { margin: 2px 0; text-align: left; font-size: 15px; }
.insp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: 12px 0 8px; }
.insp-stat { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid rgba(111, 90, 56, 0.35); background: rgba(255, 255, 255, 0.03); font-size: 13px; }
.insp-stat b { color: var(--bone); font-variant-numeric: tabular-nums; }
.insp-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.who-here { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--fog); cursor: pointer; }
@media (max-width: 480px) { #modal-panel .fr-form > input { flex: 1 1 100%; } #modal-panel .fr-form > .btn { flex: 1 1 0; } }
@media (max-width: 480px) { .fr-row { grid-template-columns: auto minmax(0, 1fr); } .fr-btns { grid-column: 1 / -1; justify-content: flex-start; } }

/* Ship levels (canon D12): the anchor chip in the colour of the danger; the giver's line for a fight. */
.lvl-chip { display: inline-block; font-weight: 700; font-size: 0.86em; line-height: 1.35; white-space: nowrap; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; background: rgba(8, 10, 14, 0.6); vertical-align: 1px; }
.giver-level { margin: 6px 0 0; font-size: 13px; }

/* The target frame (canon D12): her level, name, bars and the word on the fight — at the head of the HUD stack. */
#hud-target { pointer-events: auto; padding: 6px 9px 7px; max-width: 320px; }
#hud-target .tg-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
#hud-target .tg-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-size: 14px; }
#hud-target .tg-dist { flex: none; font-size: 11px; color: var(--fog, #9aa); }
#hud-target .tg-sub { font-size: 11px; margin: 1px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-target .tg-el { color: #e8c46a; }
#hud-target .tg-bar { position: relative; display: block; height: 6px; margin-top: 3px; background: #0a0c0e; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.12); }
#hud-target .tg-bar > i { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.2s; }
#hud-target .tg-hull > i { background: linear-gradient(180deg, #a4523f, #5e2219); }
#hud-target .tg-crew > i { background: linear-gradient(180deg, #5f7f9e, #2b4157); }
#hud-target .tg-sails > i { background: linear-gradient(180deg, #b3ab96, #6f6a5c); }
#hud-target .tg-foot { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font-size: 11px; }
#hud-target .tg-fx { color: #e0776b; }
#hud-target.tg-elite { box-shadow: inset 0 0 0 1px #e8c46a; }

/* The refit card (canon D12). */
.card.refit .refit-level { margin: 0 0 4px; }
.card.refit .refit-goods { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 6px; }
.card.refit .refit-good { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.card.refit .refit-good.short b { color: var(--bad, #e0776b); }
.card.refit .refit-note { margin: 2px 0; font-size: 12px; }
.card.refit .refit-why { margin: 4px 0 6px; color: var(--bad, #e0776b); font-size: 13px; }
.card.refit .refit-busy { color: #e8c46a; }

/* The gear window (docs/12 P1): slot tiles, the locker's rows, and the open piece's card beside or under them. */
.ship-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; }

.gear-main { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) { .gear-main { flex-direction: row; align-items: flex-start; } .gear-main .gear-body { flex: 1 1 60%; min-width: 0; } .gear-main .gear-detail { flex: 0 0 340px; position: sticky; top: 0; } }
.gear-list .gr { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 5px 8px; text-align: left; background: rgba(10, 12, 16, 0.72); border: 1px solid rgba(232, 196, 106, 0.18); border-radius: 4px; color: var(--bone, #ddd); cursor: pointer; min-width: 0; }
.gear-list .gr.on { box-shadow: 0 0 0 2px rgba(232, 196, 106, 0.55) inset; }
.gear-list .gr .gs-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.gs-t .gi-name, .gs-t .gs-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-t .gs-sub { font-size: 12px; }
.gear-list { display: flex; flex-direction: column; gap: 5px; }
.gear-list .gr { border-left-width: 4px; }
.gear-list .gr .gr-price { margin-left: auto; flex: none; }
.gear-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.gear-side .gp { background: rgba(10, 12, 16, 0.6); border: 1px solid rgba(232, 196, 106, 0.14); border-radius: 4px; padding: 6px 8px; }
.gi-h { font-size: 12px; color: #e8c46a; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.gl { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.5; }
.gl span { color: var(--bone, #ddd); }
.gl.g-up b { color: #6fd46f; }
.gl.g-down b { color: #e0776b; }
.gi-head .gi-ico { width: 48px; height: 48px; flex: none; object-fit: contain; }
.gi-card { background: rgba(8, 10, 14, 0.85); border: 2px solid; border-radius: 5px; padding: 8px 10px; }
.gi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gi-head .gi-name { font-size: 16px; font-family: var(--serif); }
.gi-kind { font-size: 12px; }
.gi-gift { margin: 6px 0 2px; color: #ff9d3c; font-style: italic; font-size: 13px; }
.gi-set { margin-top: 6px; font-size: 12px; color: #e8c46a; }
.gi-set .gi-bonus { color: var(--fog, #889); }
.gi-set .gi-bonus.on { color: #6fd46f; }
.gi-wear { margin-top: 6px; font-size: 12px; }
.gi-cmp { margin-top: 8px; background: rgba(8, 10, 14, 0.6); border: 1px dashed rgba(232, 196, 106, 0.25); border-radius: 4px; padding: 6px 8px; }
.gi-cmp-none { margin: 2px 0 4px; font-size: 12px; }
.gi-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gear-mend { margin-top: 10px; }
/* On a phone the piece's card rises as a sheet from the bottom, over the list, with its own ×. */
.gear-detail { position: relative; }
.gear-detail .gear-hide { position: absolute; top: 4px; right: 6px; z-index: 1; width: 30px; height: 30px; border: 0; background: rgba(0, 0, 0, 0.5); color: var(--bone, #ddd); border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 899px) {
  .gear-main .gear-detail { position: sticky; bottom: 4px; max-height: 62vh; overflow-y: auto; z-index: 3; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.75); border-radius: 6px; background: #0b0d11; padding: 2px; }
  .gear-main .gear-body { padding-bottom: 20px; }
}
.gi-reforge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; }
.gi-forge-note { width: 100%; margin: 2px 0 0; font-size: 12px; }
.insp-gear { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 8px 0 2px; font-size: 13px; }
.insp-gear .insp-gear-h { width: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.gear-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

/* An encounter's card (docs/12 P2): over the sea near the top, never over the helm and the guns. */
#encounter { position: fixed; left: 50%; top: calc(var(--sa-t, 0px) + 150px); transform: translateX(-50%); width: min(430px, calc(100vw - 24px)); z-index: 40; pointer-events: auto; }
#encounter.hidden { display: none; }
/* An encounter's card is read first: the captain's goals under it step aside rather than peep from its edge. */
body:has(#encounter:not(.hidden)) #hud-goals, body:has(#encounter:not(.hidden)) #hud-stack { visibility: hidden; }
/* On a phone the card spans the screen: the menu button under its edge waits until it is answered. */
@media (max-width: 699px) { body:has(#encounter:not(.hidden)) #tc-menu, body:has(#encounter:not(.hidden)) #hud-menu { visibility: hidden; } }
/* Tablets: the card opens below the region's lines under the chart, not across them. */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 521px) { #encounter { top: calc(var(--sa-t, 0px) + var(--mm) + 56px); } }
#encounter .enc-card { background: rgba(10, 12, 16, 0.94); border: 1px solid rgba(232, 196, 106, 0.55); border-radius: 6px; padding: 10px 12px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
#encounter .enc-h { font-family: var(--serif); font-size: 18px; color: #e8c46a; margin-bottom: 4px; }
/* The encounter's picture: a band across the top of the card, within its frame. */
#encounter .enc-art { margin: -4px -6px 8px; aspect-ratio: 2.4 / 1; background: #0b0d10 center / cover no-repeat; border: 1px solid rgba(232, 196, 106, 0.35); border-radius: 4px; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7); }
@media (max-height: 520px) { #encounter .enc-art { aspect-ratio: 4 / 1; margin-bottom: 6px; } }
#encounter .enc-art.enc-mood { filter: brightness(0.6) saturate(0.65); }
#encounter .enc-text, #encounter .enc-out { margin: 4px 0 8px; font-size: 14px; line-height: 1.45; color: var(--bone, #ddd); }
#encounter .enc-out { color: #f2e6c8; }
#encounter .enc-choices { display: flex; flex-wrap: wrap; gap: 6px; }
#encounter .enc-choices .btn { flex: 1 1 auto; min-height: 36px; }
/* A ship strikes her colours to you (docs/16 #3): the terms card, placed like an encounter's, over the sea. */
#surrender { position: fixed; left: 50%; top: calc(var(--sa-t, 0px) + 150px); transform: translateX(-50%); width: min(460px, calc(100vw - 24px)); z-index: 41; pointer-events: auto; }
#surrender.hidden { display: none; }
/* Read first, like an encounter's card: the top stack under it steps aside. */
body:has(#surrender:not(.hidden)) #hud-stack { visibility: hidden; }
#surrender .enc-card { background: rgba(10, 12, 16, 0.95); border: 1px solid rgba(240, 234, 220, 0.6); border-radius: 6px; padding: 10px 12px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
#surrender .enc-h { font-family: var(--serif); font-size: 18px; color: #f4efe2; display: flex; align-items: center; gap: 6px; line-height: 1.2; }
#surrender .enc-text { margin: 6px 0 8px; font-size: 13px; line-height: 1.4; color: var(--bone, #ddd); }
#surrender .sur-head { display: flex; align-items: center; gap: 10px; }
#surrender .sur-ship { width: 58px; height: 58px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px #000); transform: rotate(90deg); }
#surrender .sur-sub { font-size: 12px; margin-top: 2px; }
#surrender .sur-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#surrender .sur-choice { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px; text-align: left; justify-content: flex-start; }
#surrender .sur-choice span { display: flex; flex-direction: column; min-width: 0; }
#surrender .sur-choice b { font-size: 13px; line-height: 1.2; }
#surrender .sur-choice small { font-size: 11px; line-height: 1.25; opacity: 0.8; font-weight: 400; }
#surrender .sur-choice .choice-ico { width: 26px; height: 26px; flex: none; }
/* One word per choice on a phone narrower than 700 px (the whole words broke in two in a 56 px button). */
#surrender .sur-choice .sur-short { display: none; font-style: normal; }
@media (max-width: 699px) {
  body.touch #surrender .sur-choice b { display: none; }
  body.touch #surrender .sur-choice .sur-short { display: block; font-size: 12px; font-weight: 600; line-height: 1.15; }
}
#surrender .sur-choice:disabled { opacity: 0.45; }
#surrender .sur-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; flex-wrap: wrap; }
#surrender .sur-dist { flex: 1 1 auto; min-width: 0; }
#surrender .sur-dist.good { color: #9fd49a; }
#surrender .sur-dist.warn { color: #e8c46a; }
#surrender .sur-foot .btn { margin-left: auto; }
@media (max-width: 699px) { #surrender .sur-choice small { display: none; } #surrender .sur-ship { display: none; } #surrender .enc-h { font-size: 16px; } #surrender .sur-choice { min-height: 44px; } #surrender .sur-foot { flex-wrap: nowrap; font-size: 11px; } #surrender .sur-left { display: none; } }
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 521px) { #surrender { top: calc(var(--sa-t, 0px) + var(--mm) + 56px); } }
@media (max-height: 520px) { #surrender { top: calc(var(--sa-t, 0px) + 8px); left: calc(var(--sa-l, 0px) + 360px); transform: none; width: min(440px, calc(100vw - 360px - 160px - var(--sa-l, 0px) - var(--sa-r, 0px))); min-width: 280px; } #surrender .enc-card { padding: 8px 10px; } #surrender .sur-head .sur-ship, #surrender .sur-head .enc-h .ico-md { display: none; } #surrender .enc-h { font-size: 15px; } #surrender .sur-sub { font-size: 11px; } #surrender .enc-text { display: none; } #surrender .sur-choices { margin-top: 6px; } #surrender .sur-choice { min-height: 36px; padding: 4px 6px; } #surrender .sur-choice .choice-ico { display: none; } /* the word takes the button (with the icon «Keep her as a trophy» ran four lines and the card into the middle, 1280×720 EN, docs/23 item 97) */ #surrender .sur-choice small { display: none; } #surrender .sur-foot { margin-top: 6px; flex-wrap: nowrap; font-size: 11px; } #surrender .sur-left { display: none; } #surrender .sur-foot .btn { min-height: 28px; padding: 2px 10px; } }
/* A stormed lair's chest (docs/16 #7): placed like the terms card, over the sea. */
#lairchest { position: fixed; left: 50%; top: calc(var(--sa-t, 0px) + 150px); transform: translateX(-50%); width: min(400px, calc(100vw - 24px)); z-index: 41; pointer-events: auto; }
#lairchest.hidden { display: none; }
/* Not over a fight on deck or an open window: it waits (the toasts say the same). */
body:has(#board-tac:not(.hidden)) #lairchest, body:has(#modal:not(.hidden)) #lairchest { visibility: hidden; }
body:has(#lairchest:not(.hidden)) #hud-stack { visibility: hidden; }
#lairchest .enc-card { background: rgba(10, 12, 16, 0.95); border: 1px solid rgba(232, 196, 106, 0.7); border-radius: 6px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(232, 196, 106, 0.2); }
#lairchest .enc-h { font-family: var(--serif); font-size: 18px; color: #f4efe2; line-height: 1.2; }
#lairchest .lc-head { display: flex; align-items: center; gap: 10px; }
#lairchest .lc-art { width: 64px; height: 64px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px #000); }
#lairchest .lc-sub { font-size: 12px; margin-top: 2px; }
#lairchest .lc-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
#lairchest .lc-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: var(--bone, #ddd); min-width: 0; }
#lairchest .lc-list li span { min-width: 0; overflow-wrap: anywhere; }
#lairchest .lc-list .ico-md { width: 24px; height: 24px; flex: none; }
#lairchest .lc-foot { display: flex; justify-content: flex-end; }
@media (max-height: 520px) { #lairchest { top: calc(var(--sa-t, 0px) + 8px); left: calc(var(--sa-l, 0px) + 360px); transform: none; width: min(400px, calc(100vw - 360px - 160px - var(--sa-l, 0px) - var(--sa-r, 0px))); min-width: 260px; } #lairchest .lc-art { width: 40px; height: 40px; } #lairchest .enc-h { font-size: 15px; } #lairchest .lc-list { margin: 4px 0; gap: 2px; } #lairchest .lc-list li { font-size: 12px; } #lairchest .lc-list .ico-md { width: 18px; height: 18px; } }
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 521px) { #lairchest { top: calc(var(--sa-t, 0px) + var(--mm) + 56px); } }
/* A good omen alongside (docs/16 #9): its icon on the portrait, opposite the level. */
.uf-pod { position: absolute; left: -12%; bottom: -8%; z-index: 3; display: inline-flex; align-items: center; gap: 1px; padding: 1px 4px 1px 1px; border-radius: 9px; background: rgba(8, 14, 18, 0.92); border: 1px solid rgba(120, 200, 220, 0.75); font: 700 10px/1.2 var(--sans); color: #bfe8f0; white-space: nowrap; box-shadow: 0 0 8px rgba(110, 200, 230, 0.45), 0 1px 4px #000; pointer-events: auto; }
.uf-pod .ico-sm { width: 14px; height: 14px; border-radius: 50%; }
.uf-pod i { font-style: normal; }
@media (max-width: 699px), (max-height: 520px) { .uf-pod { left: -18%; bottom: auto; top: 58%; padding: 1px; } .uf-pod i { display: none; } }
/* A trophy ship (docs/16 #5): her story on the ship card, a tag by her name in the berths. */
.trophy-card p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--bone, #ddd); }
.trophy-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 6px; border: 1px solid rgba(232, 196, 106, 0.5); border-radius: 9px; font-size: 11px; color: #e8c46a; vertical-align: middle; cursor: help; }
.trophy-line { display: block; font-size: 12px; color: var(--fog); line-height: 1.35; margin-top: 2px; }
/* The win streak (docs/16 #4): a small flame badge on the captain's portrait, opposite her level. */
.uf-streak { position: absolute; left: -12%; top: -8%; z-index: 3; display: inline-flex; align-items: center; gap: 1px; padding: 1px 4px 1px 2px; border-radius: 9px; background: rgba(12, 9, 6, 0.9); border: 1px solid rgba(201, 162, 90, 0.6); font: 700 10px/1.2 var(--sans); color: var(--fog); white-space: nowrap; box-shadow: 0 1px 4px #000; pointer-events: auto; }
.uf-streak .ico-sm { width: 12px; height: 12px; }
.uf-streak.on { color: #ffd66e; border-color: #e8a040; box-shadow: 0 0 8px rgba(255, 160, 60, 0.55), 0 1px 4px #000; }
@media (max-height: 520px) { #encounter { top: calc(var(--sa-t, 0px) + 8px); left: calc(var(--sa-l, 0px) + 360px); transform: none; width: min(430px, calc(100vw - 360px - 110px - var(--sa-l, 0px) - var(--sa-r, 0px))); min-width: 260px; } #encounter .enc-text, #encounter .enc-out { font-size: 13px; margin: 2px 0 6px; } }
.jr-letters { margin-top: 10px; }
.jr-letter { margin: 4px 0; font-family: var(--serif); font-style: italic; font-size: 14px; color: #e6dcc4; }

/* Fishing (docs/12 P3): the panel in the HUD stack and the fight on the line. */
#hud-fish { pointer-events: auto; padding: 6px 9px 7px; max-width: 320px; }
#hud-fish .fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#hud-fish .fp-head b { font-family: var(--serif); font-size: 14px; color: #bfe3ee; }
#hud-fish .fp-head .muted { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-fish .fp-xp { position: relative; display: block; height: 4px; margin: 3px 0; background: #0a0c0e; border: 1px solid #000; }
#hud-fish .fp-xp > i { position: absolute; left: 0; top: 0; bottom: 0; background: #5aa6c4; }
#hud-fish .fp-line { font-size: 12px; }
#hud-fish .fp-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#fishfight { position: fixed; left: 50%; bottom: calc(var(--sa-b, 0px) + 200px); transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); z-index: 41; pointer-events: auto; }
#fishfight.hidden { display: none; }
#fishfight .ff-card { background: rgba(8, 14, 18, 0.95); border: 1px solid rgba(120, 190, 215, 0.55); border-radius: 6px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
#fishfight .ff-h { font-family: var(--serif); font-size: 16px; color: #bfe3ee; margin-bottom: 6px; }
#fishfight .ff-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
#fishfight .ff-row > span { flex: 0 0 52px; color: var(--fog, #9aa); }
#fishfight .ff-bar { position: relative; flex: 1; height: 12px; background: #0a0c0e; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
#fishfight .ff-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #6fd46f; }
#fishfight .ff-t .ff-red { position: absolute; left: 80%; right: 0; top: 0; bottom: 0; background: rgba(224, 71, 58, 0.25); }
#fishfight .ff-s > i { background: #5aa6c4; }
#fishfight .ff-reel { width: 100%; min-height: 54px; margin-top: 8px; font-size: 18px; touch-action: none; user-select: none; }
#fishfight .ff-reel.on { filter: brightness(1.3); }
#fishfight .ff-hint { font-size: 12px; margin: 6px 0 0; text-align: center; }
#fishfight .ff-out { margin: 4px 0 0; text-align: center; font-weight: 700; color: #f2e6c8; min-height: 1em; }
@media (max-height: 520px) { #fishfight { bottom: auto; top: calc(var(--sa-t, 0px) + 8px); left: calc(var(--sa-l, 0px) + 280px); transform: none; width: min(380px, calc(100vw - 280px - 170px)); } #fishfight .ff-reel { min-height: 44px; } }
.jr-fishing { margin-top: 10px; }
.jr-fish { margin: 2px 0; font-size: 13px; }
.jr-fish.jr-catch { display: flex; align-items: center; gap: 6px; }
.fish-records .fish-rec { margin: 2px 0; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.jr-catch .ico-sm, .fish-rec .ico-sm { width: 22px; height: 22px; margin: 0; flex: none; }
/* A fish not yet caught: its dark shape only, like an empty page of the log. */
.jr-catch.unknown .ico-sm { filter: brightness(0) drop-shadow(0 0 1px rgba(191,227,238,0.35)); opacity: 0.55; }
#fishfight .ff-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#fishfight .ff-h .ico-md { width: 36px; height: 36px; }
/* Hauling the net (owner, 2026-09-30): three floats on the swell; pull when one goes under. */
#nethaul { position: fixed; left: 50%; bottom: calc(var(--sa-b, 0px) + 124px); transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); z-index: 41; pointer-events: auto; }
#nethaul.hidden { display: none; }
#nethaul .ff-card { background: rgba(8, 14, 18, 0.95); border: 1px solid rgba(120, 190, 215, 0.55); border-radius: 6px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
#nethaul .ff-h { font-family: var(--serif); font-size: 16px; color: #bfe3ee; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#nethaul .ff-h .ico-md { width: 36px; height: 36px; margin: 0; }
#nethaul .ff-reel { width: 100%; min-height: 54px; margin-top: 8px; font-size: 18px; touch-action: none; user-select: none; }
#nethaul .ff-reel.on { filter: brightness(1.35); transform: translateY(1px); }
#nethaul .ff-hint { font-size: 12px; margin: 6px 0 0; text-align: center; }
#nethaul .ff-out { margin: 4px 0 0; text-align: center; font-weight: 700; color: #f2e6c8; min-height: 1.2em; }
#nethaul .ff-out.good { color: #9fe08a; }
.nh-water { display: flex; justify-content: space-around; align-items: flex-end; height: 74px; border-radius: 4px; background: linear-gradient(180deg, rgba(40, 78, 96, 0.35) 0 44%, rgba(18, 44, 58, 0.95) 44% 100%); border: 1px solid rgba(120, 190, 215, 0.3); overflow: hidden; }
.nh-slot { position: relative; width: 30%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.nh-float { position: absolute; left: 50%; top: 12px; width: 16px; height: 22px; margin-left: -8px; border-radius: 50% 50% 45% 45%; background: linear-gradient(180deg, #d8412f 0 50%, #efe6d2 50% 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 3px 0 rgba(0, 0, 0, 0.25); transition: transform 0.12s ease-out, opacity 0.2s; animation: nh-ride 1.6s ease-in-out infinite; }
.nh-slot:nth-child(2) .nh-float { animation-delay: -0.5s; }
.nh-slot:nth-child(3) .nh-float { animation-delay: -1.1s; }
@keyframes nh-ride { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.nh-idle .nh-float { opacity: 0.55; }
.nh-ride .nh-float { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 10px rgba(242, 230, 200, 0.45); }
.nh-twitch .nh-float { animation: nh-twitch 0.28s linear 1; }
@keyframes nh-twitch { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 3px) rotate(-12deg); } 75% { transform: translate(2px, 2px) rotate(10deg); } }
.nh-dip .nh-float { animation: none; transform: translateY(15px) scale(0.8); opacity: 0.8; }
.nh-dip { background: radial-gradient(ellipse 60% 22% at 50% 60%, rgba(191, 227, 238, 0.4), transparent 70%); }
.nh-hit .nh-float { animation: none; opacity: 0.3; transform: translateY(-4px) scale(0.8); }
.nh-early .nh-float, .nh-missed .nh-float { animation: none; opacity: 0.25; }
.nh-mark { position: relative; font-size: 12px; font-weight: 700; margin-bottom: 4px; min-height: 1em; line-height: 1; }
.nh-hit .nh-mark { color: #9fe08a; }
.nh-early .nh-mark, .nh-missed .nh-mark { color: #e8a14a; }
@media (max-height: 520px) { #nethaul { bottom: calc(var(--sa-b, 0px) + 6px); width: min(360px, calc(100vw - 2 * 170px)); } #nethaul .ff-card { padding: 8px 10px; } #nethaul .ff-h { margin-bottom: 4px; } #nethaul .nh-water { height: 62px; } #nethaul .ff-reel { min-height: 42px; margin-top: 6px; } #nethaul .ff-hint { display: none; } }
/* The hunt (docs/12 P4): the line against its band, the beast's strength and hide, the flensing. */
#hud-hunt { pointer-events: auto; padding: 6px 9px 7px; max-width: 320px; }
#hud-hunt .fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#hud-hunt .fp-head b { font-family: var(--serif); font-size: 14px; color: #f0d9b0; }
#hud-hunt .hp-lvl { font-size: 11px; color: #e8c46a; }
#hud-hunt .hp-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 11px; }
#hud-hunt .hp-row > span { flex: 0 0 44px; color: var(--fog, #9aa); }
#hud-hunt .hp-bar { position: relative; flex: 1; height: 9px; background: #0a0c0e; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
#hud-hunt .hp-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #6fd46f; transition: width 0.15s linear; }
#hud-hunt .hp-bar > em { position: absolute; top: 0; bottom: 0; }
#hud-hunt .hp-good { background: rgba(111, 212, 111, 0.16); border-left: 1px solid rgba(111, 212, 111, 0.5); border-right: 1px solid rgba(111, 212, 111, 0.5); }
#hud-hunt .hp-snap { right: 0; background: rgba(224, 71, 58, 0.28); }
#hud-hunt .hp-slack { left: 0; background: rgba(224, 71, 58, 0.18); }
#hud-hunt .hp-t > i { opacity: 0.85; }
#hud-hunt .hp-s > i { background: #5aa6c4; }
#hud-hunt .hp-h > i { background: #b23a3a; }
#hud-hunt .hp-f > i { background: #c4483a; }
#hud-hunt .fp-line { font-size: 12px; margin-top: 2px; }
#hud-hunt .fp-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
#hud-hunt .hp-noise.hp-quiet { color: #8fd6a0; }
#hud-hunt .hp-noise.hp-heard { color: #e8c46a; }
#hud-hunt .hp-noise.hp-loud { color: #e0776b; }
/* A beast on the line, a carcass to flense: the hunt's block leads the stack; on a phone the goals step aside. */
#hud-stack > #hud-hunt.hp-active { order: -1; }
/* The popup budget (owner, 2026-10-04: transient text keeps to the top and bottom bands, never over the centre): the
   hint, the sea's news and a boss's card lead the stack, above whatever plates are standing (the target, the goals),
   so an unfolded stack never pushes them down into the middle of the screen. */
#hud-stack > #hud-tip, #hud-stack > #hud-feed, #hud-stack > #hud-boss { order: -2; }
/* …and when they still reach the centre (fitTransient in hud.ts): terser, then the news out (it is in the chat's log). */
body.pb-1 #hud-feed .feed-h, body.pb-1 #hud-boss .bparts, body.pb-1 #hud-boss .bhint, body.pb-2 #hud-boss .byou, body.pb-2 #hud-boss .bphase { display: none; }
body.pb-1 #hud-feed { padding-top: 1px !important; padding-bottom: 2px !important; }
body.pb-1 #hud-feed .feed-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pb-1 #hud-feed .feed-line::before { content: '⚑ '; color: var(--brass); }
body.pb-1 #hud-tip .tp-t { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.pb-2 #hud-tip .tp-t { -webkit-line-clamp: 1; line-clamp: 1; }
body.pb-2 #hud-stack > #hud-feed { display: none !important; }
body.pb-3 #hud-stack > #hud-tip { display: none !important; }
/* The unfolded stack ends above the bottom block (its goals ran into the prompt's line at 1280×720): it scrolls. */
@media (min-width: 700px) and (min-height: 521px) {
  #hud #hud-stack { max-height: calc(100vh - var(--hb-top, 150px) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  #hud #hud-stack::-webkit-scrollbar { display: none; }
}
@media (max-width: 699px), (max-height: 520px) {
  #hud-stack:has(#hud-hunt.hp-active) #hud-goals, #hud-stack:has(#hud-hunt.hp-active) #hud-fish { display: none; }
}
@media (max-width: 699px), (max-height: 520px) {
  #hud-hunt .hp-hint { display: none; }
  #hud-hunt .hp-row { margin: 2px 0; }
  #hud-hunt .fp-acts { margin-top: 3px; }
}
/* The board of the wanted (docs/12 P5): posters on a tavern wall. */
.wanted-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.poster { background: linear-gradient(#d9c9a0, #c7b27f); color: #2a1d10; border: 1px solid #6a5431; border-radius: 3px; padding: 6px 7px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); min-width: 0; }
.poster .po-head { font-family: var(--serif); font-weight: 700; letter-spacing: 2px; font-size: 13px; color: #5a1a10; }
/* The painted paper, torn at the edges (docs/12 P11): no drawn border then, the shadow follows the tear. */
body.has-poster .poster, body.has-poster .poster.po-baron { background: var(--ui-poster) center / 100% 100% no-repeat; border-color: transparent; box-shadow: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); padding: 23% 11% 10%; }
/* The paper has its own printed border a little inside the torn edge: everything stays within it. */
body.has-poster .poster .po-head { margin-top: 0; }
body.has-poster .poster .btn { max-width: 100%; }
.poster.po-baron { background: linear-gradient(#e2c98f, #b8914f); border-color: #8a2a1a; }
.poster.po-baron .po-head { font-size: 11px; letter-spacing: 0.5px; }
.poster .po-face { width: 84px; height: 84px; border: 1px solid #6a5431; overflow: hidden; background: #3a2a18; }
.poster .po-face img, .poster .po-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster .po-name { font-family: var(--serif); font-size: 14px; line-height: 1.15; overflow-wrap: anywhere; }
.poster .po-ship { font-size: 11px; }
.poster .po-bounty { font-weight: 700; font-size: 13px; color: #6a1a0e; }
.poster .po-seen, .poster .po-habits, .poster .po-lair { font-size: 10.5px; color: #4d3a22 !important; line-height: 1.2; }
.poster .btn { margin-top: 3px; width: 100%; }
.poster.po-down { filter: grayscale(0.7) brightness(0.8); }
.tg-wanted { color: #e0776b; font-weight: 700; }
.poster .po-bounty .money { color: #6a1a0e; }
.poster .po-bounty .money img { filter: brightness(0.75) contrast(1.2); }
@media (max-width: 480px) {
  .wanted-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .poster { padding: 5px 5px 6px; }
  .poster .po-face { width: 64px; height: 64px; }
  .poster .po-name { font-size: 13px; }
  .poster .po-habits { display: none; }
}
.tg-glass { font-size: 11px; color: #d9c9a0; margin-top: 3px; line-height: 1.25; }
.tg-tribute { margin-left: auto; }
#hud-target .tg-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tips-card .tip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; }
.tips-card .tip-row > span:first-child { flex: 1; min-width: 0; }
@media (max-width: 480px) { .tips-card .tip-row { flex-direction: column; align-items: stretch; } }
/* One's own island and outposts (docs/12 P7). */
.est-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; margin-bottom: 8px; }
.est-card .est-h { margin: 8px 0 4px; font-family: var(--serif); font-size: 14px; color: #e8c46a; }
.est-res { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; }
.est-res select { max-width: 45%; }
.est-res > span { flex: 1; min-width: 0; }
.est-res .est-face { width: 40px; height: 40px; flex: none; }
/* Founding an outpost: a long line (its name and the materials) wraps inside its button on a phone. */
.est-card .btn[data-est="found"] { white-space: normal; max-width: 100%; text-align: left; line-height: 1.25; height: auto; min-height: 30px; }
.est-card .btn[data-est="found"] .ico-sm { vertical-align: -3px; }
.est-op { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; }
.est-op.est-raid { background: rgba(160, 30, 20, 0.18); }
.est-op select { max-width: 100%; }
/* Caravans (docs/12 P8). */
.cv-card { margin-bottom: 8px; }
.cv-row { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.cv-row.cv-alarm { background: rgba(160, 30, 20, 0.18); }
.cv-row .cm-bar { height: 6px; }
.cv-log { font-size: 11px; font-style: italic; }
.cv-wiz { border-top: 1px solid rgba(232,196,106,0.25); margin-top: 6px; padding-top: 6px; }
.cv-steps { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 6px; color: var(--fog, #9aa); }
.cv-steps .on { color: #e8c46a; font-weight: 700; }
.cv-pick { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; }
/* Tattoos (docs/12 P9). */
.tattoos { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 12px; align-items: start; }
.tt-figure-wrap { position: sticky; top: 0; }
.tt-ico { width: 44px; height: 44px; flex: none; border-radius: 6px; object-fit: cover; }
.tt-ink { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #1b2430, #0b0f15); color: #6f8fb0; font-family: var(--serif); font-size: 20px; border: 1px dashed rgba(111, 143, 176, 0.6); }
.tt-hint { font-size: 12px; text-align: center; margin: 4px 0; }
.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-bottom: 10px; }
.tt-tile { display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 6px; border-radius: 5px; background: rgba(10, 12, 16, 0.7); border: 1px solid rgba(232, 196, 106, 0.25); color: inherit; font: inherit; cursor: pointer; }
.tt-tile.owned:hover { border-color: rgba(232, 196, 106, 0.7); }
.tt-tile.worn { border-color: #e8c46a; }
.tt-tile.pending { border-style: dashed; cursor: default; }
.tt-tile.unknown { opacity: 0.55; cursor: default; }
.tt-tile.unknown .tt-ico { filter: grayscale(1) brightness(0.6); }
.tt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.tt-text b { font-size: 13px; }
.tt-gives { color: #cfe0b0; }
.tt-how { font-size: 11px; }
.tt-worn { font-size: 10px; color: #e8c46a; text-transform: uppercase; letter-spacing: 0.04em; }

.choice3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice3 .ch-col { display: flex; flex-direction: column; gap: 6px; }
.choice3 .ch-col .gi-card { flex: 1; }
@media (max-width: 700px) {
  .tattoos { grid-template-columns: 1fr; }
  .tt-figure-wrap { position: static; }
  .tt-grid { grid-template-columns: 1fr; }
  .choice3 { grid-template-columns: 1fr; }
}
.tt-figure-wrap > [data-untt] { display: block; margin: 4px auto 0; }
@media (max-height: 500px) { .tt-figure-wrap { position: static; } }
/* A character sheet (docs/12 P9; WoW's paper doll): the captain's portrait, square slots down both sides. */
.doll { --ds: 58px; display: grid; grid-template-columns: var(--ds) minmax(0, 1fr) var(--ds); gap: 8px; align-items: stretch; max-width: 320px; margin: 6px auto; }
.doll-col { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.doll-face { position: relative; min-height: calc(var(--ds) * 3 + 16px); border: 2px solid rgba(140, 107, 58, 0.8); border-radius: 4px; background: #0b0d11 center 22% / cover; box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.85), 0 0 0 1px #000; overflow: hidden; }
.doll-plate { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 5px; display: flex; flex-direction: column; align-items: center; gap: 1px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.88) 45%); text-align: center; }
.doll-plate b { font-family: var(--serif); font-size: 14px; color: var(--gold); max-width: 100%; overflow-wrap: anywhere; line-height: 1.15; }
.doll-plate span { font-size: 11px; color: var(--bone); }
.doll-slot { position: relative; width: var(--ds); height: var(--ds); padding: 0; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: linear-gradient(145deg, #1b1d22, #0a0b0e); border: 2px solid #6b5230; border-radius: 4px; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9), 0 0 0 1px #000; }
.doll-slot.full { border-color: #a8864f; }
.doll-slot.on { border-color: #ffe08a; box-shadow: 0 0 10px rgba(255, 224, 138, 0.75), inset 0 0 6px rgba(0, 0, 0, 0.8); }
.doll-slot.locked { cursor: default; border-color: #3c3c40; background: #0b0b0d; }
.doll-ico { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.doll-slot .tt-ink { width: 100%; height: 100%; border-radius: 0; }
.doll-empty { color: rgba(232, 196, 106, 0.55); font-size: 24px; line-height: 1; }
.doll-lock { color: #8d8d93; font-size: 13px; font-weight: 700; }
.tt-chosen { font-size: 13px; text-align: center; margin: 4px 0 0; }
@media (max-width: 380px) { .doll { --ds: 52px; } }
/* The gear window's captain sheet: five squares down each side. */
.doll-gear { max-width: 340px; }
.doll-slot:not(.full) .doll-ico { opacity: 0.32; filter: grayscale(1); object-fit: contain; padding: 8px; }
.doll-lv { position: absolute; right: 2px; bottom: 1px; font: 700 11px var(--sans); color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; line-height: 1; }
/* The owner's rule: no word or number ever leaves its frame. A word too long for its box breaks inside it. */
#modal-panel, #hud, #toasts, #encounter { overflow-wrap: break-word; }
.hull-text b { hyphens: auto; }
.form-grid label.check input[type=checkbox], label.check input[type=checkbox] { width: auto; flex: none; }
.poster { container-type: inline-size; }
.poster .po-head { font-size: min(13px, 7.4cqi); letter-spacing: min(2px, 1cqi); max-width: 100%; }
.poster.po-baron .po-head { font-size: min(11px, 6.6cqi); letter-spacing: min(0.5px, 0.4cqi); }
@media (max-width: 699px) { .cols .title-sm { font-size: 15px !important; } }
.doll-ship .doll-face { background-size: contain; background-repeat: no-repeat; background-position: center 30%; background-color: #0a1418; }
.doll-lock-lv { position: relative; font: 700 12px var(--sans); color: #8d8d93; }
.doll-slot.locked .doll-ico { opacity: 0.18; }
/* A table in a card never spills out of it: long names break, numbers and prices stay whole. */
table.grid td { overflow-wrap: anywhere; }
table.grid td .money, table.grid td .btn { overflow-wrap: normal; }
/* Nemeses (docs/12 P10 #1). */
.jr-nemesis .nem-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.jr-nemesis .nem-face { position: relative; flex: none; width: 48px; height: 48px; border: 1px solid #7a2a1a; border-radius: 3px; overflow: hidden; background: #1a0f0c; display: grid; place-items: center; }
.jr-nemesis .nem-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.35) saturate(0.8); }
.jr-nemesis .nem-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; }
.jr-nemesis .nem-text b { font-family: var(--serif); font-size: 14px; color: #e0664a; }
.jr-nemesis .nem-rank { color: #e8c46a; font-size: 12px; }
.poster.po-nemesis { box-shadow: 0 0 0 2px #8a1a0e, 0 2px 8px rgba(0,0,0,0.6); }
.poster .po-stamp { font: 700 min(10px, 6cqi) var(--sans); color: #fff; background: #8a1a0e; padding: 1px 5px; border-radius: 2px; letter-spacing: 0.04em; max-width: 100%; overflow-wrap: anywhere; }
/* The orca calf (docs/12 P10 #2). */
.cmp-card .cmp-lv { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cmp-card .cmp-lv .bar { flex: 1; min-width: 60px; }
.cmp-card .cmp-does { font-size: 12px; margin: 6px 0; }
.cmp-card .cmp-name { display: flex; gap: 6px; margin-bottom: 6px; }
.cmp-card .cmp-name .field { flex: 1; min-width: 0; }
.cmp-card .cmp-h { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cmp-card .cmp-h.on { background: rgba(232,196,106,0.06); }
.cmp-card .cmp-h-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.cmp-card .cmp-h-t b { font-size: 13px; }
.cmp-card .cmp-cost { font-size: 11px; color: var(--fog, #9aa); }
.cmp-card .cmp-forge { font-size: 11px; margin: 6px 0 0; }
.cmp-card .pet-ico { width: 40px; height: 40px; flex: none; border-radius: 5px; object-fit: cover; border: 1px solid rgba(232,196,106,0.3); }
/* Dead Man's Dice (docs/12 P10 #4). */
.dice .dc-rules { font-size: 12px; margin: 0 0 8px; }
.dc-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dc-seat { display: flex; flex-direction: column; gap: 3px; padding: 7px; border: 1px solid rgba(232,196,106,0.25); border-radius: 6px; background: rgba(10,12,16,0.75); min-width: 0; }
.dc-seat b { font-family: var(--serif); font-size: 14px; overflow-wrap: anywhere; }
.dc-seat.turn { border-color: #ffe08a; box-shadow: 0 0 10px rgba(255,224,138,0.35); }
.dc-seat.me { background: rgba(40,34,20,0.8); }
.dc-seat.out { opacity: 0.45; }
.dc-seat.won { border-color: #7fd07f; }
.dc-seat.lost { border-color: #d0584a; }
.dc-cup { display: flex; flex-wrap: wrap; gap: 4px; }
.die { width: 30px; height: 30px; flex: none; }
.die rect { fill: #e9dfc6; stroke: #5a4a2a; stroke-width: 4; }
.die circle { fill: #1b1410; }
.die.wild rect { fill: #e8c46a; }
.die.hid rect { fill: #3a2a18; stroke: #7a5a30; }
.die.hid text { fill: #c9a86a; font: 700 44px var(--serif); }
.die.hit rect { stroke: #7fd07f; stroke-width: 8; }
.die.big { width: 38px; height: 38px; vertical-align: middle; }
.dc-bid { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font: 600 16px var(--serif); color: var(--gold); flex-wrap: wrap; }
.dc-bid .muted { font: 12px var(--sans); }
.dc-clock { font-size: 13px; margin: 4px 0 8px; }
.dc-controls { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid rgba(232,196,106,0.3); border-radius: 6px; background: rgba(20,18,12,0.7); }
.dc-step { display: flex; align-items: center; gap: 8px; }
.dc-q { min-width: 28px; text-align: center; font: 700 20px var(--serif); color: var(--gold); }
.dc-faces { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dc-face { padding: 2px; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; line-height: 0; }
.dc-face.on { border-color: #ffe08a; }
.dc-face .die { width: 40px; height: 40px; }
.dc-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-acts .btn { flex: 1 1 140px; }
.dc-win { font: 600 18px var(--serif); color: #7fd07f; margin: 10px 0; }
.dc-reveal { font-size: 13px; color: #cfe0b0; margin: 8px 0 0; }
.dc-log { margin-top: 10px; font-size: 12px; color: var(--fog, #9aa); display: flex; flex-direction: column; gap: 2px; }
.dc-foot { margin-top: 10px; display: flex; justify-content: flex-end; }
.dice-card .dc-stakes { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.dice-card .dc-davy { border: 1px solid #7a2a1a; border-radius: 5px; padding: 6px 8px; margin: 6px 0; background: rgba(60,10,10,0.35); font-size: 12px; }
.dice-card .dc-davy p { margin: 0 0 6px; }
.dc-faces .giver-h { flex-basis: 100%; }
.die.sm { width: 22px; height: 22px; vertical-align: middle; margin-left: 2px; }
/* The Regatta of Equal Waters (docs/12 P10 #5). */
#hud-regatta { pointer-events: none; padding: 6px 9px 7px; max-width: 320px; }
#hud-regatta .fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#hud-regatta .fp-head b { font-family: var(--serif); font-size: 14px; color: #f0d9b0; }
#hud-regatta .hp-lvl { font: 700 13px var(--sans); color: #e8c46a; font-variant-numeric: tabular-nums; }
#hud-regatta .rg-next { font-size: 13px; color: #cfe0b0; }
/* The heart of the storm (docs/12 P10 #14). */
#hud-storm { pointer-events: none; padding: 6px 9px 7px; max-width: 320px; border-color: rgba(140,190,255,0.45); }
#hud-storm .fp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hud-storm .fp-head b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--serif); font-size: 14px; color: #cfe2ff; }
#hud-storm .hp-lvl { font: 700 13px var(--sans); color: #9fd0ff; font-variant-numeric: tabular-nums; white-space: nowrap; }
#hud-storm .rg-next { font-size: 13px; color: #d8e6f5; }
#hud-storm .st-bar { height: 6px; margin-top: 5px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
#hud-storm .st-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6fb4ff, #e8f4ff); }
#hud-storm .st-charge { font: 600 12px var(--sans); color: #b8d4f0; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* A captain's saga (docs/12 P10 #20). */
.saga .saga-ch { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid rgba(201,162,90,0.3); border-radius: 6px; background: linear-gradient(180deg, rgba(40,30,18,0.55), rgba(16,12,8,0.75)); }
.saga .saga-ch p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.35; color: #eadfc6; }
@media (max-width: 560px) { .saga .saga-ch { grid-template-columns: auto 1fr; } .saga .saga-ch .btn { grid-column: 1 / 3; justify-self: end; } }
.saga-card { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 2px; padding: 6px 8px; border: 1px solid rgba(201,162,90,0.45); border-radius: 5px; background: linear-gradient(180deg, rgba(48,36,20,0.85), rgba(20,14,8,0.9)); }
.saga-card .saga-pic { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; flex: none; }
.saga-card .saga-text { font-family: var(--serif); font-size: 13px; line-height: 1.3; color: #eadfc6; }
.saga-card .saga-flag { float: right; margin: 1px 0 2px 6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }

/* The Floating Bazaar (docs/12 P10 #19). */
.bz-card { margin-top: 12px; }
.bz-card .bz-stall { border-top: 1px solid rgba(255,255,255,0.08); padding: 8px 0 4px; }
.bz-card .bz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.bz-card .bz-head b { font-family: var(--serif); font-size: 15px; color: #f0e6cc; min-width: 0; }
.bz-card .bz-head .muted { white-space: nowrap; font-size: 12px; }
.bz-card .bz-line, .bz-card .bz-item > summary { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.bz-card .bz-item > summary { cursor: pointer; list-style: none; }
.bz-card .bz-item > summary::-webkit-details-marker { display: none; }
.bz-card .bz-item > :not(summary) { padding: 4px 0 8px 28px; }
.bz-card .bz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; }
.bz-card .bz-price { white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 20px; display: inline-flex; align-items: center; gap: 4px; }
.bz-card .bz-buy { display: flex; gap: 4px; }
.bz-card .bz-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.bz-card .bz-form .giver-h { flex: 1 1 100%; margin: 0; }
.bz-card .bz-form select { flex: 1 1 180px; min-width: 0; }
.bz-card .bz-form label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.bz-card .bz-form input.field { width: 84px; }
.bz-card .bz-foot { margin-top: 8px; }
.bz-card .bz-else { margin: 6px 0; }
/* The sea's holidays (docs/12 P10 #18). */
#hud-holiday { pointer-events: none; display: flex; align-items: center; gap: 6px; padding: 4px 9px; max-width: 320px; border-color: rgba(232,196,106,0.45); }
#hud-holiday.hidden { display: none; }
#hud-holiday .hol-star { color: #e8c46a; font-size: 14px; line-height: 1; }
#hud-holiday .hol-line { font: 600 12px var(--sans); color: #f0d9b0; }
/* The holiday's painting over its card, like an encounter's. */
.hol-card .hol-art { margin: -4px -6px 8px; aspect-ratio: 2.4 / 1; background: #0b0d10 center / cover no-repeat; border: 1px solid rgba(232, 196, 106, 0.35); border-radius: 4px; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7); }
@media (max-height: 520px) { .hol-card .hol-art { aspect-ratio: 4 / 1; margin-bottom: 6px; } }
.hol-card .hol-left { font: 12px var(--sans); margin-left: 6px; }
.hol-card .hol-deed { margin: 6px 0; }
.hol-card .hol-deed.good { color: var(--good); }
.hol-card .hol-row { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0; }
.hol-card .hol-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hol-card .hol-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The Descent into the Abyss (docs/12 P10 #17). */
#hud-descent { pointer-events: none; padding: 6px 9px 7px; max-width: 320px; border-color: rgba(46,230,200,0.35); }
#hud-descent .fp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hud-descent .fp-head b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--serif); font-size: 14px; color: #cfe8e2; }
#hud-descent .hp-lvl { font: 700 13px var(--sans); color: #8fe3d0; font-variant-numeric: tabular-nums; white-space: nowrap; }
#hud-descent .rg-next { font-size: 13px; color: #d8e6e2; }
#hud-descent .ds-left { font: 600 12px var(--sans); color: #a9c4bf; margin-top: 2px; font-variant-numeric: tabular-nums; }
.descent .ds-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 8px; }
.descent .ds-boon { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid rgba(143,227,208,0.35); border-radius: 6px; background: rgba(8,18,20,0.85); }
.descent .ds-boon.curse { border-color: rgba(200,70,60,0.5); background: rgba(24,8,8,0.85); }
.descent .ds-boon b { font-family: var(--serif); font-size: 16px; color: #f0e6cc; }
.descent .ds-boon p { margin: 0; flex: 1; }
.descent .ds-boon .btn { align-self: flex-start; }
.descent .ds-kind { font: 700 10px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #8fe3d0; }
.descent .ds-boon.curse .ds-kind { color: #e07a6a; }
.descent .ds-row { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; }
.descent .ds-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.descent .ds-row .muted { white-space: nowrap; }
.descent .ds-taken { display: flex; flex-wrap: wrap; gap: 4px; }
.descent .ds-foot { margin-top: 8px; }
/* Captive captains in service (docs/12 P10 #16). */
.tc-card .tc-cap { border-top: 1px solid rgba(255,255,255,0.08); padding: 8px 0 6px; }
.tc-card .tc-cap:first-of-type { border-top: 0; }
.tc-card .tc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.tc-card .tc-loy { margin-left: auto; font: 700 12px var(--sans); color: #d8c9a0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-card .tc-loy.good { color: var(--good); }
.tc-card .tc-loy.bad { color: var(--bad); }
.tc-card .tc-cap p { margin: 3px 0; }
/* A turned skipper: her face beside her lines (docs/12 P11). */
.tc-card .tc-skipper { display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; align-items: start; }
.tc-card .tc-skipper > .tc-face { grid-row: 1 / span 9; width: 40px; height: 40px; }
.tc-card .tc-skipper > :not(.tc-face) { grid-column: 2; }
.tc-card .tc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Letters of marque (docs/12 P10 #15). */
#hud-order { pointer-events: none; padding: 6px 9px 7px; max-width: 320px; border-color: rgba(201,162,90,0.5); }
#hud-order .fp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hud-order .fp-head b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--serif); font-size: 14px; color: #f0d9b0; }
#hud-order .hp-lvl { font: 700 13px var(--sans); color: #e8c46a; font-variant-numeric: tabular-nums; }
#hud-order .rg-next { font-size: 13px; color: #e6dcc6; }
#hud-order .mq-where { font-size: 12px; color: #b8b0a0; margin-top: 2px; }
.mq-card .mq-rank { margin: 2px 0 4px; }
.mq-card .mq-bar { height: 6px; margin: 2px 0 4px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.mq-card .mq-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a88440, #f0d58a); }
.mq-card .mq-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mq-card .mq-wares { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.mq-card .mq-ware { border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; background: rgba(0,0,0,0.18); }
.mq-card .mq-ware > summary { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; list-style: none; }
.mq-card .mq-ware > summary::-webkit-details-marker { display: none; }
.mq-card .mq-ware .gs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mq-card .mq-ware .gs-t .gi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-card .mq-ware > summary .btn { flex: none; }
.mq-card .mq-ware .mq-sold { flex: none; }
.mq-card .mq-ware[open] > summary { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mq-card .mq-ware > :not(summary) { padding: 6px 8px; }
.st-forge .st-have { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.st-forge .st-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.st-forge .st-slots .btn { max-width: 100%; white-space: normal; text-align: center; }
.bottle-card textarea.field { width: 100%; min-height: 64px; resize: vertical; margin: 4px 0 6px; box-sizing: border-box; font: 13px var(--sans); }
.bottle-card .bottle-row { align-items: center; }
.bottle-card .bottle-silver { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 12px; }
.bottle-card .bottle-silver .field { width: 90px; flex: none; }
.chest-card textarea.field { width: 100%; min-height: 48px; resize: vertical; margin: 4px 0 6px; box-sizing: border-box; font: 13px var(--sans); }
.chest-card select.field { flex: 1; min-width: 0; }
.chest-card .bottle-row { justify-content: space-between; margin-bottom: 4px; }
.chest-card .bottle-row { align-items: center; }
.chest-card .bottle-silver { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 12px; }
.chest-card .bottle-silver .field { width: 110px; flex: none; }
/* The title plates' words sat 1.5–2 px low on wider screens (their larger face): lift them to the plate's middle. */
@media (min-width: 700px) and (min-height: 521px) { .skinned .modal-head h2, .skinned .title-sm { padding-top: 1px; padding-bottom: 2px; } }
/* The Atlas of Sea Wonders (docs/12 P10 #8). */
.jr-wonders .jr-wonder { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.jr-wonders .nem-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; }
.jr-wonders .nem-text b { font-family: var(--serif); font-size: 14px; color: #e8c46a; }
.jr-wonders .jr-wname { display: flex; gap: 6px; margin-top: 4px; }
.jr-wonders .jr-wname .field { flex: 1; min-width: 0; }
.jr-omen { border: 1px solid rgba(232,196,106,0.25); border-radius: 5px; padding: 6px 8px; background: rgba(30,26,16,0.5); }
.jr-omen .btn { margin-top: 4px; }
.jr-dutchman { border: 1px solid rgba(120,255,160,0.25); border-radius: 5px; padding: 6px 8px; background: rgba(12,28,20,0.5); }
.jr-dutchman .dutch-go { color: #9ff0b8; font-weight: 600; }
/* Crew with fates (docs/12 P10 #11). */
.officer-card .fate-past { font-size: 12px; margin: 2px 0; }
.officer-card .fate-req { border-left: 2px solid rgba(232,196,106,0.6); padding: 2px 0 4px 8px; margin: 4px 0; }
.officer-card .fate-req p { margin: 2px 0 4px; font-size: 12px; }
.officer-card .fate-love { font-size: 12px; color: #e0a0b0; margin: 2px 0; }
/* The look of her ship (docs/12 P10 #12). */
.looks { display: grid; grid-template-columns: 260px 1fr; gap: 12px; align-items: start; }
.looks .lk-preview { position: sticky; top: 0; display: grid; place-items: center; padding: 10px; border: 1px solid rgba(232,196,106,0.3); border-radius: 6px; background: radial-gradient(circle at 50% 30%, #1a2430, #0a0e12); }
.looks .lk-preview { gap: 8px; }
.looks .lk-flag { width: 240px; height: 160px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.65)); }
.looks .lk-name { font-family: var(--serif); font-size: 16px; color: #f0d9b0; text-align: center; }
.looks .lk-count { font: 12px var(--sans); text-transform: none; letter-spacing: 0; }
.looks .lk-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; margin-bottom: 10px; }
.looks .lk-flags .lk-chip { padding: 4px; justify-content: center; }
.looks .lk-thumb { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.looks .lk-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.looks .lk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(232,196,106,0.3); background: rgba(10,12,16,0.75); color: var(--bone, #ddd); font: 12px var(--sans); cursor: pointer; }
.looks .lk-chip.on { border-color: #ffe08a; box-shadow: 0 0 0 1px #ffe08a inset; }
.looks .lk-chip.locked { opacity: 0.35; cursor: default; }
.looks .lk-sw { display: inline-block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.7); flex: none; }
.looks .lk-lamp { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 6px currentColor; flex: none; }
.looks .lk-slot { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 10px; border-radius: 4px; border: 1px solid rgba(232,196,106,0.3); background: rgba(10,12,16,0.75); color: var(--bone, #ddd); font: 12px var(--sans); cursor: pointer; }
.looks .lk-slot.on { border-color: #ffe08a; }
.looks .lk-foot { margin-top: 6px; }
@media (max-width: 700px) { .looks { grid-template-columns: 1fr; } .looks .lk-preview { position: static; } .looks .lk-flag { width: 210px; height: 140px; } }
/* Guests on the island (docs/12 P10 #13). */
.hall .hall-trophies { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px 10px; font-size: 13px; }
.hall .hall-trophies span { display: inline-flex; align-items: center; gap: 4px; }
.hall .hall-entry { font-size: 13px; margin: 4px 0; overflow-wrap: anywhere; }
.hall .hall-invited { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hall .hall-x { background: none; border: none; color: #d88; cursor: pointer; padding: 0 2px; font: 700 13px var(--sans); }

/* The HUD's blocks in the kit (owner, 2026-09-29): ebony planks under a dark wash, the brass frame round them, the bars
   in their brass sheath, the compass a brass rose with its words on a plate. Unskinned, the drawn fallbacks above stay. */
.skinned .hud-block, .skinned #hud-goals, .skinned .uf-body {
  border: 9px solid transparent; border-image: var(--ui-frame) 70 / 9px round; border-radius: 0;
  background: linear-gradient(180deg, rgba(14, 11, 9, 0.72), rgba(8, 8, 9, 0.86)), var(--tex-panel, var(--tex-ebony, none)) center / 260px;
  background-clip: padding-box; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.skinned .hud-block { padding: 3px 6px 4px; }
.skinned #hud-goals { padding: 2px 6px 3px; }
.skinned .uf-body { padding: 0 5px 1px; }
.skinned .bar { height: 10px; margin: 2px 0 4px; background-color: #0a0c0e; border: solid transparent; border-width: 2px 5px; border-image: var(--ui-bar) 24 36 fill / 2px 5px stretch; background-clip: padding-box; border-radius: 0; }
.skinned #hud-target .tg-bar { height: 9px; border: solid transparent; border-width: 2px 5px; border-image: var(--ui-bar) 24 36 fill / 2px 5px stretch; background-clip: padding-box; box-shadow: none; }
.skinned #hud-nav { background: none; border: 0; box-shadow: none; padding: 0; }
.skinned #hud-nav #nav-text { margin: 0 auto; width: 100%; box-sizing: border-box; border-style: solid; border-color: transparent; border-width: 9px 26px; border-image: var(--ui-plate) 56 110 53 110 fill / 9px 26px stretch; padding: 1px 0 2px; line-height: 1.3; white-space: nowrap; color: var(--bone) !important; text-shadow: 0 1px 2px #000; }
body.skinned:not(.touch) #hud-nav { width: 204px; }
/* The sea's news (world announcements): a small column in the stack, newest on top. */
#hud-feed { pointer-events: none; max-width: 320px; font-size: 11px; line-height: 1.35; }
#hud-feed .feed-h { color: var(--brass); text-transform: uppercase; letter-spacing: 0.1em; font-size: 9px; margin-bottom: 2px; }
#hud-feed .feed-line { color: var(--bone); overflow-wrap: anywhere; }
#hud-feed .feed-line + .feed-line { color: var(--fog); margin-top: 2px; }

/* Compact, see-through HUD (owner, 2026-09-30: too many text plates, above all on a phone; give them transparency).
   --hud-a is the options' "Panel opacity" (0.3–1, 0.65 by default). */
:root { --hud-a: 0.65; }
.toast { background: rgba(8, 9, 11, calc(var(--hud-a) * 0.85)); padding: 4px 8px; font-size: 11.5px; line-height: 1.3; }
.toast > span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skinned .hud-block, .skinned #hud-goals, .skinned .uf-body {
  background: linear-gradient(180deg, rgba(14, 11, 9, calc(var(--hud-a) * 0.8)), rgba(8, 8, 9, calc(var(--hud-a) * 0.95))), var(--tex-panel, var(--tex-ebony, none)) center / 260px;
  background-clip: padding-box;
}
.hud-block { background: rgba(10, 11, 13, calc(var(--hud-a) * 0.9)); }
#hud-feed .feed-line + .feed-line { display: none; } /* the newest one only; the rest are in the chat's log */
@media (max-height: 430px) {
  /* A phone on its side (QA, 2026-10-04: a zone boss's news took 15% of an 812×375 screen): the news one line, as on
     a narrow phone. */
  #hud-feed { padding: 1px 6px 2px !important; }
  #hud-feed .feed-h { display: none; }
  #hud-feed .feed-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  #hud-feed .feed-line::before { content: '⚑ '; color: var(--brass); }
}
@media (max-width: 699px) {
  /* A phone: one line each for the news and the goals (two toasts at most: the kit's queue, ui/kit/toast.ts). */
  .toast { font-size: 11px; padding: 3px 7px; }
  .toast > span { -webkit-line-clamp: 2; line-clamp: 2; }
  .toast .ico-toast { width: 16px; height: 16px; }
  #hud-feed { padding: 1px 6px 2px !important; max-width: 100%; }
  #hud-feed .feed-h { display: none; }
  #hud-feed .feed-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  #hud-feed .feed-line::before { content: '⚑ '; color: var(--brass); }
  .skinned #hud-goals { padding: 0 6px 1px !important; }
  #hud-goals .g-lbl { display: none; }
  #hud-goals .g-t { grid-row: 1 / span 2; align-self: center; }
  #hud-goals .g-x { grid-row: 1 / span 2; align-self: center; }
  #hud-goals .g-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
  .skinned .hud-block, .skinned #hud-goals { border-width: 6px; border-image-width: 6px; }
}

/* ---------- My Island: one's own island as a base (docs/15 items 1–3). A diamond grid of plots in CSS; the
   isometric buildings stand on them; the sheet beside (desk, landscape) or below (portrait). */
#modal-panel[data-modal="base"] { --base-h: calc(min(760px, 92vh) - 236px); }
.base-head .sub { font-size: 14px; }
.base-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 14px; border-bottom: 1px solid rgba(111, 90, 56, 0.35); }
.base-res { display: flex; flex-wrap: wrap; gap: 4px; }
.bres { display: inline-flex; flex-direction: column; align-items: stretch; gap: 1px; min-width: 74px; padding: 2px 6px 3px; background: rgba(6, 6, 7, 0.6); border: 1px solid rgba(140, 107, 58, 0.35); border-radius: 3px; font: 600 13px/1.2 var(--sans); color: var(--bone); white-space: nowrap; }
.bres-top { display: flex; align-items: center; gap: 2px; }
.bres-top .ico-sm { width: 18px; height: 18px; object-fit: contain; }
.bres i { font-style: normal; color: var(--steel-text); font-weight: 400; font-size: 11px; }
.bres em { font-style: normal; color: var(--good); font-size: 10px; font-weight: 500; text-align: center; }
.bres.full b { color: var(--gold); }
.bfill { display: block; height: 3px; background: #1b1512; }
.bfill i { display: block; height: 100%; background: var(--brass); }
.bres.full .bfill i { background: var(--gold); }
.base-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--fog); }
.bmeta { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
#modal-panel[data-modal="base"] .modal-body.base-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 14px; overflow: hidden; padding: 8px 12px 10px; }
.base-stage { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.base-board { position: relative; width: min(100%, calc(var(--base-h) * var(--ar, 1.6))); aspect-ratio: var(--ar, 1.6); background: radial-gradient(ellipse 60% 55% at 50% 58%, rgba(40, 70, 78, 0.55), rgba(8, 14, 18, 0) 72%); }
/* A plot is touched on its diamond (and on its building's picture), not on the square box around it. */
.bplot { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; pointer-events: none; }
.bplot .bground { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #5b4a2c; pointer-events: auto; }
.bplot.locked .bground { pointer-events: none; }
/* The body of a building over its diamond answers a touch too (the middle of it: the back plots stay reachable). */
.bhit { position: absolute; left: 28%; width: 44%; bottom: 50%; height: 110%; pointer-events: auto; }
/* On a phone the board is the island's picture and its tiles are the finger's (docs/23 items 72, 92: a big island's
   diamonds were 80×40 px, under a finger's 44): a tap on the board does what a tap on its tile does, nothing less. */
body.touch .base-board .bplot .bground, body.touch .base-board .bhit { pointer-events: none; }
body.touch .base-board .bplot { cursor: default; }
.bplot .bground::after { content: ''; position: absolute; inset: 3% 2.5%; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(160deg, #56643a 0%, #3c4a2a 55%, #2c351f 100%); }
.bplot.empty .bground::after { background: linear-gradient(160deg, #6b6a45 0%, #4b4a30 60%, #36341f 100%); }
.bplot.empty:hover .bground, .bplot.target .bground { background: var(--gold); }
.bplot.sel .bground { background: var(--gold); }
.bplot.sel .bground::after { inset: 6% 5%; }
.bplot.target .bground { animation: ctx-pulse 1.4s ease-in-out infinite; }
.bplot.locked { cursor: default; }
.bplot.locked .bground { opacity: 0.18; }
.bplot.locked.soon .bground { opacity: 0.4; }
.block { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 10px var(--sans); color: var(--fog); white-space: nowrap; text-shadow: 0 1px 2px #000; }
.bplus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font: 700 18px/1 var(--sans); color: var(--gold); text-shadow: 0 1px 3px #000; opacity: 0.85; }
.bart { position: absolute; left: -2%; width: 104%; height: auto; aspect-ratio: 1; bottom: -6%; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.bplot.raising .bart { filter: sepia(0.6) brightness(0.8) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.bplot.idle .bart { filter: saturate(0.6) brightness(0.85) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.blvl { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4%; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #16110d; border: 1px solid var(--brass); font: 700 10px/14px var(--sans); color: var(--gold); text-align: center; }
.bover { position: absolute; pointer-events: none; }
.btimer { position: absolute; left: 50%; bottom: 58%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 1px 4px 2px; background: rgba(10, 9, 8, 0.85); border: 1px solid var(--brass-dim); border-radius: 3px; font: 600 10px/1.2 var(--sans); color: var(--bone); white-space: nowrap; z-index: 2; }
.bprog { display: block; height: 3px; background: #1b1512; }
.bprog i { display: block; height: 100%; background: var(--gold); width: 0; }
.bprog.big { height: 8px; margin: 6px 0; border: 1px solid rgba(111, 90, 56, 0.8); }
.bfresh { position: absolute; left: 50%; bottom: 72%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 1px; padding: 0 5px 0 2px; border-radius: 9px; background: rgba(20, 30, 18, 0.92); border: 1px solid var(--good); font: 700 10px/16px var(--sans); color: #bfe3c8; white-space: nowrap; z-index: 2; }
.bfresh .ico-sm { width: 14px; height: 14px; }
.base-sheet { min-width: 0; min-height: 0; overflow: auto; padding: 2px 4px 6px 2px; font-size: 13px; }
.base-sheet p { margin: 2px 0 6px; }
.bhint { color: var(--fog); font-family: var(--serif); font-size: 15px; }
.bsheet-h { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.bsheet-h b { font-family: var(--serif); font-size: 17px; }
.bthumb { width: 72px; height: 72px; object-fit: contain; flex: none; }
.bthumb-empty { display: flex; align-items: center; justify-content: center; color: var(--gold); font: 700 24px var(--sans); width: 64px; height: 40px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: rgba(110, 100, 62, 0.55); }
.bdesc { font-size: 12px; }
.bsec { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass); margin: 10px 0 4px; }
.bopt { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(111, 90, 56, 0.22); }
.bopt-art { width: 48px; height: 48px; object-fit: contain; flex: none; }
.bopt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bopt-main b { font-family: var(--serif); font-size: 15px; }
.bopt-text { font-size: 12px; line-height: 1.25; }
.bopt.off .bopt-art { opacity: 0.55; filter: grayscale(0.6); }
.bopt .btn { flex: none; }
.bcosts { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; color: var(--bone); }
.bcost { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
.bcost .ico-sm { width: 16px; height: 16px; object-fit: contain; }
.bcost.lack, .bcost.lack .money { color: var(--bad); }
.btimec { color: var(--fog); }
.bno summary { cursor: pointer; color: var(--fog); margin-top: 8px; font-size: 12px; }
.bjob { display: flex; gap: 8px; align-items: center; width: 100%; padding: 4px; margin: 0 0 4px; background: rgba(6, 6, 7, 0.5); border: 1px solid rgba(140, 107, 58, 0.3); color: var(--bone); text-align: left; font: 13px var(--sans); cursor: pointer; }
.bjob .bthumb { width: 44px; height: 44px; }
.bjobcard, .bupcard { padding: 8px; margin: 6px 0; background: rgba(6, 6, 7, 0.5); border: 1px solid rgba(140, 107, 58, 0.3); }
.bjobcard .row, .bupcard .row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.bupcard .btn { margin-top: 6px; }
.bspeed { display: flex; flex-wrap: wrap; gap: 6px; }
.bspeed .btn { display: inline-flex; align-items: center; gap: 3px; }
.bactions { margin-top: 6px; }
.bfoot { margin-top: 12px; font-size: 11px; line-height: 1.4; }
/* Portrait tablets: the board above, the sheet below. */
@media (max-aspect-ratio: 1/1) {
  #modal-panel[data-modal="base"] { --base-h: min(340px, 36vh); }
  #modal-panel[data-modal="base"] .modal-body.base-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
}
/* Phones: the window fills the screen; resources in five even cells. */
@media (max-width: 699px) {
  #modal-panel[data-modal="base"] { --base-h: 40vh; }
  .base-bar { padding: 4px 6px; gap: 4px; }
  .base-res { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  .bres { min-width: 0; padding: 2px 3px; font-size: 12px; }
  .bres i { display: none; }
  .bres-top { justify-content: center; }
  .base-meta { width: 100%; justify-content: space-between; gap: 4px 8px; }
  .base-head .sub { font-size: 12px; }
  #modal-panel[data-modal="base"] .modal-body.base-body { padding: 4px 6px 8px; }
  .btimer, .bfresh, .blvl { font-size: 9px; }
}
@media (max-width: 440px) {
  .bm-w { display: none; }
  .block { font-size: 9px; }
}
/* Landscape phones: board and sheet side by side under a thin header. */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  #modal-panel[data-modal="base"] { --base-h: calc(100dvh - 146px); }
  #modal-panel[data-modal="base"] .modal-head { padding-top: 4px; padding-bottom: 2px; }
  #modal-panel[data-modal="base"] .modal-head h2 { font-size: 17px; }
  .base-head .sub { font-size: 12px; }
  .base-bar { padding: 2px 8px; gap: 4px 8px; }
  .bres { flex-direction: row; align-items: center; gap: 4px; min-width: 0; padding: 1px 5px; font-size: 12px; }
  .bres .bfill, .bres i, .bm-w { display: none; }
  .bres { background-image: linear-gradient(90deg, var(--brass) var(--fill, 0%), transparent 0); background-size: 100% 2px; background-position: bottom; background-repeat: no-repeat; }
  .base-bar { flex-wrap: nowrap; }
  .base-res { flex-wrap: nowrap; }
  #modal-panel[data-modal="base"] .modal-body.base-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; padding: 4px 8px 6px; }
  .bthumb { width: 56px; height: 56px; }
}

/* ---------- My Island: its waters, tax and defence; a raid under way (docs/15 items 6–7). */
.base-def { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 3px 14px; font-size: 12px; color: var(--fog); border-bottom: 1px solid rgba(111, 90, 56, 0.25); }
.base-def .bmeta.bad { color: var(--bad); }
/* «Налётов нет: эти воды стерегут патрули Короны» wraps in a narrow column (it ran 16px out at 640×360). */
.base-def .bmeta { white-space: normal; max-width: 100%; min-width: 0; }
.bdef-w { display: inline-block; padding: 0 6px; border-radius: 3px; font: 600 11px/18px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor; }
.bdef-w.w-safe, .ct-w.w-safe { color: var(--good); }
.bdef-w.w-contested, .ct-w.w-contested { color: var(--gold); }
.bdef-w.w-lawless, .ct-w.w-lawless { color: var(--bad); }
.base-raid { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 5px 14px; background: linear-gradient(90deg, rgba(90, 20, 18, 0.55), rgba(40, 10, 10, 0.25)); border-bottom: 1px solid rgba(170, 60, 50, 0.6); font-size: 12px; }
.braid-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.braid-main b { font-family: var(--serif); font-size: 15px; color: #f0b3a4; }
.braid-clock { color: var(--bone); white-space: nowrap; }
.braid-clock .btime { font: 700 14px var(--sans); color: var(--bad); }
.base-raid .btn { flex: none; }
.bwaters .row .bdef-w { font-size: 10px; line-height: 16px; }
.bwaters p { font-size: 12px; }
/* The claim's terms (Company → Islands). */
.ct-terms { margin: 6px 0 8px; display: grid; gap: 4px; }
.ct-row { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: 8px; align-items: baseline; }
.ct-row dt { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--brass); }
.ct-row dd { margin: 0; font-size: 13px; line-height: 1.35; }
.ct-w { font-weight: 700; }
#modal-panel[data-modal="base"]:has(.base-raid) { --base-h: calc(min(760px, 92vh) - 290px); }
@media (max-aspect-ratio: 1/1) {
  #modal-panel[data-modal="base"]:has(.base-raid) { --base-h: min(310px, 32vh); }
}
@media (max-width: 699px) {
  #modal-panel[data-modal="base"]:has(.base-raid) { --base-h: 34vh; }
  .base-def, .base-raid { padding: 3px 6px; gap: 2px 8px; }
  .ct-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .base-def { padding: 1px 8px; font-size: 11px; }
  .base-raid { padding: 2px 8px; }
  .base-raid .muted { display: none; }
  #modal-panel[data-modal="base"]:has(.base-raid) { --base-h: calc(100dvh - 180px); }
}

/* ---------- My Island: the shipyard tab and her own ships (docs/15 items 4–5). */
.base-head { gap: 10px; flex-wrap: wrap; }

.bpower { color: var(--bone); }
.blevel .row b { font-family: var(--serif); font-size: 15px; }
.blevel .bcosts { margin-top: 4px; }
#modal-panel[data-modal="base"] .modal-body.base-body.yard-body { display: block; overflow: auto; padding: 8px 12px 12px; }
.sy-info { margin: 2px 0 4px; font-size: 13px; }
.sy-squad { margin: 0 0 8px; font-size: 12px; line-height: 1.35; }
.sy-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 8px; }
.sy-card { min-width: 0; padding: 8px 10px; background: rgba(6, 6, 7, 0.55); border: 1px solid rgba(140, 107, 58, 0.4); border-radius: 3px; font-size: 13px; }
.sy-card.st-laid_up { border-color: rgba(170, 70, 60, 0.6); }
.sy-card.st-sea { border-color: rgba(120, 170, 130, 0.55); }
.sy-top { display: flex; align-items: center; gap: 10px; }
.sy-pic { position: relative; flex: none; width: 104px; height: 44px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(40, 70, 78, 0.55), rgba(8, 14, 18, 0) 75%); }
.sy-pic img { position: absolute; left: 50%; top: 50%; height: 100px; width: auto; transform: translate(-50%, -50%) rotate(90deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); pointer-events: none; }
.sy-pic-sm { width: 76px; height: 34px; }
.sy-pic-sm img { height: 72px; }
.st-laid_up .sy-pic img { filter: grayscale(0.8) brightness(0.6); }
.st-building .sy-pic img { filter: sepia(0.7) brightness(0.75); }
.sy-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sy-name { font-family: var(--serif); font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.sy-sub { color: var(--fog); font-size: 12px; overflow-wrap: anywhere; }
.sy-lvl { flex: none; padding: 1px 6px; border: 1px solid var(--brass); border-radius: 9px; background: #16110d; font: 700 12px/16px var(--sans); color: var(--gold); }
.sy-state { margin: 6px 0 4px; color: var(--bone); font-size: 12px; }
.st-laid_up .sy-state { color: var(--bad); }
.st-sea .sy-state { color: var(--good); }
.sy-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sy-bar { position: relative; display: block; min-width: 0; height: 18px; background: #1b1512; border: 1px solid rgba(111, 90, 56, 0.7); overflow: hidden; }
.sy-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(120, 150, 90, 0.75); }
.sy-bar.low i { background: rgba(170, 70, 60, 0.8); }
.sy-bar.xp i { background: rgba(160, 125, 60, 0.8); }
.sy-bar.xp.ready i { background: var(--gold); }
.sy-bar em { position: relative; z-index: 1; display: block; padding: 0 5px; font: 600 11px/16px var(--sans); font-style: normal; color: var(--bone); text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-bonus { margin: 5px 0 2px; color: var(--fog); font-size: 12px; }
.sy-job, .sy-act { padding: 6px; margin: 6px 0 0; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(140, 107, 58, 0.25); }
.sy-job .row, .sy-act .row { display: flex; justify-content: space-between; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; }
.sy-act .btn { margin-top: 4px; }
.sy-acts { margin-top: 6px; gap: 6px; }
.sy-why { margin: 2px 0; font-size: 12px; }
.sy-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 0 12px; }
.sy-cls { font-family: var(--sans); font-size: 12px; }
@media (max-width: 699px) {
  #modal-panel[data-modal="base"] .modal-body.base-body.yard-body { padding: 4px 6px 10px; }
}

.blevel .good { color: var(--good); } .blevel .bad { color: var(--bad); }

/* ---------- My Island on a phone on its side (docs/15 item 8): a thin header; the board fills the left half and
   the resources, the waters, a raid and the sheet scroll together on the right, at the windows' landscape sizes. */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  #modal-panel[data-modal="base"], #modal-panel[data-modal="base"]:has(.base-raid) { --base-h: calc(100dvh - 86px); }
  #modal-panel[data-modal="base"] .modal-head.base-head { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 4px 54px 4px 10px; }
  #modal-panel[data-modal="base"] .base-head > div:first-child { min-width: 0; flex: 1; }
  #modal-panel[data-modal="base"] .base-head .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #modal-panel[data-modal="base"] .modal-body.base-body.base-land { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; padding: 2px 8px 6px; }
  .base-land .base-stage { align-items: center; }
  .base-land .base-sheet { padding: 0 4px 8px 0; font-size: 13px; }
  .base-sheet .base-bar, .yard-body .base-bar { flex-wrap: wrap; padding: 0 0 4px; gap: 4px; }
  .base-sheet .base-res, .yard-body .base-res { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 3px; }
  .base-sheet .bres, .yard-body .bres { flex-direction: column; align-items: stretch; gap: 0; padding: 1px 3px 3px; font-size: 13px; }
  .base-sheet .bres-top, .yard-body .bres-top { justify-content: center; }
  .base-sheet .bres em, .yard-body .bres em { font-size: 10px; }
  .base-sheet .base-meta, .yard-body .base-meta { width: 100%; justify-content: space-between; gap: 2px 8px; }
  .base-sheet .base-def, .base-sheet .base-raid, .yard-body .base-def, .yard-body .base-raid { padding: 3px 4px; font-size: 12px; }
  .base-sheet .base-raid .muted, .yard-body .base-raid .muted { display: inline; }
  .base-sheet .base-raid, .yard-body .base-raid { margin: 2px 0 4px; border: 1px solid rgba(170, 60, 50, 0.6); }
}

/* ---------- My Island on a tablet held upright (docs/15 item 8): the window takes most of the screen, a tall board. */
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  #modal-panel[data-modal="base"] { width: 96vw; height: calc(100dvh - 140px); --base-h: min(520px, 42vh); }
  #modal-panel[data-modal="base"]:has(.base-raid) { --base-h: min(480px, 38vh); }
}

/* ---------- Toasts while a window is open (docs/15 item 8): not over the window, but in a strip of their own under
   it — in the margin below the window on a large screen, else a line the window gives up while a toast shows —
   one line each, the newest (and a bad one) only on a phone. */
#modal { flex-direction: column; }
#modal-panel { flex: 0 1 auto; min-height: 0; }
#modal-toasts { flex: none; display: flex; flex-direction: column; gap: 2px; width: min(1100px, 95vw); padding: 3px 0 2px; pointer-events: none; zoom: var(--ui-scale); font-size: calc(1em * var(--text-scale)); }
#modal-toasts:empty { display: none; }
#modal-toasts .toast { padding: 2px 8px; font-size: 12px; line-height: 18px; background: rgba(8, 9, 11, 0.94); }
#modal-toasts .toast > span { display: block; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-toasts .toast .ico-toast { width: 16px; height: 16px; flex: none; }
#modal-toasts .t-count { flex: none; }
@media (max-width: 699px), (max-height: 520px) {
  #modal-toasts { width: 100%; padding: 0 calc(var(--sa-r) + 2px) calc(var(--sa-b) + 1px) calc(var(--sa-l) + 2px); background: #060607; }
  #modal-toasts .toast:nth-child(n+2):not(.bad) { display: none; }
  #modal-toasts .toast { font-size: 11.5px; }
}
@media (min-width: 700px) and (min-height: 890px) {
  #modal-toasts { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 0; }
}

/* The column's toasts wait under an open window (the strip takes the new ones); they come back when it closes. */
body:has(#modal:not(.hidden)) #toasts { display: none; }
#modal-toasts { overflow: hidden; }
#modal-toasts .toast { box-sizing: border-box; max-width: 100%; min-width: 0; overflow: hidden; }
@media (max-width: 699px), (max-height: 520px) {
  #modal:has(#modal-toasts:not(:empty)) { background: #060607; }
}
/* Before setting sail (owner, 2026-09-30; 2026-10-09: a window of what to buy, nothing bought by itself): what is short
   for the voyage, each with how many, its price and a button; «Докупить всё», «Отплыть так», «Остаться». */
.confirm-panel.depart-panel { width: min(580px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; text-align: left; }
.depart-panel .dp-head { display: flex; flex-direction: column; }
.depart-panel .dp-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--serif); font-size: 22px; color: var(--bone); }
.depart-panel .dp-title .ico-md { margin: 0; }
.depart-panel p.dp-lead { margin: 0 0 8px; font-size: 16px; text-align: left; }
.depart-panel p.dp-ok { color: #9fe08a; }
.depart-panel p.dp-warn { margin: 0 0 8px; font-size: 14px; color: var(--bad, #e0473a); text-align: left; font-family: inherit; }
.depart-panel .dp-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.depart-panel .dp-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid rgba(217, 178, 90, 0.28); border-radius: 5px; background: rgba(0, 0, 0, 0.22); }
.depart-panel .dp-row .ico-md { width: 36px; height: 36px; margin: 0; flex: none; }
.depart-panel .dp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.depart-panel .dp-text b { font-size: 15px; }
.depart-panel .dp-text .muted { font-size: 13px; line-height: 1.3; }
.depart-panel .dp-buy { flex: none; white-space: nowrap; min-height: 36px; }
body.touch .depart-panel .dp-buy { min-height: 44px; }
.depart-panel .dp-buy.dp-part { border-style: dashed; }
.depart-panel .dp-none { flex: none; font-size: 12px; max-width: 120px; text-align: right; }
.depart-panel .k-sheet-foot { flex-wrap: wrap; }
.depart-panel .k-sheet-foot > .k-btn { flex: 1 1 140px; max-width: none; }
@media (max-width: 480px) { .depart-panel .dp-row { flex-wrap: wrap; } .depart-panel .dp-buy { width: 100%; } .depart-panel .dp-none { max-width: none; width: 100%; text-align: left; } }
/* A phone held sideways (812×375, 640×360): the heading, the lead and the purse's word on one line, four rows of one
   or two lines, the foot's three buttons in a row — one screen, nothing to scroll. */
@media (max-height: 520px) {
  .confirm-panel.depart-panel { width: min(600px, 100%); padding: 8px 12px 10px; }
  .depart-panel .dp-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin: 0 0 4px; }
  .depart-panel .dp-title { font-size: 17px; margin: 0; align-self: center; }
  .depart-panel .dp-title .ico-md { width: 24px; height: 24px; }
  .depart-panel p.dp-lead { font-size: 13px; margin: 0; }
  .depart-panel p.dp-warn { font-size: 12.5px; margin: 0; }
  .depart-panel .k-sheet-grip { height: 10px; }
  .depart-panel .dp-list { gap: 3px; }
  .depart-panel .dp-row { padding: 0 8px; gap: 8px; min-height: 44px; }
  .depart-panel .dp-row .ico-md { width: 28px; height: 28px; }
  .depart-panel .dp-text { gap: 0; }
  .depart-panel .dp-text b { font-size: 14px; line-height: 1.15; }
  .depart-panel .dp-text .muted { font-size: 12px; line-height: 1.25; }
  .depart-panel .k-sheet-foot { padding-top: 6px; flex-wrap: nowrap; }
  .depart-panel .k-sheet-foot > .k-btn { flex: 1 1 0; min-width: 0; }
  .depart-panel .k-sheet-foot > .k-btn[data-dp="all"] { flex-grow: 1.5; white-space: nowrap; }
}
/* The market's quick row: provisions for a voyage. */

/* Goods as their picture and count (the outposts' costs). */
.gq { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gq .ico-xs { width: 22px; height: 22px; margin: 0; }
.btn.est-found { display: inline-flex; align-items: center; gap: 5px; }

/* The chart's own mark (owner, 2026-09-30): a button to take it off, over the chart's top right. */
.map-wrap .map-wp-acts { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.map-wrap .map-wp-acts > .k-btn { pointer-events: auto; }
.map-wrap .map-wp-clear, .map-wrap .map-wp-sail { white-space: nowrap; }
.map-wrap .map-wp-clear.hidden, .map-wrap .map-wp-sail.hidden { display: none; }

/* ---------- One width for every plate (owner, 2026-09-30: "all plates more compact and — most important — of one
   width"). The target, the fishing, hunt, storm, order, descent, holiday and boss cards, the goals and the news share
   --plate-w in each layout (and the ship panel on a desktop); frames are thinner, lines tighter, titles one line. */
:root { --plate-w: calc(100vw - var(--sa-l) - var(--sa-r) - 68px); }
@media (max-height: 520px) { :root { --plate-w: max(200px, min(300px, calc(100vw - var(--sa-l) - var(--sa-r) - 360px - var(--mm) - 64px))); } }
@media (min-width: 700px) and (min-height: 521px) { :root { --plate-w: 340px; } }
@media (min-width: 1100px) and (min-height: 600px) { :root { --plate-w: 320px; } }
#hud #hud-stack { width: var(--plate-w); right: auto; min-width: 0; max-width: none; gap: 4px; }
@media (min-width: 1100px) and (min-height: 600px) { #hud #hud-stack { left: 50%; transform: translateX(-50%); } }
#hud #hud-stack > * { width: 100% !important; max-width: none !important; min-width: 0; box-sizing: border-box; }
@media (min-width: 1100px) and (min-height: 600px) { body:not(.touch) #hud .ship-panel { width: var(--plate-w); } }
@media (min-width: 700px) and (min-height: 521px) { body.ship-open #hud .ship-panel { width: var(--plate-w); } }
/* Compact: a slimmer brass frame, less padding, tighter lines. */
#hud-stack > .hud-block, #hud-stack > #hud-goals { line-height: 1.25; }
.skinned #hud-stack > .hud-block, .skinned #hud-stack > #hud-goals, .skinned #hud .ship-panel { border-width: 7px; border-image-width: 7px; }
.skinned #hud-stack > .hud-block { padding: 1px 5px 2px; }
.skinned #hud-stack > #hud-goals { padding: 0 5px 1px; }
@media (max-width: 699px) {
  .skinned #hud-stack > .hud-block, .skinned #hud-stack > #hud-goals { border-width: 6px; border-image-width: 6px; }
}
/* Titles on one line, cut with an ellipsis; the side figure (a level, a clock, a count) keeps its room. */
#hud-stack .fp-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
#hud-stack .fp-head > b { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; line-height: 1.25; }
#hud-stack .fp-head > b .ico-sm { flex: none; }
#hud-stack .fp-head > .muted, #hud-stack .fp-head > .hp-lvl { flex: 1 1 0; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-stack .fp-head > .hp-lvl { flex: 0 0 auto; }
#hud-target .tg-name { font-size: 13.5px; }
#hud-target .tg-bar { margin-top: 2px; }
#hud-target .tg-foot { margin-top: 2px; }
#hud-target .tg-glass { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
#hud-stack .rg-next, #hud-stack .fp-line { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }
#hud-stack .fp-acts { margin-top: 3px; }
#hud-stack .fp-acts .btn { padding: 2px 8px; font-size: 11px; }
#hud-goals .g-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#hud-goals .g-t { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#hud-goals .ico-goal { width: 20px; height: 20px; }
#hud-feed .feed-h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
#hud-feed .feed-line { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#hud-holiday .hol-line { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-boss .bname { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-watch .w-head b { font-size: 15px; }
@media (max-width: 699px) {
  #hud-goals .g-t { display: block; white-space: nowrap; }
  #hud-feed .feed-line { display: block; }
}
@media (max-width: 699px), (max-height: 520px) {
  #hud-target .tg-glass { display: block; white-space: nowrap; text-overflow: ellipsis; }
  #hud-target .tg-bar { height: 5px; }
  .skinned #hud-target .tg-bar { height: 7px; }
  #hud-stack .fp-line, #hud-stack .rg-next { -webkit-line-clamp: 1; line-clamp: 1; }
}

/* ---------- The players' chat (owner, 2026-09-30): a button with the unread count opens a framed panel — the
   channels as tabs with their pictures, each line with the speaker's face in a brass ring, the emblems, the field and
   Send. Phones get a full-width sheet above the controls; the top stack steps aside while it is open. */
#hud-chat .chat-toggle { position: absolute; right: calc(var(--sa-r) + 8px); top: calc(var(--sa-t) + var(--top-h) + 52px); width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid var(--brass-dim); background: rgba(16, 14, 11, 0.9); color: var(--gold); pointer-events: auto; cursor: pointer; touch-action: manipulation; z-index: 2; }
.skinned #hud-chat .chat-toggle { border: 0; }
.skinned #hud-chat .chat-toggle::after { content: ''; position: absolute; inset: -3px; background: var(--ui-ring) center / contain no-repeat; pointer-events: none; }
#hud-chat .chat-toggle .chat-tg-ico { position: absolute; inset: 18%; display: flex; align-items: center; justify-content: center; }
#hud-chat .chat-toggle .chat-tg-ico .ico { width: 100%; height: 100%; margin: 0; vertical-align: 0; border-radius: 50%; }
#hud-chat .chat-toggle.has-unread { filter: drop-shadow(0 0 6px rgba(232, 196, 106, 0.6)); }
#hud-chat .chat-unread { position: absolute; top: -4px; right: -6px; z-index: 3; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #a8322a; border: 1px solid #f0c9a0; color: #fff; font: 700 10px/16px var(--sans); font-style: normal; text-align: center; }
#hud-chat .chat-unread.hidden { display: none; }
@media (max-height: 520px) { #hud-chat .chat-toggle { top: calc(var(--sa-t) + 60px); right: calc(var(--sa-r) + var(--mm) + 16px); } }
@media (min-width: 700px) and (min-height: 521px) { #hud-chat .chat-toggle { top: calc(var(--sa-t) + var(--mm) + 116px); } }
@media (min-width: 1100px) and (min-height: 600px) { body:not(.touch) #hud-chat .chat-toggle { top: auto; right: auto; left: calc(var(--sa-l) + 12px); bottom: 12px; width: 48px; height: 48px; } }

/* The panel. */
#hud-chat #chat { position: absolute; display: none; flex-direction: column; pointer-events: auto; box-sizing: border-box; z-index: 1;
  left: calc(var(--sa-l) + 8px); right: calc(var(--sa-r) + 8px); top: auto; width: auto; bottom: calc(max(var(--hb-top, 0px), var(--sa-b) + var(--touch-h)) + 6px); height: min(46vh, 380px); max-height: calc(100dvh - max(var(--hb-top, 0px), var(--sa-b) + var(--touch-h)) - var(--sa-t) - 20px);
  padding: 6px 8px 8px; background: linear-gradient(180deg, rgba(14, 12, 10, 0.95), rgba(8, 8, 9, 0.96)); border: 1px solid rgba(140, 107, 58, 0.6); border-radius: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); font-size: calc(1em * var(--text-scale, 1)); }
.skinned #hud-chat #chat { border: 7px solid transparent; border-image: var(--ui-frame) 70 / 7px round; border-radius: 0; padding: 3px 5px 5px; background: linear-gradient(180deg, rgba(14, 11, 9, 0.9), rgba(8, 8, 9, 0.95)), var(--tex-panel, var(--tex-ebony, none)) center / 260px; background-clip: padding-box; }
#hud-chat #chat.open { display: flex; }
@media (max-height: 520px) {
  #hud-chat #chat { left: calc(var(--sa-l) + 350px); right: calc(var(--sa-r) + var(--mm) + 66px); top: calc(var(--sa-t) + 6px); bottom: calc(var(--hb-top, 120px) + 4px); height: auto; max-height: none; }
}
@media (min-width: 700px) and (min-height: 521px) {
  #hud-chat #chat { left: calc(var(--sa-l) + 8px); right: auto; width: min(440px, calc(100vw - var(--mm) - 72px)); top: calc(var(--sa-t) + var(--uf-p) + 54px); bottom: auto; height: min(52vh, 440px); max-height: calc(100dvh - var(--uf-p) - 54px - var(--hb-top, 200px) - 12px); }
}
@media (min-width: 1100px) and (min-height: 600px) {
  body:not(.touch) #hud-chat #chat { left: calc(var(--sa-l) + 12px); width: var(--plate-w); top: auto; bottom: 68px; height: min(380px, calc(100vh - 470px)); min-height: 160px; max-height: none; }
  body.touch #hud-chat #chat { top: calc(var(--sa-t) + 134px); left: calc(var(--sa-l) + 12px); width: 380px; }
}
/* While it is open on a phone or a tablet the top stack steps aside (the chat stands in its place). */
@media (max-width: 1099px), (max-height: 599px) { body.chat-open #hud-stack { visibility: hidden; } }
@media (min-width: 1100px) and (min-height: 600px) { body.touch.chat-open #hud-stack { visibility: hidden; } }

#hud-chat .chat-head { display: flex; align-items: center; gap: 4px; flex: none; margin-bottom: 4px; }
#hud-chat #chat-tabs { display: flex; flex: 1 1 auto; min-width: 0; gap: 3px; margin: 0; overflow: hidden; }
#hud-chat #chat-tabs .ct { position: relative; display: inline-flex; align-items: center; gap: 3px; min-width: 0; padding: 2px 6px; font: 600 11px var(--sans); color: var(--fog); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(111, 90, 56, 0.45); border-radius: 2px; cursor: pointer; white-space: nowrap; }
#hud-chat #chat-tabs .ct .ico-sm { width: 16px; height: 16px; margin: 0; flex: none; }
#hud-chat #chat-tabs .ct .ct-l { overflow: hidden; text-overflow: ellipsis; }
#hud-chat #chat-tabs .ct.on { color: var(--gold); border-color: var(--brass); background: rgba(232, 196, 106, 0.08); }
#hud-chat #chat-tabs .ct-n { position: absolute; top: -5px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px; background: #a8322a; color: #fff; font: 700 9px/14px var(--sans); font-style: normal; text-align: center; }
#hud-chat .chat-x { flex: none; width: 26px; height: 26px; padding: 0; background: none; border: 0; color: var(--fog); font-size: 20px; line-height: 1; cursor: pointer; }
#hud-chat .chat-x:hover { color: var(--gold); }
#hud-chat #chat-tabs .ct:not(.on) .ct-l { display: none; }
#hud-chat #chat-tabs .ct:not(.on) { padding: 2px 5px; }

#hud-chat #chat-log { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; font-size: 12px; text-shadow: 0 1px 2px #000; scrollbar-width: thin; scrollbar-color: rgba(140, 107, 58, 0.6) transparent; }
#hud-chat #chat-log .cl { display: flex; gap: 7px; align-items: flex-start; padding: 3px 2px; }
#hud-chat #chat-log .cl + .cl { border-top: 1px solid rgba(111, 90, 56, 0.18); }
#hud-chat #chat.open[data-filter="group"] #chat-log > .cl:not(.chat-group),
#hud-chat #chat.open[data-filter="guild"] #chat-log > .cl:not(.chat-guild),
#hud-chat #chat.open[data-filter="whisper"] #chat-log > .cl:not(.chat-whisper) { display: none; }
#hud-chat .cl-face { position: relative; flex: none; width: 32px; height: 32px; margin: 3px 3px 0; border-radius: 50%; background: #15120e 50% 22% / 150% auto no-repeat; box-shadow: 0 0 0 1.5px var(--brass-dim), 0 1px 4px #000; }
.skinned #hud-chat .cl-face { box-shadow: 0 1px 4px #000; }
.skinned #hud-chat .cl-face::after { content: ''; position: absolute; inset: -5px; background: var(--ui-ring) center / contain no-repeat; pointer-events: none; }
#hud-chat .cl-body { flex: 1 1 auto; min-width: 0; }
#hud-chat .cl-head { display: flex; align-items: baseline; gap: 5px; min-width: 0; line-height: 1.2; }
#hud-chat .cl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px var(--sans); }
#hud-chat .cl-lv, #hud-chat .cl-tag { flex: none; font-size: 10px; font-style: normal; color: var(--fog); white-space: nowrap; }
#hud-chat .cl-head time { flex: none; margin-left: auto; font-size: 10px; color: rgba(216, 210, 196, 0.45); }
#hud-chat .cl-text { color: var(--bone); font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
#hud-chat .chat-group .cl-text { color: #bfe8c4; }
#hud-chat .chat-guild .cl-text { color: #c4d8ee; }
#hud-chat .chat-whisper .cl-text { color: #ecc8f0; font-style: italic; }
#hud-chat .cl-own { background: linear-gradient(90deg, rgba(232, 196, 106, 0.06), transparent); }
#hud-chat .emo { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin: 0 1px; }

#hud-chat #chat-emotes { flex: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin: 4px 0 0; padding: 4px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(111, 90, 56, 0.4); }
#hud-chat #chat-emotes.hidden { display: none; }
#hud-chat #chat-emotes button { height: 32px; padding: 0; background: rgba(255, 255, 255, 0.03); border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
#hud-chat #chat-emotes button:hover { border-color: var(--brass-dim); background: rgba(232, 196, 106, 0.08); }
#hud-chat #chat-emotes .emo { width: 24px; height: 24px; vertical-align: middle; }
#hud-chat .chat-row { flex: none; display: flex; align-items: center; gap: 4px; margin-top: 5px; }
#hud-chat #chat-input { display: block; flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 6px 8px; font-size: 14px; font-family: var(--sans); }
#hud-chat .chat-emo-btn { flex: none; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(111, 90, 56, 0.55); border-radius: 3px; cursor: pointer; }
#hud-chat .chat-emo-btn .ico-sm { width: 20px; height: 20px; margin: 0; vertical-align: 0; }
#hud-chat .chat-send { flex: none; height: 32px; padding: 0 10px; white-space: nowrap; }
/* A phone held upright: the open sheet spans the width, so its button steps aside (the × folds it). */
@media (max-width: 699px) and (min-height: 521px) { body.chat-open #hud-chat .chat-toggle { display: none; } }
/* A tablet: the stack (and the chat in its place) starts clear of the unit frame's lowest line. */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 521px) {
  #hud #hud-stack { top: calc(var(--sa-t) + var(--uf-p) + 62px); }
  #hud-chat #chat { top: calc(var(--sa-t) + var(--uf-p) + 62px); }
}
/* …and the sheet rises no higher than the menu button under the minimap (the region's line and the button stay seen). */
@media (max-width: 699px) and (min-height: 521px) {
  #hud-chat #chat { max-height: calc(100dvh - max(var(--hb-top, 0px), var(--sa-b) + var(--touch-h)) - var(--sa-t) - var(--top-h) - 54px); min-height: 180px; }
}

/* ---------- the turn-based boarding battle (docs/16 P4): the decks on a hex field over the whole screen, the
   captains on either side, the order of the round, the feed, the orders. A phone upright stacks it all; on its
   side and on a desk the captains stand left and right of the field. */
#board-tac { position: fixed; inset: 0; z-index: 25; background: #0a0908; touch-action: none; user-select: none; -webkit-user-select: none; }
.tb-root { position: absolute; inset: 0; box-sizing: border-box; display: grid; gap: 6px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) calc(env(safe-area-inset-right, 0px) + 6px) calc(env(safe-area-inset-bottom, 0px) + 6px) calc(env(safe-area-inset-left, 0px) + 6px);
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "you mid foe" "queue queue queue" "stage stage stage" "feed feed feed" "spells spells spells" "acts acts acts";
  background: linear-gradient(180deg, rgba(12, 10, 8, 0.88), rgba(8, 7, 6, 0.95)), var(--tb-deck, none) center 40% / cover no-repeat; background-color: #0c0b0a; font-size: 12px; }
.tb-hero { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tb-hero.you { grid-area: you; }
.tb-hero.foe { grid-area: foe; flex-direction: row-reverse; text-align: right; }
.tb-face { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #1b1f25 center / cover; border: 2px solid #7fb0d0; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
.tb-hero.foe .tb-face { border-color: #d2473a; }
.tb-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tb-who b { font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-who small { color: var(--fog); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.tb-hero.foe .tb-pips { justify-content: flex-end; }
.tb-pip { font-size: 11px; color: var(--fog); padding: 0 4px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.tb-pip.up { color: #a8dca2; }
.tb-pip.down { color: #e3998a; }
.tb-auto { font-size: 10px; color: var(--gold); border: 1px solid var(--brass-dim); border-radius: 6px; padding: 0 4px; }
.tb-mid { grid-area: mid; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.tb-round { font-family: var(--display); font-size: 16px; color: var(--gold); letter-spacing: 0.04em; white-space: nowrap; }
.tb-turn { font-size: 11.5px; color: var(--fog); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.tb-turn.mine { color: #bfeee4; font-weight: 600; }
.tb-turn em { font-style: normal; color: var(--gold); }
.tb-dot { width: 8px; height: 8px; border-radius: 50%; background: #7fb0d0; }
.tb-dot.foe { background: #d2473a; }
.tb-timer { width: 100%; min-width: 80px; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.tb-timer > i { display: block; height: 100%; background: linear-gradient(90deg, #d0503e, #e0b862); }
.tb-queue { grid-area: queue; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; min-height: 34px; }
.tb-q { position: relative; flex: none; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid #7fb0d0; background: #15110d; cursor: pointer; }
.tb-q.foe { border-color: #d2473a; }
.tb-q.on { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(224, 184, 98, 0.7); }
.tb-q.next { opacity: 0.55; transform: scale(0.85); }
.tb-q .ico { width: 100%; height: 100%; margin: 0; border-radius: 50%; object-fit: cover; vertical-align: 0; }
.tb-q b { position: absolute; right: -4px; bottom: -4px; min-width: 14px; padding: 0 2px; font-size: 9.5px; line-height: 13px; border-radius: 4px; background: #111; color: var(--bone); border: 1px solid #555; }
.tb-qsep { flex: none; width: 2px; height: 26px; background: var(--brass-dim); margin: 0 3px; }
.tb-stage { grid-area: stage; position: relative; min-height: 0; min-width: 0; overflow: hidden; }
.tb-board { position: absolute; left: 0; top: 0; display: block; touch-action: none; cursor: pointer; }
.tb-hint { color: #bfeee4; font-size: 11.5px; font-weight: 600; }
.tb-card { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: min(300px, calc(100% - 16px)); box-sizing: border-box; padding: 8px 10px; background: rgba(14, 12, 10, 0.95); border: 1px solid var(--brass-dim); border-top: 3px solid #7fb0d0; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); cursor: pointer; z-index: 2; }
.tb-card.foe { border-top-color: #d2473a; }
.tb-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tb-card-h .ico-md { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.tb-card-h b { display: block; font-family: var(--display); font-weight: 400; font-size: 16px; }
.tb-card-h small { color: var(--fog); }
.tb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 8px; }
.tb-stats > div { display: flex; flex-direction: column; min-width: 0; }
.tb-stats span { font-size: 10px; color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-stats b { font-size: 13px; color: var(--bone); }
.tb-card p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.3; }
.tb-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px 26px; text-align: center; background: rgba(10, 9, 8, 0.86); border: 1px solid var(--brass); border-radius: 8px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.8); z-index: 3; pointer-events: none; max-width: calc(100% - 24px); box-sizing: border-box; }
.tb-banner b { display: block; font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: 0.06em; }
.tb-banner.won b { color: var(--gold); text-shadow: 0 0 18px rgba(224, 184, 98, 0.5); }
.tb-banner.lost b { color: #e3998a; }
.tb-banner span { color: var(--fog); font-size: 12.5px; }
.tb-feed { grid-area: feed; min-height: 44px; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; font-size: 11.5px; line-height: 1.3; color: var(--fog); overflow: hidden; }
.tb-lines { display: flex; flex-direction: column; gap: 1px; }
.tb-feed .new { color: var(--bone); }
.tb-spells { grid-area: spells; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tb-spell { display: flex; align-items: center; gap: 6px; text-align: left; padding: 4px 8px; min-height: 44px; min-width: 0; }
.tb-spell .ico { width: 30px; height: 30px; flex: none; margin: 0; border-radius: 4px; }
.tb-spell span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tb-spell b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-spell small { font-size: 10px; color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-spell.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(224, 184, 98, 0.45); }
.tb-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 5px; }
.tb-acts .btn { flex: 1 1 auto; min-height: 38px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.tb-acts .btn.on { border-color: var(--gold); color: var(--gold); }
body.tac #hud-bottom, body.tac #touch, body.tac #board-fight { visibility: hidden; }
/* While the decks fight, the sea's news waits; what the battle itself says (a refusal, a win) still shows. */
body.tac #toasts .toast:not(.bad):not(.good):not(.xp) { display: none; }
/* The battle decided: its banner says it all (the experience too); the sea's news waits for the deck to clear. */
body.tac.tac-over #toasts { display: none; }
/* A phone on its side: the field in the middle as tall as the screen, the captains and the orders left and right. */
@media (max-height: 520px) and (orientation: landscape) {
  .tb-root { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "you stage foe" "mid stage queue" "spells stage feed" "spells stage acts"; font-size: 11px; }
  .tb-spells { align-content: start; min-height: 0; overflow: hidden; }
  .tb-stage { width: min(62vw, calc((100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 1.36)); }
  .tb-face { width: 32px; height: 32px; }
  .tb-who b { font-size: 13px; }
  /* The turns in one row that scrolls (the next ones first), so the hint below keeps its lines. */
  .tb-queue { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-height: 0; padding: 3px 0 5px 2px;
    mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tb-q { width: 26px; height: 26px; }
  .tb-qsep { height: 20px; }
  .tb-spells { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tb-spell { min-height: 36px; padding: 2px 6px; }
  .tb-spell .ico { width: 24px; height: 24px; }
  .tb-spell small { display: none; }
  /* The orders as their painted icons alone, three to a row (the word is in each one's title); one armed for a second
     tap says so across the row. */
  .tb-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; align-content: start; }
  .tb-acts .btn { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 2px; font-size: 10px; letter-spacing: 0; line-height: 1.05; white-space: normal; }
  .tb-acts .btn .ico-sm { display: block; flex: none; width: 24px; height: 24px; margin: 0; }
  .tb-acts .btn:has(.ico-sm) .tb-al { display: none; }
  .tb-acts .btn.armed { grid-column: 1 / -1; }
  .tb-acts .btn.armed .tb-al { display: inline; }
  .tb-feed { justify-content: flex-start; min-height: 0; font-size: 10.5px; }
  .tb-hint { font-size: 10.5px; line-height: 1.2; }
  .tb-banner b { font-size: 26px; }
}
/* A desk (and a tablet on its side, a desk window at 125–150%): the captains' columns either side of a large field,
   as narrow as their words allow, so the hexes take the width (docs/16 batch C: the field was a third of a desk). */
@media (min-width: 900px) and (min-height: 521px) and (min-aspect-ratio: 7/5) {
  .tb-root { grid-template-columns: clamp(172px, 16vw, 236px) minmax(0, 1fr) clamp(172px, 16vw, 236px); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "you mid foe" "spells stage queue" "acts stage feed"; gap: 10px; padding: 12px 16px; font-size: 13px; }
  .tb-face { width: 58px; height: 58px; }
  .tb-who b { font-size: 19px; }
  /* The pages and the book stay in their own row: a short desk window (1280×720) once let the book's button spill onto
     «Ждать» and «Защита» (QA, 2026-10-04) — the pages grow a little shorter there, and never run out of their row. */
  .tb-spells { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .tb-spell { min-height: 54px; }
  .tb-spell b { font-size: 14px; }
  .tb-spell small { font-size: 11px; white-space: normal; }
  .tb-queue { flex-wrap: wrap; align-content: flex-start; overflow: visible; }
  .tb-q { width: 40px; height: 40px; }
  .tb-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: end; }
  .tb-acts .btn { min-height: 40px; font-size: clamp(11px, 0.9vw, 13px); white-space: normal; line-height: 1.1; padding: 4px 3px; letter-spacing: 0; }
  .tb-acts .btn-danger { grid-column: span 2; }
  .tb-spell small { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tb-feed { font-size: 13px; justify-content: flex-end; }
  .tb-round { font-size: 22px; }
  .tb-turn { font-size: 13px; }
  .tb-timer { width: 260px; }
}
@media (min-width: 900px) and (min-height: 521px) and (max-height: 800px) and (min-aspect-ratio: 7/5) {
  .tb-spell { min-height: 48px; }
}
/* The square of the sea (docs/16 P2): on a phone the level alone, the captains it is for from a tablet up. */
@media (max-width: 699px) { #hud-region .rg-cap { display: none; } }

/* ---------- docs/16 Batch C: the merchants' runs, the trophy auction, the tavern's whispers, repairs at sea. */
.dl-card { margin-top: 10px; }
.dl-card > p.muted { margin: 2px 0 8px; font-size: 12.5px; line-height: 1.35; }
.dl-card .giver-h { margin: 10px 0 4px; display: flex; align-items: center; gap: 6px; }
.dl-run { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 0 6px; }
.dl-run.dl-next { border: 1px solid rgba(224, 184, 98, 0.45); border-radius: 6px; padding: 8px; background: rgba(224, 184, 98, 0.06); }
.dl-run-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl-run-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dl-run-t b { font-family: var(--serif); font-size: 15px; color: #f0e6cc; font-weight: 600; }
.dl-run-t .muted { font-size: 12px; }
.dl-facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 4px; font-size: 12.5px; }
.dl-facts .gold, .dl-card .gold { color: var(--gold); }
.dl-clock { font-variant-numeric: tabular-nums; color: var(--bone); }
.dl-clock.dl-hot { color: #e8a060; }
.dl-clock.dl-late { color: var(--fog); font-weight: 400; }
.au-lots { display: flex; flex-direction: column; gap: 6px; }
.au-lot { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0 4px; }
.au-lot > details > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-width: 0; }
.au-lot > details > summary::-webkit-details-marker { display: none; }
.au-lot > details > :not(summary) { margin: 6px 0 4px 40px; }
.au-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.au-name .gi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-name .muted { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-state { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 5px 0 3px; font-size: 12.5px; }
.au-bid { display: inline-flex; align-items: center; gap: 4px; }
.au-time { margin-left: auto; white-space: nowrap; }
.dl-lead { color: #a8dca2; font-weight: 600; }
.au-form, .au-put { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.au-form input.field { width: 110px; }
.au-put { margin-top: 10px; }
.au-put .giver-h { flex: 1 1 100%; margin: 0; }
.au-put select { flex: 1 1 180px; min-width: 0; }
.au-put label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.au-put input.field { width: 96px; }
.hs-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.hs-t { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hs-t b { font-weight: 600; color: #f0e6cc; }
.hs-grade { font-size: 11.5px; }
.hs-grade.sure { color: #a8dca2; }
.hs-grade.likely { color: var(--gold); }
.hs-grade.doubtful { color: #e3998a; }
.hs-btns { display: flex; gap: 4px; flex: none; }
.hs-row > .btn, .hs-row > .tag { flex: none; }
.rep-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.rep-way { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 7px 9px; background: rgba(0, 0, 0, 0.18); min-width: 0; }
.rep-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rep-h > b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--serif); font-size: 14.5px; color: #f0e6cc; }
.rep-h .tag { margin: 0; }
.rep-way p { font-family: var(--sans); }
.rep-way p { margin: 5px 0 0; font-size: 12px; line-height: 1.35; }
.rep-way.port { border-color: rgba(224, 184, 98, 0.35); }
@media (max-width: 560px) { .rep-cmp { grid-template-columns: minmax(0, 1fr); } .au-time { margin-left: 0; } }

/* ---------- docs/16 Batch D: the crew speaks, the men's mood, practice, the wounded, the captain's log */
.toast.talk { display: flex; align-items: flex-start; gap: 8px; border-left-color: var(--brass); background: linear-gradient(90deg, rgba(34, 26, 16, 0.94), rgba(10, 11, 13, 0.88)); padding: 6px 10px 6px 6px; text-align: left; }
.toast.talk.bad { border-left-color: var(--bad); }
.toast.talk.good { border-left-color: var(--good); }
.toast.talk .talk-face { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(201, 162, 90, 0.7), 0 1px 4px #000; background: #16110b; }
.toast.talk .talk-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.toast.talk .talk-who { font: 700 11px/1.2 var(--sans); color: var(--gold); letter-spacing: 0.02em; }
.toast.talk .talk-line { font: italic 13px/1.3 var(--serif); color: #eadfc6; overflow-wrap: anywhere; }
#modal-toasts .toast.talk { align-items: center; } /* one line beside the face: centred on it (it rode 3.5 px high — QA, 2026-10-04) */
#modal-toasts .toast.talk .talk-face { width: 26px; height: 26px; }
.uf-mood { position: absolute; left: -10%; bottom: -8%; z-index: 3; width: 36%; height: 36%; min-width: 16px; min-height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 700 12px/1 var(--sans); pointer-events: auto; box-shadow: 0 1px 4px #000; }
.uf-mood.shanty { color: #ffe39a; background: radial-gradient(circle at 40% 35%, #3a2c14, #120d06 70%); border: 1.5px solid #e8b44a; animation: uf-sing 1.1s ease-in-out infinite alternate; }
.uf-mood.grumble { color: #ffb4a8; background: radial-gradient(circle at 40% 35%, #3a1612, #120706 70%); border: 1.5px solid var(--bad); border-bottom-left-radius: 2px; }
@keyframes uf-sing { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-2px) rotate(6deg); } }
.pr-card .pr-row { display: grid; grid-template-columns: 18px minmax(64px, 0.9fr) minmax(40px, 1fr) auto; grid-template-areas: 'ico name bar lv' '. edge edge edge'; column-gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid rgba(140, 107, 58, 0.16); }
.pr-card .pr-row:first-of-type { border-top: 0; }
.pr-card .pr-row > .ico-sm { grid-area: ico; }
.pr-card .pr-name { grid-area: name; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-card .pr-bar { grid-area: bar; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pr-card .pr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6a32, #e8c46a); }
.pr-card .pr-lv { grid-area: lv; font-size: 12px; color: var(--gold); white-space: nowrap; }
.pr-card .pr-edge { grid-area: edge; font-size: 12px; color: var(--good); }
.pr-card .pr-edge:empty { display: none; }
.pr-card .pr-hint { font-size: 12px; margin: 6px 0 0; }
.wd-card p { margin: 4px 0; }
.wd-card .wd-n { font-size: 15px; }
.captain-log { padding: 12px 18px 18px; overflow-y: auto; }
.captain-log .lg-day { margin-bottom: 14px; padding: 10px 14px; border: 1px solid rgba(201, 162, 90, 0.28); border-radius: 6px; background: linear-gradient(180deg, rgba(40, 30, 18, 0.5), rgba(16, 12, 8, 0.7)); }
.captain-log .lg-h { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--bone); }
.captain-log .lg-list { list-style: none; margin: 0; padding: 0; }
.captain-log .lg-list li { display: grid; grid-template-columns: 18px 44px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px dashed rgba(140, 107, 58, 0.2); font-family: var(--serif); font-size: 15px; line-height: 1.35; color: #eadfc6; }
.captain-log .lg-list li:first-child { border-top: 0; }
.captain-log .lg-list li .ico-sm { align-self: center; }
.captain-log .lg-list time { font: 600 12px/1.2 var(--sans); color: var(--fog); font-variant-numeric: tabular-nums; }
.captain-log .lg-list li span { overflow-wrap: anywhere; }
.captain-log .lg-tally { margin-top: 6px; font-size: 12px; color: var(--brass); letter-spacing: 0.02em; }
.sp-wounded .lbl { display: inline-flex; align-items: center; gap: 3px; }

/* docs/16 Batch F — careers, titles for feats, the album, the week's challenges, the welcome back. */
.rn-sub { margin: 0 0 8px; font-size: 12px; }
.rn-careers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 8px; }
.rn-careers .card { margin: 0; }
.rn-career .rn-rank { font: 600 17px/1.2 var(--display); color: var(--gold); margin: 2px 0 4px; }
.rn-career .rn-pts { font-size: 12px; }
.rn-career .rn-rep { font-size: 11px; line-height: 1.35; margin: 3px 0 6px; }
.rn-career .rn-now { font-size: 12px; margin-bottom: 4px; }
.rn-career .rn-counts { font-size: 11px; line-height: 1.35; margin: 6px 0 0; }
.rn-bar { height: 6px; background: #1b1512; border: 1px solid rgba(111, 90, 56, 0.8); margin: 3px 0; }
.rn-bar i { display: block; height: 100%; background: var(--gold); }
.rn-bar.thin { height: 4px; }
.rn-ladder { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.rn-ladder li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 6px; font-size: 12px; opacity: 0.62; }
.rn-ladder li.on, .rn-ladder li.next { opacity: 1; }
.rn-ladder li .muted { grid-column: 2; font-size: 11px; line-height: 1.3; }
.rn-ladder .rn-mark { grid-row: span 2; width: 18px; height: 18px; border: 1px solid var(--brass, #8c6b3a); border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.rn-ladder li.on .rn-mark { background: var(--gold); color: #1a1208; border-color: var(--gold); }
.rn-ladder li.on b { color: var(--gold); }
.rn-feats { margin-top: 8px; }
.rn-title-sel { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; flex-wrap: wrap; }
.rn-title-sel select { flex: 1 1 180px; max-width: 320px; }
.rn-feat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 6px 12px; }
.rn-feat { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; opacity: 0.8; }
.rn-feat .ico-md { width: 36px; height: 36px; flex: none; filter: grayscale(0.85) brightness(0.7); }
.rn-feat.done { opacity: 1; }
.rn-feat.done .ico-md { filter: none; }
.rn-feat.done b { color: var(--gold); }
.rn-feat-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; font-size: 12px; }
.rn-feat-text .muted { font-size: 11px; line-height: 1.3; }
.rn-num { font-variant-numeric: tabular-nums; }
.rn-sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 8px; }
.rn-sets .card { margin: 0; }
.rn-set.done { border-color: var(--gold); }
.rn-set p { font-size: 12px; margin: 4px 0; }
.rn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; margin: 6px 0; }
.rn-piece { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; border: 1px solid rgba(140, 107, 58, 0.25); background: #0b0c0e; min-width: 0; }
.rn-piece .rn-ico { width: 38px; height: 38px; object-fit: contain; filter: grayscale(1) brightness(0.28); }
.rn-piece.got .rn-ico { filter: none; }
.rn-piece.got { border-color: rgba(224, 184, 98, 0.55); }
.rn-piece i { font-style: normal; font-size: 9.5px; line-height: 1.15; text-align: center; color: var(--fog); max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.rn-piece.got i { color: var(--bone); }
.rn-piece .rn-n { position: absolute; top: 2px; right: 4px; font-size: 10px; color: var(--gold); }
.rn-reward { color: var(--gold); }
.jr-weekly .wk-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.jr-weekly .wk-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; }
.jr-weekly .wk-top { margin: 2px 0 0; padding-left: 18px; font-size: 11.5px; }
.jr-weekly .giver-h .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.away .aw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 8px; }
.away .aw-cards .card { margin: 0; }
.away .aw-line { margin: 3px 0; font: 13px/1.4 var(--sans); }
.away .aw-gift { border-color: var(--gold); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.away .aw-gift h4 { flex: 1 0 100%; margin: 0; }
.away .aw-gift .aw-line { flex: 1 1 220px; }
.away .aw-acts { display: flex; justify-content: flex-end; margin-top: 8px; }
.uf-name .uf-title { display: block; font: italic 11px/1.1 var(--sans); color: var(--gold); overflow: hidden; text-overflow: ellipsis; }
.tg .tg-title { color: var(--gold); font-style: italic; }
/* The company window has ten tabs with the career and the album (docs/16 #26, 28): on a wide screen too they share
   the strip evenly as pictures (the name on hover), and the open tab's name stands under the strip. */

/* Batch E of docs/16: the walk across an island (client/src/ui/trek.ts) — the island games' card kit, one step at a
   time: the steps as dots with the path's picture, what was met, the ways on as big buttons that wrap. */
#trek { position: fixed; left: 50%; top: calc(var(--sa-t, 0px) + 96px); transform: translateX(-50%); width: min(420px, calc(100vw - 20px)); max-height: calc(100vh - var(--sa-t, 0px) - var(--sa-b, 0px) - 110px); overflow-y: auto; z-index: 40; pointer-events: auto; overscroll-behavior: contain; overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; }
#trek.hidden { display: none; }
body:has(#trek:not(.hidden)) #hud-goals, body:has(#trek:not(.hidden)) #hud-stack, body:has(#trek:not(.hidden)) #encounter { visibility: hidden; }
@media (max-width: 699px) { body:has(#trek:not(.hidden)) #tc-menu, body:has(#trek:not(.hidden)) #hud-menu { visibility: hidden; } }
#trek .mg-card { background: rgba(10, 12, 16, 0.95); border: 1px solid rgba(232, 196, 106, 0.55); border-radius: 6px; padding: 10px 12px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
#trek .mg-art { position: relative; margin: -4px -6px 8px; aspect-ratio: 3.2 / 1; background: #0b0d10 center / cover no-repeat; border: 1px solid rgba(232, 196, 106, 0.35); border-radius: 4px; box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.8); overflow: hidden; }
#trek .mg-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 16, 0) 40%, rgba(10, 12, 16, 0.75)); pointer-events: none; }
#trek .mg-face { position: absolute; right: 10px; bottom: 8px; width: 52px; height: 52px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(232, 196, 106, 0.7); background: rgba(10, 12, 16, 0.85); z-index: 1; }
#trek .mg-h { font-family: var(--serif); font-size: 19px; font-weight: 700; color: #e8c46a; line-height: 1.15; }
#trek .mg-text { margin: 4px 0 6px; font-size: 13px; line-height: 1.45; color: #bfb8a8; }
#trek .mg-out { margin: 4px 0 8px; color: #f2e6c8; font-size: 14px; line-height: 1.45; padding: 7px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.03); border-left: 3px solid rgba(232, 196, 106, 0.6); }
#trek .mg-out.mg-lost { border-left-color: rgba(180, 70, 60, 0.8); }
#trek .mg-note { font-size: 12px; color: #9a9384; letter-spacing: 0.04em; text-transform: uppercase; margin: 2px 0 4px; }
#trek .mg-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#trek .mg-choices .btn { flex: 1 1 auto; min-height: 44px; font-size: 13px; padding: 6px 10px; white-space: normal; line-height: 1.25; touch-action: manipulation; }
#trek .mg-walk { flex: 0 1 auto !important; opacity: 0.8; }
#trek .trek-paths .trek-path { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
#trek .trek-path .ico-sm { width: 22px; height: 22px; flex: none; }
#trek .mg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
#trek .mg-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 10px; background: rgba(232, 196, 106, 0.1); border: 1px solid rgba(232, 196, 106, 0.3); color: #e8d8a8; }
#trek .trek-steps { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 6px; }
#trek .trek-steps .mg-note { margin: 0; }
#trek .trek-dots { display: flex; gap: 6px; }
#trek .trek-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(232, 196, 106, 0.45); background: rgba(0, 0, 0, 0.4); display: inline-flex; align-items: center; justify-content: center; }
#trek .trek-dot.now { border-color: #e8c46a; box-shadow: 0 0 6px rgba(232, 196, 106, 0.6); }
#trek .trek-dot.done { background: rgba(232, 196, 106, 0.18); }
#trek .trek-dot.bad { border-color: rgba(200, 90, 70, 0.8); background: rgba(160, 60, 50, 0.25); }
#trek .trek-dot-ico { width: 16px; height: 16px; object-fit: contain; }
/* Phones held sideways: the card between the helm and the minimap, its painting a thin strip. */
@media (max-height: 520px) { #trek { top: calc(var(--sa-t, 0px) + 8px); max-height: calc(100vh - var(--sa-t, 0px) - var(--sa-b, 0px) - 16px); width: min(420px, calc(100vw - 2 * (var(--mm) + 40px))); } #trek .mg-art { aspect-ratio: 6 / 1; margin-bottom: 6px; } #trek .mg-face { width: 36px; height: 36px; bottom: 4px; } #trek .mg-choices .btn { min-height: 40px; } }
/* Her caches (docs/16 #22) in the chest card. */
.cache-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.cache-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; padding: 4px 6px; border-left: 2px solid rgba(232, 196, 106, 0.4); background: rgba(255, 255, 255, 0.02); }
.cache-row .muted { font-size: 12px; }
.cache-sell { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px; align-items: center; }
.cache-sell [data-msmap] { grid-column: 1 / -1; min-width: 0; width: 100%; }
.cache-sell [data-msto] { min-width: 0; width: 100%; }
.cache-sell [data-msprice] { min-width: 0; width: 100%; max-width: none !important; }
.cache-sell label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.cache-sell input[type=checkbox] { width: 16px; height: 16px; flex: none; margin: 0; }
.cache-sell .btn { justify-self: stretch; }
.mb-tag { display: inline-block; font-size: 11px; padding: 0 6px; margin-left: 4px; border-radius: 8px; border: 1px solid rgba(232, 196, 106, 0.4); color: #e8c46a; }

/* ---------- docs/16 Batch G: company and groups ---------- */
/* #35 the signal flags: one row of five, a finger wide, in the plates' width. */
#hud-signals { display: flex; align-items: stretch; gap: 3px; padding: 3px 4px !important; pointer-events: auto; }
#hud-signals.hidden { display: none; }
#hud-signals .sg-lbl { display: flex; align-items: center; flex: none; padding-right: 1px; }
#hud-signals .sg-lbl .ico-sm { width: 22px; height: 22px; border-radius: 3px; object-fit: cover; }
.sg-btn { flex: 1 1 0; min-width: 0; min-height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 1px; background: rgba(20, 20, 22, 0.8); border: 1px solid rgba(111, 90, 56, 0.55); border-bottom: 2px solid var(--sg); border-radius: 3px; color: var(--bone); font: 600 9.5px/1.1 var(--sans); cursor: pointer; }
.sg-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-btn .sg-ico { width: 18px; height: 18px; border-radius: 2px; object-fit: cover; }
.sg-btn:hover, .sg-btn:focus-visible { border-color: var(--sg); }
.sg-btn.sent { background: color-mix(in srgb, var(--sg) 35%, rgba(20, 20, 22, 0.8)); }
@media (max-height: 520px) { .sg-btn { min-height: 30px; } .sg-btn span { font-size: 8.5px; } }
/* #32 the sea's goal in the HUD: one line and a thin bar. */
#hud-world { display: flex; align-items: center; gap: 6px; padding: 3px 7px 4px !important; font: 11.5px/1.25 var(--sans); color: var(--bone); text-align: left; cursor: pointer; }
#hud-world.hidden { display: none; }
#hud-world .wp-ico { flex: none; width: 20px; height: 20px; border-radius: 3px; object-fit: cover; }
#hud-world .wp-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
#hud-world .wp-top { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
#hud-world .wp-lbl { flex: none; color: var(--brass); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; font-weight: 600; }
#hud-world .wp-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-world .wp-n { flex: none; color: var(--gold); font-variant-numeric: tabular-nums; }
#hud-world .fbar.wp-bar, .gy-card .fbar { display: block; position: relative; height: 4px; margin: 0; border: 1px solid #000; border-image: none; background: #0a0c0e; }
#hud-world .fbar.wp-bar > i, .gy-card .fbar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a6a2a, #e8c46a); }
.wg-row { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; }
.wg-row .ico-sm { flex: none; margin-top: 1px; }
.wg-row .wg-body { display: grid; gap: 2px; min-width: 0; flex: 1; font-size: 12px; }
.wg-row .wg-meta, .wg-row .wg-lead { font-size: 11px; }
.wg-row.done b { color: var(--good); }
/* #31 looking for company. */
.lf-goals { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.lf-goal-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 8px 2px 4px; background: rgba(20, 20, 22, 0.8); border: 1px solid rgba(111, 90, 56, 0.55); border-radius: 3px; color: var(--bone); font: 12px var(--sans); cursor: pointer; }
.lf-goal-btn.on { border-color: var(--gold); background: rgba(232, 196, 106, 0.14); color: var(--gold); }
.lf-form { flex-wrap: wrap; gap: 6px; align-items: center; }
.lf-lvls { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; }
.lf-lvls input { width: 52px; }
.lf-form #lfg-note { flex: 1 1 140px; min-width: 0; }
.lf-acts { gap: 6px; margin-top: 6px; }
.lf-mine { font-size: 12px; color: var(--gold); display: flex; align-items: center; gap: 4px; margin: 4px 0; }
.lf-row { display: flex; align-items: center; gap: 6px; }
.lf-row[data-lf-at] { cursor: pointer; }
.lf-row .lf-flag { flex: none; display: inline-flex; border-left: 3px solid; padding-left: 2px; }
.lf-row .lf-who { flex: 1 1 auto; min-width: 0; }
.lf-row .lf-who > b { font-weight: 600; }
.lf-row .lf-lvl { color: var(--gold); font-size: 11px; font-variant-numeric: tabular-nums; }
.lf-row .lf-goal { font-size: 11px; font-weight: 600; }
.lf-row .lf-meta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-row.lf-off { opacity: 0.7; }
.lf-row .btn, .lf-row .lf-nofit { flex: none; }
.lf-nofit { font-size: 11px; }
.map-lfg .lf-row { padding: 3px 0; }
/* #33 the trade window. */
.tr-h { font-size: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tr-st { font: 600 11px var(--sans); color: var(--fog); text-transform: uppercase; letter-spacing: 0.06em; }
.tr-st.lock { color: var(--gold); }
.tr-st.ok { color: var(--good); }
.tr-card.locked { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.35); }
.tr-sub { margin: 8px 0 4px; font: 600 11px var(--sans); color: var(--brass); text-transform: uppercase; letter-spacing: 0.06em; }
.tr-gears { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tr-gear { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; max-width: 100%; padding: 2px 6px 2px 3px; background: rgba(20, 20, 22, 0.8); border: 1px solid rgba(111, 90, 56, 0.55); border-radius: 3px; color: var(--bone); font: 12px var(--sans); cursor: pointer; text-align: left; }
.tr-gear .gi-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tr-gear.on { border-color: var(--gold); background: rgba(232, 196, 106, 0.14); }
.tr-gear:disabled { opacity: 0.5; cursor: default; }
.tr-bound { font-size: 10px; color: var(--bad); }
.tr-gear-in { margin: 3px 0; }
.tr-gear-in > summary { list-style: none; }
.tr-gear-in > summary::-webkit-details-marker { display: none; }
.tr-gear-in .gi-card { margin-top: 4px; }
.tr-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tr-acts .btn { flex: 1 1 140px; min-height: 36px; }
.tr-steps, .tr-note { font-size: 12px; margin: 6px 0 0; }
.tr-far { color: var(--bad); }
/* #34 the guild's shipyard. */
.yard-body .gy-card { max-width: 760px; }
.gy-card .gy-where { font-size: 12px; margin: 2px 0 6px; }
.gy-proj { display: grid; gap: 2px; margin-bottom: 6px; }
.gy-proj .muted { font-size: 12px; }
.gy-total { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.gy-total .gy-tbar { flex: 1; height: 8px !important; }
.gy-total b { flex: none; color: var(--gold); font-size: 12px; }
.gy-row { display: grid; grid-template-columns: 24px minmax(64px, 1fr) minmax(40px, 1.2fr) auto 66px; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; }
.gy-row .item-ico { width: 24px; height: 24px; }
.gy-row .gy-bar { height: 6px !important; }
.gy-row .btn { white-space: nowrap; }
.gy-row .gy-g { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-row .gy-n { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.gy-row .btn { padding: 2px 4px; min-height: 26px; }
.gy-hint { font-size: 12px; margin: 6px 0; }
.gy-hands { margin: 4px 0 0; padding-left: 20px; font-size: 12px; }
.gy-hands li { display: flex; gap: 6px; align-items: baseline; }
.gy-hands li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-hands li b { font-variant-numeric: tabular-nums; }
.gy-bld { font-style: normal; font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em; }
.gy-starts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gy-done { font-size: 12px; margin-top: 6px; }
/* A phone on its side keeps a short stack: the signal flags ride at its top so a finger always finds them. */
@media (max-height: 520px) { #hud-stack > #hud-signals { order: -2; } }

/* ---------- the ship's army (docs/17 H1): HoMM3's row of army slots — each stack's face, its count in the corner,
   its tier in pips, the upgraded kinds in gold; her empty slots left open. */
.army-card .card-h { flex-wrap: wrap; }
.army-sum { font-family: var(--sans, inherit); font-size: 12px; margin-left: auto; }
.army-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; }
.army-slot { position: relative; aspect-ratio: 1; min-width: 0; border-radius: 6px; border: 2px solid #5c4a33; background: radial-gradient(circle at 50% 35%, #2a2118, #120e0a); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); overflow: hidden; }
.army-slot.up { border-color: #c9a45a; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8), 0 0 6px rgba(224, 184, 98, 0.35); }
.army-slot.empty { border-style: dashed; border-color: #3a3024; background: rgba(20, 16, 12, 0.6); }
.army-slot .army-face { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.army-n { position: absolute; right: 2px; bottom: 2px; min-width: 16px; padding: 0 3px; font-size: 12px; line-height: 16px; text-align: center; border-radius: 4px; background: rgba(8, 6, 4, 0.9); color: #f2ead8; border: 1px solid #8a6a44; }
.army-tier { position: absolute; left: 3px; top: 1px; font-style: normal; font-size: 9px; letter-spacing: -1px; color: rgba(240, 230, 210, 0.85); text-shadow: 0 0 3px #000; }
.army-slot.up .army-tier { color: var(--gold); }
.army-list { display: flex; flex-direction: column; gap: 4px; }
.army-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.army-face-sm { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid #5c4a33; }
.army-line .item-text { min-width: 0; }
.army-line .item-text > span { font-size: 11px; }
.army-hint { font-size: 11.5px; margin: 8px 0 0; }
@media (max-width: 560px) { .army-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } .army-n { font-size: 10.5px; line-height: 14px; min-width: 13px; } }
/* Her army at a glance in the target frame. */
.tg-army { display: flex; align-items: center; gap: 4px; margin: 3px 0 1px; font-size: 11.5px; min-width: 0; flex-wrap: wrap; }
.tg-army-w { color: #f3c9a0; font-weight: 600; }
.tg-army-faces { display: inline-flex; gap: 2px; margin-left: auto; }
.army-mini { display: inline-block; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; border: 1px solid #5c4a33; }
.army-mini.up { border-color: #c9a45a; }
.army-face-xs { width: 100%; height: 100%; margin: 0; object-fit: cover; display: block; }
/* The battle's reckoning on the end banner. */
.tb-banner.tb-result { pointer-events: auto; min-width: min(320px, calc(100% - 24px)); }
.tb-rs-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tb-rs { position: relative; display: inline-block; width: 30px; height: 30px; }
.tb-rs-ico { width: 30px; height: 30px; margin: 0; border-radius: 50%; object-fit: cover; border: 1px solid #5c4a33; }
.tb-rs i { position: absolute; right: -4px; bottom: -3px; font-style: normal; font-size: 10px; line-height: 13px; padding: 0 2px; border-radius: 3px; background: #2a0f0c; color: #f3d7a0; border: 1px solid #7a3a2a; }
.tb-sps, .tb-sts { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.tb-sts .tb-st { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; }
.tb-sts .tb-st.good { color: var(--gold); }
.tb-sts .tb-st.bad { color: var(--bad); }
.tb-sps .chip { font-size: 10.5px; }
@media (max-height: 520px) and (orientation: landscape) {
  .tb-spells { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .tb-spell { justify-content: center; padding: 2px; min-height: 34px; min-width: 0; gap: 0; }
  .tb-spell .ico { width: 20px; height: 20px; }
  .skinned .tb-spell { border-width: 5px; padding: 1px; }
  .tb-spell span { display: none; }
  .tb-banner.tb-result { padding: 8px 14px; }
  .tb-rs, .tb-rs-ico { width: 24px; height: 24px; }
}
.tb-pip.tb-men { color: var(--bone); }
/* ---------- docs/16 Batch H: ease and polish ---------- */
/* #36 the auto-sail pill: one line at the top of the stack, the stop a finger wide. */
#hud-stack > #hud-autosail { order: -3; }
#hud-autosail { display: flex; align-items: center; gap: 6px; padding: 2px 3px 2px 8px !important; font: 11.5px/1.25 var(--sans); color: var(--bone); border-color: rgba(232, 196, 106, 0.6); }
#hud-autosail.hidden { display: none; }
#hud-autosail .as-ico { flex: none; font-size: 13px; color: var(--gold); }
#hud-autosail .as-lbl { flex: none; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; font-weight: 600; }
#hud-autosail .as-d { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fog); font-variant-numeric: tabular-nums; }
#hud-autosail .as-stop { flex: none; min-height: 28px; min-width: 52px; padding: 2px 10px; background: rgba(120, 32, 26, 0.55); border: 1px solid #b0302a; border-radius: 3px; color: var(--bone); font: 600 11px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
#hud-autosail .as-stop:hover, #hud-autosail .as-stop:focus-visible { background: rgba(176, 48, 42, 0.7); }
/* #37 the first-time hint: one compact line in the plates' width. */
#hud-stack > #hud-tip { order: -2; }
#hud-tip { display: flex; align-items: flex-start; gap: 6px; padding: 3px 3px 3px 7px !important; font: 11.5px/1.3 var(--sans); color: var(--bone); border-color: var(--brass); }
#hud-tip.hidden { display: none; }
#hud-tip .tp-lbl { flex: none; margin-top: 1px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; font-weight: 600; }
#hud-tip .tp-t { flex: 1 1 auto; min-width: 0; }
#hud-tip .tp-x { flex: none; width: 24px; height: 24px; margin: -1px 0; padding: 0; background: none; border: 1px solid rgba(111, 90, 56, 0.55); border-radius: 3px; color: var(--fog); font: 15px/1 var(--sans); cursor: pointer; }
#hud-tip .tp-x:hover { color: var(--bone); border-color: var(--brass); }
@media (max-width: 520px), (max-height: 520px) { #hud-tip { font-size: 11px; } #hud-tip .tp-lbl { display: none; } }
/* #38 gear beside what is worn: the two values and the difference in green or red. */
.gc-t { width: 100%; border-collapse: collapse; font: 12px/1.35 var(--sans); font-variant-numeric: tabular-nums; }
.gc-t th { font-weight: 600; font-size: 10px; color: var(--brass); text-transform: uppercase; letter-spacing: 0.06em; text-align: right; padding: 0 0 2px 6px; }
.gc-t td { padding: 1px 0 1px 6px; text-align: right; white-space: nowrap; color: var(--fog); }
.gc-t td:first-child, .gc-t th:first-child { text-align: left; padding-left: 0; color: var(--bone); white-space: normal; }
.gc-t tr.g-up .gc-d { color: #6fd46f; font-weight: 600; }
.gc-t tr.g-down .gc-d { color: #e0776b; font-weight: 600; }
.gc-t tr.g-eq .gc-d { color: var(--fog); }
.gear-tip { position: fixed; z-index: 400; width: 300px; max-width: calc(100vw - 8px); box-sizing: border-box; padding: 7px 9px; background: rgba(10, 11, 13, 0.96); border: 1px solid var(--brass); border-radius: 4px; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
.gear-tip .gt-name { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.gear-tip .gi-cmp { margin-top: 5px; }

/* ---------- The Heroes' economy (docs/17 H3): the week in the HUD, the recruit window, the island's town. */
.rg-week { white-space: nowrap; }
.rg-wk { color: var(--gold); }
@media (max-width: 560px) { .rg-wn { display: none; } }
/* The recruit window: the dwellings and their kinds of men on the left, the chosen kind with its slider on the right. */
.rc-head { flex-wrap: wrap; gap: 8px; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.rc-body { display: flex; flex-direction: column; gap: 6px; }
.rc-army { display: flex; flex-direction: column; gap: 0; }
.rc-army .army-row { max-width: 460px; margin: 2px 0 2px; }
.rc-have { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-size: 12px; }
.rc-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, 1fr); gap: 12px; align-items: start; }
.rc-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc-dwell { padding: 6px 8px; background: rgba(6, 6, 7, 0.55); border: 1px solid rgba(140, 107, 58, 0.4); border-radius: 3px; min-width: 0; }
.rc-dwell.off { opacity: 0.6; }
.rc-dh { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-art { width: 48px; height: 40px; object-fit: contain; flex: none; margin: 0; }
.rc-dt { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.rc-dt b { font-family: var(--serif); font-size: 15px; color: var(--bone); }
.rc-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; margin-top: 6px; }
.rc-unit { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left; padding: 4px 6px; min-height: 48px; cursor: pointer; color: var(--bone); background: rgba(20, 16, 12, 0.7); border: 2px solid #5c4a33; border-radius: 5px; font: inherit; }
.rc-unit.up { border-color: #8f7640; }
.rc-unit.sel { border-color: var(--gold); box-shadow: 0 0 8px rgba(224, 184, 98, 0.4); }
.rc-unit.off { opacity: 0.55; }
.rc-unit .rc-face { grid-row: span 2; width: 38px; height: 38px; margin: 0; border-radius: 50%; object-fit: cover; border: 1px solid #5c4a33; }
.rc-unit b { font-size: 12.5px; line-height: 1.15; overflow-wrap: anywhere; }
.rc-per .bcosts { font-size: 11px; gap: 0 5px; }
.rc-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc-pick { padding: 8px 10px; background: rgba(6, 6, 7, 0.6); border: 1px solid var(--brass, #8a6a44); border-radius: 3px; display: flex; flex-direction: column; gap: 6px; }
.rc-ph { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rc-ph > div { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.rc-ph b { font-family: var(--serif); font-size: 16px; color: var(--bone); }
.rc-big { width: 64px; height: 64px; flex: none; margin: 0; border-radius: 6px; object-fit: cover; border: 2px solid #8a6a44; }
.rc-slide { display: flex; align-items: center; gap: 8px; }
.rc-slide input[type="range"] { flex: 1; min-width: 0; accent-color: var(--gold); min-height: 28px; }
body.touch .rc-slide input[type="range"] { min-height: 44px; } /* (a titan's or any stack's count by a finger: 28 px was under a finger's 44 — docs/19 E19) */
.rc-count { min-width: 34px; text-align: center; font-size: 16px; color: var(--gold); }
.rc-cost { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; }
.rc-why { margin: 0; font-size: 12px; }
.rc-go { align-self: stretch; min-height: 36px; }
.rc-buy { display: flex; flex-direction: column; gap: 6px; }
.rc-train { padding: 6px 8px; background: rgba(6, 6, 7, 0.45); border: 1px solid rgba(140, 107, 58, 0.3); border-radius: 3px; }
.rc-train > p { font-size: 11.5px; margin: 0 0 4px; }
.rc-up { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-top: 1px solid rgba(111, 90, 56, 0.22); min-width: 0; }
.rc-up .rc-face { width: 30px; height: 30px; margin: 0; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid #5c4a33; }
.rc-up .rc-face.up { border-color: #c9a45a; }
.rc-arrow { color: var(--gold); }
.rc-ut { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; }
.rc-ut b { overflow-wrap: anywhere; }
.rc-card .card-h { flex-wrap: wrap; }
@media (max-width: 760px) { .rc-main { grid-template-columns: minmax(0, 1fr); } .rc-side { order: -1; } }
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .rc-main { grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr); gap: 8px; }
  .rc-side { order: 0; position: sticky; top: 0; }
  .rc-body { gap: 3px; }
  .rc-army { flex-direction: row; align-items: center; gap: 8px; }
  .rc-army > span { display: none; }
  .rc-army .army-row { max-width: 250px; width: 250px; margin: 0; }
  .rc-pick { gap: 3px; padding: 5px 8px; }
  .rc-big { width: 40px; height: 40px; }
  .rc-head .sub { font-size: 11px; }
  .rc-chips .ph-chip { font-size: 12px; }
  .rc-go { min-height: 32px; }
  /* «Нанять» beside its cost, the men waiting left to the dwelling's own card: the button in the first screen at
     640×360 and 812×375 (it was 6–15 px under the fold) */
  .rc-ph .rc-avail { display: none; }
  .rc-buy { flex-direction: row; align-items: center; gap: 8px; }
  .rc-buy .rc-cost { flex: 1 1 auto; min-width: 0; }
  .rc-buy .rc-go { flex: 0 0 auto; align-self: center; min-width: 108px; }
}
body.touch .rc-go { min-height: 44px; }
/* The island's town: HoMM3's town hall screen as a grid of its buildings' cards. */
.town { display: flex; flex-direction: column; gap: 8px; }
.tw-head > p { margin: 0 0 4px; font-size: 12px; }
.tw-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tw-meta .btn { margin-left: auto; }
.tw-week b { color: var(--gold); font-weight: 600; }
.tw-res { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; margin-top: 4px; font-size: 12px; }
.tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.tw-card { min-width: 0; padding: 6px 8px 8px; background: rgba(6, 6, 7, 0.5); border: 1px solid rgba(140, 107, 58, 0.3); border-radius: 3px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.tw-card.built { border-color: rgba(140, 107, 58, 0.6); background: rgba(10, 9, 8, 0.7); }
.tw-card:not(.built) .tw-art { opacity: 0.7; filter: grayscale(0.4); }
.tw-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tw-art { width: 64px; height: 54px; object-fit: contain; flex: none; margin: 0; }
.tw-id { display: flex; flex-direction: column; min-width: 0; }
.tw-id b { font-family: var(--serif); font-size: 15px; color: var(--bone); overflow-wrap: anywhere; }
.tw-text { margin: 0; font-size: 11.5px; line-height: 1.3; }
.tw-pool { margin: 0; color: var(--good); font-size: 12px; }
.tw-why, .tw-max { margin: 0; font-size: 11.5px; }
.tw-orders { display: flex; flex-direction: column; gap: 5px; margin: 2px 0; }
.tw-floor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tw-fl { font-size: 11px; flex-basis: 100%; }
.tw-ord { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 3px; border: 1px solid rgba(232, 196, 106, 0.45); border-radius: 12px; background: rgba(20, 16, 10, 0.6); color: var(--text, #e8dcc0); font: inherit; font-size: 11.5px; line-height: 1.3; cursor: pointer; }
.tw-ord:hover:not([disabled]) { border-color: var(--gold, #e8c46a); background: rgba(232, 196, 106, 0.14); }
.tw-ord[disabled] { opacity: 0.5; cursor: default; }
.tw-ord.known { border-color: rgba(127, 208, 138, 0.5); color: var(--good, #7fd08a); cursor: default; }
.tw-next { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 4px; border-top: 1px solid rgba(111, 90, 56, 0.22); }
.tw-nn { font-size: 12px; color: var(--bone); }
.tw-next .btn { align-self: flex-start; }
.tw-job { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.tw-job .bspeed { display: flex; flex-wrap: wrap; gap: 4px; }
.tw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.tw-mine { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.tw-mk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.tw-mk .field { min-height: 30px; }
.tw-mk input.field { width: 90px; }
.tw-mkout { margin: 4px 0 0; color: var(--gold); font-size: 13px; }
.tw-rates { margin: 0 0 4px; font-size: 11.5px; }
@media (max-height: 520px) and (min-aspect-ratio: 1/1) { .tw-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); } .tw-art { width: 48px; height: 40px; } }
/* ------------------------------------------------------------------ docs/17 H2: the captain as a hero */
/* docs/25 items 37–43: the captain window's «Умения» — a card an ability: rank pips, its numbers, the next rank, the
   facets of ranks 3 and 5 (two buttons each), the talent and the combo. Two columns on a desk, one on a phone. */
.sk-page { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-note { margin: 0; font-size: 12px; line-height: 1.35; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 8px; }
.sk-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid rgba(176, 141, 87, 0.45); border-radius: 7px; background: rgba(20, 16, 10, 0.55); min-width: 0; }
.sk-card.ult { border-color: rgba(224, 184, 98, 0.75); box-shadow: inset 0 0 14px rgba(224, 184, 98, 0.12); }
.sk-card.pas { border-style: dashed; }
.sk-card.off { opacity: 0.62; }
.sk-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sk-head b { font-family: var(--display); font-weight: 400; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.sk-ico { width: 30px; height: 30px; flex: none; }
.sk-key { flex: none; min-width: 20px; padding: 0 5px; border-radius: 4px; background: rgba(224, 184, 98, 0.2); color: var(--gold); font-size: 11px; line-height: 18px; text-align: center; }
.sk-rank { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--gold); white-space: nowrap; }
.sk-now { font-size: 12px; line-height: 1.35; color: var(--bone); }
.sk-next { font-size: 11.5px; line-height: 1.3; color: #9fd0a0; display: flex; gap: 4px; align-items: flex-start; }
.sk-next.sk-top { color: var(--fog); }
.sk-tal, .sk-combo { font-size: 11px; line-height: 1.3; color: var(--fog); display: flex; gap: 4px; align-items: flex-start; }
.sk-combo { color: #ffd66b; }
.sk-facets { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.sk-frow { display: flex; flex-direction: column; gap: 3px; }
.sk-frow.locked { opacity: 0.55; }
.sk-fr { font-size: 11px; color: var(--gold); }
.sk-fr i { font-style: normal; color: var(--fog); }
.sk-frow.wait .sk-fr i { color: #ffd66b; }
.sk-fbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.sk-f { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 5px 7px; min-height: 44px; border: 1px solid rgba(176, 141, 87, 0.45); border-radius: 6px; background: rgba(30, 22, 12, 0.7); color: var(--bone); text-align: left; min-width: 0; cursor: pointer; }
.sk-f b { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.sk-f small { font-size: 10.5px; line-height: 1.25; color: var(--fog); overflow-wrap: anywhere; }
.sk-f.on { border-color: var(--gold); background: rgba(70, 52, 22, 0.8); box-shadow: 0 0 10px rgba(224, 184, 98, 0.3); }
.sk-f:disabled { cursor: default; }
.sk-f:disabled:not(.on) { opacity: 0.6; }
.sk-frow.wait .sk-f:not(:disabled) { border-color: rgba(255, 214, 107, 0.8); }
@media (max-width: 420px) { .sk-fbtns { grid-template-columns: 1fr; } }
.hero-win { display: flex; flex-direction: column; gap: 10px; }
.hero-win .gi-h { margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.hx-dot { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #b8452e; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.hx-top { display: flex; gap: 12px; align-items: stretch; }
.hx-face { position: relative; flex: none; width: 112px; height: 132px; border-radius: 6px; background: #111 center 18% / cover; box-shadow: 0 0 0 2px var(--brass-dim), 0 0 12px #000; }
.hx-lv { position: absolute; right: -6px; bottom: -6px; min-width: 26px; height: 26px; border-radius: 13px; background: #1a140c; border: 2px solid var(--gold); color: var(--gold); font-family: var(--display); font-size: 15px; display: flex; align-items: center; justify-content: center; }
.hx-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hx-prims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hx-prim { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 1px solid rgba(176, 141, 87, 0.45); border-radius: 6px; background: rgba(20, 16, 10, 0.55); min-width: 0; text-align: center; }
.hx-prim .ico-md { width: 34px; height: 34px; }
.hx-pn { font-size: 11px; color: var(--fog); line-height: 1.1; overflow-wrap: anywhere; }
.hx-pv { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--bone); line-height: 1; }
.hx-pa { font-size: 10px; color: #7fd07a; }
.hx-will { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.hx-wbar { flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(90, 140, 200, 0.4); overflow: hidden; min-width: 40px; }
.hx-wbar i { display: block; height: 100%; background: linear-gradient(90deg, #2d5f9a, #6fb4e8); }
.hx-offer { padding: 8px 10px; border-color: var(--gold); box-shadow: 0 0 14px rgba(224, 184, 98, 0.25); }
.hx-offer .card-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hx-pend { font-size: 12px; margin-left: auto; }
.hx-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hx-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border: 1px solid rgba(176, 141, 87, 0.55); border-radius: 8px; background: rgba(30, 22, 12, 0.7); color: var(--bone); text-align: center; min-width: 0; }
.hx-pick:hover { border-color: var(--gold); background: rgba(60, 44, 22, 0.75); }
.hx-pick .ico-lg { width: 48px; height: 48px; }
.hx-pick-t { display: flex; flex-direction: column; gap: 3px; align-items: center; min-width: 0; }
.hx-pick-t b { font-family: var(--display); font-weight: 400; font-size: 17px; }
.hx-pick-t small { font-size: 12px; line-height: 1.3; }
/* The two offers' «Take» on one line, at each card's foot (a shorter text left one 16 px higher). */
.hx-pick > .btn { margin-top: auto; }
.hx-rank { font-size: 11px; color: var(--gold); display: inline-flex; gap: 4px; align-items: center; }
.hx-pips { display: inline-flex; gap: 2px; }
.hx-pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 0 1px rgba(224, 184, 98, 0.5); }
.hx-pips i.on { background: var(--gold); }
.hx-none { margin: 0; }
.hx-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hx-slot { display: flex; gap: 6px; align-items: flex-start; padding: 6px; border: 1px solid rgba(176, 141, 87, 0.4); border-radius: 6px; background: rgba(20, 16, 10, 0.5); min-width: 0; }
.hx-slot.empty { align-items: center; justify-content: center; opacity: 0.6; border-style: dashed; min-height: 44px; }
.hx-sico { font-size: 18px; color: var(--brass); }
.hx-st { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hx-st b { font-size: 13px; overflow-wrap: anywhere; }
.hx-st small { font-size: 11px; color: var(--fog); line-height: 1.25; }
.hx-sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hx-set { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid rgba(176, 141, 87, 0.3); border-radius: 6px; font-size: 12px; min-width: 0; }
.hx-set.on { border-color: #ff8000; box-shadow: 0 0 10px rgba(255, 128, 0, 0.3); }
.hx-set small { color: var(--fog); }
.hx-schools { padding: 0; flex-wrap: wrap; }
.hx-note { margin: 0; font-size: 12px; }
.hx-orders { display: flex; flex-direction: column; gap: 5px; }
.hx-order, .hx-ware { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid rgba(176, 141, 87, 0.3); border-radius: 6px; background: rgba(20, 16, 10, 0.45); opacity: 0.72; }
.hx-order.known { opacity: 1; border-color: rgba(176, 141, 87, 0.65); }
.hx-order.high { opacity: 0.5; }
.hx-ware { opacity: 1; border-width: 1px 1px 1px 4px; }
.hx-ot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hx-ot small { font-size: 12px; line-height: 1.3; }
.hx-otag { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font-size: 11px; }
.hx-otag .tag { padding: 0 5px; border-radius: 3px; background: rgba(176, 141, 87, 0.2); }
.hx-otag .tag.sea { background: rgba(60, 130, 190, 0.3); }
.hx-otag .tag.battle { background: rgba(180, 70, 50, 0.3); }
.hx-otag .tag.will { background: rgba(80, 120, 200, 0.25); color: #9cc6f0; }
.hx-otag .tag.stam { background: rgba(200, 140, 60, 0.25); color: #f2b56b; }
.hx-order .btn, .hx-ware .btn { flex: none; }
.hx-wares { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 620px) {
  .hx-face { width: 76px; height: 92px; }
  .hx-prims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-prim { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 4px 6px; text-align: left; }
  .hx-prim .ico-md { width: 24px; height: 24px; }
  .hx-pv { font-size: 18px; margin-left: auto; }
  .hx-pa { display: none; }
  .hx-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-sets { grid-template-columns: 1fr; }
  .hx-picks { grid-template-columns: 1fr; }
  .hx-pick { flex-direction: row; text-align: left; }
  .hx-pick > .btn { margin-top: 0; align-self: center; }
  .hx-pick-t { align-items: flex-start; }
  .hx-order, .hx-ware { flex-wrap: wrap; }
}
/* The HUD's sea orders. */
#hud-orders { display: flex; align-items: stretch; gap: 3px; padding: 3px 4px !important; pointer-events: auto; }
#hud-orders.hidden { display: none; }
#hud-orders button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 40px; padding: 2px 3px; border: 1px solid rgba(176, 141, 87, 0.5); border-radius: 5px; background: rgba(16, 20, 28, 0.8); color: var(--bone); cursor: pointer; }
#hud-orders button .ico-sm { width: 24px; height: 24px; border-radius: 3px; object-fit: cover; }
#hud-orders button small { font-size: 10px; line-height: 1; color: #9cc6f0; }
#hud-orders .so-will { flex: 1.6 1 0; flex-direction: row; gap: 2px; border-color: rgba(90, 140, 200, 0.6); }
#hud-orders .so-will .ico-sm { width: 18px; height: 18px; }
#hud-orders .so-will b { font-size: 13px; color: #9cc6f0; }
#hud-orders .so-btn.off { opacity: 0.45; }
#hud-orders .so-btn.sent { box-shadow: 0 0 8px #6fb4e8; }
@media (max-height: 520px) { #hud-stack > #hud-orders { order: -1; } }
/* The hero beside the boarding field. */
.tb-prims { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 1px; font-size: 11px; color: var(--bone); }
.tb-hero.foe .tb-prims { justify-content: flex-end; }
.tb-prim { display: inline-flex; align-items: center; gap: 1px; }
.tb-prim .ico-xs { width: 14px; height: 14px; border-radius: 2px; }
.tb-will { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; border: 1px solid rgba(90, 140, 200, 0.6); border-radius: 5px; background: rgba(16, 20, 28, 0.8); color: #9cc6f0; font-size: 13px; }
.tb-will small { color: var(--fog); }
.tb-cost { font-style: normal; font-size: 11px; color: #9cc6f0; margin-left: 2px; }
.tb-spell.poor { opacity: 0.55; }
.tb-bookbtn { display: flex; align-items: center; gap: 6px; text-align: left; padding: 4px 8px; min-height: 44px; min-width: 0; border-color: var(--gold); }
.tb-bookbtn .ico { width: 30px; height: 30px; flex: none; margin: 0; border-radius: 4px; }
.tb-bookbtn span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tb-bookbtn b { font-size: 12px; }
.tb-bookbtn small { font-size: 10px; color: var(--fog); }
.tb-book { position: absolute; inset: 4% 6% auto; max-height: 92%; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--gold); border-radius: 8px; background: rgba(18, 13, 8, 0.96); box-shadow: 0 0 24px #000; overflow: auto; }
.tb-book.hidden { display: none; }
.tb-will { grid-column: 1 / -1; min-height: 22px; }
@media (max-height: 520px) and (orientation: landscape) {
  .tb-will { min-height: 18px; font-size: 11px; }
  .tb-bookbtn { justify-content: center; padding: 2px; min-height: 34px; gap: 0; }
  .tb-bookbtn .ico { width: 20px; height: 20px; }
  .tb-bookbtn span { display: none; }
  .tb-book { inset: 2% 3%; padding: 6px 8px; }
  .tb-book .tb-spell { justify-content: flex-start; gap: 4px; padding: 2px 4px; }
  .tb-book .tb-spell span { display: flex; }
  .tb-book .tb-spell small { display: none; }
}
/* The order book as HoMM3's (2026-10-03): an open book over the field, two facing pages of orders, a bookmark for
   each school down its right edge, the corners to turn; painted (bg.spellbook) or parchment until then. Its size is
   set from the field's (--bk-w), everything in it scales with it. */
.tb-book.bk { position: fixed; z-index: 30; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--bk-w); height: calc(var(--bk-w) * 9 / 16); max-height: none;
  display: block; padding: 0; gap: 0; overflow: visible; border-radius: 6px; color: #2e1f0e;
  --bk-t: 7%; --bk-b: 9%; --bk-o: 9%; --bk-i: 2.5%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 48%, rgba(60, 38, 16, 0.35) 49.6%, rgba(20, 12, 4, 0.55) 50%, rgba(60, 38, 16, 0.35) 50.4%, rgba(0, 0, 0, 0) 52%),
    radial-gradient(ellipse at 50% 50%, #eadcb8 0%, #dcc79a 70%, #c4a974 100%) padding-box,
    linear-gradient(#2b1a0d, #1a0f07) border-box;
  border: max(4px, calc(var(--bk-w) * 0.012)) solid transparent; box-shadow: 0 10px 40px #000, inset 0 0 calc(var(--bk-w) * 0.04) rgba(80, 50, 20, 0.45); }
.tb-book.bk.painted { background: center / 100% 100% no-repeat; border: none; box-shadow: none; filter: drop-shadow(0 10px 24px #000);
  --bk-t: 12%; --bk-b: 28%; --bk-o: 17.5%; --bk-i: 2.8%; }
/* (--bk-b: the painting's parchment ends at 73.5–78 % of its height — lowest by the spine and the right page's curl; at
   25 % the lowest row's prices lay 4–5 px over that edge, QA 2026-10-09) */
/* On the painting the corners to turn sit at the pages' lower corners, the bookmarks and the close on the table. */
.tb-book.bk.painted .bk-turn.prev { left: 11%; bottom: 21%; }
.tb-book.bk.painted .bk-turn.next { right: 11%; bottom: 21%; }
.tb-book.bk.painted .bk-tabs { right: 2.5%; top: 24%; }
.tb-book.bk.painted .bk-close { right: 2.5%; top: 11%; }
/* While the book is open the sea's news waits (a toast would lie over its pages). */
body:has(.tb-book.bk:not(.hidden)) #toasts { display: none; }
.bk-page { position: absolute; top: var(--bk-t); bottom: var(--bk-b); display: flex; flex-direction: column; gap: 2%; min-width: 0; }
.bk-page.l { left: var(--bk-o); right: calc(50% + var(--bk-i)); }
.bk-page.r { left: calc(50% + var(--bk-i)); right: var(--bk-o); }
.bk-page h4 { margin: 0; text-align: center; font-family: var(--display); font-weight: 400; font-size: max(12px, calc(var(--bk-w) * 0.022)); line-height: 1.2; color: #3d230c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-will { min-height: calc(var(--bk-w) * 0.027); display: flex; align-items: center; }
.bk-will .tb-will { flex: 1; min-height: 0; display: flex; gap: 4%; }
.bk-will .tb-store { flex: 1; font-size: max(10px, calc(var(--bk-w) * 0.014)); color: #1b4366; }
.bk-will .tb-store.stam { color: #5f300a; }
.bk-will .tb-rbar { background: rgba(60, 38, 16, 0.25); border-color: rgba(90, 60, 20, 0.5); }
.bk-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--bk-rows, 3), minmax(0, 1fr)); gap: 3% 5%; }
.bk-sp { appearance: none; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2%;
  background: none; border: 1px solid transparent; border-radius: 4px; color: inherit; font: inherit; cursor: pointer; }
.bk-sp:hover:not(:disabled) { background: rgba(120, 80, 30, 0.14); border-color: rgba(90, 60, 20, 0.45); }
.bk-sp.on { border-color: #8a5a1a; background: rgba(176, 120, 40, 0.2); }
.bk-sp:disabled { cursor: default; opacity: 0.75; filter: grayscale(0.7); }
/* In a short row (a phone on its side) the icon gives way, never the name or the cost: they keep their lines. */
.bk-sp .bk-ico { width: auto; aspect-ratio: 1; height: max(28px, calc(var(--bk-w) * 0.058)); flex: 0 1 auto; min-height: 18px; object-fit: contain; border-radius: 4px; box-shadow: 0 1px 4px rgba(30, 15, 0, 0.6); }
.bk-sp b, .bk-sp small { flex: none; }
.bk-sp b { max-width: 100%; font-family: var(--serif); font-size: max(10px, calc(var(--bk-w) * 0.0145)); font-weight: 600; line-height: 1.1; text-align: center; color: #2e1f0e;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-sp small { display: flex; align-items: center; gap: 2px; font-size: max(9px, calc(var(--bk-w) * 0.0125)); color: #523410; line-height: 1; }
.bk-sp small .ico-xs { width: max(10px, calc(var(--bk-w) * 0.015)); height: max(10px, calc(var(--bk-w) * 0.015)); }
.bk-no { position: absolute; bottom: calc(var(--bk-w) * -0.03); font-style: normal; font-family: var(--serif); font-size: max(9px, calc(var(--bk-w) * 0.012)); color: #523410; }
.bk-page.l .bk-no { left: 0; }
.bk-page.r .bk-no { right: 0; }
.bk-tabs { position: absolute; right: 1.6%; top: calc(var(--bk-t) + 6%); display: flex; flex-direction: column; gap: calc(var(--bk-w) * 0.006); }
.bk-tab { appearance: none; width: max(26px, calc(var(--bk-w) * 0.046)); height: max(26px, calc(var(--bk-w) * 0.046)); padding: 2px; border: 1px solid var(--brass-dim); border-radius: 4px;
  background: #1b130b; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.bk-tab .ico { width: 100%; height: 100%; margin: 0; border-radius: 3px; display: block; }
.bk-tab.on { border-color: var(--gold); box-shadow: 0 0 8px rgba(232, 196, 106, 0.6); }
.bk-turn, .bk-close { appearance: none; position: absolute; display: grid; place-items: center; width: calc(var(--bk-w) * 0.04); height: calc(var(--bk-w) * 0.04);
  min-width: 26px; min-height: 26px; padding: 0; border: 1px solid var(--brass-dim); border-radius: 50%; background: #1b130b; color: var(--gold);
  font-size: calc(var(--bk-w) * 0.024); line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.bk-turn:disabled { opacity: 0.35; cursor: default; }
.bk-turn.prev { left: 1.6%; bottom: 3%; }
.bk-turn.next { right: 1.6%; bottom: 3%; }
.bk-close { right: 1.6%; top: 3%; }
/* docs/23 (2026-10-09): an order's whole words — beside a page of the panel or the book under the mouse or a key's
   focus, over a card of a phone's book held by a finger (client/src/ui/tactical.ts showWords). Above the sheets. */
.tb-words { position: fixed; z-index: 78; width: min(300px, calc(100vw - 16px)); box-sizing: border-box; padding: 8px 11px 9px; pointer-events: none;
  background: rgba(14, 12, 10, 0.97); border: 1px solid var(--brass-dim); border-top: 3px solid var(--gold); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65);
  color: var(--bone); font-size: 12.5px; line-height: 1.38; text-align: left; }
.tb-words.hidden { display: none; }
.tb-words-h { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.tb-words-h .ico { width: 34px; height: 34px; flex: none; margin: 0; border-radius: 4px; }
.tb-words-h span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tb-words-h b { font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--gold); }
.tb-words-h b .ico-xs { width: 13px; height: 13px; margin: 0 1px 0 0; vertical-align: -1px; }
.tb-words-h small { color: var(--fog); font-size: 11px; }
.tb-words p { margin: 0; }
.tb-words p.tb-words-why { margin-top: 5px; color: #e3998a; font-size: 11.5px; }
/* A page of the desk's panel stands the same height every turn — its words, «через 4» or «не хватает воли» — so
   nothing under it moves (a cast page fell from 61 to 50 px and the column shifted, QA 2026-10-09); its words take the
   lines the screen's height gives (2 up to 700 px, 3 up to 860, 4 above), the whole of them beside it (.tb-words). */
@media (min-width: 900px) and (min-height: 521px) and (min-aspect-ratio: 7/5) {
  .tb-root .tb-spells { --pg-lines: 2; gap: 5px; }
  .tb-root .tb-spells .tb-spell { box-sizing: border-box; height: calc(16px + 1.15 * 14px + var(--pg-lines) * 1.15 * 11px); min-height: 0; padding-top: 2px; padding-bottom: 2px; }
  .skinned .tb-root .tb-spells .tb-spell { border-width: 5px 9px; border-image-width: 5px 9px; }
  .tb-root .tb-spells .tb-spell small { -webkit-line-clamp: var(--pg-lines); line-clamp: var(--pg-lines); }
}
@media (min-width: 900px) and (min-height: 701px) and (min-aspect-ratio: 7/5) { .tb-root .tb-spells { --pg-lines: 3; } }
@media (min-width: 900px) and (min-height: 861px) and (min-aspect-ratio: 7/5) { .tb-root .tb-spells { --pg-lines: 4; } }
/* docs/17 H4: the adventure map's visit card over the sea (placed like the lair's chest), and the Grail's chart. */
#advcard { position: fixed; left: 50%; top: calc(var(--sa-t, 0px) + 150px); transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); z-index: 40; pointer-events: auto; display: grid; gap: 6px; }
#advcard.hidden { display: none; }
body:has(#board-tac:not(.hidden)) #advcard, body:has(#modal:not(.hidden)) #advcard, body:has(#lairchest:not(.hidden)) #advcard { visibility: hidden; }
#advcard .enc-card { background: rgba(10, 12, 16, 0.94); border: 1px solid rgba(232, 196, 106, 0.6); border-radius: 6px; padding: 8px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
#advcard .ac-gcard { border-color: rgba(208, 80, 60, 0.7); }
#advcard .enc-h { font-family: var(--serif); font-size: 17px; color: #f4efe2; line-height: 1.2; overflow-wrap: anywhere; }
#advcard .ac-lvl { font: 700 11px/1 var(--sans); color: var(--gold); vertical-align: middle; }
#advcard .ac-head { display: flex; align-items: center; gap: 10px; }
#advcard .ac-id { flex: 1; min-width: 0; }
#advcard .ac-art { width: 54px; height: 54px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px #000); }
#advcard .ac-obelisk { filter: grayscale(1) brightness(0.55) drop-shadow(0 2px 4px #000); }
#advcard .ac-x { flex: none; align-self: flex-start; min-width: 32px; min-height: 32px; background: none; border: 0; color: var(--muted, #9aa); font-size: 20px; line-height: 1; cursor: pointer; }
#advcard .ac-sub { font-size: 12px; margin-top: 2px; }
#advcard .ac-text { margin: 6px 0; font-size: 12.5px; line-height: 1.4; }
#advcard .ac-line { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.35; color: var(--bone, #ddd); margin: 4px 0; }
#advcard .ac-warn { color: #f09a8a; }
#advcard .ac-why { font-size: 12px; }
#advcard .ac-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#advcard .ac-acts .btn { min-height: 34px; display: inline-flex; align-items: center; gap: 4px; }
#advcard .ac-guard { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(208, 80, 60, 0.35); }
#advcard .ac-gw { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--bone, #ddd); }
#advcard .ac-word { color: #f09a8a; font-family: var(--serif); font-size: 16px; }
#advcard .ac-gl { font-size: 12px; margin-top: 2px; }
#advcard .ac-offer { margin-top: 4px; font-size: 13px; color: var(--gold); }
#advcard .tg-army-faces { display: inline-flex; gap: 2px; margin-left: 4px; }
@media (max-height: 520px) { #advcard { top: calc(var(--sa-t, 0px) + 6px); left: calc(var(--sa-l, 0px) + 240px); transform: none; width: min(410px, calc(100vw - 240px - 165px - var(--sa-l, 0px) - var(--sa-r, 0px))); min-width: 250px; gap: 4px; } #advcard .enc-card { padding: 6px 8px; } #advcard .ac-art { width: 32px; height: 32px; } #advcard .enc-h { font-size: 14px; } #advcard .ac-sub { font-size: 11px; } #advcard .ac-text, #advcard .ac-come, #advcard .ac-pay { display: none; } #advcard .ac-line { margin: 2px 0; font-size: 12px; } #advcard .ac-guard { margin-top: 3px; padding-top: 3px; } #advcard .ac-gl, #advcard .ac-offer { font-size: 11.5px; } #advcard .ac-acts { margin-top: 4px; flex-wrap: nowrap; } #advcard .ac-acts .btn { min-height: 30px; padding: 2px 8px; white-space: nowrap; } }
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 521px) { #advcard { top: calc(var(--sa-t, 0px) + var(--mm) + 56px); } }
/* A wide screen: in the left column under the ship's panel, clear of the target frame and the sea in the middle. */
@media (min-width: 1100px) and (min-height: 521px) { #advcard { left: calc(var(--sa-l, 0px) + 14px); top: calc(var(--sa-t, 0px) + 384px); transform: none; width: 340px; } }
@media (max-width: 699px) and (min-height: 521px) { #advcard { top: calc(var(--sa-t, 0px) + 160px); } #advcard .ac-text { display: none; } #advcard .ac-art { width: 42px; height: 42px; } }
/* Short of a wide screen the card takes the top stack's place while it is up (as the lair's chest does): the sea in
   the middle stays clear for the ship and the guard. */
@media (max-width: 1099px), (max-height: 520px) { body:has(#advcard:not(.hidden)) #hud-stack { visibility: hidden; } }
.pz-body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 4px 2px 8px; }
.pz-wrap { flex: 1 1 320px; max-width: 560px; min-width: 0; }
.pz-canvas { display: block; width: 100%; border-radius: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); }
.pz-side { flex: 1 1 200px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.pz-side p { margin: 0; font-size: 13px; line-height: 1.45; }
.pz-region { color: var(--gold); font-family: var(--serif); font-size: 16px; }
.pz-status { font-size: 14px; }
#modal-panel[data-modal="puzzle"] { max-width: 900px; }
@media (max-height: 520px) and (min-aspect-ratio: 1/1) { .pz-wrap { flex: 0 0 auto; width: min(300px, calc(100vh - 120px)); } }
/* The Grail in the town (docs/17 H4): its card gilded. */
.tw-card[data-town="grail"] { border-color: rgba(232, 196, 106, 0.55); }
.tw-card[data-town="grail"].built { box-shadow: 0 0 18px rgba(232, 196, 106, 0.35), inset 0 0 22px rgba(232, 196, 106, 0.12); }
.tw-card[data-town="grail"] .tw-art { filter: drop-shadow(0 0 8px rgba(255, 210, 120, 0.7)); }
/* docs/17 H5 (QA): the chart's lines under the minimap grew a line each with H3 and H4 (the week, the waters' levels);
   the touch micro menu and, on a phone, the top stack stand under them however many there are (--rg-bottom: hud.ts). */
@media (max-width: 699px) and (min-height: 521px) {
  #hud-stack, body.touch #hud-stack { top: max(calc(var(--sa-t) + var(--top-h)), calc(var(--rg-bottom, 0px) + 6px)); }
}
/* docs/17 H5 (QA): a phone held sideways — the adventure map's card keeps to the middle column, between the captain's
   plate and the right column's buttons (the card stood over the plate). */
@media (max-height: 520px) {
  #advcard { left: calc(var(--sa-l) + 360px); width: min(410px, calc(100vw - 360px - var(--mm) - 70px - var(--sa-l) - var(--sa-r))); min-width: 0; }
  #advcard .ac-acts .btn { padding: 2px 6px; font-size: 11px; }
  #advcard .ac-sub, #advcard .ac-warn { display: none; }
}
/* docs/17 H5 (QA): on a desktop narrower than 1600 px the micro menu's one row (ten buttons, 454 px) met the bottom
   block (the action bar grew a slot and the ship's level): two rows, the compass raised over them. The premium shop's
   coin made the buttons eleven (owner, 2026-10-03): five a row ran to a third row, into the compass, and one row of
   eleven (520 px) meets the bottom block below 1680 px — six a row of 38 px, clear of it from 1100 px. */
@media (min-width: 1100px) and (max-width: 1679px) and (min-height: 600px) {
  body:not(.touch) .micro-menu { display: grid; grid-template-columns: repeat(6, 38px); gap: 6px; }
  body:not(.touch) .micro-menu button { width: 38px; height: 38px; }
  body:not(.touch) #hud-nav { bottom: 108px; }
}
/* docs/17 H5 (QA): the First Watch's step heads the top stack (a phone's stack scrolls; the step fell out of sight
   under the target frame and the fishing card once the guns came in). */
#hud-stack > #hud-watch { order: -3; }

/* docs/18 III: the minimap's tooltip, an island's level on the land key's prompt, «where is my level», the supply tab. */
.mm-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 280px; padding: 5px 9px; border-radius: 6px; background: rgba(10, 12, 14, 0.92); border: 1px solid rgba(176, 141, 87, 0.55); color: #e8dcc0; font: 600 12px/1.35 Inter, sans-serif; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); }
.mm-tip.hidden { display: none; }
/* The words keep at least a line's room; in a narrow column (the chart's logs beside it) the button goes under them
   rather than cut them to a letter a line (QA, 2026-10-04). */
.zone-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; }
.zone-hint span { flex: 1 1 180px; min-width: 0; }
.zone-hint .btn { flex: none; }
.sup-body { display: block; }
.sup-head h3 { margin: 4px 0 2px; font-size: 16px; }
.sup-head p { margin: 0 0 8px; font-size: 13px; }
.sup-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 13px; }
.sup-meta .bad { color: var(--bad); }
.sup-list { display: flex; flex-direction: column; gap: 8px; }
.sup-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 1px solid rgba(176, 141, 87, 0.3); border-radius: 8px; background: rgba(14, 16, 18, 0.55); }
.sup-row.on { border-color: rgba(200, 176, 122, 0.75); background: rgba(40, 34, 22, 0.55); }
.sup-name { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; }
.sup-name .muted { flex-basis: 100%; font-size: 12px; }
.sup-good { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.sup-good .good { color: var(--good); font-size: 12px; }
.sup-good .muted { font-size: 12px; }
.sup-none { margin-top: 6px; }
@media (max-width: 520px) {
  .sup-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sup-good { grid-column: 1 / -1; grid-row: 2; }
}
.sup-n { display: inline-flex; align-items: center; gap: 5px; }
/* docs/18: the hero's path in the boarding battle — her two stores (Will, Stamina), her path's innate move and
   ultimate beside the round's pages, and the Path book window. */
.tb-will { flex-wrap: wrap; justify-content: stretch; gap: 6px; padding: 2px 4px; }
.tb-store { flex: 1 1 90px; display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 12px; color: #9cc6f0; }
.tb-store.stam { color: #f2b56b; }
.tb-store .ico-xs { width: 14px; height: 14px; flex: none; margin: 0; border-radius: 2px; }
.tb-rbar { flex: 1 1 auto; min-width: 24px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tb-rbar > i { display: block; height: 100%; background: linear-gradient(90deg, #3d6fa8, #9cc6f0); }
.tb-store.stam .tb-rbar > i { background: linear-gradient(90deg, #a8602a, #f2b56b); }
.tb-cost.stam { color: #f2b56b; }
.tb-cost.scroll { color: #e0b862; }
.tb-spell.scroll { border-style: dashed; }
.tb-move { border-color: #b98a3c; background: linear-gradient(180deg, rgba(60, 40, 14, 0.9), rgba(26, 18, 8, 0.9)); }
.tb-move.ult { border-color: #e0b862; box-shadow: inset 0 0 10px rgba(224, 184, 98, 0.25); }
.tb-move.spent { opacity: 0.5; }
.tb-move b { color: var(--gold); }
.tb-moves { display: flex; align-items: center; gap: 3px; margin-top: 1px; font-size: 10.5px; color: var(--fog); min-width: 0; }
.tb-moves i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-hero.foe .tb-moves { justify-content: flex-end; }
.tb-mv { width: 16px; height: 16px; border-radius: 3px; border: 1px solid #b98a3c; }
.tb-mv.ult { border-color: #e0b862; }
.tb-mv.off { opacity: 0.35; filter: grayscale(1); }
.tb-stamv { color: #f2b56b; }
@media (max-height: 520px) and (orientation: landscape) {
  .tb-store { font-size: 10px; flex-basis: 70px; }
  .tb-moves i { display: none; }
}
@media (max-width: 480px) and (orientation: portrait) {
  .tb-moves i { display: none; }
  .tb-move small { display: none; }
}
/* The Path book window (client/src/ui/hero.ts). */
.pb-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pb-school { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--brass-dim); font-size: 12px; }
.pb-school.phys { color: #f2b56b; border-color: #8a5a2a; }
.pb-school.magic { color: #9cc6f0; border-color: #3d6fa8; }
.pb-stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; margin: 6px 0; }
.pb-moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.pb-move { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid #b98a3c; border-radius: 6px; background: rgba(40, 28, 12, 0.6); }
.pb-move.ult { border-color: #e0b862; }
.pb-move.locked { opacity: 0.6; }
.pb-move .ico-lg { flex: none; width: 44px; height: 44px; border-radius: 6px; }
.pb-move b { color: var(--gold); }
.pb-move small { display: block; line-height: 1.3; }
.pb-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.pb-page { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--brass-dim); border-radius: 6px; background: rgba(16, 13, 10, 0.6); min-width: 0; }
.pb-page.locked { opacity: 0.55; }
.pb-page .ico-md { flex: none; }
.pb-page b { display: block; }
.pb-page small { display: block; line-height: 1.3; }
.pb-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0; }
.pb-tags .tag { font-size: 10.5px; }
.pb-tags .tag.stam { color: #f2b56b; }
.pb-tags .tag.will { color: #9cc6f0; }
.pb-tags .tag.home { color: var(--gold); }
.pb-num { color: var(--bone); }
.pb-lift { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pb-lift .chip { font-size: 11px; }
.tal-book { display: block; color: var(--gold); font-size: 11px; }
.pb-tags .tag .ico-xs { width: 12px; height: 12px; margin: 0 3px 0 0; vertical-align: -2px; }

/* docs/18 II — the lairs of the land's creatures: a tinted token's brass frame, the lair's card (its chain, the faces
   with their numbers, the dwelling), the battle's spoils, the town's pen. */
.beast-tok { box-shadow: inset 0 0 0 2px #a8894e; border-radius: 50%; }
img.beast-tok { outline: 2px solid #a8894e; outline-offset: -2px; }
.army-mini { position: relative; }
.army-mini .ac-n { position: absolute; right: -1px; bottom: -3px; font: 700 9px/1 var(--sans); color: #f4efe2; text-shadow: 0 0 2px #000, 0 0 2px #000; font-style: normal; }
#advcard .ac-lcard .tg-army-faces { gap: 4px; }
#advcard .ac-lcard .army-mini { width: 22px; height: 22px; overflow: visible; }
#advcard .ac-lcard .army-mini .army-face-xs { border-radius: 50%; }
#advcard .ac-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--fog, #9aa); margin: 4px 0; }
#advcard .ac-chain i { font-style: normal; opacity: 0.6; }
#advcard .ac-step { padding: 1px 6px; border-radius: 10px; border: 1px solid rgba(232, 196, 106, 0.3); }
#advcard .ac-step.on { border-color: var(--gold); color: var(--gold); }
#advcard .ac-step.done { border-color: rgba(127, 208, 138, 0.6); color: var(--good, #7fd08a); }
#advcard .ac-dwell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(232, 196, 106, 0.3); font-size: 12.5px; color: var(--bone, #ddd); }
#advcard .ac-dwell .army-face-xs { width: 18px; height: 18px; vertical-align: middle; border-radius: 50%; }
.tb-loot { margin-top: 8px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.tb-loot small { color: var(--fog); font-size: 11px; }
.tb-lchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-lc { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border: 1px solid rgba(232, 196, 106, 0.35); border-radius: 10px; color: #f0e2bd; font-size: 12px; background: rgba(30, 24, 14, 0.6); }
.tb-lline { color: var(--gold); font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
.tb-lline .ico-sm { border-radius: 50%; }
.tw-pen { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.tw-nest { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tw-nest .ico-md { border-radius: 50%; }
.tw-nest.grown b { color: var(--good, #7fd08a); }
.tw-eggs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; }
.tw-egg { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border: 1px solid rgba(232, 196, 106, 0.45); border-radius: 12px; background: rgba(20, 16, 10, 0.6); color: var(--text, #e8dcc0); font: inherit; font-size: 11.5px; cursor: pointer; }
.tw-egg[disabled] { opacity: 0.5; cursor: default; }
.tw-egg .ico-sm { border-radius: 50%; }
/* docs/18 II: the reckoning with the spoils fits the stage on a phone (it scrolls rather than run off it). */
.tb-banner.tb-result { max-height: calc(100% - 8px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 699px), (max-height: 520px) { .tb-banner.tb-result b { font-size: 22px; } .tb-loot { margin-top: 4px; gap: 3px; } }

/* docs/18 IV: the drift's card and its mini-game, the beaten who follow, the creatures' window. */
#advcard .ac-dcard { border-color: rgba(110, 215, 205, 0.45); }
#advcard .ac-dcard.legend { border-color: rgba(240, 200, 100, 0.75); box-shadow: 0 0 18px rgba(240, 200, 100, 0.18); }
#advcard .ac-dcard .army-mini { width: 22px; height: 22px; display: inline-flex; vertical-align: middle; position: relative; }
#advcard .ac-dcard .army-mini .army-face-xs { border-radius: 50%; }
#advcard .dw-leg { color: var(--gold); }
#advcard .dw-ways { flex-wrap: wrap; }
#advcard .dw-way { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; line-height: 1.2; padding: 4px 9px; }
#advcard .dw-way b { font-weight: 600; }
#advcard .dw-way .dw-p { font-variant-numeric: tabular-nums; color: var(--turq); font-size: 12px; }
#advcard .dw-way .bcost { font-size: 11px; display: inline-flex; align-items: center; gap: 2px; }
#advcard .dw-out { font-size: 12.5px; color: var(--bone); }
#advcard .dm-mini { margin-top: 6px; padding: 6px 8px; border: 1px solid rgba(110, 215, 205, 0.35); border-radius: 6px; background: rgba(5, 12, 14, 0.6); }
#advcard .dm-h { font-size: 12.5px; color: var(--bone); margin-bottom: 6px; }
#advcard .dm-bar { position: relative; height: 18px; border-radius: 9px; background: linear-gradient(90deg, #2a1416, #1c2629 50%, #2a1416); border: 1px solid rgba(255, 255, 255, 0.12); }
#advcard .dm-band { position: absolute; top: 2px; bottom: 2px; border-radius: 6px; background: rgba(110, 215, 205, 0.35); box-shadow: inset 0 0 0 1px rgba(110, 215, 205, 0.8); }
#advcard .dm-needle { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--bad); box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); }
#advcard .dm-needle.in { background: var(--turq); }
#advcard .dm-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; }
#advcard .dm-taps { display: inline-flex; gap: 5px; }
#advcard .dm-tap { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); }
#advcard .dm-tap.hit { background: var(--turq); border-color: var(--turq); }
#advcard .dm-tap.miss { background: var(--bad); border-color: var(--bad); }
#advcard .dm-go { min-width: 110px; justify-content: center; }
@media (max-height: 520px) { #advcard .dw-ways { flex-wrap: wrap; } #advcard .dw-way { padding: 2px 6px; } #advcard .dm-mini { padding: 4px 6px; } #advcard .dm-h { margin-bottom: 3px; font-size: 11.5px; } #advcard .dw-out { font-size: 11px; } }
.tb-cap { border-top: 1px solid rgba(110, 215, 205, 0.3); padding-top: 6px; }
.tb-capacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.army-tame { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.army-card .card-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tm-body { display: flex; flex-direction: column; gap: 10px; }
.tm-card { display: flex; flex-direction: column; gap: 6px; }
.tm-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.tm-row:last-child { border-bottom: 0; }
.tm-t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tm-t .muted { font-size: 12px; }
.tm-acts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.tm-stars { color: var(--gold); letter-spacing: 1px; }
.tm-peoples { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tm-peoples .ph-chip { height: 24px; font-size: 12px; }
.tm-peoples .ph-chip.good { border-color: var(--good); color: var(--good); }
.tm-rules { font-size: 12px; }
.warn { color: var(--gold); }
@media (max-width: 600px) { .tm-row { flex-wrap: wrap; } .tm-acts { width: 100%; justify-content: flex-start; } }
#advcard { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-height: 520px) { #advcard .dm-mini .ac-acts { flex-wrap: wrap; } #advcard .dm-go { min-width: 0; } #advcard .dm-mini .btn { white-space: normal; } }
.tm-stars .off { font-style: normal; opacity: 0.25; }
/* docs/18 V: the land's resources in the town, a settled dwelling and its kind's week on the lair's card, the paths'
   favourite creatures, the bestiary's pages; the minimap pressed long on a touch screen. */
.tw-lands { margin-top: 8px; }
.tw-land .card-h { gap: 6px; }
.tw-lstore { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 6px 0; }
.tw-lres { display: inline-flex; align-items: center; gap: 6px; }
.tw-lres .bcost .muted { font-weight: 400; margin-left: 1px; }
.tw-craft { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(140, 107, 58, 0.2); }
.tw-craft:first-of-type { border-top: 0; }
.tw-craft > .ico-md { flex: none; }
.tw-craft-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.tw-craft-t .bcosts { margin-top: 2px; }
.tw-craft > .btn { flex: none; }
@media (max-width: 480px) { .tw-craft { flex-wrap: wrap; } .tw-craft > .btn { margin-left: auto; } }
#advcard .ac-settle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
#advcard .ac-settled { font-size: 12px; }
#advcard .ac-week { font-size: 12px; }
.pb-fav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.pb-fav-k { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border: 1px solid rgba(232, 196, 106, 0.35); border-radius: 999px; background: rgba(10, 12, 16, 0.5); font-size: 12px; }
.pb-fav-k .ico-md { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.pb-fav-k i { font-style: normal; color: var(--bone); }
.rn-piece.rn-book { cursor: pointer; }
.rn-piece.rn-book:hover { border-color: var(--gold); }
.rn-piece.open { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.rn-page { margin-top: 8px; padding: 8px 10px; border: 1px solid rgba(224, 184, 98, 0.45); border-radius: 6px; background: rgba(12, 10, 8, 0.6); font-size: 12.5px; }
.rn-page-h { display: flex; align-items: center; gap: 10px; }
.rn-page-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rn-page-h b { font-family: var(--serif); font-size: 16px; color: #f4efe2; }
.rn-page-h .ico-lg { width: 56px; height: 56px; object-fit: contain; flex: none; }
.rn-page-stats { margin: 6px 0; color: var(--bone); line-height: 1.4; }
.rn-page-list { margin: 2px 0 6px; padding-left: 18px; line-height: 1.4; }
.rn-page-loot { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 2px 0 6px; }
#minimap { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* docs/18 #50: a path page's text keeps within its card (the long school names in English wrap). */
.pb-page > span, .pb-page > div:not(.pb-tags) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pb-tags .tag { white-space: normal; max-width: 100%; text-align: left; }
/* A toast never wider than its column (a long word in a talk line, the density's zoom on it). */
#toasts > .toast { box-sizing: border-box; max-width: calc(100% / var(--density, 1)); min-width: 0; overflow-wrap: anywhere; }
/* The chat's button stands one button (44 + 8 px) under the touch micro menu wherever H5 pushed the menu down
   (under the minimap's lines, --rg-bottom): it used to keep its old place and overlap the menu by a few pixels. */
@media (max-width: 699px) and (min-height: 521px) {
  #hud-chat .chat-toggle { top: calc(max(calc(var(--sa-t) + var(--top-h)), calc(var(--rg-bottom, 0px) + 6px)) + 52px); }
}
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 521px) {
  #hud-chat .chat-toggle { top: calc(max(calc(var(--sa-t) + var(--mm) + 64px), calc(var(--rg-bottom, 0px) + 6px)) + 52px); }
}

/* The context action bar over the guns (owner, 2026-10-02: "sailing up to things there should be buttons for what to
   do next"). One muted line of what stops her, then a row of buttons one height: an icon, a short word, the thing it
   is about, the key on a keyboard. The first is the gold one (the pad's A); three at most, the rest behind «⋯». */
#hud-prompt { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 13px var(--sans); text-shadow: none; max-width: min(100%, 620px); }
body.touch #hud-prompt { display: flex; }
#hud-prompt:empty, body.touch #hud-prompt:empty { display: none; }
.act-info { font: 11.5px/1.3 var(--sans); color: var(--fog); text-shadow: 0 1px 2px #000, 0 0 6px #000; text-align: center; max-width: min(92vw, 560px); text-wrap: balance; }
.act-info kbd { border: 1px solid var(--brass); color: var(--gold); padding: 0 4px; font: 600 10.5px var(--sans); margin: 0 2px; }
/* A short screen (hud.ts sets «ai-low» and --abm-b): the hint line takes the fire mode's place inside the bar (fixed: against
   #hud-bottom, whose transform holds it — #hud-prompt is positioned itself), in the
   bottom band (the popup budget); the fire mode's own line steps aside while it is there. */
body.ai-low #hud-prompt .act-info { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--abm-b, 58px); width: max-content; max-width: min(92vw, 520px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
body.ai-low:has(#hud-prompt .act-info) #hud-combat .ab-mode { visibility: hidden; }
/* A short screen: the adventure map's folded card names its thing in one line (a tap on the head opens the rest), and
   the bar's hint keeps to the bar's width — the card, the toasts and the hint stay within 15% of a 640×360 screen. */
@media (max-height: 520px) {
  #advcard .ac-card:not(.open) .enc-h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.ai-low #hud-prompt .act-info { max-width: min(50vw, 360px); }
}
.act-row { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: nowrap; max-width: 100%; pointer-events: none; }
.act-more-row { flex-wrap: wrap; }
.act-btn { --h: 34px; box-sizing: border-box; height: var(--h); display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; min-width: 0; max-width: 270px; flex: 0 0 auto;
  background: rgba(10, 11, 13, calc(var(--hud-a) * 0.95 + 0.1)); border: 1px solid rgba(140, 107, 58, 0.8); border-radius: 3px; color: var(--bone); font: 600 12.5px/1 var(--serif); letter-spacing: 0.02em;
  cursor: pointer; pointer-events: auto; touch-action: manipulation; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); -webkit-tap-highlight-color: transparent; }
.act-btn:hover { border-color: var(--brass); filter: brightness(1.15); }
.act-btn:active { transform: translateY(1px); }
.act-btn.primary { border-color: var(--gold); color: var(--gold); background: linear-gradient(180deg, rgba(62, 47, 23, 0.96), rgba(27, 21, 12, 0.96)); box-shadow: 0 0 10px rgba(224, 184, 98, 0.32), 0 3px 10px rgba(0, 0, 0, 0.5); animation: ctx-pulse 1.8s ease-in-out infinite; }
.act-btn.primary, .act-btn.act-look { flex-shrink: 1; }
.act-ico { width: 22px; height: 22px; object-fit: contain; flex: none; }
.act-ico.glyph { display: inline-flex; align-items: center; justify-content: center; }
.act-l { flex: none; }
.act-s { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; font: 11px/1 var(--sans); color: var(--fog); }
.act-btn.primary .act-s { color: #cdb98a; }
.act-k { flex: none; border: 1px solid var(--brass); color: var(--gold); padding: 0 4px; font: 600 10.5px/15px var(--sans); border-radius: 2px; margin-left: 1px; }
.act-toggle { padding: 0 10px; color: var(--fog); font: 600 12px/1 var(--sans); }
body.touch .act-btn { --h: 38px; }
@media (prefers-reduced-motion: reduce) { .act-btn.primary { animation: none; } }
/* A phone: the second and third buttons keep their word only. */
@media (max-width: 480px) {
  .act-btn:not(.primary):not(.act-look) .act-s { display: none; }
  .act-btn.primary .act-s { max-width: 150px; }
  .act-btn.act-look .act-s { max-width: 84px; }
  .act-btn { padding: 0 7px; font-size: 12px; }
}
/* A phone on its side: the bar between the helm and the guns, a little lower. */
@media (max-height: 520px) {
  .act-btn, body.touch .act-btn { --h: 32px; }
  .act-s { display: none; }
  .act-btn.primary .act-s { display: inline; max-width: 130px; }
  /* «⋯» open: the newest toast alone over the bar, so the column keeps under the stack. */
  body:has(#hud-prompt .act-more-row) #toasts .toast:nth-child(n+2) { display: none !important; }
  .act-info { font-size: 10.5px; }
}

/* docs/19 E1–E3, E18: the Throne of the Sea — glory, mastery, trials; the glory chip on the plate; a grandmaster. */
/* (as tall as the plate's last line: 18 px made the plate 3 px taller and laid it over the ship panel at 1280×720) */
.uf-glory { margin-left: 6px; padding: 0 6px; border: 1px solid var(--brass-dim); border-radius: 9px; background: rgba(30, 22, 12, 0.75); color: var(--gold); font: inherit; font-size: 10px; line-height: 13px; height: 15px; box-sizing: border-box; align-self: center; cursor: pointer; pointer-events: auto; white-space: nowrap; }
.uf-glory.wait { border-color: var(--gold); box-shadow: 0 0 8px rgba(224, 184, 98, 0.55); }
/* docs/19 E19: the chip opens the Throne from the captain's window — on touch a finger's reach round its 15 px (33×15 →
   45×45), not a pixel of the line moved. */
:where(body.touch) .uf-glory { position: relative; }
:where(body.touch) .uf-glory::after { content: ''; position: absolute; inset: -15px -6px; }
.hx-gm { margin-left: 2px; color: var(--gold); font-size: 11px; line-height: 7px; text-shadow: 0 0 6px rgba(224, 184, 98, 0.7); }
.hx-slot.gm { border-color: var(--gold); box-shadow: inset 0 0 12px rgba(224, 184, 98, 0.18); }
.hx-throne { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.gi-h:has(.hx-throne) { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.throne-win { display: flex; flex-direction: column; gap: 10px; }
.throne-win .tabs .tab { display: inline-flex; align-items: center; gap: 4px; }
.th-locked { margin: 8px 0; }
.th-head { display: flex; gap: 14px; align-items: center; }
.th-medal { flex: none; width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, #4a3818, #1a120a 70%); box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(176, 141, 87, 0.35), 0 0 18px rgba(224, 184, 98, 0.35); color: var(--gold); }
.th-medal span { font-size: 18px; line-height: 1; }
.th-medal b { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--bone); }
.th-hside { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.th-hside .gi-h { margin: 0; }
.th-bar { height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(224, 184, 98, 0.45); overflow: hidden; }
.th-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7a5a22, var(--gold)); }
.th-boons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.th-bt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border: 1px solid rgba(176, 141, 87, 0.55); border-radius: 8px; background: rgba(30, 22, 12, 0.7); text-align: center; min-width: 0; }
.th-bt b { font-family: var(--display); font-weight: 400; font-size: 16px; overflow-wrap: anywhere; }
.th-bt small { font-size: 12px; line-height: 1.3; color: var(--fog); }
.th-bt.full { opacity: 0.6; }
.th-bt .ico-lg { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; }
.th-bt .btn { margin-top: auto; }
.th-lift { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
.th-lift-r { display: flex; justify-content: space-between; gap: 6px; padding: 3px 6px; border-bottom: 1px solid rgba(176, 141, 87, 0.2); font-size: 13px; min-width: 0; }
.th-lift-r span { overflow-wrap: anywhere; }
.th-mhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.th-branches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
.th-branch { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.th-branch .card-h { display: flex; align-items: center; gap: 6px; margin: 0; }
.th-branch .card-h > span:first-of-type { display: flex; flex-direction: column; min-width: 0; font-family: var(--display); font-weight: 400; font-size: 17px; }
.th-branch .card-h small { font-family: var(--sans); font-size: 11px; line-height: 1.25; }
.th-bp { margin-left: auto; flex: none; font-size: 11px; color: var(--gold); }
.th-tier { display: flex; flex-direction: column; gap: 4px; }
.th-node { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: 'i t' 'b b'; gap: 4px 6px; padding: 6px; border: 1px solid rgba(176, 141, 87, 0.3); border-radius: 6px; background: rgba(20, 16, 10, 0.5); }
.th-node > .ico-md, .th-node > .glyph { grid-area: i; width: 34px; height: 34px; }
.th-node .th-nt { grid-area: t; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.th-node .th-nt b { font-size: 13px; overflow-wrap: anywhere; }
.th-node .th-nt small { font-size: 11px; line-height: 1.25; color: var(--fog); }
.th-node .btn { grid-area: b; justify-self: end; }
.th-node.on { border-color: rgba(224, 184, 98, 0.7); }
.th-node.shut { opacity: 0.55; }
.th-trials { display: flex; flex-direction: column; gap: 6px; }
.th-trial { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid rgba(176, 141, 87, 0.3); border-radius: 6px; background: rgba(20, 16, 10, 0.5); }
.th-trial.th-ready { border-color: rgba(224, 184, 98, 0.75); box-shadow: 0 0 10px rgba(224, 184, 98, 0.18); }
.th-trial.th-won { border-color: var(--gold); }
.th-trial.th-locked { opacity: 0.6; }
.th-face { position: relative; flex: none; width: 48px; height: 48px; }
.th-face .ico-lg { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 2px var(--brass-dim); object-fit: cover; object-position: 50% 18%; }
.th-face .th-sk { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: #1a140c; box-shadow: 0 0 0 1px var(--gold); }
.th-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.th-tt b { font-family: var(--display); font-weight: 400; font-size: 16px; }
.th-lg { font-size: 12px; color: var(--bone); overflow-wrap: anywhere; }
.th-tt small { font-size: 11px; line-height: 1.3; color: var(--fog); }
.th-st { flex: none; font-size: 12px; text-align: right; max-width: 30%; }
.th-st.won { color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.th-st.wait { color: var(--xp); }
.th-trial .btn { flex: none; }
.th-fight { display: flex; align-items: center; gap: 8px; padding: 8px; border-color: var(--blood); }
/* docs/19 E9: the seals of the deep — the seal's medal in the deep's teal, the week's afflictions, the way to its lair,
   the week's table. */
.th-medal.th-seal { background: radial-gradient(circle at 50% 38%, #17403f, #08141a 70%); box-shadow: 0 0 0 2px #6fc9bd, 0 0 0 5px rgba(111, 201, 189, 0.3), 0 0 18px rgba(46, 230, 200, 0.28); }
.th-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.th-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(176, 141, 87, 0.45); font-size: 12px; color: var(--bone); background: rgba(20, 16, 10, 0.5); }
.th-affixes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.th-affix { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid rgba(111, 201, 189, 0.35); border-radius: 6px; background: rgba(8, 20, 26, 0.55); }
.th-affix span { display: flex; flex-direction: column; min-width: 0; }
.th-affix small { color: var(--fog); font-size: 12px; line-height: 1.3; }
.th-pay { margin: 8px 0; font-size: 13px; color: var(--gold); }
.th-seal-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.th-seal-go .muted { flex: 1 1 180px; }
.th-seal-go .btn { flex: none; white-space: nowrap; }
/* docs/19 E11: the Abyss — the seven tiers in a row, the legend's army, how much of it is left. */
.th-raid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.th-rt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 6px; border: 1px solid rgba(111, 201, 189, 0.25); background: rgba(8, 20, 26, 0.5); min-width: 0; }
.th-rt b { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1; color: var(--fog); }
.th-rt span { font-size: 10px; line-height: 1.15; color: var(--fog); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.th-rt.done { border-color: rgba(176, 141, 87, 0.6); }
.th-rt.done b { color: var(--gold); }
.th-rt.on { border-color: #6fc9bd; box-shadow: 0 0 10px rgba(46, 230, 200, 0.25); }
.th-rt.on b, .th-rt.on span { color: var(--bone); }
.th-bar { height: 6px; margin-top: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.th-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2e8f86, #6fc9bd); }
.th-raid-army { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.th-unit { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 40px; }
.th-unit .army-face-xs { width: 34px; height: 34px; }
.th-unit b { font-size: 12px; font-weight: 600; color: var(--bone); font-variant-numeric: tabular-nums; }
@media (max-width: 699px) { .th-rt span { display: none; } .th-rt { padding: 6px 2px 2px; } } /* (a tier's number alone sat 2 px high in its cell) */
/* docs/19 E19: the Abyss's «На абордаж» in the first screen of a phone (640×360: 10 px under the fold). */
@media (max-height: 520px) { .th-raid { margin-bottom: 4px; } .throne-win:has(.th-raid) .th-head .th-medal { width: 52px; height: 52px; } .throne-win:has(.th-raid) .th-head .th-medal b { font-size: 20px; } }
/* docs/19 E19: on a phone on its side what waits for her hand comes first, under the tabs — a glory boon's choice above
   the rank, the Abyss's «На абордаж» above the tier's account (they were 3–147 px under the fold: 640×360's tabs take
   two rows). */
@media (max-height: 520px) {
  /* (a mastery node's «Изучить» beside its words, not under them: the first was 51 px under the fold at 640×360; the
     medals of the tabs' heads a size smaller — a contract's «Взять» was 3 px under it) */
  .th-node { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: 'i t b'; align-items: center; }
  .th-node .btn { align-self: center; }
  .th-branches { gap: 6px; }
  .th-branch { padding: 6px; gap: 4px; }
  .throne-win .th-head .th-medal { width: 52px; height: 52px; }
  .throne-win .th-head .th-medal b { font-size: 20px; }
  .throne-win > .tabs { order: -3; }
  .throne-win > .th-boon { order: -2; }
  .throne-win > .th-raid { order: -2; }
  .throne-win > .th-seal-go:has([data-thraid]) { order: -1; }
}
.th-why { margin: 4px 0 0; font-size: 12px; }
.th-board { margin: 0; padding: 0; list-style: none; counter-reset: th-row; display: flex; flex-direction: column; gap: 2px; }
.th-board li { counter-increment: th-row; display: flex; gap: 8px; align-items: baseline; padding: 3px 8px; border-radius: 4px; background: rgba(20, 16, 10, 0.4); font-size: 13px; }
.th-board li::before { content: counter(th-row) '.'; color: var(--fog); min-width: 1.6em; }
.th-board li b { flex: 1; font-weight: 600; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-board li.you { box-shadow: inset 0 0 0 1px var(--gold); }
@media (max-width: 1099px), (max-height: 520px) {
  body.touch .th-seal-go .btn { min-height: 44px; }
}
@media (max-width: 1099px) { .th-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px), (max-height: 520px) {
  .th-boons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  /* docs/19 E19: a boon a row — its face, name and pips, its words, «Взять» beside them — so the four and their buttons
     stand in the first screen (as tiles the first «Взять» was 73 px under the fold at 812×375, 147 px at 640×360). */
  .th-bt { display: grid; grid-template-columns: 36px auto minmax(0, 1fr) auto; grid-template-areas: 'i n r b' 'i s s b'; align-items: center; gap: 1px 8px; padding: 5px 8px; text-align: left; }
  .th-bt .ico-lg { grid-area: i; width: 36px; height: 36px; }
  .th-bt b { grid-area: n; font-size: 15px; line-height: 1.1; }
  .th-bt .hx-rank { grid-area: r; justify-self: start; }
  .th-bt small { grid-area: s; font-size: 11px; line-height: 1.25; }
  .th-bt .btn { grid-area: b; margin: 0; }
  .th-lift { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-medal { width: 64px; height: 64px; }
  .th-medal b { font-size: 24px; }
  .th-trial { flex-wrap: wrap; }
  .th-trial .btn, .th-st { margin-left: auto; max-width: none; }
}
@media (max-width: 520px) { .th-branches { grid-template-columns: minmax(0, 1fr); } }
.hx-slot.gm .hx-rank { flex-wrap: wrap; max-width: 100%; }

/* docs/19 E4–E8: the citadels and the Throne war in the Throne's window. */
.cit-list { display: flex; flex-direction: column; gap: 6px; }
.cit-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: 'f m a' 'x x x'; gap: 4px 10px; align-items: center; padding: 6px 8px; border: 1px solid rgba(176, 141, 87, 0.3); border-radius: 6px; background: rgba(20, 16, 10, 0.5); cursor: pointer; }
.cit-row.mine { border-color: rgba(224, 184, 98, 0.75); }
.cit-row.sieged { box-shadow: inset 3px 0 0 #b0473a; }
.cit-row.open { background: rgba(32, 24, 14, 0.72); }
.cit-face { grid-area: f; position: relative; width: 56px; height: 56px; }
.cit-face .ico-lg { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }
.cit-lv { position: absolute; left: -2px; bottom: -2px; padding: 0 4px; border-radius: 4px; background: #1a140c; box-shadow: 0 0 0 1px var(--brass-dim); font-size: 11px; font-weight: 600; color: var(--gold); }
.cit-flag { position: absolute; right: -2px; top: -2px; width: 16px; height: 12px; border-radius: 2px 6px 6px 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); font-size: 9px; line-height: 12px; text-align: center; color: #1a120a; }
.cit-flag.crown { box-shadow: 0 0 0 1px var(--gold), 0 0 6px rgba(224, 184, 98, 0.7); }
.cit-flag.sm { position: static; display: inline-block; width: 12px; height: 9px; margin-right: 6px; vertical-align: middle; }
.cit-main { grid-area: m; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cit-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.cit-name b { font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--bone); overflow-wrap: anywhere; }
.cit-name small { font-size: 11px; }
.cit-holder { font-size: 12px; color: var(--fog); overflow-wrap: anywhere; }
.cit-holder.gold { color: var(--gold); }
.cit-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--bone); }
.cit-gar { display: inline-flex; align-items: center; gap: 6px; }
.cit-gar .th-bar { display: inline-block; width: 70px; height: 6px; margin: 0; }
.cit-gar .th-bar i { background: linear-gradient(90deg, #7a3a2a, #c9714e); }
.cit-walls { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); }
.cit-walls i { display: block; width: 7px; height: 9px; border-radius: 1px; background: #8d8676; }
.cit-walls i.cw-tower { width: 9px; height: 9px; border-radius: 50%; }
.cit-walls i.cw-gate { background: #7a5a36; }
.cit-walls i.cw-cracked { background: #5f594d; box-shadow: inset 0 0 0 1px #b0473a; }
.cit-walls i.cw-gate.cw-cracked { background: #4e3a24; }
.cit-walls i.cw-down { background: transparent; box-shadow: inset 0 0 0 1px #b0473a; opacity: 0.8; }
.cit-win { font-size: 11px; color: var(--fog); }
.cit-win.open { color: #e7a35a; }
.cit-sg { font-size: 11px; color: #e07a5e; overflow-wrap: anywhere; }
.cit-sg.mine { color: var(--gold); }
.cit-why { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.cit-act { grid-area: a; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.cit-act .btn { white-space: nowrap; }
.cit-more { grid-area: x; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid rgba(176, 141, 87, 0.2); cursor: default; }
.cit-more .card-h { margin: 2px 0 0; font-size: 13px; }
.cit-army { margin: 0; }
.cit-inc { font-size: 11px; color: var(--fog); }
.cit-inc.gold { color: var(--gold); }
.cit-leave { display: flex; flex-wrap: wrap; gap: 6px; }
.cit-stack { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); }
.cit-stack b { font-size: 12px; min-width: 2.2em; font-variant-numeric: tabular-nums; }
.cit-stack .army-face-xs { width: 30px; height: 30px; }
.cit-titans { display: flex; flex-wrap: wrap; gap: 6px; }
.cit-titan { display: inline-flex; align-items: center; gap: 4px; }
.cit-titan .army-face-xs { width: 26px; height: 26px; }
.cit-war li b { white-space: normal; }
@media (max-width: 1099px), (max-height: 520px) {
  body.touch .cit-act .btn, body.touch .cit-stack .btn, body.touch .cit-titan { min-height: 40px; }
}
/* docs/19 E15: the Admiralty's contracts — the Throne's «Contracts» tab and the board in a great harbour. */
.adm-list { display: flex; flex-direction: column; gap: 8px; }
.adm-card { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid rgba(176, 141, 87, 0.35); border-radius: 6px; background: rgba(20, 16, 10, 0.55); }
.adm-card.adm-taken { border-color: rgba(224, 184, 98, 0.75); box-shadow: 0 0 10px rgba(224, 184, 98, 0.15); }
.adm-card.adm-done { opacity: 0.75; }
.adm-top { display: flex; align-items: center; gap: 10px; }
.adm-face { flex: none; }
.adm-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-tt b { font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--bone); overflow-wrap: anywhere; }
.adm-tt small { font-size: 12px; overflow-wrap: anywhere; }
.adm-st { align-self: flex-start; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(176, 141, 87, 0.45); font-size: 11px; color: var(--fog); }
.adm-st-taken { color: var(--gold); border-color: rgba(224, 184, 98, 0.7); }
.adm-st-done { color: #a9c98e; border-color: rgba(140, 180, 110, 0.6); }
.adm-say { margin: 0; font-size: 12px; line-height: 1.35; color: var(--fog); font-style: italic; overflow-wrap: anywhere; }
.adm-steps { margin: 0; }
.adm-legend { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(176, 71, 58, 0.4); background: rgba(40, 16, 12, 0.4); }
.adm-lg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-lg-t b { font-size: 13px; font-weight: 600; color: var(--bone); overflow-wrap: anywhere; }
.adm-lg-t small { font-size: 11px; overflow-wrap: anywhere; }
.adm-lg-t .th-bar { display: block; height: 6px; margin: 2px 0 0; }
.adm-lg-t .th-bar i { background: linear-gradient(90deg, #7a3a2a, #c9714e); }
.adm-army { margin: 2px 0 0; }
.adm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.adm-pay { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; min-width: 0; }
.adm-glory { color: var(--xp); white-space: nowrap; }
.adm-part { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); white-space: nowrap; }
.adm-acts { flex: none; display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; margin-left: auto; }
.adm-acts .btn { white-space: nowrap; }
.adm-medal span { line-height: 1; }
.adm-medal b { font-size: 24px; }
.adm-board { margin: 0 0 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; border-color: rgba(224, 184, 98, 0.55); }
.adm-board .card-h { display: flex; align-items: center; gap: 8px; margin: 0; }
.adm-board .card-h > span { display: flex; flex-direction: column; min-width: 0; font-family: var(--display); font-weight: 400; font-size: 18px; }
.adm-board .card-h small { font-family: var(--sans); font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 1099px), (max-height: 520px) {
  body.touch .adm-acts .btn { min-height: 40px; }
  .adm-tt b { font-size: 15px; }
}
@media (max-width: 520px) {
  .adm-top { flex-wrap: wrap; }
  .adm-acts { flex-direction: row; width: 100%; justify-content: flex-end; }
}
/* The Throne's seven tabs on a phone: one row (docs/19 E4–E8 brought it to seven). */
@media (max-width: 1099px), (max-height: 520px) {
  .throne-win .tabs .tab { padding: 9px 6px; font-size: 11px; letter-spacing: 0.01em; gap: 3px; }
  .throne-win .tabs .tab .ico-sm { width: 14px; height: 14px; }
}
/* docs/19 E15 brought the Throne to eight tabs: on a phone they keep one row with narrower sides. */
@media (max-width: 1099px), (max-height: 520px) {
  .throne-win .tabs:has(.tab:nth-child(8)) { gap: 1px; padding: 0 4px; }
  .throne-win .tabs:has(.tab:nth-child(8)) .tab { padding-left: 3px; padding-right: 3px; gap: 2px; font-size: 10.5px; letter-spacing: 0; }
  .skinned .throne-win .tabs:has(.tab:nth-child(8)) .tab { border-left-width: 6px; border-right-width: 6px; border-image-width: 6px 6px 0; }
  .throne-win .tabs:has(.tab:nth-child(8)) .tab .ico-sm { width: 13px; height: 13px; }
}
/* docs/19 E14 brought them to eight: on a phone held sideways the words alone, still one row. */
@media (max-height: 520px) {
  .throne-win .tabs .tab .ico-sm { display: none; }
  .throne-win .tabs .tab { padding: 7px 6px; }
}
/* docs/19 E19's leftover: at 640×360 the nine words wrapped into two rows. A phone narrower than 700 px held sideways:
   the tab that is open keeps its picture and its word, the others their picture alone (a finger wide, their marks on
   them) — one row, nothing cut; the words stay for the screen reader and the tooltip. */
@media (max-width: 699px) and (max-height: 520px) {
  .throne-win .tabs:has(.tab:nth-child(9)) { flex-wrap: nowrap; gap: 2px; padding: 0 2px; }
  .throne-win .tabs:has(.tab:nth-child(9)) .tab .ico-sm { display: inline-block; width: 22px; height: 22px; margin: 0; flex: none; }
  .throne-win .tabs:has(.tab:nth-child(9)) .tab { min-width: 50px; justify-content: center; padding: 6px 7px; gap: 3px; flex: 0 0 auto; }
  .throne-win .tabs:has(.tab:nth-child(9)) .tab:not(.active) .ico-sm { filter: brightness(1.25) drop-shadow(0 1px 1px #000); }
  .throne-win .tabs:has(.tab:nth-child(9)) .tab.active { padding: 6px 9px; }
  .throne-win .tabs .tab:not(.active) .th-tw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .throne-win .tabs .tab:not(.active) .hx-dot { margin-left: 0; }
}
/* docs/19 E19: nine tabs with a mouse (1500×600, 1440×900) — the row was 1196 px in a window of 1060, the body scrolled
   sideways and «Колизей» stood past the window's edge (96–134 px), a contract's «Курс» 23 px under it. Narrower sides
   and letters keep the nine in one row with their marks; a window narrower still wraps them, never hides one. */
@media (min-width: 1100px) and (min-height: 521px) {
  .throne-win .tabs:has(.tab:nth-child(9)) { gap: 0; padding: 0 6px; flex-wrap: wrap; }
  .throne-win .tabs:has(.tab:nth-child(9)) .tab { letter-spacing: 0.02em; gap: 3px; }
  .skinned .throne-win .tabs:has(.tab:nth-child(9)) .tab { border-left-width: 6px; border-right-width: 6px; border-image-width: 6px 6px 0; padding-left: 5px; padding-right: 5px; }
}
/* docs/19 E14: the Colosseum in the Throne's window — the lobby (the rating's bronze medal, the queue, the table, the
   rewards) and the draft board: the two seats beside the table of lots, the turn and its clock above it, the tapped lot
   below. One screen on a phone held sideways (812×375) and with a mouse; nothing to scroll for a button. */
.th-medal.ar-medal { background: radial-gradient(circle at 50% 38%, #4a2f18, #170e08 70%); box-shadow: 0 0 0 2px #c58a4a, 0 0 0 5px rgba(168, 118, 62, 0.35), 0 0 18px rgba(197, 138, 74, 0.3); }
.th-medal.ar-medal span .ico-sm { width: 18px; height: 18px; }
.ar-last { margin: 0; font-size: 13px; }
.ar-last.won { color: var(--gold); }
.ar-last.lost { color: var(--bad); }
.ar-go b { color: var(--bone); font-variant-numeric: tabular-nums; }
.ar-table { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ar-table li { display: flex; gap: 8px; align-items: baseline; padding: 3px 8px; border-radius: 4px; background: rgba(20, 16, 10, 0.4); font-size: 13px; }
.ar-table li i { font-style: normal; color: var(--fog); min-width: 1.8em; }
.ar-table li b { flex: 1; min-width: 0; font-weight: 600; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-table li span { flex: none; font-variant-numeric: tabular-nums; color: var(--gold); }
.ar-table li.you { box-shadow: inset 0 0 0 1px var(--gold); }
.ar-rw { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.ar-rw li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 2px 8px; border-bottom: 1px solid rgba(176, 141, 87, 0.15); }
.ar-rw li b { color: var(--bone); font-weight: 600; }
.ar-rw li > span { color: var(--fog); overflow-wrap: anywhere; }
.ar-draft { display: grid; grid-template-columns: 148px minmax(0, 1fr) 148px; grid-template-areas: 'you turn foe' 'you pool foe' 'you sel foe'; grid-template-rows: auto auto 1fr; gap: 6px 8px; align-items: start; }
.ar-draft > .ar-seat.you { grid-area: you; }
.ar-draft > .ar-seat.foe { grid-area: foe; }
.ar-draft > .ar-turn { grid-area: turn; }
.ar-draft > .ar-pool { grid-area: pool; }
.ar-draft > .ar-sel { grid-area: sel; }
.ar-seat { display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid rgba(176, 141, 87, 0.3); border-radius: 8px; background: rgba(20, 16, 10, 0.55); min-width: 0; }
.ar-seat.you { border-color: rgba(224, 184, 98, 0.55); }
.ar-seat.foe { border-color: rgba(176, 71, 58, 0.5); }
.ar-seat.turn { box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(224, 184, 98, 0.25); }
.ar-seat.foe.turn { box-shadow: 0 0 0 1px #c4574a, 0 0 12px rgba(196, 87, 74, 0.25); }
.ar-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ar-who .ico-md { width: 34px; height: 34px; flex: none; object-position: 50% 18%; }
.ar-who span { display: flex; flex-direction: column; min-width: 0; }
.ar-who b { font-size: 13px; line-height: 1.15; color: var(--bone); overflow: hidden; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } /* (a legend's name in up to three lines: in one, «Мрачный Хэлл…», 128 > 94 px; «Счастливица Бесс Тэрроу» takes three at 812×375 — docs/19 E19) */
.ar-who small { font-size: 11px; color: var(--fog); white-space: nowrap; }
.ar-pts { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.ar-bans { display: flex; gap: 3px; min-height: 22px; align-items: center; }
.ar-bn { position: relative; width: 22px; height: 22px; border-radius: 4px; overflow: hidden; filter: grayscale(1) brightness(0.7); }
.ar-bn i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #e05a4a; font-style: normal; font-weight: 700; font-size: 16px; text-shadow: 0 0 3px #000; }
.ar-army { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.ar-pk { position: relative; display: block; aspect-ratio: 1; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(176, 141, 87, 0.45); }
.ar-pk b { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; line-height: 12px; text-align: center; color: var(--bone); background: rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.ar-turn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--fog); }
.ar-turn b { color: var(--bone); font-weight: 600; }
.ar-turn.mine > span:not(.th-chip) { color: var(--gold); font-weight: 600; }
.ar-clock { margin-left: auto; min-width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(176, 141, 87, 0.6); font-variant-numeric: tabular-nums; color: var(--bone); }
.ar-clock.low { box-shadow: inset 0 0 0 2px #c4574a; color: #f0a090; }
.ar-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 4px; }
.ar-lot { position: relative; aspect-ratio: 1; padding: 0; border-radius: 6px; border: 1px solid rgba(176, 141, 87, 0.45); background: rgba(20, 16, 10, 0.65); overflow: hidden; cursor: pointer; min-width: 0; }
.ar-lot .ar-face { display: block; width: 100%; height: 100%; object-fit: cover; }
.ar-lot .ar-n { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; line-height: 14px; font-weight: 600; text-align: center; color: var(--bone); background: rgba(0, 0, 0, 0.62); font-variant-numeric: tabular-nums; }
.ar-lot .ar-p { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 3px; border-radius: 8px; font-style: normal; font-size: 10px; line-height: 15px; font-weight: 700; text-align: center; color: #1a120a; background: var(--gold); box-shadow: 0 1px 2px #000; }
.ar-lot .ar-x { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 30px; font-weight: 700; color: #e05a4a; text-shadow: 0 0 4px #000; }
.ar-lot.banned { filter: grayscale(1) brightness(0.55); cursor: default; }
.ar-lot.mine { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.ar-lot.theirs { border-color: #c4574a; box-shadow: inset 0 0 0 2px #c4574a; filter: brightness(0.6); }
.ar-lot.dear { opacity: 0.45; }
.ar-lot.sel { outline: 2px solid var(--bone); outline-offset: 1px; z-index: 1; }
@media (hover: hover) and (pointer: fine) { .ar-lot.open:hover { border-color: var(--gold); } }
.ar-sel { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 4px 6px; border-radius: 6px; background: rgba(20, 16, 10, 0.55); border: 1px solid rgba(176, 141, 87, 0.25); }
.ar-sel > .army-face-sm { width: 36px; height: 36px; }
.ar-st { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ar-st b { font-size: 13px; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-st small { font-size: 11px; line-height: 1.25; color: var(--fog); overflow-wrap: anywhere; }
.ar-acts { flex: none; display: flex; gap: 6px; }
.ar-acts .btn { white-space: nowrap; }
.tb-end .tb-why.tb-arena, .tb-end.sea .tb-why.tb-arena { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 600; }
.tb-end .tb-why.tb-arena.down { color: var(--bad); }
/* docs/19 E19: a bout's end in the band of a phone on its side — the rating's line and the button, not the drafted
   armies' faces (the sand costs her none of her own men): with them the band wrapped and «Дальше» went under its edge
   (812×375: 41 px of it cut, 640×360: all of it; the band 16.6–17.1 % of the screen). */
@media (max-height: 520px) { .tb-end.sea:has(.tb-arena) .tb-end-rows { display: none; } }
@media (max-width: 1099px), (max-height: 520px) {
  body.touch .ar-acts .btn, body.touch .ar-go .btn { min-height: 44px; }
  .ar-draft { grid-template-columns: 120px minmax(0, 1fr) 120px; gap: 6px; }
  .ar-pool { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
  .ar-turn { font-size: 12px; gap: 6px; }
  .ar-turn .th-chip { padding: 1px 6px; font-size: 11px; }
  .ar-clock { min-width: 26px; height: 26px; }
  .ar-seat { padding: 4px; gap: 3px; }
  .ar-who .ico-md { width: 28px; height: 28px; }
  .ar-who b { font-size: 12px; }
  .ar-who small, .ar-pts { font-size: 11px; }
  .ar-bans { min-height: 18px; }
  .ar-bn { width: 18px; height: 18px; }
  .ar-bn i { font-size: 13px; }
  .ar-lot .ar-n { font-size: 10px; line-height: 12px; }
  .ar-lot .ar-p { font-size: 9px; line-height: 13px; min-width: 14px; }
  .ar-sel { min-height: 44px; padding: 2px 6px; }
  .ar-sel > .army-face-sm { width: 30px; height: 30px; }
  /* docs/19 E19: the lot's line in two rows within the bar's own 44 px (in one it lost its specials: «Вожак, Стойкий, От…»,
     356 > 303 px). */
  .ar-st small { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
}
/* A narrow phone (640×360): each seat a line beside the turn — the table itself shows whose lot is whose — and the
   table and the tapped lot the whole width. */
@media (max-width: 699px) {
  .ar-draft { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: 'you turn foe' 'pool pool pool' 'sel sel sel'; grid-template-rows: auto; gap: 3px 6px; }
  .ar-seat { flex-direction: row; align-items: center; gap: 4px 6px; padding: 2px 6px; }
  .ar-seat .ar-bans, .ar-seat .ar-army, .ar-who small, .ar-who .ico-md { display: none; }
  .ar-who b { font-size: 12px; }
  .ar-turn { flex-wrap: nowrap; }
  .ar-turn .th-chip, .ar-turn > span:not(.th-chip) { display: none; }
  .ar-pool { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .ar-lot { aspect-ratio: 1 / 0.86; }
  .ar-sel { min-height: 40px; }
  #modal-panel .throne-win.th-drafting .tabs .tab:not(.active) { display: none; }
}
@media (max-width: 520px) {
  .cit-row { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: 'f m' 'a a' 'x x'; }
  .cit-face, .cit-face .ico-lg { width: 44px; height: 44px; }
  .cit-act { flex-direction: row; justify-content: flex-end; }
}

/* docs/19 D7: a roaming stack's card («Осмотреть»). */
.roam-panel { max-width: min(380px, 92vw); }
.roam-card { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 13px; padding-bottom: 12px; }
.roam-card .rc-head { display: flex; gap: 10px; align-items: center; }
.roam-card .rc-head .army-face { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.roam-card .ac-offer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* A phone held upright: the game is played sideways only (owner, 2026-10-02). The veil covers everything and takes
   every touch, so nothing under it can be played; it shows only on touch screens narrow enough to be a phone. */
#rotate-lock { display: none; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
  #rotate-lock {
    display: flex; position: fixed; inset: 0; z-index: 2147483000; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center; background: radial-gradient(ellipse at 50% 40%, #1b2026 0%, var(--ink) 70%);
    color: var(--bone); touch-action: none;
  }
  #rotate-lock b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; color: var(--brass); letter-spacing: 0.02em; }
  #rotate-lock small { font-size: 14px; opacity: 0.8; max-width: 260px; }
  #rotate-lock .rl-phone {
    width: 46px; height: 78px; border: 3px solid var(--brass); border-radius: 9px; position: relative; margin-bottom: 8px;
    animation: rl-turn 2.4s ease-in-out infinite;
  }
  #rotate-lock .rl-phone i { position: absolute; left: 50%; bottom: 5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--brass); }
}
@keyframes rl-turn { 0%, 20% { transform: rotate(0); } 50%, 75% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* The title screen on a phone on its side (the only way a phone plays, 2026-10-02): the name on the left, the form on
   the right, so the whole panel stands inside the 360–430px of height instead of running under the screen's edge. */
@media (max-height: 520px) and (min-width: 600px) {
  #screen-login > .login-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; align-items: start;
    grid-template-areas: "brand lang" "brand form" "brand acct" "brand reset" "hint err";
    width: min(780px, 96vw); padding: 14px 22px 12px;
  }
  #screen-login .login-brand { grid-area: brand; align-self: center; text-align: center; }
  #screen-login .lang-switch { grid-area: lang; margin-bottom: 4px; }
  #screen-login #login-form { grid-area: form; }
  #screen-login #login-account { grid-area: acct; margin-top: 6px; }
  #screen-login #reset-form { grid-area: reset; }
  #screen-login #login-error { grid-area: err; margin: 4px 0 0; }
  #screen-login .hint { grid-area: hint; margin: 6px 0 0; align-self: end; }
  #screen-login .login-panel .title { font-size: clamp(28px, 5.2vw, 46px); margin: 0; }
  #screen-login .login-panel .subtitle { font-size: 14px; margin: 6px 0 0; }
  #screen-login .login-panel label { margin-bottom: 8px; }
  #screen-login .login-panel #login-form .btn-primary { min-height: 40px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  /* The account drawer opened: it takes the guest form's place, so the e-mail, the password and the buttons all stand
     on the screen; closing it brings the guest form back. */
  #screen-login .login-panel:has(#login-account[open]) #login-form { display: none; }
  #screen-login .login-panel:has(#login-account[open]) { grid-template-areas: "brand lang" "brand acct" "brand reset" "hint err"; }
  #screen-login #login-account[open] { margin-top: 0; }
  #screen-login .login-panel:has(#login-account[open]) .lang-switch { margin-bottom: 0; }
  #screen-login .login-account form .row .btn { white-space: nowrap; font-size: 13px; padding-left: 6px; padding-right: 6px; }
  #screen-login #login-account label { margin-bottom: 6px; }
  #screen-login #login-account input { padding: 7px 10px; }
  #screen-login .login-account form .row .btn { min-height: 36px; }
  #screen-login .login-account form .row #forgot-btn { min-height: 28px; }
}
@media (max-height: 400px) and (min-width: 600px) {
  #screen-login > .login-panel { padding-top: 8px; padding-bottom: 8px; }
  #screen-login .login-panel:has(#login-account[open]) .lang-switch .btn { min-height: 30px; padding-top: 2px; padding-bottom: 2px; }
  #screen-login #login-account summary { min-height: 30px; }
  #screen-login #login-account label { margin-bottom: 4px; }
  #screen-login #login-account input { padding: 6px 10px; }
}
/* The name's trailing letter-space balanced by the same space before it, so it sits centred inside its block
   without a negative margin running past the block's edge. */
.login-panel .login-brand .title { margin-right: 0; padding-left: 0.06em; }
/* Phones on their side narrower than 700 px (640×360, 667×375): the upright phone's full-width unit frame is gone
   with the upright phone; the frame keeps to the left, the top stack takes the room between it and the menu button. */
@media (max-width: 699px) and (max-height: 520px) {
  .unit-frame { width: 262px; }
  :root { --plate-w: max(190px, calc(100vw - var(--sa-l) - var(--sa-r) - 282px - var(--mm) - 76px)); }
  #hud #hud-stack, body.touch #hud #hud-stack { left: calc(var(--sa-l) + 282px); right: auto; }
}
/* The battle's queue and card show a painted figure's head and shoulders (owner, 2026-10-02: the battle as in Heroes). */
.tb-q .ico.fig, .tb-card-h .ico-md.fig { object-fit: cover; object-position: 50% 6%; background: radial-gradient(circle at 50% 35%, #2a2620, #110e0b); }
/* A creature's own figure as its face (render/beastface.ts): from the head down, in a slot, a card or a list. */
img.beast-face.fig { object-fit: cover; object-position: 50% 8%; background: radial-gradient(circle at 50% 35%, #2a2620, #110e0b); }
#advcard .ac-art.fig { object-fit: cover; object-position: 50% 8%; border-radius: 50%; border: 1px solid #5c4a33; background: radial-gradient(circle at 50% 35%, #2a2620, #110e0b); }
/* The title screen's film: the trailer, silent, fading in over the key art once it plays (main.ts titleFilm). */
.keyart-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.keyart-film.on { opacity: 1; }
/* A film over the screen (ui/cutscene.ts): letterboxed on black, fading in and out; a word on how to skip it. */
.film { position: fixed; inset: 0; z-index: 2147482000; background: #000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.45s ease; cursor: pointer; }
.film.on { opacity: 1; }
.film video { width: 100%; height: 100%; object-fit: contain; }
.film-skip { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); font: 500 12px var(--sans); color: rgba(230, 220, 200, 0.55); letter-spacing: 0.04em; pointer-events: none; }

/* ---------- The premium shop (owner, 2026-10-03; ui/premium.ts): doubloons in gold, the shelves of hulls and creatures
   as cards (the painted figure, the name and what sets it apart, the price and Buy), the top-up's packs. */
/* The doubloon's stand-in: the silver coins gilded until its own picture is painted. */
.dbl-gild, .micro-menu [data-menu="shop"] img[src*="/icons/coin."], .menu-tile[data-menu="shop"] img[src*="/icons/coin."] { filter: sepia(1) saturate(3.4) hue-rotate(-12deg) brightness(1.1) contrast(1.05); }
.dbl { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-body { display: flex; flex-direction: column; gap: 10px; }
.pm-purse { align-items: center; flex-wrap: nowrap; }
.pm-purse .ph-chip .dbl { gap: 5px; font-size: 14px; }
.pm-purse .ph-chip .dbl .ico-sm { width: 18px; height: 18px; }
.pm-purse .btn { white-space: nowrap; }
.pm-count { margin-left: 2px; color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 8px; }
.pm-card { display: grid; grid-template-columns: 96px minmax(0, 1fr) 112px; gap: 12px; align-items: center; margin: 0; border-color: rgba(176, 141, 87, 0.45); }
.skinned .pm-card { border-color: rgba(176, 141, 87, 0.45); }
.pm-art { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; background: radial-gradient(circle at 50% 40%, #2a2418, #0c0b09 72%); box-shadow: inset 0 0 0 1px rgba(176, 141, 87, 0.35); }
/* A hull lies on her side, bow to the right, on a patch of sea (a dark sprite on the dark card would vanish). */
.pm-card.pm-ship { grid-template-columns: 150px minmax(0, 1fr) 112px; }
.pm-hull { width: 150px; height: 84px; background: radial-gradient(ellipse at 50% 50%, #234152, #0c1820 78%); }
.pm-hull img { height: 150px; width: auto; flex: none; transform: rotate(90deg); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.8)); }
.pm-fig img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px #000); }
.pm-art .pm-face { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; margin: 0; }
.pm-art .ico-lg { width: 56px; height: 56px; object-fit: contain; }
.pm-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-name { font-family: var(--serif); font-size: 18px; line-height: 1.15; color: var(--bone); overflow-wrap: anywhere; }
.pm-n { font: 600 12px var(--sans); color: var(--fog); }
.pm-note { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.3; color: #d6c39a; }
.pm-meta { font-size: 11px; line-height: 1.3; }
.pm-card .hull-stats { margin-top: 2px; }
.pm-with { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.pm-beast { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pm-beast .pm-face-xs { width: 24px; height: 24px; flex: none; margin: 0; border-radius: 50%; object-fit: cover; object-position: 50% 8%; border: 1px solid var(--brass-dim); }
.pm-buy { display: flex; flex-direction: column; align-items: stretch; gap: 5px; text-align: center; min-width: 0; }
.pm-buy .btn { min-height: 30px; font-size: 12px; }
.pm-price .dbl { font: 700 17px var(--sans); justify-content: center; }
.pm-price .dbl .ico-sm { width: 20px; height: 20px; }
.pm-why { font-size: 11px; line-height: 1.25; color: var(--bad); overflow-wrap: anywhere; }
/* The fleet of eighty (docs/02 §1.A.9): the hulls on their four shelves, and each premium hull's gift. */
.pm-list { margin: 6px 0 0; font-family: var(--serif); font-size: 17px; color: var(--gold); letter-spacing: 0.04em; }
.pm-gift { font-size: 12px; line-height: 1.3; color: var(--bone); padding: 4px 6px; border-left: 2px solid var(--brass-dim); background: rgba(176, 141, 87, 0.08); }
.pm-gift b { color: #e8c97a; }
.pm-empty { display: flex; gap: 14px; align-items: center; margin: 0; padding: 18px 16px; }
.pm-empty .ico-lg { width: 64px; height: 64px; flex: none; object-fit: contain; }
.pm-empty p { margin: 4px 0 0; }
.pm-rule { font-size: 12px; margin: 0; }
.pm-top-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pm-top-h .title-sm { font-size: 24px; margin: 0 0 2px; }
.pm-top-h p { margin: 0; }
.pm-top-h .btn { flex: none; white-space: nowrap; }
.pm-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.pm-pack { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 12px 8px 10px; text-align: center; border-color: rgba(176, 141, 87, 0.5); }
.pm-pack .ico-lg { width: 56px; height: 56px; object-fit: contain; }
.pm-pack-n { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.pm-pack-w { font-size: 12px; color: var(--fog); }
.pm-bonus { font: 600 12px var(--sans); color: var(--good); }
.pm-bonus.none { visibility: hidden; }
.pm-pack .btn { width: 100%; margin-top: 4px; }
.pm-soon { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 10px; border: 1px dashed rgba(176, 141, 87, 0.5); border-radius: 6px; color: var(--bone); font-size: 13px; }
/* A narrow window (a phone on its side, the panel zoomed): the buy box goes under the figure and the words. */
@media (max-width: 700px) {
  .pm-card { grid-template-columns: 76px minmax(0, 1fr); gap: 8px 10px; }
  .pm-card.pm-ship { grid-template-columns: 112px minmax(0, 1fr); }
  .pm-art { width: 76px; height: 76px; }
  .pm-hull { width: 112px; height: 64px; }
  .pm-hull img { height: 112px; }
  .pm-art .pm-face { width: 66px; height: 66px; }
  .pm-buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; }
  .pm-buy .pm-why { order: -1; margin-right: auto; text-align: left; }
  .pm-buy .btn { min-width: 96px; }
  .pm-packs { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .pm-pack-n { font-size: 24px; }
  .pm-top-h { flex-wrap: wrap; }
}

/* ---------- The battle on a phone (owner, 2026-10-03: «на телефоне в бою не должно быть ничего кроме игрового поля с
   существами»): the field alone over the whole screen — the captains' panels, the order of the round, the feed and the
   long buttons put away — and round painted buttons at its edges with no word on them: the stack's orders in the
   bottom left corner (wait, defend, the officer's word, «…» for the fight's own), the book in the bottom right with
   the path's two moves beside it, the turn's face and its clock in the top left (a tap opens the round). The board
   keeps clear of them (client/src/ui/tactical.ts measures them and sets --tb-l/r/t/b); a card, the round and the end
   lie over the field in the room between. A phone is body.tac-ph: a touch screen whose short side is under 520px. */
.tb-pad { display: none; }
#board-tac { -webkit-touch-callout: none; }
body.tac-ph .tb-root { display: block; padding: 0; }
body.tac-ph .tb-hero, body.tac-ph .tb-mid, body.tac-ph .tb-queue, body.tac-ph .tb-feed, body.tac-ph .tb-spells, body.tac-ph .tb-acts { display: none; }
body.tac-ph .tb-stage { position: absolute; inset: 0; width: auto; height: auto; }
body.tac-ph .tb-pad { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* Put away (but keeping their room, so the board does not jump) while the book is open and once the fight is over. */
.tb-pad.over > * { visibility: hidden; }
/* A round button: its painted icon in the brass ring, a thumb wide (48px; the book 56px). */
.tb-rb { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 2px solid var(--brass-dim);
  background: radial-gradient(circle, #2a2118 0 52%, #120e0a 74%); color: var(--gold); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75); pointer-events: auto; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.skinned .tb-rb { border: 0; }
.skinned .tb-rb::after { content: ''; position: absolute; inset: -3px; background: var(--ui-ring) center / contain no-repeat; pointer-events: none; }
.tb-rb > .ico { position: absolute; inset: 13%; width: 74%; height: 74%; margin: 0; border-radius: 50%; object-fit: cover; }
.tb-rb:active:not(:disabled) { transform: scale(0.93); filter: brightness(1.3); }
.tb-rb:disabled { cursor: default; filter: grayscale(0.8) brightness(0.55); }
.tb-rb.spent { filter: grayscale(1) brightness(0.45); }
.tb-rb.on { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(224, 184, 98, 0.8); }
.tb-rb.danger { background: radial-gradient(circle, #3a1714 0 52%, #140c0a 74%); }
.tb-rb.armed { animation: tb-armed 0.9s ease-in-out infinite; }
@keyframes tb-armed { 0%, 100% { box-shadow: 0 0 0 2px #d0503e, 0 0 8px rgba(208, 80, 62, 0.6); } 50% { box-shadow: 0 0 0 4px #d0503e, 0 0 20px rgba(208, 80, 62, 0.95); } }
.tb-rb.book { width: 56px; height: 56px; }
/* An order aimed: the book's button shows it, with the painted cross that lets it go. */
.tb-rb.aim { box-shadow: 0 0 0 2px #f0a03c, 0 0 14px rgba(240, 160, 60, 0.8); }
.tb-x { position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--brass-dim); background: #16110d; color: var(--bone);
  display: grid; place-items: center; font: 700 14px/1 var(--sans); font-style: normal; z-index: 1; }
.tb-x::before { content: '×'; }
.skinned .tb-x { border: 0; background: var(--ui-close) center / contain no-repeat; filter: drop-shadow(0 1px 2px #000); }
.skinned .tb-x::before { content: ''; }
/* The two thumbs' corners: on a phone on its side a column up from each bottom corner, upright a row along the bottom. */
.tb-pl, .tb-pr { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; }
.tb-pl { left: calc(env(safe-area-inset-left, 0px) + 8px); }
.tb-pr { right: calc(env(safe-area-inset-right, 0px) + 8px); }
/* The turn's face, its side's colour round it (gold while the move is hers) running down with the turn's clock. */
.tb-turnb { position: absolute; left: calc(env(safe-area-inset-left, 0px) + 8px); top: calc(env(safe-area-inset-top, 0px) + 8px); width: 48px; height: 48px; padding: 0; border: 0;
  border-radius: 50%; pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; --tl: 1; --ring: #7fb0d0;
  background: conic-gradient(var(--ring) calc(var(--tl) * 360deg), rgba(255, 255, 255, 0.14) 0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75); }
.tb-turnb.foe { --ring: #d2473a; }
.tb-turnb.mine { --ring: #e8c46a; }
.tb-turnb.on { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(224, 184, 98, 0.8); }
.tb-turnb > .ico { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); margin: 0; border-radius: 50%; object-fit: cover;
  background: radial-gradient(circle at 50% 35%, #2a2620, #110e0b); }
.tb-turnb > .ico.fig { object-position: 50% 6%; }
/* The round behind the face: its number and whose move, the two captains (men, morale, luck), the order (each face
   opens its card), the last of the feed. */
.tb-sheet { position: absolute; left: calc(env(safe-area-inset-left, 0px) + 64px); top: calc(env(safe-area-inset-top, 0px) + 8px); width: min(340px, calc(100% - 140px));
  max-height: calc(100% - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; background: rgba(12, 10, 8, 0.95); border: 1px solid var(--brass-dim); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); pointer-events: auto; color: var(--bone); font-size: 12px; }
.tb-sh-r { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.tb-sh-r b { flex: none; font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--gold); white-space: nowrap; }
.tb-sh-r em { min-width: 0; font-style: normal; font-size: 12px; color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-shh { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tb-shf { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #1b1f25 center / cover; border: 2px solid #7fb0d0; box-sizing: border-box; }
.tb-shh.foe .tb-shf { border-color: #d2473a; }
.tb-shh b { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-shp { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px 1px 3px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: var(--bone); font-size: 11px; line-height: 16px; white-space: nowrap; }
.tb-shp.up { color: #a8dca2; }
.tb-shp.down { color: #e3998a; }
.tb-shp .ico-xs { width: 14px; height: 14px; margin: 0; border-radius: 2px; }
.tb-sh-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 7px; padding: 2px 4px 4px 0; }
.tb-sh-q .tb-q { width: 34px; height: 34px; }
.tb-sh-q .tb-qsep { height: 26px; }
.tb-sh-feed { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; border-top: 1px solid rgba(232, 196, 106, 0.2); font-size: 11px; line-height: 1.3; color: var(--fog); }
.tb-sh-feed > :last-child { color: var(--bone); }
@media (orientation: portrait) {
  .tb-pl { flex-direction: row; flex-wrap: wrap-reverse; max-width: 52%; }
  .tb-pr { flex-direction: row-reverse; flex-wrap: wrap-reverse; max-width: 46%; }
  .tb-sheet { left: calc(env(safe-area-inset-left, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 8px); width: auto; top: calc(env(safe-area-inset-top, 0px) + 64px);
    max-height: calc(100% - 72px - var(--tb-b, 0px) - env(safe-area-inset-top, 0px)); }
}
/* The stack's card, the end and the book over the field, in the room the buttons leave. */
body.tac-ph .tb-card { left: calc(var(--tb-l, 0px) + (100% - var(--tb-l, 0px) - var(--tb-r, 0px)) / 2); top: calc(var(--tb-t, 0px) + (100% - var(--tb-t, 0px) - var(--tb-b, 0px)) / 2);
  bottom: auto; transform: translate(-50%, -50%); width: min(360px, calc(100% - var(--tb-l, 0px) - var(--tb-r, 0px) - 12px));
  max-height: calc(100% - var(--tb-t, 0px) - var(--tb-b, 0px) - 12px); overflow-y: auto; overscroll-behavior: contain; z-index: 5; }
body.tac-ph .tb-card-h .ico-md { width: 52px; height: 52px; }
/* The book on a phone held upright: one tall page of parchment, eight orders to it, the bookmarks down its edge (the
   painted spread is for a desk and a phone on its side); --bk-w (720px) sets its type, not its size. */
.tb-book.bk.tall { width: min(440px, calc(100vw - 16px)); height: min(600px, calc(100dvh - 24px)); --bk-t: 4%; --bk-b: 8%; --bk-o: 5%;
  background: radial-gradient(ellipse at 50% 40%, #eadcb8 0%, #dcc79a 70%, #c4a974 100%) padding-box, linear-gradient(#2b1a0d, #1a0f07) border-box; }
.tb-book.bk.tall .bk-page.l { right: calc(var(--bk-o) + 46px); }
.tb-book.bk.tall .bk-tabs { top: calc(var(--bk-t) + 44px); }
body.tac-ph .tb-banner { max-height: calc(100% - 16px); background: rgba(10, 9, 8, 0.96); }
/* The end's reckoning scrolls inside the banner (a lair's spoils run past a phone's height), its close below it always
   in sight. */
.tb-banner.tb-result { display: flex; flex-direction: column; }
.tb-bsc { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* ---------- docs/23 phase 5: the hex battle on a phone ----------
   Bottom left three round buttons a thumb wide (52px): «Ждать», «Защита», «Авто» (its wheel); bottom right the book
   (56px) with a gold bead when the officer's word or a path move is ready; top left the turn's face; top right «×2». */
body.tac-ph .tb-pl .tb-rb { width: 52px; height: 52px; }
.tb-fast { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 8px); top: calc(env(safe-area-inset-top, 0px) + 8px); width: 44px; height: 44px; }
.tb-x2 { position: relative; z-index: 1; font: 700 15px/1 var(--k-font-sans); font-style: normal; font-variant-numeric: tabular-nums; color: var(--gold); text-shadow: 0 1px 2px #000; }
.tb-fast.on .tb-x2 { color: #fff1c8; }
.tb-bead { position: absolute; z-index: 2; top: 0; right: 0; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe6a3, #c89434);
  box-shadow: 0 0 0 2px #120e0a, 0 0 8px rgba(224, 184, 98, 0.8); }
/* The stack's card as the kit's bottom sheet (long press). */
.tb-cardk.k-sheet { width: min(560px, 100%); }
.tb-cardsh { border-top: 3px solid #7fb0d0; padding-top: 8px; }
.tb-cardsh.foe { border-top-color: #d2473a; }
.tb-cardsh .tb-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tb-cardsh .tb-card-h .ico-md { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.tb-cardsh .tb-card-h small { color: var(--fog); font-size: 13px; }
.tb-cardsh .tb-stats { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 12px; }
.tb-cardsh .tb-stats span { font-size: 11.5px; }
.tb-cardsh .tb-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tb-cardsh .tb-sps .chip, .tb-cardsh .tb-sts .tb-st { font-size: 12px; min-height: 30px; }
.tb-cardsh p { margin: 8px 0 0; font-size: 13px; line-height: 1.4; }
/* The book as the kit's bottom sheet: big cards — a picture, a name, the price or why not now. */
.tb-bookk.k-sheet { width: min(880px, 100%); }
.tb-bk-will { display: flex; gap: 14px; margin: 2px 0 10px; }
.tb-bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tb-bc { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; align-content: center; min-height: 64px; padding: 7px 10px;
  box-sizing: border-box; border: 1px solid var(--k-brass-dim); border-radius: var(--k-r-2); background: linear-gradient(180deg, #241d16, #15110c); color: var(--k-bone); text-align: left;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform var(--k-dur-1) var(--k-ease-out), border-color var(--k-dur-2) var(--k-ease-out); }
.tb-bc-ico { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; border-radius: 6px; object-fit: contain; }
.tb-bc b { min-width: 0; font: 600 14px/1.2 var(--k-font-sans); overflow-wrap: anywhere; text-wrap: balance; }
.tb-bc small { display: inline-flex; align-items: center; gap: 3px; min-width: 0; font: 12px/1.3 var(--k-font-sans); color: var(--k-haze); }
.tb-bc small .ico-xs { width: 14px; height: 14px; margin: 0; }
.tb-bc-cost { display: inline-flex; align-items: center; gap: 3px; color: #9cc6f0; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-bc-cost.stam { color: #f2b56b; }
.tb-bc.officer, .tb-bc.mv { border-color: var(--k-brass); }
.tb-bc.mv.ult:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(224, 184, 98, 0.5), 0 0 10px rgba(224, 184, 98, 0.2); }
.tb-bc.poor small { color: var(--k-bad); }
.tb-bc:active:not(:disabled) { transform: scale(0.97); }
.tb-bc:disabled { opacity: 0.45; filter: saturate(0.5); cursor: default; }
.tb-bc:focus-visible { outline: 2px solid var(--k-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .tb-bc:hover:not(:disabled) { border-color: var(--k-gold); } }
/* The end (docs/23 item 63): won or lost, three rows — your losses, hers, the spoils — and one button. */
.tb-banner.tb-end { pointer-events: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.tb-end .tb-bsc > b { line-height: 1.1; }
.tb-end .tb-why { display: block; margin-top: 2px; }
.tb-end-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; }
.tb-er { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; column-gap: 10px; min-height: 32px; }
.tb-er > small { padding-top: 8px; color: var(--fog); font-size: 12px; line-height: 1.2; }
.tb-er .tb-rs-row { margin: 0; }
.tb-er .tb-lchips { gap: 4px 6px; }
.tb-lc.bad { color: #e3998a; }
.tb-lc.tb-lw { color: var(--gold); white-space: normal; max-width: 100%; box-sizing: border-box; line-height: 1.3; }
/* The beaten who would follow her: the words and the buttons on one line where they fit. */
.tb-end .tb-cap { flex-flow: row wrap; align-items: center; column-gap: 10px; }
.tb-end .tb-cap > small { flex-basis: 100%; }
.tb-end .tb-cap .tb-lline { flex: 1 1 260px; }
.tb-lc.tb-lw .ico-sm { border-radius: 50%; }
.tb-endbtn { flex: none; align-self: center; min-width: 200px; }
/* Ashore: a screen of its own, waiting for its button. */
.tb-banner.tb-end.land { width: min(560px, calc(100% - 24px)); max-height: calc(100% - 16px); }
/* At sea it passes (the fight closes itself 2.5 s later and the prize's window follows): a band — the field's foot on a
   tall screen, its head on a short one — with the three rows in one line. */
.tb-banner.tb-end.sea { top: auto; bottom: 8px; transform: translateX(-50%); width: min(820px, calc(100% - 24px)); max-height: calc(30vh - 16px); overflow: hidden;
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding: 6px 14px; }
.tb-end.sea .tb-bsc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; flex: 0 1 auto; overflow: hidden; }
.tb-end.sea .tb-bsc > b { font-size: 24px; }
.tb-end.sea .tb-why { display: none; }
.tb-end.sea .tb-end-rows { flex-direction: row; flex-wrap: wrap; margin: 0; gap: 4px 16px; }
.tb-end.sea .tb-er { grid-template-columns: auto auto; column-gap: 6px; }
/* (in the band a label and its «нет» on one line: the label's 8 px drop left «нет» riding above it, QA 2026-10-09) */
.tb-end.sea .tb-er { align-items: center; }
.tb-end.sea .tb-er > small { padding-top: 0; }
.tb-end.sea .tb-endbtn { min-width: 0; }
@media (max-height: 520px) {
  .tb-banner.tb-end.sea { top: 4px; bottom: auto; max-height: 64px; padding: 4px 10px; }
  .tb-end.sea .tb-bsc > b { font-size: 20px; }
  .tb-end.sea .tb-er > small { display: none; }
  /* …and with the labels gone a lone «нет» said nothing (640×360: «Примкнули: 1 нет Дальше»): a row with nothing in it
     stays out of the band. */
  .tb-end.sea .tb-er:has(> div > em.muted:only-child) { display: none; }
  .tb-end.sea .tb-rs, .tb-end.sea .tb-rs-ico { width: 24px; height: 24px; }
  .tb-end.sea .tb-endbtn { min-height: 44px; padding: 0 14px; }
  .tb-end.land { padding: 8px 16px 10px; gap: 6px; }
  .tb-end.land .tb-bsc > b { font-size: 24px; }
  .tb-end.land .tb-end-rows { margin-top: 6px; gap: 4px; }
  .tb-end .tb-er { min-height: 28px; }
  .tb-end.land .tb-rs, .tb-end.land .tb-rs-ico { width: 26px; height: 26px; }
  .tb-end .tb-cap .btn { min-height: 36px; }
}
/* The beaten who came over (owner, 2026-10-08): «К вам примкнули: 6 матросов» — the words kept even in the band at sea. */
.tb-rs i.up { background: #10260f; color: #c4e6a6; border-color: #3f6a35; }
.tb-er.tb-joined > small { color: var(--gold); }
.tb-end.sea .tb-er.tb-joined > small { display: inline; padding-top: 0; align-self: center; white-space: nowrap; }
.tb-er.tb-joined .tb-js { display: none; }
/* the short band (a phone on its side): the short words alone, so the band keeps its button */
@media (max-height: 520px) {
  .tb-end.sea .tb-er.tb-joined .tb-rs-row, .tb-end.sea .tb-er.tb-joined .tb-jl { display: none; }
  .tb-end.sea .tb-er.tb-joined .tb-js { display: inline; }
}
/* The preview under the sword (owner, 2026-10-08): what her blow or shot would do, beside the foe (over it on a phone,
   clear of the finger). Laid by tactical.ts tipDom; never takes a pointer. */
.tb-pv { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; min-width: 112px; max-width: 210px; box-sizing: border-box; padding: 6px 10px 7px;
  border: 1px solid #7d6238; border-radius: 6px; background: linear-gradient(180deg, rgba(30, 22, 15, 0.96), rgba(15, 11, 8, 0.96));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(201, 164, 90, 0.16); color: #ece1c8; font: 600 12.5px/1.35 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap; will-change: transform; }
.tb-pv.hidden { display: none; }
.tb-pv.flank { border-color: #b98236; }
.tb-pv-h { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 1px; }
.tb-pv-r, .tb-pv-ret { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.tb-pv-r span, .tb-pv-ret span { color: #c4b38f; font-weight: 500; }
.tb-pv-r b { color: #fff1d2; font-size: 13.5px; }
.tb-pv-r i { font-style: normal; color: #f0c674; margin-left: -8px; }
.tb-pv-fl { color: #f2a94a; font-weight: 700; }
.tb-pv-ret { margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(201, 164, 90, 0.22); }
.tb-pv-ret b { color: #ec9a86; }
.tb-pv-ret.none { display: block; color: #a9c99a; font-weight: 500; }
.tb-pv-n { color: #ad9f82; font-weight: 500; font-size: 11px; }
body.tac-ph .tb-pv { min-width: 96px; padding: 4px 8px 5px; font-size: 11.5px; }
body.tac-ph .tb-pv-r b { font-size: 12.5px; }
/* ---------- end of docs/23 phase 5 ---------- */
/* The sea waits while the decks fight on a phone: no chat, no sea's card over the field; the battle's own word (a
   refusal) in a line at the top, clear of the corners' buttons. */
body.tac-ph #hud-chat, body.tac-ph #encounter, body.tac-ph #surrender, body.tac-ph #trek, body.tac-ph #fishfight, body.tac-ph #nethaul { visibility: hidden; }
/* The card's numbers by their painted marks (a desk's card too): the mark beside the word and the number. */
.tb-stats > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 4px; min-width: 0; }
.tb-stats > div > .ico-xs { grid-row: span 2; width: 18px; height: 18px; margin: 0; border-radius: 3px; }
.tb-stats b { overflow-wrap: anywhere; line-height: 1.15; }
.tb-stats span { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.1; }
.tb-cardx { flex: none; position: relative; width: 30px; height: 30px; margin-left: auto; align-self: flex-start; padding: 0; border: 1px solid var(--brass-dim); border-radius: 50%;
  background: #16110d; color: var(--bone); font: 700 16px/1 var(--sans); cursor: pointer; }
.tb-cardx::before { content: '×'; }
.skinned .tb-cardx { border: 0; background: var(--ui-close) center / contain no-repeat; filter: drop-shadow(0 1px 3px #000); }
.skinned .tb-cardx::before { content: ''; }
.tb-card-h > div { min-width: 0; }
.tb-card-h > div b { overflow-wrap: anywhere; }
.tb-sps .tb-spc { font: inherit; font-size: 10.5px; color: var(--bone); background: rgba(255, 255, 255, 0.05); cursor: pointer; }
.tb-sps .tb-spc.on { border-color: var(--gold); color: var(--gold); }
.tb-spn { margin: 4px 0 0; padding: 4px 6px; border-left: 2px solid var(--brass-dim); font-size: 11.5px; line-height: 1.3; color: var(--bone); }
/* ---------- The popup budget (owner, 2026-10-04: «текстовая часть должна занимать не более 15 процентов экрана любого
   монитора и быть где-то внизу-вверху, чтобы центр не закрывать… это касается всех всплывающих плашек»). What the sea
   says in passing — a toast, a line said aboard, the region's herald — keeps to one band of a fixed size: on a desk in
   the bottom-left corner over the chat's button, where WoW keeps its log (over the action bar, in the bottom 30% of
   the height, while the chat or the adventure map's card is open there, or on a narrower screen); on a short screen (a phone on its side, a small
   window), whose bottom the action bar fills, in the top row beside the fold button (its bounds measured in hud.ts).
   What does not fit wraps into a column beyond the band's edge, out of sight, so the band never grows into the
   middle; each toast is the band's full width, so nothing shows beside it. */
#toasts { top: auto; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--hb-top, 0px) + 6px);
  width: min(440px, 44vw / var(--ui-scale, 1)); height: clamp(46px, calc(30vh / var(--ui-scale, 1) - var(--hb-top, 0px) - 6px), 150px);
  display: flex; flex-flow: column-reverse wrap; align-content: flex-start; align-items: stretch; gap: 4px; overflow: hidden; }
body.touch #toasts { bottom: calc(max(var(--hb-top, 0px), var(--sa-b) + var(--touch-h) + 150px) + 6px); }
#toasts > .toast { flex: none; width: calc(100% / var(--density, 1)); }
#toasts > .toast.advice { border-left-color: var(--gold); color: #efe3c4; } /* the First Watch's hints (onboarding.ts) */
#toasts > .toast.bad:not(.talk) { order: -1; } /* a refusal keeps its place nearest the edge: a coin coming after it does not push it out */
#toasts .toast.herald { padding: 3px 10px 4px; }
#toasts .toast.herald b { font-size: 16px; line-height: 19px; }
#toasts .toast.herald small { font-size: 12px; line-height: 14px; }
@media (min-width: 1100px) and (min-height: 600px) {
  body:not(.touch):not(.chat-open):not(.tac):not(:has(#advcard:not(.hidden))) #toasts { left: calc(var(--sa-l) + 12px); transform: none; bottom: calc(var(--sa-b) + 68px);
    width: min(380px, calc(var(--hb-left, 400px) - var(--sa-l) - 24px)); height: clamp(50px, calc(34vh / var(--ui-scale, 1) - 68px), 180px); }
}
@media (max-width: 699px), (max-height: 520px) {
  #toasts { top: var(--ts-top, calc(var(--sa-t) + 8px)); bottom: auto; left: var(--ts-left, 30vw); transform: none;
    width: var(--ts-w, 40vw); height: var(--ts-h, 44px); flex-flow: column wrap; gap: 2px; }
  /* Three lines at most in the strip as tall as the fold button (a hint, a long refusal), or two toasts of a line. */
  #toasts > .toast { padding: 2px 8px; font-size: 11px; line-height: 13px; }
  #toasts .toast > span { -webkit-line-clamp: 3; line-clamp: 3; }
  #toasts .toast .ico-toast { width: 15px; height: 15px; }
  /* A line said aboard: a small face, the speaker and the words running on, two lines at most. */
  #toasts .toast.talk { align-items: center; gap: 6px; padding: 2px 8px 2px 3px; }
  #toasts .toast.talk .talk-face { width: 22px; height: 22px; }
  #toasts .toast.talk .talk-body { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #toasts .toast.talk .talk-who { display: inline; font-size: 11px; line-height: 13px; }
  #toasts .toast.talk .talk-who::after { content: ' · '; color: var(--fog); }
  #toasts .toast.talk .talk-line { display: inline; font-size: 11.5px; line-height: 13px; }
  #toasts .toast.herald { padding: 1px 8px 2px; }
  #toasts .toast.herald b { font-size: 15px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #toasts .toast.herald small { font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* The decks fighting on a desk: the battle's word in the header beside the round and its clock, clear of the
   captains' plates (it stood in the right column's middle, over the order of the round). */
body.tac #toasts { top: calc(var(--sa-t) + 12px); bottom: auto; left: calc(50% + 136px); transform: none; width: min(360px, calc(50% - 136px - 262px)); height: 100px; flex-flow: column wrap; }
/* The decks fighting on a phone: the battle's word in a line at the top, clear of the corners' buttons. */
body.tac-ph #toasts { top: calc(var(--sa-t) + 8px); left: 50%; transform: translateX(-50%); width: min(56vw, 340px); height: 44px; }
/* An encounter's card in the top band, its picture beside its words, so it ends above the ship (it stood from 150 px
   down past the middle, the ship under it). A short screen keeps it in the top-left corner, over the captain's plate,
   to its title and its choices: the title opens the scene's words. */
#encounter { top: calc(var(--sa-t, 0px) + 12px); width: min(460px, calc(100vw - 24px)); }
#encounter .enc-card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding: 8px 10px 10px; }
#encounter .enc-card:has(> .enc-art) { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
#encounter .enc-card:has(> .enc-art) > :not(.enc-art):not(.enc-choices) { grid-column: 2; }
#encounter .enc-card > .enc-art { grid-row: 1 / span 3; width: 96px; height: auto; aspect-ratio: 1; margin: 0; }
#encounter .enc-h { display: block; width: 100%; margin: 0 0 2px; padding: 0; border: 0; background: none; text-align: left; font-size: 17px; line-height: 1.25; cursor: default; }
#encounter .enc-text, #encounter .enc-out { margin: 0 0 6px; font-size: 13px; line-height: 1.4; }
#encounter .enc-choices { grid-column: 1 / -1; margin-top: 6px; }
@media (max-width: 699px), (max-height: 520px) {
  #encounter { top: calc(var(--sa-t, 0px) + 6px); left: calc(var(--sa-l, 0px) + 8px); transform: none; width: min(420px, calc(var(--ts-left, 360px) - var(--sa-l, 0px) - 16px)); min-width: 0; }
  body:has(#encounter:not(.hidden)) #hud-captain { visibility: hidden; }
  #encounter .enc-card { padding: 6px 8px 8px; }
  #encounter .enc-card:has(> .enc-art) { grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; }
  #encounter .enc-card > .enc-art { grid-row: 1; width: 30px; border-radius: 50%; }
  #encounter .enc-h { display: flex; align-items: center; gap: 6px; min-height: 30px; font-size: 15px; cursor: pointer; }
  #encounter .enc-fold::after { content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 3px auto; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.15s; }
  #encounter .enc-card.open .enc-fold::after { transform: rotate(-135deg); margin-bottom: -3px; }
  #encounter .enc-text { display: none; font-size: 12px; line-height: 1.35; margin: 2px 0 0; grid-column: 1 / -1 !important; }
  #encounter .enc-card.open .enc-text { display: block; }
  #encounter .enc-out { grid-column: 1 / -1 !important; font-size: 12px; line-height: 1.35; margin: 4px 0 0; }
  /* The choices in one row, a long one in two lines of its own button (in rows they took half the card). */
  #encounter .enc-choices { margin-top: 6px; gap: 4px; flex-wrap: nowrap; }
  #encounter .enc-choices .btn { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 2px 3px; font-size: 11.5px; line-height: 1.15; white-space: normal; overflow-wrap: normal; }
}
@media (max-width: 660px) { #encounter .enc-choices .btn { font-size: 10.5px; } } /* «(Лидерство)» whole in a third of 640 px */
/* A window open: the sea's cards wait under it (an encounter's card stood over the boarding's spoils). */
body:has(#modal:not(.hidden)) #encounter, body:has(#modal:not(.hidden)) #surrender { visibility: hidden; }
/* The terms of a struck ship and a stormed lair's chest, placed as an encounter's card: in the top band on a desk (the
   top stack steps aside while they are up), in the top-left corner over the captain's plate on a short screen. The
   terms keep to their head, a line of words and the four choices in one row (what each gives in its tooltip); «Later»
   beside the title and how near she must come under it, not a line of their own below the choices. */
#surrender, #lairchest { top: calc(var(--sa-t, 0px) + 12px); }
#surrender .enc-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 8px 10px 9px; }
#surrender .sur-head { grid-column: 1; grid-row: 1; min-width: 0; }
#surrender .sur-ship { width: 40px; height: 40px; }
#surrender .sur-foot { display: contents; }
#surrender .sur-foot .btn { grid-column: 2; grid-row: 1; margin: 0; align-self: start; min-height: 28px; padding: 2px 12px; }
#surrender .sur-dist, #surrender .sur-left { grid-row: 2; font-size: 12px; line-height: 1.3; margin-top: 3px; }
#surrender .sur-dist, #surrender .sur-left { grid-column: 1 / -1; } /* one line: how near at its start, how long at its end */
#surrender .sur-left { justify-self: end; white-space: nowrap; }
#surrender .enc-text { grid-column: 1 / -1; margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; }
#surrender .sur-choices { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
#surrender .sur-choice { justify-content: center; gap: 5px; min-height: 36px; padding: 3px 6px; text-align: center; }
#surrender .sur-choice small { display: none; }
#surrender .sur-choice b { font-size: 12px; line-height: 1.15; }
#surrender .sur-choice .choice-ico { width: 20px; height: 20px; }
/* A desk's wide screen: the terms a little wider, so a choice keeps to two lines («Keep her as a trophy» ran four and the
   card 216 px down into the middle of a 1500×600 sea), and the toasts wait while they are up — a toast stood under the
   card, its words showing through the ship's line (QA 2026-10-09; on touch they wait already, seahud.css). */
@media (min-width: 1100px) and (min-height: 521px) {
  #surrender { width: min(640px, calc(100vw - 600px)); }
  body.simple:not(.touch):has(#surrender:not(.hidden)) #toasts { display: none !important; }
}
@media (max-width: 699px), (max-height: 520px) {
  #surrender, #lairchest { top: calc(var(--sa-t, 0px) + 6px); left: calc(var(--sa-l, 0px) + 8px); transform: none; width: min(440px, calc(var(--ts-left, 360px) - var(--sa-l, 0px) - 16px)); min-width: 0; }
  body:has(#surrender:not(.hidden)) #hud-captain, body:has(#lairchest:not(.hidden)) #hud-captain { visibility: hidden; }
  #surrender .enc-card { padding: 6px 8px 7px; column-gap: 8px; }
  #surrender .sur-sub, #surrender .sur-ship, #surrender .enc-text, #surrender .sur-left { display: none; }
  #surrender .enc-h { font-size: 15px; }
  #surrender .sur-dist { grid-column: 1 / -1; font-size: 11px; margin-top: 1px; }
  #surrender .sur-foot .btn { min-height: 26px; padding: 2px 10px; }
  #surrender .sur-choices { margin-top: 5px; gap: 4px; }
  #surrender .sur-choice { min-height: 34px; padding: 2px 4px; }
  #surrender .sur-choice .choice-ico { display: none; } /* a quarter of the row is the word's (the icon stood over «Отпустить») */
  #surrender .sur-choice b { font-size: 11px; }
}
/* A lair's chest: its four lines two by two; on a short screen without its picture and the island's line, «Take it»
   beside the title. */
#lairchest .lc-art { width: 48px; height: 48px; }
#lairchest .lc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 6px 0; }
@media (max-width: 699px), (max-height: 520px) {
  #lairchest .enc-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 6px 8px 7px; }
  #lairchest .lc-head { grid-column: 1; grid-row: 1; min-width: 0; }
  #lairchest .lc-art, #lairchest .lc-sub { display: none; }
  #lairchest .lc-foot { grid-column: 2; grid-row: 1; }
  #lairchest .lc-foot .btn { min-height: 28px; padding: 2px 12px; }
  #lairchest .lc-list { grid-column: 1 / -1; margin: 4px 0 0; gap: 2px 8px; }
  #lairchest .lc-list li { font-size: 11.5px; }
}
/* The adventure map's card on a short screen: in the middle column under the fold button's row (the toasts' strip),
   within the top third or so of the height (advcard.ts), scrolling; each card its head and its buttons, a tap on the
   head opens the rest; what lies under it in the top stack steps aside. (It stood over the fold and the toasts down
   to three quarters of the height, 29% of the screen.) */
/* A tablet or a narrow window keeps the card where it was (under the chart's lines) but as compact, within the top
   third of the height (advcard.ts) — it stood from a fifth of the height to the middle, over the ship. */
@media (max-width: 1099px) {
  #advcard .ac-card { padding: 5px 8px 6px; }
  #advcard .ac-head { cursor: pointer; }
  #advcard .ac-head .ac-art { width: 28px; height: 28px; }
  #advcard .ac-head .enc-h::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  #advcard .ac-card.open .ac-head .enc-h::after { transform: rotate(-135deg); margin-bottom: 0; }
  #advcard .ac-card:not(.open) > :not(.ac-head):not(.ac-acts):not(.ac-guard), #advcard .ac-card:not(.open) .ac-guard > :not(.ac-acts), #advcard .ac-card:not(.open) .ac-sub { display: none; }
  #advcard .ac-acts { flex-wrap: nowrap; margin-top: 4px; }
  #advcard .ac-acts .btn { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 2px 6px; font-size: 11.5px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  #advcard .ac-acts .btn .ico-sm { display: none; }
  #advcard { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
}
@media (max-width: 699px), (max-height: 520px) {
  /* In the top row itself, where the fold button and the toasts' strip stand (it stood under them, 56–144 px of a
     360 px screen: into the middle — QA circle, 2026-10-05); the fold steps aside and the toasts go under the captain's
     plate at the left (--tq-*, hud.ts), out of the middle's columns. */
  #advcard { top: var(--ts-top, 8px); left: calc(var(--ts-left, 408px) - 48px); transform: none; width: calc(var(--ts-w, 250px) + 48px); min-width: 0; gap: 4px; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
  body:has(#advcard:not(.hidden)) #hud-stack { visibility: hidden; }
  body:has(#advcard:not(.hidden)) #toasts { top: var(--tq-top, var(--ts-top)); left: var(--tq-left, var(--ts-left)); width: var(--tq-w, var(--ts-w)); }
}
@media (max-height: 520px) {
  /* A drift's card in the top band's 85 px: its ways and «Fight» in one low row (the ways' chances were cut and «Fight»
     lay under the card's foot). */
  #advcard .ac-dcard:not(.open) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; padding-top: 4px; padding-bottom: 4px; }
  #advcard .ac-dcard:not(.open) > :not(.ac-head) { grid-column: 1 / -1; }
  #advcard .ac-dcard:not(.open) > .ac-head { grid-column: 1 / -1; }
  #advcard .ac-dcard:not(.open) .dw-ways, #advcard .ac-dcard:not(.open) > .ac-acts:last-child { display: contents; }
  #advcard .ac-dcard:not(.open) .dw-ways .btn, #advcard .ac-dcard:not(.open) > .ac-acts:last-child .btn { grid-column: auto; min-height: 0; height: 22px; padding: 0 3px; font-size: 10px; line-height: 1; white-space: nowrap; margin: 0; height: 20px; flex-wrap: nowrap; justify-content: center; gap: 3px; }
  #advcard .ac-dcard:not(.open) .dw-way .dw-p, #advcard .ac-dcard:not(.open) .dw-way .bcost { font-size: 10px; }
  .skinned #advcard .ac-dcard:not(.open) .dw-ways .btn, .skinned #advcard .ac-dcard:not(.open) > .ac-acts:last-child .btn { border-width: 4px 5px; border-image-width: 4px 5px; }
  /* …and her mini-game once a way is chosen: the needle's bar and «Now!» stay on the folded card (the fold hid the
     whole game — a rescue could not be played on a phone on its side without first opening the card). */
  #advcard .ac-card:not(.open) > .dm-mini { display: block !important; margin-top: 2px; padding: 3px 6px; }
  #advcard .ac-card:not(.open) .dm-mini > .dm-h, #advcard .ac-card:not(.open) .dm-mini > .dm-row { display: none; }
  #advcard .ac-card:not(.open) .dm-mini .dm-bar { height: 12px; }
  #advcard .ac-card:not(.open) .dm-mini .ac-acts { margin-top: 3px; flex-wrap: nowrap; }
  #advcard .ac-card:not(.open) .dm-mini .btn { flex: 1 1 auto; min-height: 0; height: 24px; padding: 0 6px; font-size: 11px; line-height: 1; white-space: nowrap; }
  #advcard .ac-dcard:not(.open) .dw-way .bcost .ico-sm { width: 13px; height: 13px; }
  #advcard .ac-dcard:not(.open) > .ac-acts:last-child .btn .ico-sm { display: none; }
}
@media (max-height: 520px) {
  /* The First Watch's lesson in the top row (beside the fold's button): the toasts to a clear side column (hud.ts). */
  body:has(#hud-stack > #hud-watch:not(.hidden):not(.tut-hidden)) #toasts { top: var(--tq-top, var(--ts-top)); left: var(--tq-left, var(--ts-left)); width: var(--tq-w, var(--ts-w)); }
  #advcard .ac-card { padding: 5px 8px 6px; }
  #advcard .ac-head { cursor: pointer; }
  #advcard .ac-head .ac-art { width: 28px; height: 28px; }
  #advcard .ac-head .enc-h::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  #advcard .ac-card.open .ac-head .enc-h::after { transform: rotate(-135deg); margin-bottom: 0; }
  #advcard .ac-card:not(.open) > :not(.ac-head):not(.ac-acts):not(.ac-guard), #advcard .ac-card:not(.open) .ac-guard > :not(.ac-acts), #advcard .ac-card:not(.open) .ac-sub { display: none; }
  #advcard .ac-acts { flex-wrap: nowrap; margin-top: 4px; }
  #advcard .ac-acts .btn { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 2px 6px; font-size: 11.5px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  #advcard .ac-acts .btn .ico-sm { display: none; } /* the row is the words' (an icon pushed «Прочитать» past its button) */
}
/* ---------- The yard's tree of hulls (owner, 2026-10-04: «как в world of tanks»; docs/20; client/src/ui/research.ts):
   a list's tiers as rows, each hull a card — the one she sails in brass, those researched in green, the next with
   the experience earned toward them, the locked dimmed, the doubloon hulls gilded. */
.rs-body { display: grid; gap: 10px; align-content: start; }
.rs-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: start; }
.rs-tier { font: 400 15px var(--display); color: var(--gold); padding-top: 20px; text-align: center; letter-spacing: 0.04em; }
.rs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.rs-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid rgba(111, 90, 56, 0.5); border-radius: 6px; background: rgba(10, 11, 13, 0.6); min-width: 0; }
.rs-art { width: 58px; height: 40px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rs-art img { height: 58px; width: auto; transform: rotate(90deg); filter: drop-shadow(0 3px 4px #000); }
.rs-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; line-height: 1.3; }
.rs-text b { font-size: 13px; overflow-wrap: anywhere; }
.rs-line { color: var(--fog); }
.rs-xp, .rs-cross { font-size: 11px; }
.rs-card .btn { margin-top: 4px; align-self: flex-start; }
.rs-sail { border-color: var(--gold); box-shadow: 0 0 10px rgba(232, 196, 106, 0.25); }
.rs-sail .rs-line, .rs-owned .rs-line { color: var(--gold); }
.rs-known .rs-line { color: #9fd49a; }
.rs-ready { border-color: rgba(120, 190, 120, 0.8); }
.rs-locked { opacity: 0.55; }
.rs-premium { border-color: rgba(232, 196, 106, 0.55); background: linear-gradient(135deg, rgba(60, 46, 18, 0.55), rgba(10, 11, 13, 0.6)); }
.rs-premium .rs-line { color: #e8c46a; }
.rs-bar { height: 5px; margin: 3px 0 0; background: #0b0d10; border: 1px solid rgba(111, 90, 56, 0.5); border-radius: 3px; overflow: hidden; }
.rs-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4f7aa8, #9fd0ff); }
.hulls-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hull-lock { display: block; font-size: 11.5px; margin-top: 2px; }
@media (max-width: 699px), (max-height: 520px) {
  .rs-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rs-tier { padding-top: 0; text-align: left; font-size: 13px; }
  .rs-cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
  .rs-card { grid-template-columns: 46px minmax(0, 1fr); padding: 5px 7px; }
  .rs-art { width: 46px; height: 32px; }
  .rs-art img { height: 46px; }
}
/* The ship screen's card of the tree (docs/20): the hulls her hull leads to, each with how near it is. */
.rs-ship .rs-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; margin: 4px 0; font-size: 12.5px; }
.rs-ship .rs-next .rs-bar { grid-column: 1 / -1; }
.rs-ship .btn { margin-top: 6px; }

/* A taller screen whose bottom block leaves the toasts' band no room under the middle, the desk's corner taken (the
   adventure map's card, the chat): the band in a clear side column (hud.ts placeDeskStrip). */
body.tq-side #toasts { top: var(--tq-top) !important; left: var(--tq-left) !important; width: var(--tq-w) !important; bottom: auto !important; transform: none !important; height: 46px !important; flex-flow: column wrap !important; }
/* …each toast as compact as on a short screen: three lines at most, the herald's two on one line each. */
body.tq-side #toasts { gap: 2px !important; }
body.tq-side #toasts > .toast { padding: 2px 8px; font-size: 11px; line-height: 13px; }
body.tq-side #toasts .toast > span { -webkit-line-clamp: 3; line-clamp: 3; }
body.tq-side #toasts .toast.talk .talk-face { width: 22px; height: 22px; }
body.tq-side #toasts .toast.talk .talk-body { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.tq-side #toasts .toast.talk .talk-who { display: inline; font-size: 11px; line-height: 13px; }
body.tq-side #toasts .toast.talk .talk-who::after { content: ' · '; color: var(--fog); }
body.tq-side #toasts .toast.talk .talk-line { display: inline; font-size: 11.5px; line-height: 13px; }
body.tq-side #toasts .toast.herald { padding: 1px 8px 2px; }
body.tq-side #toasts .toast.herald b { font-size: 15px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.tq-side #toasts .toast.herald small { font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* English titles in IM Fell English SC sit 1.9px over their plate's middle (its Latin small capitals ride high; the
   Russian falls back to Cormorant, centred): measured by the centring audit (QA circle, 2026-10-05). */
/* (a Latin title on a Russian screen — a ship's name — is marked lang="en" by main.ts renderModal) */
.skinned .modal-head h2:lang(en) { padding: 3px 6px 0; }
.skinned .title-sm:lang(en) { padding: 2px 6px 0; }
/* A desktop under 820 px tall: the adventure card stands under the ship panel and its flavour text pushed its buttons
   below the fold (1280×720: 62 px to scroll for «Высадиться и биться») — the text goes, as on the short screens. */
@media (min-width: 1100px) and (min-height: 521px) and (max-height: 820px) { #advcard .ac-text { display: none; } #advcard .enc-card { padding-top: 6px; padding-bottom: 6px; } #advcard .ac-art { width: 40px; height: 40px; } #advcard .ac-line { margin: 2px 0; } }
@media (min-width: 1100px) and (min-height: 521px) and (max-height: 700px) { #advcard .ac-come { display: none; } #advcard .ac-sub { font-size: 11px; } #advcard .ac-acts { margin-top: 4px; } #advcard .ac-acts .btn { min-height: 30px; } }
/* The sinking / boarding-lost card on a short screen (a phone on its side): the title, the story, three rows, the note
   and «Вернуться в порт» all on one screen — the button stood below the fold at 812×375. */
@media (max-height: 520px) {
  #modal-panel[data-modal="sunk"] .center-card { margin: 4px auto; max-width: 620px; }
  #modal-panel[data-modal="sunk"] .center-card .title-sm { font-size: 20px !important; margin: 0 0 2px; }
  #modal-panel[data-modal="sunk"] .center-card > p { font-size: 13px !important; line-height: 1.3; margin: 2px 0 4px; }
  #modal-panel[data-modal="sunk"] .loss-list { margin: 4px auto; max-width: 420px; }
  #modal-panel[data-modal="sunk"] .loss-row { grid-template-columns: 26px minmax(0, 1fr) auto; padding: 2px 0; font-size: 13px; }
  #modal-panel[data-modal="sunk"] .loss-row .item-ico { width: 24px; height: 24px; }
  #modal-panel[data-modal="sunk"] .center-card .btn { min-height: 34px; margin-top: 2px; }
}
/* ---------- docs/22 the polish pass ---------- */
/* A toast wrapped past the band's edge (hud.ts clip) is out of sight. */
#toasts > .toast.tq-out { visibility: hidden; }
/* docs/22 B: the feel of every control — pressed, hovered, disabled, focused; a finger's target on touch; calm
   window openings; the reduced-motion wish kept everywhere. Zero-specificity (:where) so no screen's own rule is
   overridden. */
:where(.btn, .tab, .act-btn, .menu-tile, .slot):active:not(:disabled):not([aria-disabled="true"]) { translate: 0 1px; filter: brightness(0.86); }
:where(.btn, .tab, .act-btn):disabled, :where(.btn, .act-btn)[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(0.55); }
:where(.tab):not(.active):hover { color: var(--bone); }
/* A keyboard's place: a brass ring on whatever holds the focus (never on a click's). */
:where(button, [role="button"], a[href], .tab, select, input, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
:where(.skinned .btn):focus-visible { outline-offset: 3px; }
/* A finger's target (≥ 40 px) on touch without moving a pixel of the layout: the hit area reaches past the frame. */
:where(body.touch) :where(.btn, .tab, .act-btn) { position: relative; }
:where(body.touch) :where(.btn, .tab, .act-btn)::after { content: ''; position: absolute; inset: -4px -2px; }
:where(body.touch) :where(.skinned .btn)::after { inset: -10px -12px; }
:where(body.touch) :where(.tab)::after { inset: -9px -1px; }
:where(body.touch) :where(.act-btn)::after { inset: -6px -2px; }
:where(body.touch) :where(.lf-goal-btn) { position: relative; }
:where(body.touch) :where(.lf-goal-btn)::after { content: ''; position: absolute; inset: -6px -2px; }
:where(body.touch) :where(label:has(> input[type="checkbox"], > input[type="radio"])) { position: relative; }
:where(body.touch) :where(label:has(> input[type="checkbox"], > input[type="radio"]))::after { content: ''; position: absolute; inset: -10px 0; }
:where(body.touch) :where(label > input[type="checkbox"], label > input[type="radio"]) { position: relative; z-index: 1; } /* the box itself stays on top of the label's wider reach */
:where(body.touch) :where(#modal-panel select, #modal-panel input[type="range"]) { min-height: 40px; }
/* A window comes up softly (140 ms, no slide); its tabs change at once. */
@keyframes pol-win-in { from { opacity: 0; } to { opacity: 1; } }
#modal:not(.hidden) > #modal-panel { animation: pol-win-in 140ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* No jumps as the numbers run (silver, hull, men, the round): every figure of the HUD, the helm and the battle in
   even-width digits. */
#hud, #touch, .tb-root { font-variant-numeric: tabular-nums; }

/* The target line's boarding chance (docs/23 item 49). */
.tg-odds { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-odds-bad { color: #d2473a; }
.tg-odds-warn { color: #e0b862; }
.tg-odds-good { color: #7fae6a; }
/* docs/25 item 12: her broadsides to sink the mark («≈ 13 залпов»). */
.tg-volleys { font-variant-numeric: tabular-nums; white-space: nowrap; color: #d9cfb8; }
/* docs/23 item 39: the best shot for the mark now. */
.ab-ammo .best { box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(224, 184, 98, 0.6); }

/* ======================================================================================================================
   docs/23 phase 2 — the sea HUD on a phone: the sea and five buttons (client/src/ui/seahud.ts, touch.ts).
   Left: the helm stick (its ring is the sail, its chip the dash). Right: «Огонь», big, «Действие» over it, «Особое»
   beside it, the target's line over them. Top left: a mini portrait with hull and crew; top: one counter of goals and
   news; top right: the menu and the minimap. Everything else of the older touch HUD — the shot and ability bar, the
   compass, the micro menu, the chart's lines, the fold, the chat's button — is put away on touch (it lives in the wheel,
   the menu's sheet and the news sheet). A target (a fight) puts the counter and the minimap away too. The desktop keeps
   its bar and keys. Sizes: 44 px at least for anything a thumb takes (accessibility), 80 px for «Огонь». */
body.touch { --sea-pad: 10px; --sea-fire: 80px; --sea-act-h: 52px; }
@media (min-width: 700px) and (min-height: 521px) { body.touch { --sea-pad: 16px; --sea-fire: 92px; } }

/* What the phone's sea does without. */
body.touch #hud-combat, body.touch #hud-nav, body.touch #hud-menu, body.touch #hud-region, body.touch #hud-fold,
body.touch #hud-prompt .act-row, body.touch #hud-prompt .act-more-row, body.touch #chat-toggle,
body.touch #hud-stack > :is(#hud-tip, #hud-fish, #hud-order, #hud-holiday, #hud-world, #hud-goals, #hud-feed, #hud-target, #hud-signals, #hud-orders) { display: none !important; }
body.touch #hud-ship { display: none; }
body.touch #hud-prompt { display: block; }
body.touch #hud-bottom { pointer-events: none; }

/* The mini portrait: the captain's face, her level, two thin bars (hull, crew) — information, not a button. */
body.touch #hud-captain { width: auto; gap: 6px; pointer-events: none; cursor: default; top: calc(var(--sa-t) + 8px); left: calc(var(--sa-l) + 8px); }
body.touch #hud-captain .uf-portrait { width: 44px; height: 44px; }
body.touch #hud-captain .uf-body { flex: none; width: 104px; padding: 0; background: none; border: 0; border-image: none; box-shadow: none; }
body.touch #hud-captain :is(.uf-top, .uf-sub, .fbar.sails, .fbar.xp) { display: none; }
body.touch #hud-captain .fbar { height: 7px; margin: 4px 0 0; border-radius: 4px; overflow: hidden; border: 1px solid rgba(5, 6, 7, 0.9); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
body.touch #hud-captain .fbar > span { display: none; }

/* The top row: the news counter after the portrait; the menu left of the minimap. */
body.touch #touch > .tc-news { position: absolute; top: calc(var(--sa-t) + 8px); left: calc(var(--sa-l) + 172px); pointer-events: auto; }
body.touch #touch > #tc-menu { position: absolute; top: calc(var(--sa-t) + 8px); right: calc(var(--sa-r) + var(--mm) + 20px); pointer-events: auto; }
body.touch.sea-target #touch > .tc-news { display: none !important; } /* (the chart steps up behind its tab: seahud.css mm-peek) */
body.touch #hud-stack, body.touch #hud #hud-stack { left: calc(var(--sa-l) + 228px); right: calc(var(--sa-r) + var(--mm) + 76px); top: calc(var(--sa-t) + 8px); transform: none; width: auto; min-width: 0; }
/* (the menu keeps its place in a fight: the stack stops short of it, docs/23 item 97 — a hunt's card lay under it) */
body.touch.sea-target #hud-stack, body.touch.sea-target #hud #hud-stack { left: calc(var(--sa-l) + 172px); right: calc(var(--sa-r) + var(--mm) + 76px); }

/* The helm stick: its ring is the sail (a gauge from bottom left round to bottom right, four steps lit in gold). */
#tc-sailring { position: absolute; inset: -9px; border-radius: 50%; pointer-events: none; --a: 0deg;
  background: conic-gradient(from -135deg, var(--k-gold) 0 var(--a), rgba(14, 16, 19, 0.78) var(--a) 270deg, transparent 270deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 3px rgba(224, 184, 98, 0.45)); }
#tc-stick[data-sail="1"] #tc-sailring { --a: 67.5deg; }
#tc-stick[data-sail="2"] #tc-sailring { --a: 135deg; }
#tc-stick[data-sail="3"] #tc-sailring { --a: 202.5deg; }
#tc-stick[data-sail="4"] #tc-sailring { --a: 270deg; }
#tc-stick.reefed #tc-sailring { animation: k-flash 400ms var(--k-ease-out); }
/* The dash's chip (a double tap): bright when the braces are ready, a dark sweep while they are not. */
#tc-dashchip { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; pointer-events: none; background: rgba(16, 14, 11, 0.92); box-shadow: 0 0 0 1px var(--k-brass-dim); }
#tc-dashchip::before { content: '»'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--k-gold); font: 700 15px/1 var(--k-font-sans); }
#tc-dashchip::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0, 0, 0, 0.7) calc(var(--cd, 0) * 360deg), transparent 0); }
#tc-stick.cooling #tc-dashchip::before { color: var(--k-haze); }

/* «Огонь»: the big round button in the right thumb's corner; its rim fills as the guns load, the shot loaded on its
   corner. A long press opens the wheel. */
#touch > .tc-big { position: absolute; right: calc(var(--sa-r) + var(--sea-pad)); bottom: calc(var(--sa-b) + var(--sea-pad)); width: var(--sea-fire); height: var(--sea-fire); padding: 0;
  flex-direction: column; gap: 0; border: 0; border-radius: 50%; pointer-events: auto; color: var(--k-bone);
  background: radial-gradient(circle, #4a1c17 0 52%, #1b0e0b 70%); box-shadow: 0 0 0 2px var(--k-brass-dim), 0 4px 16px rgba(0, 0, 0, 0.8); }
.skinned #touch > .tc-big::after { content: none; }
#touch > .tc-big .tc-ring { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--k-gold) calc(var(--rl, 1) * 360deg), rgba(14, 16, 19, 0.7) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
#touch > .tc-big.loaded { box-shadow: 0 0 0 2px var(--k-brass), 0 0 18px rgba(224, 120, 70, 0.45), 0 4px 16px rgba(0, 0, 0, 0.8); }
#touch > .tc-big .tc-big-ico { position: static; width: 46%; height: 46%; object-fit: contain; border-radius: 0; font-size: 26px; display: inline-flex; align-items: center; justify-content: center; }
#touch > .tc-big .tc-big-l { font: 700 12px/1 var(--k-font-serif); letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-gold); text-shadow: var(--k-shadow-1); margin-top: 2px; }
#touch > .tc-big .tc-ammo { position: absolute; left: -6px; top: -6px; display: flex; align-items: center; gap: 2px; height: 22px; padding: 0 5px 0 2px; border-radius: var(--k-r-round); background: rgba(10, 11, 13, 0.92); box-shadow: 0 0 0 1px var(--k-brass-dim); font: 700 10px/1 var(--k-font-sans); color: var(--k-bone); font-variant-numeric: tabular-nums; }
#touch > .tc-big .tc-ammo-ico { width: 18px; height: 18px; object-fit: contain; }

/* «Действие» over «Огонь», «Особое» beside it, the target's line over them. */
#touch > .tc-act { position: absolute; right: calc(var(--sa-r) + var(--sea-pad)); bottom: calc(var(--sa-b) + var(--sea-pad) + var(--sea-fire) + 10px); max-width: 210px; pointer-events: auto; animation: ctx-pulse 1.8s ease-in-out infinite; }
#touch > .tc-act .tc-act-ico { display: inline-flex; flex: none; }
#touch > .tc-act .tc-act-more { position: absolute; top: -8px; left: -8px; min-width: 22px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: var(--k-r-round); background: rgba(10, 11, 13, 0.92); box-shadow: 0 0 0 1px var(--k-brass-dim); color: var(--k-bone); font: 700 10px/20px var(--k-font-sans); text-align: center; pointer-events: none; }
#touch > .tc-special { position: absolute; right: calc(var(--sa-r) + var(--sea-pad) + var(--sea-fire) + 14px); bottom: calc(var(--sa-b) + var(--sea-pad) + 4px); pointer-events: auto; box-shadow: 0 0 12px rgba(224, 184, 98, 0.45); }
#touch > #tc-target { position: absolute; right: calc(var(--sa-r) + var(--sea-pad)); bottom: calc(var(--sa-b) + var(--sea-pad) + var(--sea-fire) + 10px + var(--sea-act-h) + 8px); width: min(250px, 32vw); pointer-events: auto; }
#touch > #tc-target .k-target { width: 100%; }
#touch:not(:has(> .tc-act:not(.hidden))) > #tc-target { bottom: calc(var(--sa-b) + var(--sea-pad) + var(--sea-fire) + 10px); }
/* In port: no helm, no guns. */
body.touch.sea-docked #touch > :is(#tc-stick, .tc-special, #tc-target) { display: none; }
/* …and the big round button casts off (docs/23 phase 6): gold, no reload ring, no shot. */
#touch > .tc-big.tc-sail .tc-ring, #touch > .tc-big.tc-sail .tc-ammo { display: none; }
#touch > .tc-big.tc-sail { background: radial-gradient(circle, #3a2f22 0 52%, #17140f 70%); box-shadow: 0 0 0 2px var(--k-brass), 0 0 16px rgba(224, 184, 98, 0.35), 0 4px 16px rgba(0, 0, 0, 0.8); }

/* The menu's sheet: eight big tiles, four to a row. */
.k-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k-sp-2); padding: var(--k-sp-1) 0 var(--k-sp-2); }
.k-tile { flex-direction: column; gap: var(--k-sp-1); min-height: 72px; padding: var(--k-sp-2) var(--k-sp-1); }
.k-tile .k-tile-ico { width: 32px; height: 32px; object-fit: contain; }
.k-tile .k-tile-ico.glyph { display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.k-tile .k-btn-l { white-space: nowrap; max-width: 100%; }
/* A sheet that holds HUD blocks lent to it (the news, the target's card): they stand in its flow. */
.sea-lent { display: flex; flex-direction: column; gap: var(--k-sp-2); padding-bottom: var(--k-sp-2); }
.sea-lent > :not(.hidden) { position: static !important; display: block !important; width: auto !important; max-width: none !important; transform: none !important; margin: 0 !important; max-height: none !important; overflow: visible !important; }
/* docs/19 E12: the relics in the hero window (each a card: its face, its parts lit when worn, dim in the locker, dark
   when not found; assembled, it glows as a whole set) and a relic's slots on the paper doll. */
.hx-relics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hx-relic { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid rgba(176, 141, 87, 0.3); border-radius: 6px; font-size: 12px; min-width: 0; background: rgba(10, 12, 16, 0.35); }
.hx-relic.on { border-color: #e6cc80; box-shadow: 0 0 12px rgba(230, 204, 128, 0.35), inset 0 0 8px rgba(230, 204, 128, 0.12); }
.hx-relic small { color: var(--fog); line-height: 1.3; }
.hx-rhead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hx-rhead b { color: #e6cc80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hx-rn { margin-left: auto; flex: none; white-space: nowrap; }
.hx-rface { flex: none; border-radius: 4px; }
.hx-rparts { display: flex; flex-wrap: wrap; gap: 4px; }
.hx-rpart { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid #3c3c40; border-radius: 4px; background: #0b0b0d; }
.hx-rpart .ico-sm { width: 26px; height: 26px; }
.hx-rpart.worn { border-color: #e6cc80; box-shadow: 0 0 6px rgba(230, 204, 128, 0.45); }
.hx-rpart.held { border-color: #6f5a38; }
.hx-rpart.held .ico-sm { opacity: 0.6; }
.hx-rpart.miss .ico-sm { opacity: 0.18; filter: grayscale(1); }
@media (max-width: 600px), (max-height: 420px) { .hx-relics { grid-template-columns: 1fr; } }
.doll-slot.relic { box-shadow: 0 0 0 1px #e6cc80, 0 0 9px rgba(230, 204, 128, 0.55), inset 0 0 6px rgba(0, 0, 0, 0.8); }
.doll-slot.relic::after { content: '♛'; position: absolute; left: 2px; top: 0; font-size: 10px; color: #e6cc80; text-shadow: 0 0 3px #000; pointer-events: none; }
.gi-relic { color: #e6cc80; }
.gi-forged span { color: #9fc7d8; }
/* docs/19 E13: the workshop's anvil. */
.tw-lands .tw-forge { grid-column: 1 / -1; }
.tw-forge .tw-fg-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; margin: 6px 0; }
@media (min-width: 760px) {
  .tw-fg-body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; align-items: start; }
  .tw-fg-body .tw-fg-pane { border-top: 0; padding-top: 0; border-left: 1px solid rgba(140, 107, 58, 0.2); padding-left: 12px; margin-top: 6px; }
}
.tw-fg-it { position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid #6f5a38; border-radius: 4px; background: #0b0b0d; cursor: pointer; }
.tw-fg-it .ico-md { width: 34px; height: 34px; }
.tw-fg-it.on { box-shadow: 0 0 0 2px #ffe08a, 0 0 8px rgba(255, 224, 138, 0.6); }
/* docs/19 E19: a finger's 44 px on the anvil's things (40 px squares, 4 px apart: the reach fills the gap, no two touch). */
:where(body.touch) .tw-fg-it::after { content: ''; position: absolute; inset: -2px; }
.tw-fg-it.wait::before { content: '⚒'; position: absolute; right: 1px; bottom: -1px; font-size: 11px; color: #ffe08a; text-shadow: 0 0 3px #000; }
.tw-fg-w { position: absolute; left: 2px; top: 0; font-size: 8px; font-style: normal; color: #e6cc80; }
.tw-fg-pane { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(140, 107, 58, 0.2); padding-top: 6px; }
.tw-fg-head { display: flex; align-items: center; gap: 8px; }
.tw-fg-head .ico-lg { flex: none; width: 44px; height: 44px; }
.tw-fg-now, .tw-fg-was { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.tw-fg-now .muted, .tw-fg-was .muted { flex: none; min-width: 9em; }
.tw-fg-was b { color: var(--fog); font-weight: 500; }
.tw-fg-now b { color: #e6cc80; font-weight: 500; }
.tw-fg-odds { font-size: 11.5px; line-height: 1.35; margin: 2px 0; }
.tw-fg-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.tw-fg-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.tw-fg-ask span { flex: 1 1 100%; font-size: 12.5px; }
.tw-fg-q { margin: 2px 0; font-size: 12.5px; color: #e6cc80; }
.tw-fg-cmp { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; border: 1px solid rgba(176, 141, 87, 0.3); border-radius: 6px; }
/* docs/19 E16: the Choir's invasion — its card (the chart's log, the journal, the tavern), the black tide's card, and
   the sea's dark veil over a region under the black tide (between the sea and the HUD; the HUD stays clear). */
.inv-card .mq-head .ico-sm, .inv-card .card-h .ico-md { filter: drop-shadow(0 0 3px rgba(46, 230, 200, 0.45)); }
.inv-cur { display: flex; flex-direction: column; gap: 3px; }
.inv-bar i { background: linear-gradient(90deg, #1e6f66, #2ee6c8); }
.inv-go { align-self: flex-start; margin-top: 2px; }
.inv-tide { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; padding: 4px 6px; border-left: 2px solid rgba(46, 230, 200, 0.5); background: rgba(3, 16, 20, 0.45); font-size: 12px; }
.inv-tide b { color: #8ee6d8; font-weight: 500; }
#black-tide { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 2.5s ease;
  background: radial-gradient(ellipse at 50% 50%, rgba(2, 12, 16, 0) 38%, rgba(2, 14, 18, 0.5) 100%), rgba(4, 22, 26, 0.18); }
#black-tide.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #black-tide { transition: none; } }

/* ---------- docs/25 items 48, 49, 52: the chess clocks, the quick fight offered at once, the quarterdeck's flag ----------
   On a desk the two clocks sit under the turn's timer in the top band; on a phone they stand between the two captains'
   faces at the top, with the flag's count, the quick fight's button and one line (the flag lost or held, the clock
   spent) — the top band, never the field's middle. */
.tb-clocks { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.tb-clock { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 3px; height: 18px; border-radius: 9px; background: rgba(12, 10, 8, 0.85);
  box-shadow: 0 0 0 1px rgba(127, 176, 208, 0.55); color: var(--bone); font: 700 11px/18px var(--k-font-sans, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-clock.foe { box-shadow: 0 0 0 1px rgba(210, 71, 58, 0.6); }
.tb-clock .ico-xs { width: 13px; height: 13px; margin: 0; border-radius: 3px; }
.tb-clock.run { box-shadow: 0 0 0 2px var(--gold); color: #fff1c8; }
.tb-clock.low b { color: #ff9b86; }
.tb-acts .btn.tb-quicknow { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(224, 184, 98, 0.6); }
.tb-top { display: none; }
body.tac-ph .tb-top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 6px); left: calc(env(safe-area-inset-left, 0px) + 64px); right: calc(env(safe-area-inset-right, 0px) + 64px);
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.tb-trow { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.tb-trow .tb-clocks { margin: 0; }
.tb-flagp { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 3px; height: 18px; border-radius: 9px; background: rgba(12, 10, 8, 0.85);
  box-shadow: 0 0 0 1px rgba(232, 196, 106, 0.6); color: #ffe39a; font: 700 11px/18px var(--k-font-sans, sans-serif); font-variant-numeric: tabular-nums; pointer-events: auto; }
.tb-flagp .ico-xs { width: 13px; height: 13px; margin: 0; }
.tb-qn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 6px; border-radius: 15px; border: 1px solid var(--brass-dim);
  background: linear-gradient(180deg, #3a2c18, #1c150d); color: var(--gold); font: 700 13px/1 var(--k-font-sans, sans-serif); white-space: nowrap; pointer-events: auto;
  cursor: pointer; touch-action: manipulation; box-shadow: 0 0 0 2px rgba(224, 184, 98, 0.5), 0 2px 8px rgba(0, 0, 0, 0.7); }
.tb-qn .ico-xs { width: 18px; height: 18px; margin: 0; }
.tb-tline { max-width: 100%; padding: 2px 8px; border-radius: 6px; background: rgba(12, 10, 8, 0.82); color: var(--bone); font: 600 11px/1.3 var(--k-font-sans, sans-serif);
  text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }