:root { color-scheme:dark; --ink:#f3e5c5; --muted:#c7b897; --paper:#ead8ad; --paper-ink:#2e2319; --brass:#d6a447; --deep:#071a21; --panel:rgba(8,27,34,.88); --line:rgba(235,211,161,.28); }
* { box-sizing:border-box; }
html,body,#app { width:100%; height:100%; margin:0; overflow:hidden; }
body { background:var(--deep); color:var(--ink); font-family:"Source Sans 3",system-ui,sans-serif; }
button,input,select { font:inherit; }
button { touch-action:manipulation; }
#game { display:block; width:100%; height:100%; background:#174f60; }
.hidden { display:none !important; }
.screen-panel { position:fixed; inset:0; display:grid; align-content:safe center; justify-items:center; padding:32px 20px; overflow:auto; text-align:center; background:radial-gradient(circle at 50% 36%,rgba(41,96,103,.35),transparent 38%),linear-gradient(rgba(4,20,27,.9),rgba(4,20,27,.97)); }
.screen-panel::before { content:""; position:fixed; inset:18px; border:1px solid var(--line); pointer-events:none; }
.crest { display:grid; place-items:center; width:72px; height:72px; margin-bottom:18px; border:1px solid var(--brass); border-radius:50%; color:var(--brass); font-size:32px; }
.eyebrow { margin:0 0 7px; color:var(--brass); font-size:12px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:"IM Fell English",Georgia,serif; font-weight:400; }
h1 { font-size:clamp(45px,8vw,82px); line-height:.95; letter-spacing:-.025em; }
h1 i { color:var(--brass); font-weight:400; }
.lede { max-width:600px; margin:18px auto 26px; color:var(--muted); font-family:"IM Fell English",Georgia,serif; font-size:19px; line-height:1.45; }
form { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:14px; width:min(100%,980px); text-align:left; }
label { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
input,select { width:100%; margin-top:6px; padding:10px 12px; border:1px solid var(--line); border-radius:2px; outline:none; background:rgba(0,0,0,.25); color:var(--ink); }
input:focus,select:focus,button:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.primary,.secondary,#dialog-actions button { min-height:44px; padding:10px 18px; border:1px solid var(--brass); border-radius:2px; background:var(--brass); color:#1d1710; font-weight:700; cursor:pointer; }
form .primary,form .secondary { grid-column:1/-1; }
.secondary { background:transparent; color:var(--ink); }
.fine-print { margin-top:22px; color:#877f70; font-size:12px; }
#hud { position:fixed; top:max(14px,env(safe-area-inset-top)); left:14px; right:14px; display:flex; justify-content:space-between; gap:10px; pointer-events:none; }
.hud-block { display:flex; gap:18px; min-height:54px; padding:9px 14px; border:1px solid var(--line); border-radius:3px; background:var(--panel); box-shadow:0 8px 24px rgba(0,0,0,.2); backdrop-filter:blur(10px); }
.hud-block span { display:grid; align-content:center; }
.hud-block small { color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.hud-block b { font-family:"IM Fell English",Georgia,serif; font-size:16px; font-weight:400; white-space:nowrap; }
/* Reserve room for the longest sailing value so the box keeps its width as values change (e.g. "12.0 cells/day", "WNW", "Closed", "9999 days"). */
.voyage b { font-variant-numeric:tabular-nums; }
#speed-label { min-width:12ch; } #wind-label { min-width:5.5ch; } #sails-label { min-width:6ch; } #food-label { min-width:8.5ch; }
.identity { display:grid; gap:0; }
.identity strong { font-family:"IM Fell English",Georgia,serif; font-size:19px; }
.identity span { color:var(--muted); font-size:12px; }
#log { position:fixed; left:14px; bottom:86px; width:min(390px,calc(100% - 28px)); padding:11px 14px; border-left:2px solid var(--brass); background:linear-gradient(90deg,rgba(5,24,31,.9),rgba(5,24,31,.2)); color:var(--ink); font-family:"IM Fell English",Georgia,serif; text-shadow:0 1px 2px #000; pointer-events:none; }
#log p { margin:2px 0; }
#log p:not(:last-child) { color:var(--muted); font-size:13px; }
/* The log would cover the fencers; the fight's own panel replaces it. */
.sword-fight #log { display:none; }
#controls { position:fixed; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); display:flex; gap:7px; transform:translateX(-50%); }
#controls button { display:grid; grid-template-columns:auto auto; gap:7px; align-items:center; min-width:96px; min-height:48px; padding:9px 13px; border:1px solid var(--line); border-radius:3px; background:var(--panel); color:var(--ink); cursor:pointer; backdrop-filter:blur(10px); }
#controls button:active { background:#153e46; transform:translateY(1px); }
#controls button:disabled { cursor:default; opacity:.4; }
dialog { width:min(540px,calc(100% - 28px)); max-height:calc(100dvh - 28px); overflow:auto; padding:27px; border:1px solid #8f713e; border-radius:3px; background:var(--paper); color:var(--paper-ink); box-shadow:0 30px 90px #000; }
dialog::backdrop { background:rgba(3,14,18,.76); backdrop-filter:blur(4px); }
dialog .eyebrow { color:#7b5420; }
dialog h2 { font-size:34px; }
#dialog-body { margin:14px 0 22px; font-family:"IM Fell English",Georgia,serif; font-size:18px; line-height:1.45; }
#dialog-body p { margin:8px 0; }
#dialog-body dl { display:grid; grid-template-columns:1fr auto; gap:5px 20px; margin:16px 0 0; font-family:"Source Sans 3",sans-serif; font-size:14px; }
#dialog-body dt { color:#725f43; }
#dialog-body dd { margin:0; font-weight:700; }
#dialog-body kbd { padding:0 5px; border:1px solid #8f713e; border-radius:2px; font-family:"Source Sans 3",sans-serif; font-size:14px; }
#dialog-body .treasure-map { margin:6px auto 10px; max-width:320px; text-align:center; }
#dialog-body .treasure-map img { display:block; width:100%; height:auto; image-rendering:pixelated; border:3px solid #6b4a26; }
#dialog-body .treasure-map figcaption { margin-top:4px; font-style:italic; }
.ship-news { margin:0; padding-left:1.15em; }
.ship-news li { margin:.5em 0; }
.ship-news time { color:#725f43; font-family:"Source Sans 3",sans-serif; font-size:13px; }
.city-info { margin:0; padding:0; list-style:none; }
.city-info li { padding:7px 0; border-bottom:1px solid rgba(114,95,67,.3); }
.city-info small { display:block; color:#725f43; font-family:"Source Sans 3",sans-serif; font-size:14px; }
.vignette { margin:0 auto 18px; width:max-content; line-height:0; }
.vignette canvas { display:block; width:calc(var(--art-width) * 2px); height:calc(var(--art-height) * 2px); image-rendering:pixelated; }
/* A portrait floats left of the kicker, title and text; text wraps beneath it, while wide tables and the actions clear it. */
dialog.has-portrait { width:min(760px,calc(100% - 28px)); }
dialog.has-portrait .vignette { float:left; margin:0 26px 14px 0; }
dialog.has-portrait #dialog-body ul { display:flow-root; }
dialog.has-portrait .plunder-manifest,dialog.has-portrait #dialog-actions { clear:both; }
dialog.has-portrait #dialog-actions { padding-top:6px; }
#dialog-actions { display:flex; flex-wrap:wrap; gap:8px; }
#dialog-actions button { flex:1 1 140px; }
#dialog-actions button.secondary { border-color:#8f713e; color:var(--paper-ink); }
dialog:has(.plunder-manifest) { width:min(720px,calc(100% - 28px)); }
.plunder-summary { max-width:280px; }
.plunder-manifest { width:100%; margin:20px 0 14px; border-collapse:collapse; table-layout:fixed; font-family:"Source Sans 3",sans-serif; font-size:15px; line-height:1.2; }
.plunder-manifest th,.plunder-manifest td { padding:10px 8px; border-bottom:1px solid rgba(114,95,67,.3); text-align:left; }
.plunder-manifest thead th { color:#725f43; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.plunder-manifest th:first-child { width:22%; }
.plunder-manifest th:nth-child(2) { width:26%; }
.plunder-manifest th:nth-child(3) { width:52%; }
.merchant-manifest th:first-child { width:18%; }
.merchant-manifest th:nth-child(2) { width:34%; }
.merchant-manifest th:nth-child(3) { width:12%; }
.merchant-manifest th:nth-child(4) { width:36%; }
.merchant-price { font-size:18px; font-variant-numeric:tabular-nums; }
.plunder-cell { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.plunder-cell strong { min-width:2ch; text-align:center; font-size:18px; }
.plunder-arrow,.plunder-take-all,.plunder-take-everything { min-height:40px; border:1px solid #8f713e; border-radius:2px; background:var(--brass); color:#1d1710; font-weight:700; cursor:pointer; }
.plunder-arrow { min-width:42px; padding:5px 10px; font-size:20px; touch-action:none; user-select:none; }
.plunder-take-all { min-width:84px; padding:7px 12px; }
.plunder-take-everything { width:100%; min-height:46px; padding:9px 16px; }
.plunder-arrow:disabled,.plunder-take-all:disabled,.plunder-take-everything:disabled { cursor:default; opacity:.38; }
/* Whole-number scales only: 1 screen px per art pixel on narrow or short viewports. */
/* A landscape drops to 1× on short screens too; a portrait beside the text does not add height. */
@media (max-width:520px),(max-height:820px) { dialog:not(.has-portrait) .vignette canvas { width:calc(var(--art-width) * 1px); height:calc(var(--art-height) * 1px); } .vignette { margin-bottom:12px; } }
@media (max-width:640px) {
  dialog.has-portrait .vignette { float:none; margin:0 auto 14px; }
  dialog.has-portrait .vignette canvas { width:calc(var(--art-width) * 1px); height:calc(var(--art-height) * 1px); }
}
/* A portrait over a trading table would push the table off a short screen. */
@media (max-height:820px) { dialog.has-portrait:has(.plunder-manifest) .vignette canvas { width:calc(var(--art-width) * 1px); height:calc(var(--art-height) * 1px); } }
@media (max-width:520px) {
  dialog:has(.vignette:not(.hidden)) { padding:20px 16px; }
  dialog:has(.plunder-manifest) { padding:20px 14px; }
  .plunder-manifest { font-size:13px; }
  .plunder-manifest th,.plunder-manifest td { padding:8px 4px; }
  .plunder-manifest th:first-child { width:20%; }
  .plunder-manifest th:nth-child(2) { width:25%; }
  .plunder-manifest th:nth-child(3) { width:55%; }
  .merchant-manifest th:first-child { width:15%; }
  .merchant-manifest th:nth-child(2) { width:35%; }
  .merchant-manifest th:nth-child(3) { width:15%; }
  .merchant-manifest th:nth-child(4) { width:35%; }
  .merchant-manifest .plunder-cell strong,.merchant-price { font-size:15px; }
  .plunder-cell { gap:4px; }
  .plunder-arrow { min-width:34px; min-height:36px; padding:3px 6px; }
  .plunder-take-all { min-width:0; min-height:36px; padding:5px 7px; }
}
@media (min-width:761px) and (max-width:1100px) { #controls{display:grid;grid-template-columns:repeat(5,1fr);width:min(620px,calc(100% - 20px))}#controls button{min-width:0}#log{bottom:126px} }
@media (min-width:761px) and (max-width:900px) { form{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px) { form{grid-template-columns:1fr;max-width:400px}.screen-panel{justify-items:stretch;text-align:left}.crest{margin-left:0}.lede{margin-left:0}#hud{display:grid;grid-template-columns:1fr 1fr}.hud-block{gap:10px;justify-content:space-around}.identity{grid-column:1/-1;min-height:auto}.company span:last-child{display:none}#controls{display:grid;grid-template-columns:repeat(5,1fr);width:calc(100% - 20px)}#controls button{min-width:0;justify-content:center}#controls button span{display:none}#log{bottom:126px;width:calc(100% - 172px)} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }