:root {
  --ink: #2b1d0e;
  --ink-soft: #5a4327;
  --paper: #efe0bd;
  --paper-dark: #d9c491;
  --gold: #e6b84a;
  --panel: rgba(18, 14, 10, 0.72);
  --panel-line: rgba(230, 184, 74, 0.35);
  --good: #8fd16a;
  --bad: #ff6b5b;
  --warn: #ffc95b;
  --text: #f3e6c8;
  --fell: 'IM Fell English', 'Palatino Linotype', Georgia, serif;
  --fell-sc: 'IM Fell English SC', 'Palatino Linotype', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1b26; color: var(--text); font-family: var(--fell); }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

button { font-family: inherit; }
.btn {
  background: linear-gradient(#7a4a1e, #4e2d10);
  color: #f7e6bf; border: 1px solid #2a1606; border-radius: 4px;
  padding: 6px 12px; cursor: pointer; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.3), 0 2px 3px rgba(0, 0, 0, 0.35);
}
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.big { font-size: 20px; padding: 10px 26px; font-family: var(--fell-sc); }
.btn.small { font-size: 13px; padding: 2px 7px; }

kbd {
  display: inline-block; min-width: 1.5em; padding: 0 5px; margin: 0 1px;
  border: 1px solid var(--ink-soft); border-bottom-width: 2px; border-radius: 3px;
  background: #f8edd2; color: var(--ink); font-family: var(--fell-sc); font-size: 0.9em; text-align: center;
}

/* ---------- Parchment overlays ---------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; background: rgba(5, 10, 16, 0.35); }
.parchment {
  background:
    radial-gradient(ellipse at center, rgba(255, 250, 230, 0.55), rgba(0, 0, 0, 0) 70%),
    linear-gradient(135deg, #f1e3c0, #dcc590 60%, #cfb378);
  color: var(--ink); border-radius: 6px; padding: 22px 28px;
  box-shadow: 0 0 0 2px #6b4a22, 0 0 0 6px #2e1c09, 0 18px 50px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(120, 80, 30, 0.35);
  max-height: 94vh; overflow: auto;
}
.parchment h1, .parchment h2, .parchment h3 { font-family: var(--fell-sc); margin: 0 0 10px; color: #3a220c; font-weight: normal; }
.parchment h2 { font-size: 28px; }
.parchment h3 { font-size: 19px; margin-top: 14px; border-bottom: 1px solid rgba(60, 35, 10, 0.3); }

#login { background: radial-gradient(ellipse at 50% 40%, rgba(10, 30, 45, 0.15), rgba(3, 8, 14, 0.75)); }
.login-card { width: min(620px, 94vw); text-align: center; max-height: 96vh; overflow: auto; }
.login-card h1 { font-size: 44px; line-height: 1; }
.login-card h1 small { font-size: 22px; display: block; margin: 4px 0; }
.tagline { font-style: italic; color: var(--ink-soft); margin-top: 0; }
.login-card label { display: block; text-align: left; margin: 10px 0; font-size: 16px; }
.login-card input {
  width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-size: 18px; color: var(--ink);
  background: rgba(255, 252, 240, 0.7); border: 1px solid #8a6a3a; border-radius: 3px;
}
.login-card .label { text-align: left; margin: 14px 0 6px; }
#nations { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; }
.nation {
  border: 2px solid transparent; border-radius: 5px; padding: 8px 4px; cursor: pointer;
  background: rgba(255, 250, 235, 0.45); font-size: 13px; line-height: 1.2;
}
.nation canvas { display: block; margin: 0 auto 6px; width: 54px; height: 36px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.nation b { display: block; font-family: var(--fell-sc); font-size: 15px; font-weight: normal; }
.nation em { color: var(--ink-soft); font-size: 11.5px; }
.nation.selected { border-color: #6b3a10; background: rgba(255, 240, 200, 0.9); box-shadow: 0 0 10px rgba(120, 70, 20, 0.5); }
.sea-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 12px 0 0; }
.login-card .sea-pick label { display: inline; margin: 0; font-family: var(--fell-sc); }
.sea-pick select {
  max-width: 100%; padding: 5px 8px; font: inherit; font-size: 16px; color: var(--ink);
  background: rgba(255, 252, 240, 0.7); border: 1px solid #8a6a3a; border-radius: 3px;
}
.sea-pick .muted { flex-basis: 100%; font-size: 13px; }
#login-wait { margin: 26px 0; font-family: var(--fell-sc); font-size: 20px; color: var(--ink-soft); }
#continue-box { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
#continue-box a { color: var(--ink-soft); }
.error { color: #9c1c0c; min-height: 1em; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.panel {
  position: absolute; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px;
  padding: 10px 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); font-size: 14px;
}
.panel .row { display: flex; justify-content: space-between; gap: 12px; }
.panel b { color: var(--gold); font-weight: normal; }

#captain { top: 12px; left: 12px; min-width: 180px; }
#cap-name { font-family: var(--fell-sc); font-size: 20px; }
#cap-title { color: #c9b48a; font-style: italic; margin-bottom: 4px; }

#ship-panel { bottom: 12px; left: 12px; width: 260px; }
#ship-name { font-family: var(--fell-sc); font-size: 17px; margin-bottom: 6px; }
.bar { display: grid; grid-template-columns: 44px 1fr 64px; align-items: center; gap: 6px; margin: 3px 0; font-size: 13px; }
.bar > div { height: 9px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; border-radius: 5px; transition: width 0.2s; }
#bar-hull { background: linear-gradient(90deg, #a5552a, #d6913d); }
#bar-sails { background: linear-gradient(90deg, #b9b19c, #f1ead6); }
#bar-crew { background: linear-gradient(90deg, #5d7f3b, #9ac25c); }
.bar em { font-style: normal; text-align: right; color: #d9c79c; }

#sail-level { display: flex; gap: 4px; margin: 8px 0 6px; }
#sail-level span, #ammo span {
  flex: 1; text-align: center; padding: 3px 0; border-radius: 3px; font-size: 12px;
  background: rgba(255, 255, 255, 0.07); color: #bfae88; border: 1px solid transparent;
}
#sail-level span.on, #ammo span.on { background: rgba(230, 184, 74, 0.25); color: #ffe6a6; border-color: rgba(230, 184, 74, 0.6); }
#ammo { display: flex; gap: 4px; margin-bottom: 6px; }
#reload > div { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 6px; font-size: 12px; margin: 2px 0; }
.rl { height: 7px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; }
.rl i { display: block; height: 100%; background: #e6b84a; }
.rl i.ready { background: #8fd16a; }

#nav { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* the minimap draws its own compass ring round the chart, and its speed & wind figures in the corners */
#minimap { filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.55)); }
/* sleeping the night through: the screen goes dark, and lightens again in the morning */
#sleep-fade { position: fixed; inset: 0; z-index: 40; background: #000; opacity: 0; transition: opacity 1.4s ease; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#sleep-fade.on { opacity: 1; }
#sleep-fade span { font-family: var(--fell-sc); font-size: 26px; color: #d8c9a4; }
/* the date and hour, left of the minimap (ashore too) */
#clock { position: absolute; top: 14px; right: 268px; font-family: var(--fell-sc); font-size: 15px; color: #f1e6c2; text-shadow: 0 1px 3px #000, 0 0 8px #000; white-space: nowrap; pointer-events: none; }
body.touch #clock { right: 128px; font-size: 12px; }
#wind-info { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 2px 10px; font-size: 13px; }

#contracts { top: 380px; right: 12px; width: 250px; font-size: 13px; }
#contracts h4 { margin: 0 0 4px; font-family: var(--fell-sc); font-weight: normal; color: var(--gold); font-size: 15px; }
#contracts div { margin: 4px 0; }
#contracts .left { color: #c9b48a; }

#prompt {
  position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%);
  font-family: var(--fell-sc); font-size: 20px; text-shadow: 0 2px 4px #000, 0 0 12px #000; text-align: center; white-space: nowrap;
}
#log {
  position: absolute; right: 12px; bottom: 12px; width: min(460px, 44vw); max-height: 40vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; font-size: 14px;
}
#log div {
  background: rgba(10, 8, 6, 0.6); padding: 4px 9px; border-radius: 4px; border-left: 3px solid #8a7550;
  animation: fadein 0.25s; transition: opacity 1s;
}
#log div.good { border-color: var(--good); }
#log div.bad { border-color: var(--bad); }
#log div.warn { border-color: var(--warn); }
#log div.world { border-color: #6aa6d1; color: #cfe3f3; }
#log div.chat { border-color: #e6b84a; }
#log div.old { opacity: 0.0; }
#log b { font-weight: normal; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }

#chat-input {
  position: absolute; left: 290px; bottom: 14px; width: min(420px, 40vw); pointer-events: auto;
  background: rgba(10, 8, 6, 0.85); border: 1px solid var(--gold); color: var(--text); padding: 8px 10px; font: inherit; border-radius: 4px;
}
#help-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 13px; color: rgba(243, 230, 200, 0.6); text-shadow: 0 1px 2px #000; }

#labels { position: absolute; inset: 0; }
.ship-label {
  position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap;
  font-size: 13px; text-shadow: 0 1px 2px #000, 0 0 6px #000; line-height: 1.15;
}
.ship-label .nm { font-family: var(--fell-sc); }
.ship-label .sub { font-size: 11px; color: #d8c9a6; }
.ship-label.hostile .nm { color: #ff8b78; }
.ship-label.player .nm { color: #ffd76e; }
.ship-label .hb { width: 60px; height: 4px; background: rgba(0, 0, 0, 0.5); margin: 2px auto 0; border-radius: 2px; overflow: hidden; }
.ship-label .hb i { display: block; height: 100%; background: #d6913d; }
.ship-label .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; box-shadow: 0 0 0 1px #000; }

/* ---------- Port ---------- */
#port { background: rgba(5, 10, 16, 0.25); }
.port-card { width: min(980px, 96vw); height: min(720px, 94vh); display: flex; flex-direction: column; padding: 18px 22px; }
.port-card header { display: flex; align-items: center; gap: 14px; }
.port-card header h2 { margin: 0; font-size: 32px; }
#port-sub { font-style: italic; color: var(--ink-soft); }
#port-stats { margin-left: auto; text-align: right; font-size: 16px; }
#port-flag { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
#port-tabs { display: flex; gap: 4px; margin: 14px 0 0; border-bottom: 2px solid #6b4a22; }
#port-tabs button {
  font-family: var(--fell-sc); font-size: 17px; padding: 6px 16px; border: 1px solid #6b4a22; border-bottom: none;
  background: rgba(107, 74, 34, 0.15); color: var(--ink); border-radius: 5px 5px 0 0; cursor: pointer;
}
#port-tabs button.active { background: rgba(107, 74, 34, 0.45); color: #fff4d6; }
#port-body { flex: 1; overflow: auto; padding: 12px 2px; }
.port-card footer { text-align: center; padding-top: 10px; border-top: 1px solid rgba(60, 35, 10, 0.3); }

table.grid { width: 100%; border-collapse: collapse; font-size: 15px; }
table.grid th { text-align: left; font-family: var(--fell-sc); font-weight: normal; border-bottom: 1px solid #6b4a22; padding: 4px 6px; }
table.grid td { padding: 4px 6px; border-bottom: 1px solid rgba(60, 35, 10, 0.15); }
table.grid tr:hover td { background: rgba(255, 255, 255, 0.18); }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tag { font-size: 11px; padding: 1px 5px; border-radius: 8px; margin-left: 4px; }
.tag.cheap { background: #5d7f3b; color: #fff; }
.tag.dear { background: #a5401f; color: #fff; }
.tag.current { background: #2e4f7a; color: #fff; }
/* what a change of ship would leave behind (shipyard) */
.warn-note { font-size: 11px; color: #c0552f; margin-top: 2px; }
/* ship pictures: the market's ship picker, the shipyard's lists, the fleet screen */
.ship-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.ship-card { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 148px; padding: 4px 6px 6px; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid rgba(60, 35, 10, 0.3); border-radius: 6px; background: rgba(255, 250, 230, 0.25); }
.ship-card:hover { background: rgba(255, 250, 230, 0.5); }
.ship-card.on { border-color: #6b4a22; background: rgba(107, 74, 34, 0.2); box-shadow: inset 0 0 0 1px #6b4a22; }
.ship-card img { width: 136px; height: 85px; object-fit: contain; }
.ship-card b { font-weight: normal; font-family: var(--fell-sc); font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ship-card span { font-size: 12px; color: var(--ink-soft); }
.ship-pick-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin: 6px 0 10px; }
table.yard-list td.pic { width: 104px; padding: 2px 4px; }
td.pic img { display: block; width: 100px; height: 62px; object-fit: contain; }
.yard-mine { display: flex; align-items: center; gap: 14px; }
.yard-mine img { width: 176px; height: 110px; object-fit: contain; flex: none; }
.yard-mine .kv { flex: 1; }
/* the market's counter: a picture of each good (its prices, what's in the hold), and the one picked laid out
   with the store's stock against her hold; the gunsmith's pistols as cards */
.gstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 6px; }
.gtile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 4px 5px; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid rgba(60, 35, 10, 0.3); border-radius: 6px; background: rgba(255, 250, 230, 0.25); min-width: 0; }
.gtile:hover { background: rgba(255, 250, 230, 0.5); }
.gtile.on { border-color: #6b4a22; background: rgba(107, 74, 34, 0.2); box-shadow: inset 0 0 0 1px #6b4a22; }
.gtile img { width: 76px; height: 76px; object-fit: contain; }
.gtile b { font-weight: normal; font-family: var(--fell-sc); font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtile .gprices { display: flex; gap: 6px; font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gtile .tag { position: absolute; top: 3px; left: 1px; margin: 0; }
.gheld { position: absolute; top: 3px; right: 3px; font-size: 11px; padding: 0 5px; border-radius: 8px; background: #2e4f7a; color: #fff; }
.trade { display: flex; gap: 16px; align-items: center; margin: 10px 0 6px; padding: 10px 14px; border: 1px solid rgba(60, 35, 10, 0.35); border-radius: 6px; background: rgba(255, 250, 230, 0.3); }
.trade-pic { width: 168px; height: 168px; object-fit: contain; flex: none; }
.trade-main { flex: 1; min-width: 0; }
.trade-name b { font-family: var(--fell-sc); font-weight: normal; font-size: 24px; color: #3a220c; }
.trade-about { margin: 2px 0 8px; font-style: italic; color: var(--ink-soft); font-size: 14px; }
.trade-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.trade-side { text-align: center; padding: 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); font-size: 14px; }
.parchment .trade-side h4 { margin: 0; font-family: var(--fell-sc); font-weight: normal; font-size: 15px; color: var(--ink-soft); }
.trade-qty { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.trade-side b { font-weight: normal; color: #6b4a00; font-size: 17px; }
.trade-btns { display: flex; gap: 4px; justify-content: center; margin-top: 5px; }
.trade-arrows { font-size: 26px; color: #6b4a22; }
.trade-note { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.arms { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 8px; }
.arm { display: flex; flex-direction: column; align-items: center; padding: 6px 8px 8px; border: 1px solid rgba(60, 35, 10, 0.3); border-radius: 6px; background: rgba(255, 250, 230, 0.25); }
.arm.mine { border-color: #2e4f7a; background: rgba(46, 79, 122, 0.1); }
.arm img { width: 112px; height: 112px; object-fit: contain; }
.arm-name b { font-family: var(--fell-sc); font-weight: normal; font-size: 16px; }
.arm-stats { display: grid; grid-template-columns: auto auto auto auto; gap: 0 6px; font-size: 12.5px; margin: 4px 0 6px; align-self: stretch; justify-content: center; }
.arm-stats span { color: var(--ink-soft); }
.arm-stats b { font-weight: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arm-buy { display: flex; gap: 8px; align-items: center; margin-top: auto; font-family: var(--fell-sc); color: #6b4a00; }
/* a good's or a gun's small picture beside its name in a list (prize screen, strongbox, fleet, smugglers) */
.gicon { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; margin: -6px 4px -6px 0; }
.gicon.gold { display: inline-block; text-align: center; font-size: 20px; line-height: 30px; color: #8a6a10; }
table.grid td.gcell { width: 1%; padding: 2px 4px; }
td.gcell .gicon { width: 44px; height: 44px; margin: 0; line-height: 44px; font-size: 26px; }
.hgood { white-space: nowrap; margin-right: 4px; }
.hgood .gicon { width: 22px; height: 22px; margin: -5px 1px -5px 0; }
@media (max-width: 760px) {
  /* (one row of goods that scrolls sideways, so the one picked stays in sight under it) */
  .gstrip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80px; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
  .gtile img { width: 54px; height: 54px; }
  .gtile b { font-size: 13px; }
  .gtile .gprices { flex-direction: column; gap: 0; align-items: center; font-size: 11px; }
  .trade { gap: 8px; padding: 8px; align-items: flex-start; }
  .trade-pic { width: 84px; height: 84px; }
  .trade-name b { font-size: 20px; }
  .trade-about { font-size: 12.5px; }
  .trade-sides { gap: 4px; }
  .trade-side { padding: 4px 2px; font-size: 12.5px; }
  .trade-qty { font-size: 20px; }
  .trade-arrows { font-size: 18px; }
  .arms { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .arm img { width: 84px; height: 84px; }
  .arm-stats { font-size: 11.5px; gap: 0 4px; }
  table.grid td:not(.gcell) > .gicon { width: 22px; height: 22px; margin: -4px 2px -4px 0; }
}
/* (a phone held upright: the picture beside the name, the two sides full width under them) */
@media (max-width: 460px) {
  .trade { display: grid; grid-template-columns: 64px 1fr; gap: 2px 8px; }
  .trade-main { display: contents; }
  .trade-pic { width: 64px; height: 64px; grid-row: span 2; }
  .trade-sides, .trade-note { grid-column: 1 / -1; }
  .trade-sides { grid-template-columns: 1fr 1fr; margin-top: 4px; }
  .trade-arrows { display: none; }
}
@media (max-width: 760px) {
  .ship-card { width: 118px; }
  .ship-card img { width: 108px; height: 68px; }
  table.yard-list td.pic { width: 68px; }
  td.pic img { width: 64px; height: 40px; }
  .yard-mine img { width: 110px; height: 69px; }
}
.muted { color: var(--ink-soft); font-style: italic; }
.contract { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid rgba(60, 35, 10, 0.25); border-radius: 4px; margin: 6px 0; background: rgba(255, 255, 255, 0.2); }
.contract .what { flex: 1; }
.contract .pay { color: #6b4a00; font-family: var(--fell-sc); font-size: 17px; }
.rumor { font-style: italic; margin: 6px 0; padding-left: 12px; border-left: 3px solid rgba(107, 74, 34, 0.4); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; font-size: 16px; margin-bottom: 12px; }
.kv b { font-weight: normal; color: #4a2c0c; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Chart & board ---------- */
.chart-card { padding: 14px; text-align: center; }
#chart-canvas { width: min(84vh, 92vw); height: min(84vh, 92vw); display: block; }
.chart-card .hint { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.board-card { width: min(640px, 94vw); }
#board-table { width: 100%; border-collapse: collapse; }
#board-table td, #board-table th { padding: 4px 6px; border-bottom: 1px solid rgba(60, 35, 10, 0.2); text-align: left; }
#board-table th { font-family: var(--fell-sc); font-weight: normal; }
#rep-table { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.rep { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 8px; font-size: 14px; }
.rep .track { height: 8px; background: rgba(60, 35, 10, 0.2); border-radius: 4px; position: relative; }
.rep .track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.rep .track::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(60, 35, 10, 0.5); }

.help-card { width: min(980px, 96vw); }
.help-card .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; font-size: 15px; }
.help-card p { margin: 6px 0; line-height: 1.45; }
.help-card .btn { margin-top: 14px; }

.prize-card { width: min(620px, 94vw); text-align: center; }
/* captain & fleet */
.fleet-card { width: min(980px, 96vw); }
.fcols { display: grid; grid-template-columns: minmax(260px, 1fr) 1.5fr; gap: 22px; text-align: left; }
@media (max-width: 760px) { .fcols { grid-template-columns: 1fr; } }
.fship { padding: 8px 10px; margin: 6px 0; border: 1px solid rgba(60, 35, 10, 0.25); border-radius: 5px; background: rgba(255, 250, 230, 0.25); }
.fship.flag { border-color: rgba(107, 74, 34, 0.6); }
.fship { display: flex; gap: 10px; align-items: flex-start; }
.fship > div { flex: 1; min-width: 0; }
.fship .fpic { width: 112px; height: 70px; object-fit: contain; flex: none; }
.xhead { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.xship { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.xship img { width: 208px; height: 130px; object-fit: contain; }
.xship b { font-family: var(--fell-sc); font-weight: normal; font-size: 19px; }
.xship span { font-size: 13px; color: var(--ink-soft); }
.xarrows { font-size: 34px; color: #6b4a22; }
.xwhy { text-align: center; font-size: 14px; }
.xgoods td.good { text-align: center; }
.xgoods td.btns { white-space: nowrap; width: 1%; }
.xgoods td.btns .btn { margin: 0 1px; }
.xcap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(60, 35, 10, 0.15); }
@media (max-width: 760px) {
  .fship .fpic { width: 72px; height: 45px; }
  .xhead { gap: 6px; }
  .xship img { width: 120px; height: 75px; }
  .xarrows { font-size: 22px; }
}
.fhead { font-size: 16px; }
.fstats { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.fbtns { margin-top: 6px; display: flex; gap: 6px; }
.fbar { display: inline-block; width: 70px; height: 7px; border-radius: 4px; background: rgba(60, 35, 10, 0.2); vertical-align: middle; overflow: hidden; }
.fbar i { display: block; height: 100%; background: #6b8f3a; }
.fbar.bad i { background: #a5281a; }
.fbar.good i { background: #2e7d4f; }
.fskills td { padding: 1px 4px; font-size: 12px; }
.fskills .pips { letter-spacing: 1px; color: #6b4a22; white-space: nowrap; }
.fskills .btn.small { padding: 0 7px; line-height: 1.4; }
.kv b.bad { color: #a5281a; }
.fstanding .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
#prize-cargo { margin: 8px 0 4px; }
#prize-cargo table { width: 100%; margin-bottom: 8px; }
#prize-cargo td.btns { white-space: nowrap; }
#prize-cargo td:first-child { text-align: left; }
.prize-crew { display: grid; gap: 6px; margin-bottom: 6px; }
.btn.danger { background: linear-gradient(#a5281a, #7a1c12); color: #fff4e6; }
.prize-card .buttons { display: flex; gap: 12px; justify-content: center; margin: 14px 0 6px; }
#prize-timer { font-size: 13px; color: var(--ink-soft); }
.chest-card { width: min(520px, 94vw); text-align: center; }
#chest-items { text-align: left; margin: 8px 0 4px; }
#chest-items td.btns { width: 1%; white-space: nowrap; text-align: right; }
#chest-items .muted { font-size: 13px; }
.chest-card .buttons { display: flex; gap: 12px; justify-content: center; margin: 14px 0 4px; flex-wrap: wrap; }

#dead { background: radial-gradient(ellipse, rgba(10, 0, 0, 0.2), rgba(10, 0, 0, 0.75)); pointer-events: none; }
.dead-card { text-align: center; text-shadow: 0 2px 8px #000; }
.dead-card h2 { font-family: var(--fell-sc); font-size: 54px; margin: 0; color: #f0d9a8; font-weight: normal; }
.dead-card p { font-size: 20px; }

#connecting { position: fixed; top: 40%; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--panel); padding: 14px 24px; border-radius: 6px; font-size: 20px; }

@media (max-width: 760px) {
  #nations { grid-template-columns: repeat(3, 1fr); }
  .help-card .cols { grid-template-columns: 1fr; }
  #contracts { display: none; }
}
td.btns { white-space: nowrap; }
td.btns .btn { margin-right: 3px; }

/* =====================================================================
   Touch & small screens
   ===================================================================== */
#scene { touch-action: none; }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
.touch-only { display: none; }
body.touch .touch-only { display: block; }
.touch-help { margin-bottom: 8px; font-size: 15px; }
.touch-help p { margin: 6px 0; line-height: 1.4; }

#touch { position: absolute; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
#touch button, #t-stick { pointer-events: auto; touch-action: none; font-family: inherit; }
#touch.inactive #t-stick, #touch.inactive #t-right, #touch.inactive #t-action { opacity: 0.3; pointer-events: none; }

/* menu bar */
#t-menu {
  position: absolute; top: calc(6px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px;
}
#t-menu button {
  width: 46px; height: 42px; border-radius: 8px; border: 1px solid var(--panel-line);
  background: var(--panel); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
}
#t-menu button span { font-size: 17px; }
#t-menu button small { font-size: 9px; color: #c9b48a; margin-top: 2px; }
#t-menu button.down, .t-btn.down { background: rgba(230, 184, 74, 0.35); }

/* helm stick */
#t-stick {
  position: absolute; left: calc(14px + env(safe-area-inset-left)); bottom: calc(20px + env(safe-area-inset-bottom));
  width: 158px; height: 86px; border-radius: 43px;
  background: rgba(10, 8, 6, 0.55); border: 1px solid var(--panel-line);
  display: flex; align-items: center; justify-content: center;
}
#t-stick.down { border-color: var(--gold); }
#t-stick .t-arrows { position: absolute; inset: 0 14px; display: flex; justify-content: space-between; align-items: center; color: rgba(243, 230, 200, 0.4); font-size: 14px; }
#t-stick small { position: absolute; bottom: -16px; font-size: 11px; color: rgba(243, 230, 200, 0.7); text-shadow: 0 1px 2px #000; }
#t-knob {
  width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 46px; line-height: 1; color: #f0d9a8;
  background: radial-gradient(circle at 40% 35%, #8a5a2a, #4e2d10);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 230, 170, 0.3);
  transition: transform 0.08s;
}
#t-stick.down #t-knob { transition: none; }

/* right-hand cluster */
#t-right {
  position: absolute; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; width: 172px;
}
.t-btn {
  height: 42px; min-width: 46px; border-radius: 8px; border: 1px solid var(--panel-line);
  background: var(--panel); color: var(--text); font-size: 18px; padding: 0 8px;
}
.t-btn.wide { font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.t-btn.wide small { font-size: 9px; color: #c9b48a; }
#t-sails { display: flex; align-items: center; gap: 6px; }
#t-sail-label { flex: 1; text-align: center; font-size: 12px; text-shadow: 0 1px 2px #000; }
#t-fires { display: flex; justify-content: space-between; }
.t-fire {
  --p: 1; --ring: #e6b84a;
  width: 80px; height: 80px; border-radius: 50%; border: none; padding: 0; color: #f7e6bf;
  background:
    radial-gradient(circle, #6a3a16 0 62%, transparent 63%),
    conic-gradient(var(--ring) calc(var(--p) * 1turn), rgba(255, 255, 255, 0.12) 0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.t-fire.ready { --ring: #8fd16a; }
.t-fire.down { filter: brightness(1.35); transform: scale(0.95); }
.t-fire b { font-size: 24px; line-height: 1; }
.t-fire small { font-size: 10px; margin-top: 2px; }

/* context action (make port / board) */
#t-action {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(26vh + 20px);
  max-width: 70vw; padding: 12px 22px; border-radius: 26px; font-size: 17px; font-family: var(--fell-sc);
  color: #fff4d6; border: 1px solid #f0c65a; background: linear-gradient(#8a531f, #5a3210);
  box-shadow: 0 0 18px rgba(230, 184, 74, 0.55), 0 4px 10px rgba(0, 0, 0, 0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: pulse 1.6s ease-in-out infinite;
}
#t-action.down { filter: brightness(1.3); }
@keyframes pulse { 50% { box-shadow: 0 0 28px rgba(230, 184, 74, 0.85), 0 4px 10px rgba(0, 0, 0, 0.5); } }

/* compact HUD when touch controls are active */
body.touch #help-hint, body.touch #contracts, body.touch #sail-level, body.touch #ammo, body.touch #reload { display: none; }
body.touch #captain {
  top: calc(6px + env(safe-area-inset-top)); left: calc(6px + env(safe-area-inset-left));
  min-width: 0; padding: 6px 9px; font-size: 12px;
}
body.touch #cap-name { font-size: 15px; }
body.touch #cap-title { font-size: 11px; margin-bottom: 2px; }
body.touch #ship-panel {
  top: calc(92px + env(safe-area-inset-top)); bottom: auto; left: calc(6px + env(safe-area-inset-left));
  width: 168px; padding: 6px 9px; font-size: 11px;
}
body.touch #ship-name { font-size: 13px; margin-bottom: 3px; }
body.touch .bar { grid-template-columns: 34px 1fr 50px; font-size: 10.5px; margin: 1px 0; }
body.touch .bar > div { height: 7px; }
body.touch #nav { top: calc(6px + env(safe-area-inset-top)); right: calc(6px + env(safe-area-inset-right)); }
body.touch #minimap { width: 112px; height: 112px; }
body.touch #wind-info { font-size: 11px; }
body.touch #log {
  right: auto; left: 50%; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 380px)); max-height: 25vh; font-size: 12px;
}
body.touch #log div { padding: 3px 7px; }
body.touch #prompt { bottom: calc(26vh + 20px); font-size: 16px; white-space: normal; width: 60vw; }
body.touch #chat-input { left: 50%; top: 30%; bottom: auto; transform: translateX(-50%); width: min(520px, 86vw); font-size: 16px; }
body.touch .ship-label { font-size: 11px; }
body.touch .ship-label .sub { font-size: 9.5px; }
body.touch .btn.small { padding: 6px 10px; font-size: 14px; }

/* Portrait phones: menu below the top panels, log above the controls */
@media (orientation: portrait) {
  body.touch #t-menu {
    top: calc(160px + env(safe-area-inset-top)); left: auto; right: calc(6px + env(safe-area-inset-right));
    transform: none; flex-direction: column;
  }
  body.touch #ship-panel { width: 150px; }
  body.touch #log { width: calc(100vw - 24px); bottom: calc(200px + env(safe-area-inset-bottom)); max-height: 18vh; }
  body.touch #t-action, body.touch #prompt { bottom: calc(200px + 18vh + env(safe-area-inset-bottom)); }
}

/* Small screens: port, login and overlays */
@media (max-width: 760px), (max-height: 520px) {
  .parchment { padding: 12px 14px; }
  .login-card h1 { font-size: 30px; }
  .login-card h1 small { font-size: 16px; }
  .login-card label { margin: 6px 0; }
  .login-card input { padding: 6px 8px; font-size: 16px; }
  .nation em { display: none; }
  .btn.big { font-size: 17px; padding: 8px 18px; }
  .port-card { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: 10px 12px; }
  .port-card header { gap: 8px; }
  .port-card header h2 { font-size: 22px; }
  #port-flag { width: 42px; height: 28px; }
  #port-sub { font-size: 12px; }
  #port-stats { font-size: 13px; }
  #port-tabs { overflow-x: auto; margin-top: 8px; }
  #port-tabs button { font-size: 14px; padding: 6px 10px; white-space: nowrap; }
  #port-body { padding: 8px 0; }
  table.grid { font-size: 13px; }
  table.grid td, table.grid th { padding: 3px 4px; }
  .kv { grid-template-columns: 110px 1fr; font-size: 14px; }
  .contract { flex-wrap: wrap; gap: 6px; }
  #rep-table { grid-template-columns: 1fr; }
  .rep { grid-template-columns: 110px 1fr 64px; }
  .help-card .cols { grid-template-columns: 1fr; gap: 6px; }
  .chart-card { padding: 8px; }
  #chart-canvas { width: min(88vh, 94vw); height: min(88vh, 94vw); }
  .dead-card h2 { font-size: 36px; }
}

/* =====================================================================
   Ashore (walkable ports, boarding battles)
   ===================================================================== */
body.ashore #ship-panel, body.ashore #nav, body.ashore #labels, body.ashore #contracts, body.ashore #help-hint { display: none; }
#shore-hud { position: absolute; inset: 0; pointer-events: none; }
#shore-area {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%); opacity: 0;
  font-family: var(--fell-sc); font-size: 40px; color: #f3e6c8; text-shadow: 0 2px 10px #000, 0 0 30px rgba(0,0,0,.6); white-space: nowrap;
}
#shore-area.show { animation: areaBanner 3.2s ease forwards; }
@keyframes areaBanner { 0% { opacity: 0; transform: translate(-50%, 10px); } 15%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
#shore-hp { position: absolute; left: 12px; bottom: 16px; width: 240px; display: none; align-items: center; gap: 8px; font-size: 13px; text-shadow: 0 1px 2px #000; }
#shore-hp.show { display: flex; }
#shore-hp > div { flex: 1; height: 10px; background: rgba(0,0,0,.5); border-radius: 5px; overflow: hidden; border: 1px solid rgba(230,184,74,.4); }
#shore-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #8c1f1f, #d0453a); transition: width .2s; }
/* conversations: the speaker, their line and your numbered replies, at the foot of the screen */
#talk {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(720px, calc(100vw - 32px));
  pointer-events: auto; z-index: 6; padding: 14px 20px 12px; border-radius: 6px; color: #f3e6c8;
  background: linear-gradient(180deg, rgba(28, 19, 10, 0.93), rgba(14, 9, 5, 0.95));
  box-shadow: 0 0 0 1px #6b4a22, 0 0 0 3px rgba(20, 12, 4, 0.9), 0 12px 30px rgba(0, 0, 0, 0.55);
}
#talk .who { font-family: var(--fell-sc); font-size: 20px; color: var(--gold); }
#talk .who span { font-size: 14px; color: #c9b48a; font-family: inherit; }
#talk .say { margin: 8px 0 10px; font-size: 16px; line-height: 1.45; font-style: italic; }
#talk .opts { list-style: none; margin: 0; padding: 0; }
#talk .opts li { padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 15px; }
#talk .opts li::before { content: '▸'; display: inline-block; width: 18px; color: transparent; }
#talk .opts li.sel { background: rgba(230, 184, 74, 0.2); color: #fff4d6; }
#talk .opts li.sel::before { color: var(--gold); }
#talk .opts li.disabled { opacity: 0.45; cursor: default; }
#talk kbd, #shore-travel kbd, #shore-travel-btn kbd { display: inline-block; min-width: 18px; text-align: center; padding: 0 4px; border: 1px solid rgba(230, 184, 74, 0.5); border-radius: 3px; font-size: 12px; font-style: normal; }
/* quick travel within a friendly port */
#shore-travel-btn { position: absolute; left: 12px; top: 112px; pointer-events: auto; }
#shore-travel { position: absolute; left: 12px; top: 150px; width: 290px; pointer-events: auto; z-index: 6; padding: 12px 14px; }
#shore-travel ol { list-style: none; margin: 0; padding: 0; }
#shore-travel li { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
#shore-travel li img { width: 88px; height: 50px; object-fit: cover; flex: none; border-radius: 3px; border: 1px solid rgba(60, 35, 10, 0.45); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); filter: sepia(0.15) saturate(0.9); }
#shore-travel li.sel img { border-color: #3a220c; filter: none; }
#shore-travel li.sel { background: rgba(107, 74, 34, 0.25); }
#shore-travel li span::before { content: '▸ '; color: transparent; }
#shore-travel li.sel span::before { color: #3a220c; }
#shore-travel kbd { border-color: rgba(60, 35, 10, 0.5); }
body.touch #talk { bottom: calc(150px + env(safe-area-inset-bottom)); }
body.touch #talk .opts li { padding: 9px 8px; }
#shore-gun { position: absolute; left: 12px; bottom: 34px; display: none; align-items: center; gap: 8px; font-size: 13px; text-shadow: 0 1px 2px #000; }
#shore-gun.show { display: flex; }
#shore-gun .pips { display: flex; gap: 4px; }
#shore-gun .pips b { width: 30px; height: 8px; background: rgba(0,0,0,.5); border: 1px solid rgba(230,184,74,.4); border-radius: 4px; overflow: hidden; }
#shore-gun .pips i { display: block; height: 100%; background: linear-gradient(90deg, #6f6656, #b9a77f); }
#shore-gun .pips b.full i { background: linear-gradient(90deg, #c9a24a, #f3d58a); }
#shore-gun.empty { animation: gunEmpty 0.45s ease; }
@keyframes gunEmpty { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); color: #ff8a6a; } 75% { transform: translateX(4px); } }
#shore-help { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 13px; color: rgba(243,230,200,.7); text-shadow: 0 1px 2px #000; white-space: nowrap; }
/* going ashore: a picture of where you're going (set as --pic), opaque, so nothing half-built shows through */
#shore-loading { cursor: none; position: fixed; inset: 0; background: linear-gradient(to top, rgba(6,4,2,.88) 0%, rgba(6,4,2,.35) 45%, rgba(6,4,2,.15) 100%), var(--pic, none) center / cover no-repeat, radial-gradient(ellipse, #1c140c, #070504); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14vh; gap: 12px; font-family: var(--fell-sc); font-size: 26px; text-shadow: 0 2px 6px #000; pointer-events: auto; z-index: 15; }
#shore-loading .bar { width: min(360px, 70vw); height: 6px; background: rgba(255,255,255,.18); box-shadow: 0 1px 4px rgba(0,0,0,.6); border-radius: 3px; overflow: hidden; }
#shore-loading .bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }
#shore-labels { position: absolute; inset: 0; }
body.touch #shore-help { display: none; }
body.touch #shore-hp { left: 50%; transform: translateX(-50%); top: 60px; bottom: auto; width: 200px; }
body.touch #shore-gun { left: 50%; transform: translateX(-50%); top: 78px; bottom: auto; }
#touch:not(.shore-mode) #t-gun { display: none; }
#touch.shore-mode #t-sails { display: none; }

/* save files */
.load-link { margin: 10px 0 0; font-size: 15px; }
.load-link a { color: var(--ink-soft); }

/* credits */
.credits-link { margin: 6px 0 0; font-size: 14px; }
.credits-link a { color: var(--ink-soft); }
.credits-card { width: min(720px, 96vw); }
.credits-card ul { columns: 2; column-gap: 24px; padding-left: 18px; font-size: 13.5px; }
.credits-card li { margin: 3px 0; break-inside: avoid; }
.credits-card a { color: #5a3410; }
@media (max-width: 760px) { .credits-card ul { columns: 1; } }

/* ---------------------------------------------------------------- menu, map sailing, engage */
.menu-card { width: min(380px, 92vw); text-align: center; }
.menu-card .hint { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }
.menu-buttons { display: flex; flex-direction: column; gap: 8px; }
.menu-buttons .btn { width: 100%; }
.menu-buttons .menu-more { display: flex; justify-content: center; position: relative; }
.menu-buttons .menu-more span { position: absolute; right: 12px; opacity: 0.8; }
.menu-buttons .menu-back { margin-top: 6px; background: linear-gradient(#5e4a32, #3a2c1a); }
.menu-buttons .menu-back span { opacity: 0.8; }
.menu-volume { display: flex; align-items: center; gap: 10px; padding: 2px 4px; font-family: var(--fell-sc); font-size: 16px; color: var(--ink); }
.menu-volume input { flex: 1; accent-color: #7a4a1e; }
#menu { z-index: 30; }
#prompt-btn { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); pointer-events: auto; font-family: var(--fell-sc); font-size: 18px; padding: 6px 18px; }
#mode-badge {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 14px; padding: 4px 14px; font-family: var(--fell-sc); font-size: 16px; color: var(--gold); text-align: center;
}
#mode-badge small { display: block; font-family: var(--fell); font-size: 12px; color: #d8c9a6; }
#btn-mapmode { position: absolute; top: 300px; right: 12px; pointer-events: auto; }
#btn-sailto { position: absolute; top: 340px; right: 12px; pointer-events: auto; }
body.ashore #btn-sailto, body.mapmode #btn-sailto { display: none; }
#sailto { top: 140px; left: 12px; width: 270px; font-size: 13px; pointer-events: auto; }
#sailto h4 { margin: 0 0 4px; font-family: var(--fell-sc); font-weight: normal; color: var(--gold); font-size: 15px; }
#sailto ol { list-style: none; margin: 0; padding: 0; }
#sailto li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-radius: 3px; cursor: pointer; }
#sailto li.sel { background: rgba(230, 184, 74, 0.22); }
#sailto li.none { cursor: default; color: #c9b48a; }
#sailto li em { color: #c9b48a; font-style: normal; }
#sailto .muted { margin: 6px 0 0; font-size: 11px; color: #a8987a; }
#sailto .muted.warn { color: #ff8b78; }
/* the spyglass: a round field of view in black, a fine reticle, the ship in it named below */
#spyglass { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 0 37vmin, rgba(0, 0, 0, 0.55) 38vmin, #000 41vmin); }
#spyglass::before, #spyglass::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(20, 14, 6, 0.55); }
#spyglass::before { width: 24vmin; height: 1px; transform: translate(-50%, -50%); }
#spyglass::after { width: 1px; height: 24vmin; transform: translate(-50%, -50%); }
#spyglass-info { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; padding: 6px 14px; font-size: 14px; text-align: center; white-space: nowrap; }
#spyglass-info b { font-family: var(--fell-sc); font-weight: normal; color: var(--gold); }
#spyglass-info .bars { color: #c9b48a; font-size: 12px; }
body.ashore #btn-mapmode, body.docked #btn-mapmode { display: none; }
#engage { top: 140px; left: 12px; width: 250px; font-size: 13px; pointer-events: auto; }
#engage h4 { margin: 0 0 4px; font-family: var(--fell-sc); font-weight: normal; color: #ff8b78; font-size: 15px; }
#engage .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 3px; cursor: pointer; }
#engage .row:hover, #engage .row.aim { background: rgba(255, 139, 120, 0.18); }
#engage .row.near { opacity: 0.55; cursor: default; }
#engage .row em { color: #c9b48a; font-style: normal; white-space: nowrap; }
#look-hint { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); font-size: 13px; color: #e9dcc0; text-shadow: 0 1px 3px #000; }
body.mapmode #ship-panel { opacity: 0.85; }
body.touch #look-hint, body.touch #prompt-btn { display: none; }
body.touch #btn-mapmode { top: auto; bottom: calc(26vh + 64px); right: 12px; }

/* ---------------------------------------------------------------------------
   Captain's look, squadron, hostility tracker, hit feedback
   --------------------------------------------------------------------------- */
.skin-pick { display: grid; grid-template-columns: 1fr 150px; gap: 10px; align-items: center; margin-bottom: 16px; }
.skin-pick > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.skin-pick canvas { width: 150px; height: 195px; border-radius: 6px; background: radial-gradient(ellipse at 50% 35%, rgba(255, 244, 214, 0.9), rgba(140, 105, 60, 0.35)); box-shadow: inset 0 0 0 1px rgba(60, 35, 10, 0.35); }
.skin { font: 15px var(--fell-sc); padding: 8px 6px; border: 1px solid rgba(60, 35, 10, 0.35); border-radius: 4px; background: rgba(255, 255, 255, 0.25); color: var(--ink); cursor: pointer; }
.skin.selected { border-color: #6b3a10; background: rgba(255, 240, 200, 0.9); box-shadow: 0 0 8px rgba(120, 70, 20, 0.45); }
.outfit-card { width: min(520px, 94vw); text-align: center; }
.outfit-card .buttons { display: flex; gap: 10px; justify-content: center; }

#squadron { top: 12px; left: 210px; width: 230px; font-size: 13px; }
#squadron h4 { margin: 0 0 4px; font-family: var(--fell-sc); font-weight: normal; color: var(--gold); font-size: 15px; }
#squadron .sq { margin: 4px 0; }
#squadron .sq em { display: block; font-size: 11px; color: #c9b48a; }
#squadron .hb { height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; margin-top: 2px; }
#squadron .hb i { display: block; height: 100%; background: linear-gradient(90deg, #a5552a, #d6913d); }
body.ashore #squadron { display: none; }

table.diplo { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
table.diplo th { font-family: var(--fell-sc); font-weight: normal; padding: 3px; text-align: center; }
table.diplo th img { display: block; margin: 0 auto 2px; width: 30px; height: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
table.diplo th span { display: block; font-size: 12px; }
table.diplo tr > th:first-child { text-align: left; width: 92px; }
table.diplo tr > th:first-child img { display: inline-block; margin: 0 4px 0 0; vertical-align: middle; width: 24px; height: 16px; }
table.diplo tr > th:first-child span { display: inline; }
table.diplo td { text-align: center; padding: 4px 3px; border: 1px solid rgba(60, 35, 10, 0.15); }
table.diplo td b { font-weight: normal; font-family: var(--fell-sc); }
table.diplo td.war { background: rgba(165, 64, 31, 0.28); color: #7a1d08; }
table.diplo td.tense { background: rgba(200, 150, 40, 0.18); }
table.diplo td.peace { background: rgba(93, 127, 59, 0.16); }
table.diplo td.ally { background: rgba(93, 127, 59, 0.35); color: #2f4d14; }
table.diplo td.self { color: var(--ink-soft); }
table.diplo .rb { height: 3px; background: rgba(60, 35, 10, 0.15); margin-top: 2px; border-radius: 2px; overflow: hidden; }
table.diplo .rb i { display: block; height: 100%; background: #6b4a22; }
.diplo-you { margin: 8px 0 0; }
.diplo-note { font-size: 13px; }
.board-card { max-height: 92vh; overflow: auto; }

.contract.officer.focus { border-color: #6b3a10; background: rgba(255, 240, 200, 0.75); box-shadow: 0 0 10px rgba(120, 70, 20, 0.4); }
.prize-card .buttons { flex-wrap: wrap; }
/* on a phone the two holds still fit side by side: the move buttons stacked in their columns, the card scrolling */
@media (max-width: 560px) {
  .prize-card { max-height: 92vh; overflow-y: auto; padding-left: 10px; padding-right: 10px; }
  #prize-cargo table { font-size: 13px; }
  #prize-cargo th, #prize-cargo td { padding-left: 3px; padding-right: 3px; }
  #prize-cargo td.btns { white-space: normal; }
  #prize-cargo td.btns .btn { display: block; width: 100%; margin: 2px 0; padding-left: 4px; padding-right: 4px; }
}

.ship-label.npc .nm { font-size: 13px; color: #f3e6c8; }
.ship-label.npc.friend .nm { color: #ffd76e; }
.ship-label.npc.foe .nm { color: #ff8b78; }

#shore-dmg { position: absolute; inset: 0; overflow: hidden; }
#shore-dmg .dmg { position: absolute; left: 0; top: 0; font: bold 17px Georgia, serif; color: #ff3b2a; text-shadow: 0 0 2px #000, 0 1px 3px #000; pointer-events: none; will-change: transform; }
#shore-dmg .dmg.me { color: #ffb07a; font-size: 15px; }
#shore-dmg .dmg.blocked { color: #d8d0c0; font-size: 13px; }
#shore-hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 55%, rgba(150, 0, 0, 0.45) 100%); }
#shore-hurt.on { animation: hurt 0.45s ease-out; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 760px) {
  .skin-pick { grid-template-columns: 1fr 110px; }
  .skin-pick canvas { width: 110px; height: 143px; }
  #squadron { display: none; }
}

/* the map ashore: a corner minimap and the whole area on M */
#shore-map { position: absolute; top: 12px; right: 12px; width: 190px; height: 190px; border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
#shore-map-big { position: absolute; inset: 6vh 8vw; width: 84vw; height: 88vh; border-radius: 6px; background: rgba(30, 38, 26, 0.92); box-shadow: 0 0 0 3px #3a2810, 0 0 0 5px #a37b3c, 0 10px 30px rgba(0, 0, 0, 0.6); z-index: 12; }
.ship-label.place .nm { font-size: 21px; color: #ffe39a; letter-spacing: 0.5px; background: rgba(20, 14, 8, 0.6); border: 1px solid rgba(230, 184, 74, 0.6); border-radius: 4px; padding: 1px 10px; }
body.touch #shore-map { width: 130px; height: 130px; top: 60px; }
.ship-label.anchorage .hb { display: none; }
.ship-label.anchorage .nm { color: #ffe39a; }
.ship-label.anchorage.hostile .nm { color: #ff8b78; }

/* =====================================================================
   Small windows and phones: the HUD scales down as a whole
   ===================================================================== */
/* --ui: the HUD's scale for the window's size. Each panel is zoomed by it, its offsets from the screen's
   edges included, so they keep their places to each other (the clock clear of the minimap, Quick travel
   under the captain's panel); the names over ships and people are placed in screen pixels and aren't.
   With touch controls the corner panels have compact sizes of their own (above): only the menus scale. */
:root { --ui: 1; --ui-menu: 1; }
@media (max-width: 1200px), (max-height: 680px) { :root { --ui: 0.9; --ui-menu: 0.92; } }
@media (max-width: 1000px), (max-height: 600px) { :root { --ui: 0.8; --ui-menu: 0.84; } }
@media (max-width: 820px), (max-height: 500px) { :root { --ui: 0.7; --ui-menu: 0.76; } }
@media (max-width: 560px), (max-height: 400px) { :root { --ui: 0.62; --ui-menu: 0.68; } }
body.touch { --ui: 1; }
#captain, #ship-panel, #nav, #clock, #log, #contracts, #squadron, #sailto, #engage, #btn-mapmode, #btn-sailto, #mode-badge,
#help-hint, #look-hint, #prompt, #prompt-btn, #spyglass-info, #shore-area, #shore-hp, #shore-gun, #shore-help, #shore-travel-btn,
#shore-map { zoom: var(--ui); }
#shore-travel, #talk { zoom: var(--ui); }
body.touch #shore-travel, body.touch #talk { zoom: var(--ui-menu); }
/* the help lines across the top: wrapped short of the clock and the captain's panel rather than under them */
#help-hint, #shore-help, #look-hint { white-space: normal; text-align: center; width: max-content; max-width: max(240px, calc(100vw / var(--ui) - 768px)); }
@media (max-width: 1000px), (max-height: 600px) { #help-hint, #shore-help { display: none; } }
/* Quick travel: never past the foot of the screen (its own scroll), two columns of pictures when it's low */
#shore-travel { max-height: calc(100vh / var(--ui) - 162px); overflow: auto; }
body.touch #shore-travel { max-height: calc(100vh / var(--ui-menu) - 162px); }
@media (max-height: 560px) {
  #shore-travel { width: 470px; padding: 8px 10px; }
  #shore-travel h3 { margin-bottom: 4px; }
  #shore-travel ol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  #shore-travel li img { width: 70px; height: 40px; }
  #shore-travel .muted { margin: 4px 0 0; }
}
/* the place's name as you arrive, and the picture's caption while it loads */
@media (max-width: 820px), (max-height: 500px) {
  #shore-area { top: 12%; }
  #shore-loading { font-size: 20px; padding-bottom: 10vh; }
  #shore-map-big { inset: 3vh 3vw; width: 94vw; height: 94vh; }
}
/* iOS: no enlarging of text when the phone turns, the screen's real height under the browser's bars */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100dvh; }
/* names over places, ships and people: a little smaller in a small window */
.ship-label { font-size: calc(13px * var(--ui-menu)); }
.ship-label.place .nm { font-size: calc(21px * var(--ui)); }
body.touch .ship-label.place .nm { font-size: 15px; }