/* Sailmap — an old sea chart with a modern instrument panel on top. */
:root {
  --paper: #f4ead3; --paper-2: #ece0c3; --paper-3: #e0cfa8;
  --ink: #33291f; --ink-2: #5e4d3b; --ink-3: #655440; --ink-4: #b3a286;
  --sea: #dbe2d2; --wl: #6c8b8c; --land: #ecd8a6; --coast: #4a3a2a;
  --red: #a3352c; --green: #3f7250; --gold: #b58a3c; --navy: #23405e; --yt: #c4302b;
  --panel: #f8f2e3; --line: rgba(51, 41, 31, .16); --line-2: rgba(51, 41, 31, .28);
  --shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 32px -8px rgba(60, 40, 15, .28), 0 2px 6px rgba(60, 40, 15, .12);
  --serif: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --serif-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 14px; --fleet-h: 0px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sea); color: var(--ink); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* "Skip to search": the first stop for Tab, shown only while it has the focus */
.skip-link { position: fixed; z-index: 60; top: 8px; left: 8px; padding: 10px 16px; border-radius: 999px; background: var(--navy); color: #f6eedb; font: 700 14px var(--sans); text-decoration: none; transform: translateY(-160%); transition: transform .15s; }
.skip-link:focus { transform: none; }
/* words for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#app { position: fixed; inset: 0; }

/* ---- chart ----------------------------------------------------------------------- */
#chart { position: absolute; inset: 0; overflow: hidden; background: var(--sea); cursor: grab; }
#chart:active { cursor: grabbing; }
#svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.basemap { position: absolute; pointer-events: none; will-change: transform; }
.grain { position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .7; }
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(110, 75, 30, .22) 100%),
              linear-gradient(transparent 70%, rgba(110, 75, 30, .08)); }


.rose .rz-ring { fill: none; stroke: var(--ink); stroke-width: 1; }
.rz-thin { stroke-width: .5 !important; }
.rz-tick { stroke: var(--ink); stroke-width: .6; }
.rz-dark { fill: var(--ink); } .rz-light { fill: var(--paper); stroke: var(--ink); stroke-width: .5; }
.rz-red { fill: var(--red); }
.rz-hub { fill: var(--gold); stroke: var(--ink); stroke-width: .6; }
.rz-letter { font-family: var(--serif-sc); fill: var(--ink); }

.parallel line { stroke: rgba(163, 53, 44, .4); stroke-width: 1; stroke-dasharray: 7 5; }
.parallel.eq line { stroke: rgba(163, 53, 44, .55); stroke-dasharray: 12 4 2 4; }
.parallel text { font: italic 15px var(--serif); fill: rgba(140, 42, 34, .9); letter-spacing: .06em; }
.sea-label { font-family: var(--serif); font-style: italic; fill: #46686b; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(219, 226, 210, .6); stroke-width: 3px; }
.sea-label.ocean { font-size: 22px; letter-spacing: .32em; fill: #46686b; }
.sea-label.sea { font-size: 16.5px; letter-spacing: .2em; }
.sea-label.small { font-size: 15px; letter-spacing: .14em; }

/* tracks */
.track path { fill: none; stroke-linecap: round; transition: opacity .3s; }
.track-under { stroke: rgba(244, 234, 211, .7); stroke-width: 4.5; }
.track-line { stroke-width: 2.2; stroke-dasharray: 1.5 6; opacity: .9; }
.track.focus .track-line { stroke-width: 3; stroke-dasharray: 2 7; animation: sail 1.4s linear infinite; }
.track.focus.linger .track-line, .ship.focus.linger .ship-bob { animation: none; }     /* left on the chart, nothing open: it holds still */
.track.focus .track-under { stroke-width: 6; }
.track.dim { opacity: .18; }
.track.hl { opacity: 1; }
.track.hl .track-line { stroke-width: 3.2; stroke-dasharray: 2 6; }
.track.hl .track-under { stroke-width: 7; }
@keyframes sail { to { stroke-dashoffset: -18; } }

/* ports */
.node { cursor: pointer; outline: none; }
.node-inner { transition: transform .18s ease, opacity .3s; transform-box: fill-box; }
.node-inner.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }
.node:hover .node-inner, .node:focus-visible .node-inner { transform: scale(1.2); }
.node:hover .medal, .node:focus-visible .medal { stroke-width: 2.4; }
.node:hover .halo, .node:focus-visible .halo { fill: rgba(181, 138, 60, .22); stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: none; }
.node:hover .c-outer, .node:focus-visible .c-outer { stroke-width: 2.6; }
.node.nolabel .m-label, .node.nolabel .c-label { display: none; }
.node.nolabel:hover .m-label, .node.nolabel:hover .c-label { display: block; }
.burst { fill: none; stroke: var(--gold); stroke-width: 3; pointer-events: none; animation: burst .7s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.burst.seal { stroke: #c9a86a; stroke-width: 5; stroke-dasharray: 4 5; }
@keyframes burst { from { transform: scale(.8); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.node.dim .node-inner { opacity: .3; }
.halo { fill: transparent; stroke: none; }
.hit { fill: transparent; }
.shadow { fill: rgba(60, 40, 15, .22); }
.medal { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; transition: stroke-width .15s, fill .15s; }
.m-icon { color: var(--ink); }
.kind-anchorage .m-icon { color: var(--navy); }
.kind-visited .m-icon { color: var(--green); }
.kind-passage_to .m-icon, .kind-passage_from .m-icon { color: var(--red); }
.kind-boatyard .m-icon { color: #9a5d12; }
.port.minor .medal { stroke-dasharray: 3 2; fill: var(--paper-2); }
.port.sealed .medal { fill: #c9a86a; stroke: #7a5a26; stroke-width: 1.4; }
.port.sealed .halo { fill: rgba(181, 138, 60, .14); stroke: rgba(122, 90, 38, .45); stroke-dasharray: 2 3; }
.m-q { font: 700 15px var(--serif); fill: #fff6df; text-anchor: middle; pointer-events: none; }
.m-badge { fill: var(--red); stroke: var(--paper); stroke-width: 1.5; }
.m-badge-t { font: 800 9.5px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.m-label { font: italic 16.5px var(--serif); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.port.active .halo { fill: rgba(163, 53, 44, .12); stroke: var(--red); stroke-width: 1.6; animation: ring 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.c-outer { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; transition: stroke-width .15s; }
.c-arc { fill: var(--gold); }
.c-inner { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 2.5; }
.c-count { font: 18px var(--serif-sc); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.c-label { font: italic 16px var(--serif); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; pointer-events: none; }
.cluster.active .c-outer { stroke: var(--red); stroke-width: 2.2; }

/* ships */
.ship { cursor: pointer; outline: none; transition: opacity .3s; }
.ship-bob { transform-box: fill-box; transform-origin: 50% 90%; }
.ship:hover .ship-bob, .ship.focus .ship-bob, .ship:focus-visible .ship-bob { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-2px); } }
.ship-hull { stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.ship-mast { stroke: var(--ink); stroke-width: 1.3; }
.ship-sail { fill: #fbf6ea; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.ship-pennant { stroke: var(--ink); stroke-width: .6; }
.ship-wake { fill: none; stroke: rgba(76, 110, 112, .7); stroke-width: 1.1; stroke-linecap: round; }
.ship.dim { opacity: .25; }

/* ---- cartouche --------------------------------------------------------------------- */
.cartouche { position: absolute; top: 16px; left: 16px; z-index: 5; pointer-events: none;
  padding: 5px; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: var(--shadow); border-radius: 3px; }
.c-inner { border: 1px solid var(--ink); padding: 10px 22px 11px; text-align: center; position: relative;
  background: radial-gradient(ellipse at 50% 0%, #fbf5e6, var(--paper) 70%); }
.c-inner::before, .c-inner::after { content: '❦'; position: absolute; top: 50%; transform: translateY(-50%); font: 17px var(--serif); color: var(--red); }
.c-inner::before { left: 7px; transform: translateY(-50%) scaleX(-1); } .c-inner::after { right: 7px; }
.c-kicker { font: 13.5px var(--serif-sc); letter-spacing: .28em; color: var(--ink-2); }
.cartouche h1 { margin: -2px 0 -4px; font: 400 38px/1.1 var(--serif-sc); letter-spacing: .08em; color: var(--ink); }
.c-sub { font: italic 16px var(--serif); color: var(--ink-2); }
.c-meta { margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line-2); font: 12px var(--sans); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ---- panels (shared) ---------------------------------------------------------------- */
.panel, .drawer, .fleet, .hud > *, .mapctl, .modal-card, .tip, .toast {
  background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.kicker { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.count { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--paper-3); font: 700 12px var(--sans); color: var(--ink-2); vertical-align: 2px; margin-left: 4px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper); transition: background .15s, transform .15s; }
.icon-btn:hover { background: var(--paper-3); }
.link-btn { border: 0; background: none; padding: 2px 0; font-weight: 700; font-size: 12.5px; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(35, 64, 94, .35); }
.link-btn.danger { color: var(--red); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--paper); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap;
  transition: transform .15s, background .15s, box-shadow .15s; }
.btn:hover { background: #fffaf0; transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(60, 40, 15, .35); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn.big { height: 48px; padding: 0 26px; font-size: 15px; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #f6eedb; }
.btn.primary:hover { background: #1b3350; }
.btn.yt { background: var(--yt); border-color: var(--yt); color: #fff; }
.btn.yt:hover { background: #a8231f; }
.btn.ghost { background: transparent; }
.btn.on, .btn[aria-pressed="true"] { background: #f6e6b8; border-color: var(--gold); color: #6d4f13; }
.btn[aria-pressed="true"] .ic { fill: currentColor; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tag.role { background: #e7eddf; color: #2f5a3d; border-color: rgba(63, 114, 80, .3); }
.tag.g-voyage { color: #2f5a3d; } .tag.g-passage { color: var(--navy); } .tag.g-yard { color: #8a540f; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex: none; }

/* avatars */
.av { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--c); color: #fff; overflow: hidden; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--c); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-i { font: 700 calc(var(--s) * .38) var(--sans); letter-spacing: .02em; }
.av.portrait { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--c), 0 6px 18px -4px rgba(60, 40, 15, .5); }

/* ---- chart room ------------------------------------------------------------------ */
.chartroom { position: absolute; z-index: 6; left: 16px; top: 166px; width: 312px; max-height: calc(100% - 166px - var(--fleet-h) - 24px);
  overflow: auto; border-radius: var(--r); padding: 12px 16px 14px; scrollbar-width: thin; transition: opacity .25s; }
.chartroom.folded { padding-bottom: 12px; }
.cr-head { display: flex; align-items: center; justify-content: space-between; }
.cr-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 20px var(--serif-sc); letter-spacing: .04em; }
.cr-head h2 .ic { color: var(--red); }
.cr-toggle { width: 30px; height: 30px; }
.cr-intro { margin: 4px 0 6px; color: var(--ink-3); font-size: 12.5px; }
.facet { border: 0; padding: 0; margin: 10px 0 0; }
.facet legend { display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 7px; font: 700 12px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); }
.facet legend .ic { color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 11px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255, 252, 244, .7); font-size: 12.5px; font-weight: 600; transition: all .15s; }
.chip .n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--paper-3); font-size: 12px; font-weight: 800; color: var(--ink-2); }
.chip:hover { border-color: var(--ink-3); background: #fffaf0; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] .n { background: rgba(244, 234, 211, .2); color: var(--paper); }
.seg { display: flex; padding: 3px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }
.seg button { flex: 1; height: 28px; border: 0; border-radius: 999px; background: none; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.seg button[aria-checked="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(60, 40, 15, .25); }
.toggles { margin-top: 14px; display: grid; gap: 10px; }
.tgl { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 600; font-size: 13px; }
.tgl small { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.tgl input { position: absolute; opacity: 0; pointer-events: none; }
.tgl-ui { flex: none; width: 36px; height: 21px; margin-top: 1px; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--line-2); position: relative; transition: background .2s; }
.tgl-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s; }
.tgl input:checked + .tgl-ui { background: var(--green); border-color: var(--green); }
.tgl input:checked + .tgl-ui::after { transform: translateX(15px); }
.tgl input:focus-visible + .tgl-ui { outline: 2px solid var(--navy); outline-offset: 2px; }
.cr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 11px; border-top: 1px dashed var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.cr-foot b { color: var(--ink); }

/* ---- HUD --------------------------------------------------------------------- */
.hud { position: absolute; z-index: 7; top: 16px; right: 16px; display: flex; gap: 8px; align-items: stretch; transition: opacity .25s; }
.hud-btn { display: flex; align-items: center; gap: 7px; padding: 0 14px; height: 50px; border-radius: 999px; font-weight: 700; }
.hud-btn:hover, .rank:hover { background: #fffaf0; }
.hud-btn .ic { color: var(--red); }
.academy-btn .ic { color: var(--navy); }
.rank { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px 0 10px; border-radius: 999px; text-align: left; }
.rank-ic { width: 30px; height: 30px; color: var(--gold); animation: helm 18s linear infinite; }
@keyframes helm { to { transform: rotate(360deg); } }
.rank-txt { display: grid; gap: 2px; }
.rank-name { font: 16px/1 var(--serif-sc); letter-spacing: .04em; }
.rank-bar { display: block; width: 120px; height: 5px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #d9ae55); border-radius: inherit; transition: width .6s; }
.rank-bar.big { width: 100%; height: 8px; }
.rank-sub { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.only-mobile { display: none !important; }

/* ---- map controls, compass, scale -------------------------------------------------- */
.mapctl { position: absolute; z-index: 5; right: 160px; bottom: 30px; display: flex; border-radius: 12px; overflow: hidden; }
.ctl { width: 42px; height: 42px; border: 0; border-right: 1px solid var(--line); background: none; display: grid; place-items: center; }
.ctl:last-child { border-right: 0; }
.ctl:hover { background: var(--paper-3); }
.compass { position: absolute; z-index: 5; right: 22px; bottom: calc(var(--fleet-h) + 26px); border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 2px; }
.compass-rose { display: block; width: 116px; height: 116px; border-radius: 50%; transition: transform 1.3s cubic-bezier(.2, .7, .1, 1); filter: drop-shadow(0 6px 10px rgba(60, 40, 15, .3)); }
.compass-rose .rose > circle:first-child { fill: rgba(248, 242, 227, .92); }
.compass:hover .compass-rose { filter: drop-shadow(0 8px 14px rgba(60, 40, 15, .4)); }
.compass-label { font: italic 16px var(--serif); color: var(--ink); background: var(--panel); padding: 1px 10px; border-radius: 999px; border: 1px solid var(--line); transition: transform .2s; }
.compass:hover .compass-label { transform: translateY(-2px); }
.compass.spinning .compass-label { opacity: .6; }
.scalebar { position: absolute; z-index: 4; left: 24px; bottom: 26px; pointer-events: none; display: grid; justify-items: end; }
.sb-bar { display: flex; height: 7px; border: 1px solid var(--ink); background: var(--paper); }
.sb-bar i { flex: 1; } .sb-bar i:nth-child(odd) { background: var(--ink); }
.sb-lab { display: flex; justify-content: space-between; font: italic 15.5px var(--serif); color: var(--ink); margin-top: 3px; white-space: nowrap; gap: 8px; }

/* ---- fleet strip ------------------------------------------------------------------ */
.fleet { position: absolute; z-index: 6; left: 16px; right: 16px; bottom: 14px; height: var(--fleet-h); border-radius: 18px; padding: 8px 12px 10px; display: flex; flex-direction: column; }
.fleet-head { display: flex; align-items: baseline; gap: 12px; padding: 0 4px 6px; }
.fleet-head h2 { margin: 0; font: 400 16px var(--serif-sc); letter-spacing: .06em; }
.fleet-head span { font-size: 12px; color: var(--ink-3); font-weight: 600; flex: 1; }
.fleet-list { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; flex: 1; }
.fleet-card { position: relative; flex: none; display: flex; align-items: center; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 252, 244, .6); transition: all .15s; }
.fleet-card:hover { background: #fffaf0; border-color: var(--line-2); transform: translateY(-1px); }
.fleet-card.active { border-color: var(--c); box-shadow: 0 0 0 2px var(--c) inset; background: #fffaf0; }
.fc-main { display: flex; align-items: center; gap: 10px; padding: 5px 4px 5px 8px; border: 0; background: none; text-align: left; }
.fc-text { display: grid; line-height: 1.25; }
.fc-text b { font-size: 13.5px; white-space: nowrap; }
.fc-text small { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.fc-text small .ic { width: 13px; height: 13px; }
.av.pennant { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--c); }
.fc-star { border: 0; background: none; padding: 8px 10px 8px 4px; color: var(--ink-3); transition: color .15s, transform .2s; }
.fc-star:hover { color: var(--gold); transform: scale(1.15) rotate(8deg); }
.fc-star[aria-pressed="true"] { color: var(--gold); }
.fc-star[aria-pressed="true"] .ic { fill: currentColor; }
.fresh { position: absolute; top: -7px; right: 26px; padding: 1px 7px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.fresh.sm { position: static; display: inline-block; margin-right: 6px; font-size: 10px; vertical-align: 1px; }

/* ---- drawer ------------------------------------------------------------------------ */
.drawer { position: absolute; z-index: 8; top: 14px; right: 14px; bottom: calc(var(--fleet-h) + 26px); width: 452px; border-radius: 18px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; transform: translateX(calc(100% + 30px)); opacity: 0; visibility: hidden;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility 0s .42s; }
.drawer.open { transform: none; opacity: 1; visibility: visible; transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.drawer-open .hud, .drawer-open .mapctl, .drawer-open .compass, .drawer-open .scalebar { opacity: 0; pointer-events: none; }
.dr-inner { position: relative; padding: 20px 22px 24px; }
.dr-close { position: sticky; top: 0; float: right; z-index: 2; margin: -6px -8px 0 8px; }
/* the crew card's Share and Close, side by side; the name still runs full width under them */
.dr-tools { position: sticky; top: 0; float: right; z-index: 2; display: flex; gap: 6px; margin: -6px -8px -40px 8px; }
.dr-tools .dr-close { position: static; float: none; margin: 0; }
.port-head { padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.port-head h2 { margin: 6px 0 2px; font: 400 34px/1.05 var(--serif); letter-spacing: .01em; }
.coords { font: italic 16px var(--serif); color: var(--ink-2); }
.charted { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.crew-link { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 2px 8px 2px 2px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: var(--ink); }
.crew-link:hover { background: var(--paper-2); }
.crew-link.bare { padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.note-box { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #f6ead0; border: 1px dashed #c79a54; font-size: 12.5px; color: #6d4f13; }
.dr-sec { margin-top: 20px; }
.dr-sec h3, .passport h3 { margin: 0 0 10px; font: 400 19px var(--serif-sc); letter-spacing: .04em; }

/* an episode's card, as it opens under its row (ui.js epMore; the rows: mobile-panels.css and below) */
.ep-dur { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 5px; background: rgba(20, 14, 8, .78); color: #fff; font-size: 12px; font-weight: 700; }
.ep-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); font-weight: 600; margin: -2px 0 4px -2px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tags .ic { width: 13px; height: 13px; }
.ep-note { position: relative; margin: 12px 0 0; padding: 2px 0 0 14px; border-left: 2px solid var(--gold); font: 400 15px/1.6 var(--sans); color: var(--ink-2); }
.ep-note cite, .about cite { display: block; margin-top: 4px; font: 600 12.5px var(--sans); font-style: normal; color: var(--ink-3); letter-spacing: .02em; }
.ep-film { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }
.ep-film .ic { margin-top: 2px; color: var(--ink-3); }
.ep-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.near { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.near button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 252, 244, .7); text-align: left; transition: all .15s; }
.near button:hover { background: #fffaf0; border-color: var(--line-2); transform: translateX(2px); }
.near-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); color: var(--navy); flex: none; }
.near-ic.sealed { background: #c9a86a; border-color: #7a5a26; color: #fff6df; font: 700 15px var(--serif); }
.near-name { flex: 1; font: italic 16px var(--serif); display: grid; }
.near-name small, .near-d small { font: 600 12.5px var(--sans); color: var(--ink-3); font-style: normal; }
.near-d { display: grid; text-align: right; font-size: 13px; }

/* crew drawer */
.crew-head { display: flex; align-items: center; gap: 18px; padding: 6px 0 16px; }
.crew-head h2 { margin: 2px 0 0; font: 400 30px/1.05 var(--serif); }
.handle { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-top: 3px; }
.status-cruising { color: var(--green); } .status-underway { color: var(--navy); } .status-yard { color: #9a5d12; }
.cta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.about { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(255, 252, 244, .7); border: 1px solid var(--line); font: 400 15px/1.6 var(--sans); color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.stats div { display: grid; padding: 10px 8px; border-radius: 12px; background: var(--paper-2); text-align: center; }
.stats b { font: 400 24px/1.1 var(--serif-sc); }
.stats span { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; hyphens: auto; overflow-wrap: break-word; }
.vessel { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line-2); font-weight: 700; }
.vessel .ic { width: 22px; height: 22px; color: var(--navy); }
.vessel small { display: block; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.compo { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.compo i { background: var(--g); }
.compo-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); }
.compo-legend li { display: flex; align-items: center; gap: 6px; }
.route { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.route li { display: flex; align-items: center; gap: 4px; }
.route li + li::before { content: ''; width: 14px; border-top: 2px dotted var(--ink-3); }
.place-chip { display: inline-flex; align-items: center; gap: 5px; height: 31px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper);
  font: italic 16px var(--serif); transition: all .15s; }
.place-chip .ic { width: 13px; height: 13px; color: var(--navy); }
.place-chip:hover { background: #fffaf0; border-color: var(--ink-3); }
.empty { display: flex; gap: 8px; color: var(--ink-3); font-size: 13px; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; padding: 3px; border-radius: 999px; background: var(--paper-2); }
.tabs button { flex: 1; height: 30px; border: 0; border-radius: 999px; background: none; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(60, 40, 15, .25); }
.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.row { display: flex; gap: 12px; padding: 7px; border-radius: 12px; transition: background .15s; }
.row:hover { background: rgba(255, 252, 244, .8); }
.row-thumb { position: relative; flex: none; width: 118px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #2a2118; }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-thumb .ep-dur { right: 4px; bottom: 4px; font-size: 10.5px; }
.row-check { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(51, 41, 31, .45); color: #fff; }
.row-check .ic { width: 26px; height: 26px; }
.row-body { min-width: 0; display: grid; gap: 3px; align-content: start; }
.row-title { font-weight: 700; font-size: 13px; line-height: 1.3; }
.row-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.row-places { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.row-places .place-chip { height: 27px; font-size: 15px; padding: 0 8px; }
.row.watched .row-title { color: var(--ink-3); }
.thanks { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; padding: 14px; border-radius: 12px; background: #f6e3dc; color: #7a2a23; font-size: 13px; font-weight: 600; }
.thanks .ic { color: var(--red); margin-top: 1px; }

/* ---- modal ------------------------------------------------------------------------ */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(40, 28, 14, .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.modal-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 22px; background: var(--paper);
  transform: translateY(16px) scale(.98); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s; scrollbar-width: thin; outline: none; }
.modal-card.wide { width: min(980px, 100%); }
/* the player: as wide as the screen's height allows, so the video, its title and its buttons all fit */
.modal-card.theatre-card { width: min(980px, 100%, calc((100vh - 270px) * 16 / 9)); }
.modal-card.narrow { width: min(520px, 100%); }
.modal.on .modal-backdrop { opacity: 1; }
.modal.on .modal-card { transform: none; opacity: 1; }

.welcome { padding: 30px 34px 32px; text-align: center; background: radial-gradient(ellipse at 50% 0%, #fbf5e6, var(--paper) 60%); }
.wl-rose { display: flex; justify-content: center; margin-bottom: 6px; }
.wl-rose .rose { animation: helm 40s linear infinite; }
.welcome h2 { margin: 6px 0 8px; font: 400 36px var(--serif); }
.welcome > p { margin: 0 auto; max-width: 420px; color: var(--ink-2); font-size: 14.5px; }
.wl-steps { list-style: none; padding: 0; margin: 22px 0 24px; display: grid; gap: 10px; text-align: left; }
.wl-steps li { display: flex; gap: 14px; align-items: center; padding: 11px 14px; border-radius: 14px; background: rgba(255, 252, 244, .8); border: 1px solid var(--line); }
.wl-steps b { display: block; font: 400 17px var(--serif-sc); letter-spacing: .03em; }
.wl-steps div { font-size: 13px; color: var(--ink-2); }
.wl-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; border: 1.5px solid var(--ink); background: var(--paper); color: var(--navy); }
.wl-ic.sealed { background: #c9a86a; border-color: #7a5a26; color: #fff6df; font: 700 18px var(--serif); }

.theatre { background: #1f1912; color: #f1e7d0; }
.th-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 12px 20px; }
.th-top .kicker { color: #c7b489; }
.theatre .icon-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: #f1e7d0; }
.th-frame { aspect-ratio: 16 / 9; background: #000; }
.th-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.th-info { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 20px 6px; }
.th-credit { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1 1 360px; }
.th-credit h3 { margin: 0; font: 700 16.5px/1.3 var(--sans); }
.th-credit p { margin: 3px 0 0; font-size: 13px; color: #c7b489; }
.th-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.theatre .btn.ghost { color: #f1e7d0; border-color: rgba(255, 255, 255, .25); }
.theatre .btn.ghost:hover { background: rgba(255, 255, 255, .08); }
.th-places { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 20px 0; }
.th-nav { display: flex; justify-content: space-between; padding: 12px 20px 18px; }

.passport { padding: 22px 26px 24px; background: radial-gradient(ellipse at 0% 0%, #f2e0bb, var(--paper) 55%); }
.pp-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pp-rank { display: flex; gap: 16px; align-items: center; flex: 1; }
.pp-rank > .ic { width: 64px; height: 64px; color: var(--gold); animation: helm 18s linear infinite; }
.pp-rank small { font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pp-rank h2 { margin: 0 0 6px; font: 400 34px/1 var(--serif-sc); }
.pp-rank > div { flex: 1; max-width: 420px; }
.pp-rank p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.ladder { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 18px 0 8px; }
.ladder li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px dashed var(--line-2); font: 15.5px var(--serif-sc); color: var(--ink-3); }
.ladder span { display: grid; place-items: center; min-width: 26px; height: 22px; border-radius: 11px; background: var(--paper-2); font: 700 12px var(--sans); }
.ladder li.got { border-style: solid; border-color: var(--gold); color: var(--ink); background: #f6e6b8; }
.ladder li.got span { background: var(--gold); color: #2b2219; }
.pp-how { margin: 0 0 18px; font-size: 12.5px; color: var(--ink-3); }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.stamp-slot { aspect-ratio: 1; border: 0; background: none; padding: 4px; border-radius: 50%; transition: transform .2s; }
.stamp-slot:hover { transform: scale(1.06) rotate(-3deg); }
.stamp { width: 100%; height: 100%; transform: rotate(var(--tilt)); color: var(--red); mix-blend-mode: multiply; opacity: .88; }
.stamp.kind-anchorage { color: var(--navy); } .stamp.kind-visited { color: var(--green); } .stamp.kind-boatyard { color: #9a5d12; }
.st-o { fill: none; stroke: currentColor; stroke-width: 3; }
.st-i { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 2; }
.st-c { fill: none; stroke: currentColor; stroke-width: 1.4; }
.st-t, .st-b { font: 700 11px var(--sans); letter-spacing: .12em; fill: currentColor; }
.st-b { font-size: 9px; letter-spacing: .1em; }
.st-ic { color: currentColor; }
.stamp-slot.empty { display: grid; place-content: center; gap: 2px; border: 2px dashed var(--line-2); text-align: center; color: var(--ink-3); }
.stamp-slot.empty span { font: 30px var(--serif); }
.stamp-slot.empty small { font-size: 12px; font-weight: 600; padding: 0 10px; }
.pp-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 12.5px; color: var(--ink-2); font-weight: 600; }

.crews-page { padding: 24px 26px 22px; }
.cp-head { display: flex; justify-content: space-between; gap: 20px; }
.cp-head h2 { margin: 4px 0 6px; font: 400 40px var(--serif); }
.cp-head p { margin: 0; max-width: 680px; color: var(--ink-2); font-size: 14.5px; }
.cp-head .kicker .ic { color: var(--red); }
.cp-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.cp-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fffaf0; color: var(--ink-3); }
.cp-search input { flex: 1; min-width: 0; border: 0; background: none; font: 15px var(--sans); color: var(--ink); outline: none; }
.cp-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(35, 64, 94, .12); }
.cp-sort { display: flex; align-items: center; gap: 8px; font: 600 13px var(--sans); color: var(--ink-3); }
.cp-sort select { height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fffaf0; font: 600 14px var(--sans); color: var(--ink); }
.cp-none { margin: 18px 0 0; color: var(--ink-2); font-style: italic; }
.crew-grid .crew-card[hidden] { display: none; }
@media (max-width: 600px) { .cp-tools { padding-right: 46px; } }   /* clear of the floating close button */
.crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 20px; }
.crew-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: rgba(255, 252, 244, .85); border: 1px solid var(--line); border-top: 4px solid var(--c); }
.cc-top { display: flex; gap: 14px; align-items: center; }
.cc-top h3 { margin: 0; font: 400 22px/1.1 var(--serif); }
.cc-name { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .15s, text-decoration-color .15s; }
.cc-name:hover, .cc-name:focus-visible { color: var(--red); text-decoration-color: currentColor; }
.cc-about { margin: 0; font: 400 14.5px/1.55 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }   /* a long web address wraps instead of running off the card */
.cc-stats { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink-2); }
.cc-stats span { display: inline-flex; align-items: center; gap: 4px; }
.cc-stats b { font-size: 14px; color: var(--ink); }
.cc-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.cc-actions .btn.sm { padding: 0 10px; gap: 5px; }
.fine { margin: 20px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

/* ---- tooltip, toasts, loading -------------------------------------------------------- */
.tip { position: fixed; left: 0; top: 0; z-index: 30; max-width: 260px; padding: 10px 12px; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .15s; display: grid; gap: 3px; }
.tip.on { opacity: 1; }
.tip b { font: 400 18px/1.15 var(--serif); }
.tip-k { display: flex; align-items: center; gap: 5px; font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tip-sub { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.tip-crews { display: flex; gap: 8px; margin-top: 4px; }
.tip-row { display: flex; align-items: center; gap: 10px; }
.toasts { position: fixed; z-index: 40; left: 50%; top: 18px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 999px; font-size: 13px; animation: toastIn .45s cubic-bezier(.3, 1.5, .5, 1); transition: opacity .4s, transform .4s; }
.toast b { display: block; font: 400 16px/1.2 var(--serif-sc); letter-spacing: .02em; }
.toast > .ic { width: 26px; height: 26px; color: var(--gold); }
.toast.out { opacity: 0; transform: translateY(-10px); }
.toast.promo { background: #2b2219; color: #f4e6c0; border-color: var(--gold); }
.toast-seal { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #c9a86a; color: #fff6df; font: 700 16px var(--serif); border: 1.5px solid #7a5a26; animation: crack .6s ease-out; }
@keyframes crack { 0% { transform: scale(1.4) rotate(-20deg); } 60% { transform: scale(.9) rotate(8deg); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--paper); transition: opacity .8s; }
.loading.done { opacity: 0; pointer-events: none; }
.loading-inner { text-align: center; font: italic 18px var(--serif); color: var(--ink-2); }
.loading-inner .compass-rose { width: 84px; height: 84px; margin: 0 auto 12px; }
.loading-inner { max-width: min(420px, calc(100vw - 32px)); }
.loading-inner p { margin: 0; }
.loading-fail { display: block; margin-bottom: 4px; font: 400 24px var(--serif); font-style: normal; color: var(--ink); }
.loading-retry { margin-top: 16px; font-style: normal; }
.loading-slow { display: block; margin-top: 10px; font: 13px var(--sans); color: var(--ink-3); }
.spin-slow .rose { animation: helm 6s linear infinite; }

/* ---- responsive ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .drawer { width: 400px; }
  .rank-bar { width: 90px; }
}
@media (max-width: 760px) {
  /* ---- a phone: the chart's frame ------------------------------------------------------------------------
     One outer margin, --ph-edge (12px) from each screen edge plus that edge's safe area (env(safe-area-inset-*):
     the page has viewport-fit=cover, so on an edge-to-edge Android or an iPhone the system's gesture or button bar
     and the notch are drawn over it), and one gap, --ph-gap (8px), between neighbours. Every tap target is at
     least --ph-tap (44px).
     · Right column, --ph-col (64px) wide, one centre line: the compass rose (64×64) at the top, the language pill
       (64×44) a gap under it, the map controls (64×44 each: winds, magnifying glass, whole chart) at the bottom,
       a gap above the bottom row.
     · Bottom row, an edge from the bottom: the top bar's buttons (44px tall, a gap apart) from edge to edge; the
       rank pill takes what is left, so the row's right end lines up with the column above it.
     · Left side, from the bottom row up, a gap apart: the small print (its height follows the language: app.js
       keeps --imprint-h), then the first-visit hint. Both end a gap short of the right column (--ph-beside-col).
     · Top row: the title and the compass share their top edge; the search (44px tall) sits a gap under the compass
       and ends a gap before the language pill. Toasts appear a gap under the search.
     · Panels that rise from the bottom (the Chart Room, winds) start a gap above the bottom row (--ph-above-bar);
       sheets (port, crew, route…) and dialogs keep 8px from the edges plus the safe area, and while a sheet is
       open the controls step aside (.drawer-open), so nothing peeks out under it. */
  :root { --fleet-h: 0px; --ph-edge: 12px; --ph-gap: 8px; --ph-col: 64px; --ph-tap: 44px;
    --ph-st: env(safe-area-inset-top, 0px); --ph-sr: env(safe-area-inset-right, 0px); --ph-sb: env(safe-area-inset-bottom, 0px); --ph-sl: env(safe-area-inset-left, 0px);
    --ph-top: calc(var(--ph-st) + var(--ph-edge)); --ph-right: calc(var(--ph-sr) + var(--ph-edge)); --ph-bottom: calc(var(--ph-sb) + var(--ph-edge)); --ph-left: calc(var(--ph-sl) + var(--ph-edge));
    --ph-above-bar: calc(var(--ph-bottom) + var(--ph-tap) + var(--ph-gap));
    --ph-beside-col: calc(var(--ph-right) + var(--ph-col) + var(--ph-gap));
    --ph-search-top: calc(var(--ph-top) + var(--ph-col) + var(--ph-gap)); }
  .only-mobile { display: flex !important; }
  .cartouche { top: var(--ph-top); left: var(--ph-left); padding: 3px; }
  .c-inner { padding: 5px 20px 6px; }
  .cartouche h1 { font-size: 24px; }
  .c-kicker, .c-meta, .c-inner::before, .c-inner::after { display: none; }
  .c-sub { font-size: 11.5px; }
  .hud { top: auto; right: var(--ph-right); left: var(--ph-left); bottom: var(--ph-bottom); justify-content: flex-start; gap: var(--ph-gap); }
  .hud > * { flex: none; }
  .hud-btn { height: var(--ph-tap); padding: 0 13px; }
  .hud .hud-btn:not(#filtersBtn) { width: var(--ph-tap); padding: 0; justify-content: center; }      /* Crews, Academy, Rum: round icons */
  /* the rank fills the rest of the row; on a narrow row its wheel steps aside and a long rank wraps onto two lines */
  .rank { height: var(--ph-tap); flex: 1 1 0; min-width: 0; gap: 8px; padding: 0 14px 0 8px; container-type: inline-size; justify-content: center; }
  .rank-ic { width: 26px; height: 26px; }
  .rank-txt { min-width: 0; gap: 3px; }
  .rank-name { font-size: 15px; line-height: 1.02; }
  .rank-sub { display: none; }
  .rank-bar { width: 64px; max-width: 100%; }
  @container (max-width: 150px) { .rank-ic { display: none; } }
  .room-open .coach { display: none; }      /* the Chart Room rises over the hint's place */
  #crewsBtn > span, #academyBtn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* icons only; the name stays for screen readers */
  .compass { right: var(--ph-right); top: var(--ph-top); bottom: auto; }
  .compass-rose { width: var(--ph-col); height: var(--ph-col); }
  .compass-rose .rose { width: var(--ph-col); height: var(--ph-col); }
  .compass-label { display: none; }
  .scalebar { display: none; }
  .chartroom { left: var(--ph-left); right: var(--ph-right); width: auto; top: auto; bottom: var(--ph-above-bar); max-height: 60vh; max-height: calc(100dvh - var(--ph-above-bar) - var(--ph-search-top)); }
  .chartroom.folded { display: none; }
  .fleet { left: 8px; right: 8px; bottom: 8px; padding: 6px 8px 8px; }
  .fleet-head span { display: none; }
  .drawer { left: calc(8px + var(--ph-sl)); right: calc(8px + var(--ph-sr)); width: auto; top: 30vh; bottom: calc(8px + var(--ph-sb)); transform: translateY(110%); z-index: 9; }
  .drawer.open { transform: none; }
  .dr-inner { padding: 16px 16px 20px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .port-head h2 { font-size: 28px; }
  /* a dialog fits the screen as it is now (100dvh: with Chrome's address bar showing, 100vh is taller than the
     screen and the card's top and bottom ran off it), clear of the system bars; a card taller than that scrolls */
  .modal { padding: max(8px, var(--ph-st)) max(8px, var(--ph-sr)) max(8px, var(--ph-sb)) max(8px, var(--ph-sl)); place-items: safe center; }
  .modal-card { max-height: calc(100vh - 16px); max-height: calc(100dvh - max(8px, var(--ph-st)) - max(8px, var(--ph-sb))); border-radius: 18px; }
  .welcome, .passport, .crews-page { padding: 20px 18px; }
  .cp-head h2 { font-size: 30px; }
  .row-thumb { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* theatre sits on dark: re-tint the light components used inside it */
.theatre .crew-link.bare { color: #f6e7bf; font-size: inherit; font-weight: 700; }
.theatre .place-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #f1e7d0; }
.theatre .place-chip .ic { color: #d9b86a; }
.theatre .place-chip:hover { background: rgba(255, 255, 255, .16); }
.theatre .av { box-shadow: 0 0 0 2px #1f1912, 0 0 0 4px var(--c); }

/* ---- hover card ---------------------------------------------------------------- */
.tip { width: 250px; max-width: 250px; padding: 8px 8px 10px; }
.tip-thumb { position: relative; display: block; margin: -2px -2px 6px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #2a2118; }
.tip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tip-thumb.sealed img { filter: blur(7px) sepia(.6) brightness(.85); transform: scale(1.15); }
.tip-thumb.sealed span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 44px var(--serif); color: #fff6df; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.tip > b, .tip > .tip-k, .tip > .tip-sub, .tip > .tip-row, .tip > .tip-cta, .tip > .tip-bar { margin: 0 4px; }
.tip-cta { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; padding-top: 7px; border-top: 1px dashed var(--line-2); font-size: 12px; font-weight: 700; color: var(--navy); }
.tip-cta.seal { color: #8a5d12; }
.tip-cta .ic { width: 14px; height: 14px; }
.tip-bar { display: block; height: 5px; border-radius: 3px; background: var(--paper-3); overflow: hidden; margin-top: 4px !important; }
.tip-bar i { display: block; height: 100%; background: var(--gold); }

/* ---- search ----------------------------------------------------------------------- */
.search { position: absolute; z-index: 7; top: 16px; left: 50%; transform: translateX(-50%); width: min(360px, calc(100vw - 760px)); min-width: 240px; transition: opacity .25s; }
.search input { width: 100%; height: 46px; padding: 0 16px 0 42px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); box-shadow: var(--shadow);
  font: 600 14px var(--sans); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--ink-3); font-weight: 500; }
.search input:focus { border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(181, 138, 60, .25), var(--shadow); }
.search-ic { position: absolute; left: 15px; top: 13px; color: var(--ink-3); pointer-events: none; }
.search-results { position: absolute; top: 52px; left: 0; right: 0; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.search-results li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.search-results li[aria-selected="true"], .search-results li:hover { background: var(--paper-2); }
.search-results b { display: block; font: italic 16px/1.15 var(--serif); font-weight: 400; }
.search-results small { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.sr-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--navy); flex: none; }
.sr-ic .ic { width: 14px; height: 14px; }
.sr-ic.sealed { background: #c9a86a; border-color: #7a5a26; color: #fff6df; font: 700 13px var(--serif); }
.sr-empty { color: var(--ink-3); font-size: 13px; cursor: default !important; }
.drawer-open .search { opacity: 0; pointer-events: none; }

/* ---- first-visit hint --------------------------------------------------------------- */
.coach { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--fleet-h) + 28px); transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: #2b2219; color: #f4e6c0; font-size: 13px; box-shadow: var(--shadow); transition: opacity .4s; white-space: nowrap; }
.coach b { color: #fff; }
.coach button { flex: none; height: 30px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--gold); color: #2b2219; font-weight: 800; font-size: 12px; white-space: nowrap; }
/* the hint in the words of the device: click and scroll with a mouse, tap and pinch on a touch screen */
.coach-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .coach-mouse { display: none; } .coach-touch { display: inline; } }
.coach.out { opacity: 0; }
#app:has(#windPanel:not([hidden])) .coach { display: none; }     /* the winds panel covers it; opening it shows the visitor has found their way */
.drawer-open .coach { display: none; }
@media (min-width: 761px) and (max-width: 1365px) { .coach { bottom: calc(var(--fleet-h) + 92px); } }   /* too narrow to sit between the scale bar and the map controls: above them */
/* desktop: centred in the free space between the cartouche and the top bar (app.js fitSearch sets --search-x and
   --search-w); where that's too narrow, on a second row under the bar */
@media (min-width: 761px) {
  .search { left: var(--search-x, 50%); width: var(--search-w, min(360px, calc(100vw - 760px))); }
  #app.search-below:not(.drawer-open) .search { top: 78px; left: auto; right: 16px; transform: none; width: 320px; }
}
/* the top bar's labels folded into their icons where the bar is tight (app.js fitBar): the name stays in the tooltip and
   for screen readers; the passport keeps its wheel */
@media (min-width: 761px) {
  .hud > .hud-btn.folded, .hud > .rank.folded { width: 50px; padding: 0; justify-content: center; }
  .hud > .hud-btn.folded > span:not(.tab-face) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hud > .rank.folded .rank-txt { display: none; }
}
/* a narrow desktop: the top bar's Crews and Academy show their icons only, so the bar clears the cartouche */
@media (min-width: 761px) and (max-width: 940px) {
  #crewsBtn > span, #academyBtn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 760px) {
  .search { left: var(--ph-left); right: var(--ph-beside-col); top: var(--ph-search-top); width: auto; min-width: 0; transform: none; }
  /* 16px: a smaller text field makes iOS Safari zoom in on focus (and stay zoomed); the hint is the short one (app.js) */
  .search input { height: var(--ph-tap); padding: 0 12px 0 40px; font-size: 16px; text-overflow: ellipsis; }
  .cp-search input, .cp-sort select, .mt-form input, .mt-form textarea { font-size: 16px; }
  .search-ic { left: 14px; top: 14px; }
  .search-results { top: calc(var(--ph-tap) + 6px); }
  /* clear of the map controls' column (right) and a gap above the small print (below; app.js measures --imprint-h) */
  .coach { white-space: normal; left: var(--ph-left); right: var(--ph-beside-col); width: auto; transform: none; bottom: calc(var(--ph-above-bar) + var(--imprint-h, 34px) + var(--ph-gap)); font-size: 12px; }
}

/* ---- hover card is interactive while shown ------------------------------------------------ */
.tip.on { pointer-events: auto; }
button.tip-cta { width: calc(100% - 8px); border: 0; border-top: 1px dashed var(--line-2); border-radius: 0; background: none; padding: 8px 0 1px; text-align: left; cursor: pointer; font-family: var(--sans); }
button.tip-cta:hover { color: var(--red); }
button.tip-cta.seal:hover { color: #6d4410; }

/* ---- filters explained ------------------------------------------------------------------------ */
.facet-help { margin: -3px 0 7px; font-size: 12.5px; color: var(--ink-3); }
.chip:disabled { opacity: .45; cursor: not-allowed; }
circle.ghost { fill: rgba(95, 80, 60, .28); stroke: rgba(244, 234, 211, .8); stroke-width: 1; pointer-events: none; }

/* ---- georeferencing honesty ----------------------------------------------------------------------- */
.m-sub { font-size: 12px; fill: var(--ink-3); }
/* an approximate place: a quiet note after the episodes, not an alarm */
.note-box.area { background: rgba(255, 252, 244, .6); border-color: var(--line-2); color: var(--ink-3); }
.reloc { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; padding: 9px 12px; border-radius: 10px; background: #eef1f4; border: 1px dashed #8aa0b4; color: #23405e; font-size: 12.5px; }
.reloc .ic { margin-top: 2px; flex: none; }
.place-chip small { font: 600 12px var(--sans); font-style: normal; color: var(--ink-3); margin-left: 2px; }
.row-meta.muted { font-style: italic; }

/* ---- player: where it was filmed ------------------------------------------------------------------ */
.th-loc { display: flex; gap: 16px; align-items: center; margin: 10px 20px 0; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.th-loc.none { gap: 10px; color: #c7b489; font-size: 13px; }
.th-loc.none p { margin: 0; }
.th-loc .locator { width: 300px; max-width: 45%; height: auto; flex: none; border-radius: 10px; }
.th-loc-text { min-width: 0; }
.th-loc-text .kicker { color: #c7b489; }
.th-loc-text h4 { margin: 2px 0 0; font: 400 26px var(--serif); color: #fbf1d9; }
.th-loc-text p { margin: 3px 0 0; font-size: 13px; color: #d9c9a3; }
.th-loc-text .far-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(217, 184, 106, .16); color: #f6e7bf; font-weight: 600; }
.th-loc-text .far-note .ic { flex: none; margin-top: 1px; }
.th-loc-text .th-places { padding: 8px 0 0; }
.lc-sea { fill: #2f3b3d; }
.lc-land { fill: #7c6d52; stroke: #a8966f; stroke-width: .6; }
.lc-lake { fill: #2f3b3d; stroke: #a8966f; stroke-width: .6; }
.lc-route { fill: none; stroke: #f4e6c0; stroke-width: 1.6; stroke-dasharray: 3 4; }
.lc-from { fill: #1f1912; stroke: #f4e6c0; stroke-width: 1.6; }
.lc-area { fill: rgba(232, 96, 76, .18); stroke: #e8604c; stroke-width: 1; stroke-dasharray: 3 3; }
.lc-pin { fill: #e8604c; stroke: #fff; stroke-width: 1.6; }
.lc-pin.sec { fill: #d9b86a; }
.th-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 20px 18px; }
.th-step { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #f1e7d0; min-width: 0; }
.th-step.next { text-align: right; justify-items: end; }
.th-step:hover { background: rgba(255, 255, 255, .09); }
.th-step small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c7b489; }
.th-step b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.th-where { display: inline-flex; align-items: center; gap: 5px; font: italic 15.5px var(--serif); color: #e7d6ae; flex-wrap: wrap; }
.th-where .ic { width: 13px; height: 13px; }
.th-where .far { font: 700 10.5px var(--sans); font-style: normal; padding: 1px 7px; border-radius: 999px; background: #a3352c; color: #fff; }
@media (max-width: 760px) {
  .th-loc { flex-direction: column; align-items: stretch; margin: 10px 12px 0; }
  .th-loc .locator { width: 100%; max-width: none; }
  .th-nav { grid-template-columns: 1fr; padding: 12px; }
  /* one episode per row: room for a long title on two lines before it's shortened */
  .th-step b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

.place-chip.plain { cursor: default; border-style: dashed; background: transparent; }
.place-chip.plain:hover { background: transparent; border-color: var(--line-2); }
.hint { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.hint .ic { flex: none; margin-top: 1px; }

.ep-dur:empty { display: none; }

/* ---- beyond the edge of the chart -------------------------------------------------- */
.margins .note text { font: italic 19px/1.3 var(--serif); fill: var(--ink-2); }
.margins .note-w text { text-anchor: end; }
.margins .note-n text, .margins .note-s text { text-anchor: middle; }
.margins .note-small { font: 13.5px var(--sans); font-style: normal; fill: var(--ink-3); }
.serpent { pointer-events: none; }
.sp-water { fill: none; stroke: #46686b; stroke-width: 1.3; stroke-linecap: round; opacity: .8; }
.sp-body, .sp-head { fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-eye { fill: var(--ink); }
.sp-cap { font: italic 16px var(--serif); fill: var(--ink-2); text-anchor: middle; }

/* ---- themed scroll bars everywhere --------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #bba173 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cdb88c; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #a98d5c; background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---- passport regions ------------------------------------------------------------------ */
.pp-stamps-head { display: flex; align-items: baseline; gap: 10px; }
.pp-region { margin-top: 16px; scroll-margin-top: 60px; }
.pp-region h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 400 18px var(--serif-sc); letter-spacing: .02em; }
.pp-bar { flex: 1; max-width: 180px; height: 5px; border-radius: 3px; background: var(--paper-3); overflow: hidden; margin-left: 6px; }
.pp-bar i { display: block; height: 100%; background: var(--gold); }
.tip-title { font: 700 13.5px/1.3 var(--sans) !important; }

/* ---- sticky modal close, crews badge --------------------------------------------------- */
.modal-xwrap { position: sticky; top: 0; height: 0; z-index: 6; }
.modal-x { position: absolute; right: 16px; top: 16px; box-shadow: 0 4px 12px -4px rgba(60, 40, 15, .35); }
.modal-card .pp-head > .icon-btn, .modal-card .cp-head > .icon-btn, .modal-card .lk-head > .icon-btn { visibility: hidden; }
.hud-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font: 800 11.5px var(--sans); }
.drawer-open .mapctl, .drawer-open .scalebar { opacity: 0; pointer-events: none; }

/* ---- winds & weather ---------------------------------------------------------------- */
.wind-canvas { position: absolute; inset: 0; pointer-events: none; }
.ctl.wind-btn { width: 58px; }
.wind-head { width: 38px; height: auto; transition: transform .3s; }
.wind-btn:hover .wind-head { transform: translateX(-2px) scale(1.06); }
.wind-btn[aria-pressed="true"] { background: #f6e6b8; }
.wind-belt { font: italic 17px var(--serif); fill: #23405e; text-anchor: middle; letter-spacing: .08em; paint-order: stroke; stroke: rgba(219, 226, 210, .85); stroke-width: 4px; pointer-events: none; }
.wind-belt.calm { fill: var(--ink-2); font-size: 15px; }
.storm path { fill: url(#stormHatch); stroke: rgba(163, 53, 44, .35); stroke-width: 1.2; stroke-dasharray: 6 5; opacity: .45; }
.storm.now path { opacity: 1; stroke: rgba(163, 53, 44, .8); }
.storm-label { font: 700 12.5px var(--sans); fill: rgba(140, 42, 34, .7); text-anchor: middle; paint-order: stroke; stroke: rgba(244, 234, 211, .9); stroke-width: 4px; pointer-events: none; }
.storm.now .storm-label { fill: #8c2a22; }
.wind-mark { cursor: pointer; outline: none; }
.wind-mark circle { fill: rgba(251, 245, 230, .95); stroke: var(--navy); stroke-width: 1.5; }
.wind-mark .wm-arrow { fill: var(--navy); stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.wind-mark text { font: italic 16.5px var(--serif); fill: var(--navy); paint-order: stroke; stroke: rgba(244, 234, 211, .9); stroke-width: 4px; }
.wind-mark.now circle { stroke: var(--gold); stroke-width: 2.5; }
.wind-mark:hover circle, .wind-mark.sel circle { fill: #f6e6b8; }
.wind-panel { position: absolute; z-index: 6; right: 16px; bottom: 170px; width: 340px; max-height: calc(100% - 250px); overflow: auto; border-radius: var(--r); padding: 12px 16px 14px; }
.drawer-open .wind-panel { display: none; }
.wp-head { display: flex; justify-content: space-between; align-items: center; }
.wp-head .kicker { color: var(--navy); }
.wp-month { display: grid; gap: 4px; margin: 8px 0 2px; font-size: 13px; font-weight: 700; }
.wp-month b { font: italic 18px var(--serif); font-weight: 400; margin-left: 4px; }
.wp-month input { accent-color: var(--navy); width: 100%; }
.wp-hint { margin: 2px 0 8px; font-size: 12.5px; color: var(--ink-3); }
.wp-legend { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.wp-legend li { display: flex; gap: 8px; align-items: center; }
.wp-legend i { flex: none; width: 26px; height: 10px; border-radius: 3px; }
.wl-streak { background: linear-gradient(90deg, transparent, rgba(35, 64, 94, .7)); height: 3px !important; }
.wl-storm { background: repeating-linear-gradient(35deg, rgba(163, 53, 44, .5) 0 2px, transparent 2px 6px); border: 1px dashed rgba(163, 53, 44, .6); }
.wl-local { width: 14px !important; height: 14px !important; border-radius: 50% !important; border: 1.5px solid var(--navy); background: #fbf5e6; }
.wp-wind { margin: 4px 0 10px; padding: 12px; border-radius: 12px; background: #fffaf0; border: 1px solid var(--line-2); }
.wp-wind-head { display: flex; gap: 10px; align-items: center; }
.wp-arrow { width: 40px; height: 40px; flex: none; }
.wp-arrow circle { fill: #fbf5e6; stroke: var(--navy); stroke-width: 1.5; }
.wp-arrow path { fill: var(--navy); stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.wp-wind h4 { margin: 0; font: 400 24px var(--serif); }
.wp-wind p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.wp-wind-head p { margin: 0; font-size: 12.5px; }
.wp-now { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #f6e6b8; color: #6d4f13; font-size: 11.5px; }
.wp-tip { display: flex; gap: 7px; align-items: flex-start; font: italic 15.5px var(--serif) !important; color: var(--ink) !important; }
.wp-tip .ic { flex: none; margin-top: 2px; color: var(--navy); }
.wind-panel details { margin-top: 8px; font-size: 13px; }
.wind-panel summary { cursor: pointer; font-weight: 700; }
.wp-storms { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.wp-storms li { padding: 5px 8px; border-radius: 8px; color: var(--ink-2); }
.wp-storms li small { display: block; color: var(--ink-3); font-size: 12px; }
.wp-storms li.now { background: #f3e0da; color: #7a2a23; }
.wp-beaufort { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 12px; }
.wp-beaufort th, .wp-beaufort td { padding: 3px 5px; border-bottom: 1px solid var(--line); text-align: left; }
.wp-beaufort td:first-child { font: 700 13px var(--sans); color: var(--navy); }
.wp-fine { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.winds-on .sea-label.ocean { opacity: .3; }

/* ---- winds v2: ports step back, local winds as small markers, a focused panel --------- */
.winds-on .node { pointer-events: none; }
.winds-on .node .node-inner { transform: scale(.32) !important; opacity: .55; }
.winds-on .m-label, .winds-on .c-label, .winds-on .m-badge, .winds-on .m-badge-t, .winds-on .area { display: none; }
.winds-on .ships, .winds-on .tracks, .winds-on .serpent { display: none; }
.winds-on .parallel text { display: none; }     /* the wind belts are labelled instead: their names sat on the Arctic Circle and the Tropics */
.wind-mark { cursor: pointer; outline: none; transition: opacity .3s; }
.wind-mark circle { fill: #fbf5e6; stroke: var(--navy); stroke-width: 1.6; }
.wind-mark .wm-arrow { fill: var(--navy); stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; }
.wind-mark .wm-name { display: none; font: italic 16px var(--serif); fill: var(--navy); paint-order: stroke; stroke: rgba(244, 234, 211, .92); stroke-width: 4px; }
.wind-mark.named .wm-name, .wind-mark:hover .wm-name, .wind-mark:focus-visible .wm-name, .wind-mark.sel .wm-name { display: block; }
.wind-mark.now circle { stroke: var(--gold); stroke-width: 2.4; }
.wind-mark:hover circle, .wind-mark.sel circle { fill: #f6e6b8; }
.wind-mark.sel circle { stroke: var(--red); stroke-width: 2.6; }
.wind-mark.sel .wm-arrow { fill: var(--red); stroke: var(--red); }
.wind-mark.faded { opacity: .3; }
.wind-zone .zb { stroke: rgba(163, 53, 44, .55); stroke-width: 1.2; stroke-dasharray: 3 4; pointer-events: none; }
.wind-zone .zb0 { fill: rgba(163, 53, 44, .07); }
.wind-zone .zb1 { fill: rgba(163, 53, 44, .1); }
.wind-zone .zb2 { fill: rgba(163, 53, 44, .14); stroke-dasharray: none; }
.wind-zone .zl { font: italic 14px var(--serif); fill: #8c2a22; text-anchor: middle; paint-order: stroke; stroke: rgba(244, 234, 211, .9); stroke-width: 4px; pointer-events: none; }
.wind-zone .zone-name { font: 400 26px var(--serif-sc); letter-spacing: .12em; fill: #8c2a22; text-anchor: middle; paint-order: stroke; stroke: rgba(244, 234, 211, .85); stroke-width: 5px; pointer-events: none; }
.wp-intro { margin: 2px 0 10px; font-size: 13px; color: var(--ink-2); }
.wp-locals { display: grid; gap: 8px; margin-bottom: 6px; }
.wp-locals small { display: block; margin-bottom: 4px; font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wp-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 5px 5px 0; height: 30px; padding: 0 11px 0 5px; border-radius: 999px; border: 1px solid var(--line-2); background: #fffaf0; font: italic 15.5px var(--serif); cursor: pointer; }
.wp-chip svg { width: 20px; height: 20px; } .wp-chip circle { fill: #fbf5e6; stroke: var(--navy); stroke-width: 1.5; } .wp-chip path { fill: var(--navy); stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; }
.wp-chip.now { border-color: var(--gold); background: #fbf0d4; }
.wp-chip:hover { border-color: var(--ink-3); }
.wp-back { font-size: 13.5px; }
.wp-title { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.wp-title h3 { margin: 0; font: 400 30px/1.05 var(--serif); }
.wp-title p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.wp-dir { margin: 10px 0 8px; font-size: 14px; } .wp-dir b { font-weight: 800; }
.wp-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.wp-strip span { display: grid; justify-items: center; gap: 3px; font: 700 11px var(--sans); color: var(--ink-3); }
.wp-strip i { display: block; width: 100%; height: 12px; border-radius: 3px; background: var(--paper-3); }
.wp-strip .on i { background: #e3b8ad; } .wp-strip .peak i { background: var(--red); }
.wp-strip .cur { color: var(--ink); } .wp-strip .cur i { outline: 2px solid var(--ink); outline-offset: 1px; }
.wp-season { margin: 8px 0; font-size: 13.5px; color: var(--ink-2); }
.st-peak { color: #8c2a22; } .st-in { color: #6d4f13; } .st-rare { color: var(--ink-3); }
.wp-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; font-size: 13.5px; }
.wp-facts dt { font-weight: 800; color: var(--ink-2); } .wp-facts dd { margin: 0; }
.wp-what { margin: 8px 0; font-size: 14px; line-height: 1.5; }
.wp-key { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-3); margin: 8px 0; }
.wp-key i { width: 22px; height: 12px; border-radius: 6px; background: rgba(163, 53, 44, .18); border: 1px dashed rgba(163, 53, 44, .6); }
.wp-src { font-size: 12px; color: var(--ink-3); margin: 8px 0 10px; } .wp-src a { color: var(--navy); }

.wp-strip button { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; font: 700 11.5px var(--sans); color: var(--ink-3); cursor: pointer; }
.wp-strip button i { display: block; width: 100%; height: 14px; border-radius: 3px; background: var(--paper-3); transition: transform .15s; }
.wp-strip button:hover i { transform: scaleY(1.25); }
.wp-strip button.on i { background: #e3b8ad; } .wp-strip button.peak i { background: var(--red); }
.wp-strip button.cur { color: var(--ink); } .wp-strip button.cur i { outline: 2px solid var(--ink); outline-offset: 1px; }
.wp-month .wp-strip { margin-top: 6px; }
.wp-month .wp-strip button:not(.on):not(.peak) i { background: #d8c9a4; }
.wp-month .wp-strip button.cur i { background: var(--navy); }
.wp-hint-small { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---- curiosities (pearls in shells) ------------------------------------------------ */
.winds-on .eggs { display: none; }
.egg-glint { fill: #fff8e2; stroke: var(--gold); stroke-width: 1; opacity: .85; animation: glint 3.2s ease-in-out infinite; pointer-events: none; }
.egg:nth-child(3n) .egg-glint { animation-delay: -1.1s; } .egg:nth-child(3n+1) .egg-glint { animation-delay: -2.2s; }
@keyframes glint { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
.egg.shell-mode { cursor: pointer; }
.egg .egg-inner { animation: pop .35s ease-out both; transition: transform .15s; }
.egg.shell-mode:hover .egg-inner, .egg.shell-mode:focus-visible .egg-inner { transform: scale(1.18); }
.egg-halo { fill: rgba(255, 248, 226, .55); stroke: rgba(181, 138, 60, .45); stroke-width: 1; }
.egg.rec .egg-halo { fill: rgba(255, 236, 170, .75); stroke: var(--gold); stroke-width: 1.5; animation: eggpulse 2.6s ease-in-out infinite; }
@keyframes eggpulse { 50% { stroke-width: 3.5; stroke-opacity: .35; } }
.egg.found .egg-halo { fill: rgba(255, 255, 255, .35); stroke-dasharray: 2 2; }
.egg.found .egg-inner { opacity: .82; }
.egg.egg-burst .egg-halo { animation: ring .5s ease-out; }
.shell { overflow: visible; }
.shell .sh-body, .shell .sh-lid, .shell .sh-dish { fill: #f5e3c3; stroke: #6d4f2f; stroke-width: 1.1; stroke-linejoin: round; }
.shell .sh-lid { fill: #efd9b2; }
.shell .sh-ridge { fill: none; stroke: #9a7651; stroke-width: .8; stroke-linecap: round; }
.shell .sh-hinge { fill: #e4c99a; stroke: #6d4f2f; stroke-width: .9; }
.shell .sh-badge { stroke: #fff8e2; stroke-width: 1.1; }
.shell .sh-emblem { color: #fff8e2; stroke-width: 2.6; }
.shell .sh-pearl { stroke: rgba(255, 255, 255, .7); stroke-width: .8; }

.egg-head { text-align: center; padding: 6px 8px 2px; border-bottom: 1px dashed var(--line-2); margin-bottom: 14px; }
.egg-emblem { display: inline-block; filter: drop-shadow(0 4px 6px rgba(60, 40, 15, .22)); animation: eggopen .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes eggopen { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.egg-topic { color: var(--t) !important; justify-content: center; }
.egg-head h2 { margin: 4px 0 2px; font: 400 30px/1.1 var(--serif); color: var(--ink); }
.egg-story { font: 17px/1.55 var(--serif); color: var(--ink); margin: 0 0 14px; }
.egg-story::first-letter, .egg-story .egg-cap { font-size: 2.3em; float: left; line-height: .9; margin: 4px 6px 0 0; color: var(--ink-2); }
.egg-story:has(.egg-cap)::first-letter { font-size: inherit; float: none; margin: 0; color: inherit; }
.egg-story .egg-cap { margin-right: 2px; }
.egg-fact { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--t) 9%, var(--paper)); border-left: 4px solid var(--t); font-size: 14px; color: var(--ink); }
.egg-fact b { color: var(--t); }
.egg-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.egg-links a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); text-decoration: none; font-weight: 600; color: var(--navy); }
.egg-links a:hover { border-color: var(--navy); background: #fff; }
.egg-react { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; padding: 10px 0; border-top: 1px dashed var(--line-2); border-bottom: 1px dashed var(--line-2); }
.egg-react > span { flex: 1 1 100%; font-size: 13px; color: var(--ink-3); }
.egg-go { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-left: 4px solid var(--t); border-radius: 12px; background: var(--paper); text-align: left; }
.egg-go:hover { background: #fff; box-shadow: var(--shadow); }
.egg-go > span { flex: 1; display: grid; gap: 2px; }
.egg-go small { font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.egg-go b { font: 400 17px var(--serif); }
.egg-go > .ic { color: var(--navy); }
.egg-done { display: flex; gap: 8px; align-items: center; color: var(--gold); font-weight: 700; }

.egg-coll { margin: 0 0 22px; }
.egg-coll h3 { font: 400 22px var(--serif); margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; }
.egg-coll .count { font: 700 13px var(--sans); color: var(--ink-3); }
.egg-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.egg-t { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--line); border-top: 3px solid var(--t); border-radius: 10px; background: var(--paper); }
.egg-t > span { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--t); }
.egg-t > b { font-size: 13px; color: var(--ink-2); }
.egg-t > i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.egg-t > i > i { display: block; height: 100%; background: var(--t); }
.egg-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.egg-chips:empty { display: none; }
.egg-chips .place-chip { height: 27px; font-size: 13px; }
.egg-head { display: flex; flex-direction: column; align-items: center; }
.shell .sh-dish { fill: #f1dcb4; }
.egg-leader { stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 2 2; }
.egg-spot { fill: var(--gold); }

/* ---- chart room: journeys ------------------------------------------------------------ */
.chartroom { width: 332px; }
.picto { width: 28px; height: 28px; flex: none; }
.cr-heading { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 6px 8px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--paper); text-align: left; font: 400 15px/1.25 var(--serif); color: var(--ink); }
.cr-heading .picto { width: 22px; height: 22px; color: var(--red); }
.cr-heading:hover { border-color: var(--ink-3); background: #fffaf0; }
.cr-tabs { margin: 10px 0 12px; }
.cr-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(60, 40, 15, .25); }
.cr-body { display: grid; gap: 12px; }
.cr-body > .cr-intro { margin: 0; }

.jr-now { padding: 12px 13px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #fffaf0, var(--paper)); box-shadow: 0 1px 0 #fff inset; }
.jr-now.free { border-style: dashed; background: transparent; box-shadow: none; }
.jr-now .kicker { color: var(--red); font-size: 11.5px; }
.jr-now h3 { margin: 3px 0 6px; font: 400 21px/1.15 var(--serif); }
.jr-now p { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.jr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.jr-tags span { padding: 2px 8px; border-radius: 999px; background: var(--paper-3); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.jr-now-foot { display: flex; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2); }
.jr-now-foot > span { display: flex; align-items: center; gap: 5px; margin-right: auto; }
.jr-now-foot b { color: var(--ink); }
.jr-now-foot .ic { color: var(--ink-3); }

.jr-plotbtn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border: 0; border-radius: 12px; background: var(--navy); color: #f6eedb; text-align: left; box-shadow: 0 6px 14px -8px rgba(20, 35, 55, .8); transition: transform .15s, background .15s; }
.jr-plotbtn:hover { background: #1b3350; transform: translateY(-1px); }
.jr-plotbtn .picto { width: 30px; height: 30px; color: #f0cf8a; }
.jr-plotbtn span { flex: 1; display: grid; gap: 1px; }
.jr-plotbtn b { font: 400 18px var(--serif); }
.jr-plotbtn small { font-size: 12px; color: #cdd6df; }

.jr-sec h4 { margin: 0 0 6px; font: 700 12px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); }
.jr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.jr-list li { position: relative; }
.jr-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 34px 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); text-align: left; }
.jr-row:hover { border-color: var(--ink-3); background: #fffaf0; }
.jr-row .picto { width: 24px; height: 24px; color: var(--ink-3); }
.jr-row span { flex: 1; min-width: 0; display: grid; }
.jr-row b { font: 400 15.5px/1.2 var(--serif); }
.jr-row small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-row em { font-style: normal; font-size: 12px; font-weight: 800; min-width: 24px; text-align: center; padding: 1px 6px; border-radius: 10px; background: var(--paper-3); color: var(--ink-2); }
.jr-list li.on .jr-row { border-color: var(--red); background: #fbf1e6; box-shadow: 0 0 0 1px var(--red) inset; }
.jr-list li.on .jr-row .picto { color: var(--red); }
.jr-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-idea { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 11px; border-radius: 999px; border: 1px dashed var(--ink-4); background: transparent; font-size: 13px; font-weight: 600; color: var(--ink); }
.jr-idea:hover { border-style: solid; border-color: var(--ink-3); background: #fffaf0; }
.jr-idea span { min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--paper-3); font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; color: var(--ink-2); }

/* plotting: a route of legs with a ship sailing along it */
.jr-plot { display: grid; gap: 12px; margin-top: 10px; }
.jr-route { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 6px 0 0; padding: 24px 0 0; }
.jr-route::before, .jr-route::after { content: ""; position: absolute; left: 22px; top: 38px; border-top: 2px dashed var(--ink-4); }
.jr-route::before { right: 22px; }
.jr-route::after { width: calc((100% - 44px) * var(--at) / 4); border-top-style: solid; border-top-color: var(--red); transition: width .5s ease; }
.jr-route li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; width: 44px; }
.jr-route li button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink-4); background: var(--panel); font-size: 12.5px; font-weight: 800; color: var(--ink-3); display: grid; place-items: center; padding: 0; }
.jr-route li button .ic { width: 14px; height: 14px; }
.jr-route li.done button { border-color: var(--red); background: var(--red); color: #fff; }
.jr-route li.here button { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 4px rgba(163, 53, 44, .15); }
.jr-route li span { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.jr-route li.here span { color: var(--ink); }
.jr-ship { position: absolute; top: -4px; left: calc(8px + (100% - 44px) * var(--at) / 4); width: 28px; height: 28px; color: var(--navy); transition: left .5s cubic-bezier(.5, 0, .3, 1); animation: bob 2.6s ease-in-out infinite; }
.jr-ship .picto { width: 28px; height: 28px; }
.jr-leg .kicker { color: var(--red); font-size: 11.5px; }
.jr-leg h3 { margin: 2px 0 2px; font: 400 21px/1.15 var(--serif); }
.jr-leg p { margin: 0; font-size: 13px; color: var(--ink-3); }
.jr-opts { display: grid; gap: 6px; }
.jr-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--paper); text-align: left; transition: border-color .15s, background .15s, transform .12s; }
.jr-opt:hover:not(:disabled) { border-color: var(--ink-3); background: #fffaf0; transform: translateX(2px); }
.jr-opt .picto { color: var(--ink-2); }
.jr-opt-t { flex: 1; display: grid; min-width: 0; }
.jr-opt-t b { font-size: 14px; }
.jr-opt-t small { font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.jr-opt-n { min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--paper-3); display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.jr-opt[aria-pressed="true"] { border-color: var(--navy); background: #e9eef1; box-shadow: 0 0 0 1px var(--navy) inset; }
.jr-opt[aria-pressed="true"] .picto { color: var(--navy); }
.jr-opt[aria-pressed="true"] .jr-opt-n { background: var(--navy); color: #f6eedb; }
.jr-opt.any { border-style: dashed; }
.jr-opt.any[aria-pressed="true"] { border-style: solid; }
.jr-opt:disabled { opacity: .45; cursor: not-allowed; }
.jr-live { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; background: #e9eef1; font-size: 13px; color: var(--ink-2); }
.jr-live b { color: var(--ink); }
.jr-live .ic { color: var(--navy); }
.jr-live.none { background: #f6e1dc; color: var(--red); }
.jr-live.none .ic { color: var(--red); }
.jr-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.jr-nav > .btn:first-child { margin-right: auto; }
.jr-nav .btn .ic { width: 15px; height: 15px; }
.jr-name { display: grid; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.jr-name input { height: 40px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 10px; background: #fffaf0; font: 400 17px var(--serif); color: var(--ink); letter-spacing: 0; text-transform: none; }
.jr-name input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.jr-recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jr-recap button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px; border: 0; border-bottom: 1px dashed var(--line-2); background: none; text-align: left; font-size: 13px; }
.jr-recap span { width: 56px; font-weight: 700; color: var(--ink-3); }
.jr-recap b { flex: 1; font-weight: 600; }
.jr-recap .ic { width: 14px; height: 14px; color: var(--ink-4); }
.jr-recap button:hover .ic { color: var(--navy); }
.jr-note { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* fine-tune: one line per setting, opened one at a time */
.tn { display: grid; border-top: 1px solid var(--line); }
.tn-row { border-bottom: 1px solid var(--line); }
.tn-row.open { padding-bottom: 10px; }
.tn-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 2px; border: 0; background: none; text-align: left; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tn-head > .ic:first-child { color: var(--ink-3); }
.tn-head span { flex: none; }
.tn-head b { flex: 1; min-width: 0; text-align: right; font-weight: 600; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-head b.set { color: var(--navy); font-weight: 800; }
.tn-head > .ic:last-child { width: 14px; height: 14px; color: var(--ink-3); }
.tn-row .facet-help { margin: 0 0 8px; }
.tn-row .toggles { margin: 2px 0 0; display: grid; gap: 10px; }

@media (max-width: 759px) { .chartroom { width: auto; } }
.jr-alt { justify-self: center; margin-top: -4px; }
.jr-recap em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--navy); opacity: 0; transition: opacity .15s; }
.jr-recap button:hover em, .jr-recap button:focus-visible em { opacity: 1; }

/* ---- chart room v2: folded course line, journey list, new on a journey --------------- */
.cr-heading { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; font: inherit; }
button.cr-heading { padding: 6px 8px; gap: 8px; }
.cr-heading span { display: grid; min-width: 0; text-align: left; }
.cr-heading b { font: 400 15.5px/1.2 var(--serif); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-heading small { font-size: 12px; color: var(--ink-3); }
.cr-h-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 2px 0; border: 0; background: none; }
.cr-h-main .picto { width: 22px; height: 22px; color: var(--red); }
.cr-h-x { width: 26px; height: 26px; flex: none; }
.chartroom.flash .cr-heading, .chartroom.flash .jr-open, .chartroom.flash .jr-now { animation: crflash .8s ease-out; }
@keyframes crflash { 0% { box-shadow: 0 0 0 0 rgba(181, 138, 60, .8); } 100% { box-shadow: 0 0 0 10px rgba(181, 138, 60, 0); } }
.jr-badge { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--gold); color: #fff; font: 800 11.5px var(--sans); font-style: normal; white-space: nowrap; }
.jr-badge::before { content: "✦"; margin-right: 4px; font-size: 10px; }
button.jr-badge:hover { background: #9c7430; }

.jr-now.slim { padding: 9px 12px 8px; }
.jr-now.slim h3 { font-size: 17px; margin: 2px 0 4px; }
.jr-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.jr-sec-head h4 { margin: 0; }
.jr-add { width: 28px; height: 28px; background: var(--navy); border-color: var(--navy); color: #f6eedb; }
.jr-add:hover { background: #1b3350; }
.jr-row { padding-right: 9px; }
.jr-list li.on { border-radius: 10px; box-shadow: 0 0 0 1.5px var(--red); background: #fbf4ea; }
.jr-list li.on .jr-row { border: 0; background: transparent; box-shadow: none; border-radius: 10px 10px 0 0; }
.jr-list li.on .jr-row b { font-size: 17px; }
.jr-open { padding: 0 10px 8px; display: grid; gap: 8px; }
.jr-open .jr-tags { margin: 0; }
.link-btn.danger { color: var(--red); text-decoration-color: rgba(163, 53, 44, .35); }
.jr-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-2); }
.jr-quick > span { width: 100%; font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.jr-leg-top { display: flex; justify-content: space-between; align-items: baseline; }
.jr-nav { justify-content: space-between; }
.jr-nav > .btn:only-child { margin-left: auto; }

.jr-new { display: grid; gap: 6px; padding: 8px 9px; border-radius: 10px; background: #fff8e6; border: 1px solid rgba(181, 138, 60, .45); }
.jr-new-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.jr-new-head b { flex: 1; color: #6d4f13; }
.jr-spark { color: var(--gold); }
.jr-new ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jr-new li button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px; border: 0; border-radius: 8px; background: none; text-align: left; }
.jr-new li button:hover { background: #fffdf6; }
.jr-new img { width: 56px; height: 32px; object-fit: cover; border-radius: 5px; flex: none; }
.jr-new li span { display: grid; min-width: 0; }
.jr-new li b { font-size: 12.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jr-new li small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-more { justify-self: start; }
.jr-legend { margin: 0; font-size: 12px; color: var(--ink-3); display: flex; gap: 5px; }
.jr-uptodate { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--green); }
.toast-undo { margin-left: 6px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; background: none; font: 700 12px var(--sans); color: inherit; pointer-events: auto; cursor: pointer; }

/* a star on ports with new episodes on the journey */
.m-fresh { fill: #d9a441; stroke: #5a3f12; stroke-width: 1; pointer-events: none; animation: twinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 50% { opacity: .55; } }
.winds-on .m-fresh { display: none; }

@media (max-width: 759px) {
  /* a phone: a journey on course is a gold mark on Filters (the Chart Room names it and clears it) */
  .chartroom.folded.has-course { display: none; }
}

/* ---- right panel open: keep what is still useful, move it out of the way ------------------ */
@media (min-width: 761px) {
  .mapctl { transition: right .42s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
  .drawer-open .mapctl { opacity: 1; pointer-events: auto; right: calc(452px + 14px + 14px); }
  .drawer-open .scalebar { opacity: 1; }
}
/* search stays usable, centred in the free space between the cartouche and the panel */
@media (min-width: 1290px) { .drawer-open .search { opacity: 1; pointer-events: auto; left: calc(428px + (100% - 428px - 482px) / 2); } }
.search { transition: left .42s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
/* desktop: the Chart Room exactly as wide as the title cartouche above it (app.js sets --cart-w); unfolded, at least
   that wide and never narrower than its filters need */
@media (min-width: 761px) {
  .chartroom.folded { width: var(--cart-w, 280px); }
  .chartroom:not(.folded) { width: max(var(--cart-w, 0px), 280px); }
}
@media (min-width: 761px) and (min-height: 901px) and (min-width: 1441px) { .chartroom:not(.folded) { width: max(var(--cart-w, 0px), 332px); } }
/* a wide desktop: the top bar (passport, Crews, Rum Cask, language) stays reachable beside the panel, the search on a
   row under it (from 1400px: the longest bar, Spanish, then clears the cartouche) */
@media (min-width: 1400px) {
  .hud { transition: right .42s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
  .drawer-open .hud { opacity: 1; pointer-events: auto; right: calc(452px + 14px + 14px); }
  .drawer-open .search { top: 78px; }
}

/* ---- hidden curiosities: shimmer, glint, surfacing ---------------------------------------- */
.egg-hit { fill: transparent; }
.egg.shimmer-mode, .egg.glint-mode { cursor: pointer; }
.egg-ripple { fill: none; stroke: rgba(35, 64, 94, .55); stroke-width: 1.3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ripple 2.8s ease-out infinite; }
.egg-ripple.r2 { animation-delay: 1.4s; }
@keyframes ripple { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(3.4); opacity: 0; } }
.egg-twinkle { fill: #fffbe9; stroke: var(--gold); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: twinkle2 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes twinkle2 { 0%, 100% { transform: scale(.7) rotate(0deg); opacity: .7; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
.egg.shimmer-mode:hover .egg-twinkle { animation-duration: .8s; }
.shimmer-mode .egg-glint { fill: #fffbe9; stroke: none; opacity: .9; }
.egg.glint-mode .egg-glint, .egg.shimmer-mode .egg-glint { pointer-events: none; }
.egg:nth-child(2n) .egg-ripple { animation-duration: 3.3s; }
.egg-ring { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.egg.surfacing .egg-inner { animation: surface 1s cubic-bezier(.3, 1.5, .5, 1) both; }
.egg.surfacing .egg-ring { animation: surfring 1.4s ease-out; }
@keyframes surface { 0% { transform: translateY(10px) scale(.2); opacity: 0; } 60% { opacity: 1; } }
@keyframes surfring { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }

.egg-go em { display: inline-flex; align-items: center; gap: 5px; font: 800 12px var(--sans); font-style: normal; color: var(--navy); white-space: nowrap; }
.egg-go em .ic { width: 16px; height: 16px; }
.egg-how { margin: 6px 2px 0; font-size: 12.5px; color: var(--ink-3); }

/* ---- for the crews: a message in a bottle ------------------------------------------------- */
.c-bottle { pointer-events: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -4px -6px -4px 6px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--red); vertical-align: middle; transition: transform .2s, background .2s; }
.c-bottle .ic { width: 15px; height: 15px; }
.c-bottle:hover, .c-bottle:focus-visible { background: rgba(163, 53, 44, .1); transform: rotate(-18deg); }
.bottle-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--navy); text-align: left; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(35, 64, 94, .3); }
.bottle-link .ic { flex: none; color: var(--red); }
.bottle-link:hover { color: var(--red); }
.dr-inner > .bottle-link { margin: 4px 0 0; font-size: 12.5px; }
.bottle-page { padding: 26px 28px 22px; }
.bt-head { text-align: center; }
.bt-ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #efe0bd; color: var(--red); margin-bottom: 6px; transform: rotate(-20deg); }
.bt-ic .ic { width: 30px; height: 30px; }
.bt-head .kicker { display: flex; justify-content: center; color: var(--red); }
.bt-head h2 { margin: 2px 0 12px; font: 400 30px/1.1 var(--serif); }
.bt-letter { padding: 14px 18px; border-radius: 4px; background: #fbf4e2; box-shadow: 0 1px 0 #fff inset, 0 0 0 1px var(--line), 0 10px 20px -14px rgba(60, 40, 15, .5); transform: rotate(-.4deg); }
.bt-letter p { margin: 0 0 10px; font: 16.5px/1.55 var(--serif); color: var(--ink); }
.bt-letter .bt-sign { margin: 0; text-align: right; font-style: italic; color: var(--ink-2); }
.bt-options { display: grid; gap: 8px; margin: 16px 0 10px; }
.bt-opt { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink); }
.bt-opt:hover { border-color: var(--navy); background: #fffaf0; }
/* writing to us: the email app or Gmail, and the address to copy */
.mail-send { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mail-send .btn { text-decoration: none; }
.mail-addr { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-addr b { font-weight: 700; color: var(--ink); user-select: all; }
.mail-addr .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.mail-addr .ic { width: 14px; height: 14px; }
.bt-opt > .ic { margin-top: 2px; color: var(--navy); }
.bt-opt span { display: grid; gap: 2px; }
.bt-opt b { font-size: 14.5px; }
.bt-opt small { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.bt-fine { display: flex; gap: 7px; align-items: flex-start; margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.bt-fine .ic { flex: none; margin-top: 1px; }
.bt-fine.warn { color: var(--red); }

/* ---- imprint: the chart's small print, always in reach ----------------------------------- */
.imprint { position: absolute; z-index: 4; left: 24px; bottom: 7px; display: flex; gap: 6px; align-items: baseline; font: italic 12px var(--serif); color: var(--ink-3); }
.imprint a { color: var(--ink-2); text-underline-offset: 2px; text-decoration-color: rgba(51, 41, 31, .3); }
.imprint a:hover, .imprint a:focus-visible { color: var(--red); }
.imprint button { padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(51, 41, 31, .3); }
.imprint button:hover, .imprint button:focus-visible { color: var(--red); }
@media (max-width: 760px) {
  /* a phone: the small print wraps whole items onto a second line before it reaches the map controls' column. It sits
     on a parchment label, so the chart's own lettering (an ocean's name, the sea serpent's caption) never prints
     through it, and each link is a 26px-tall tap (it was the 14px line) */
  .imprint { left: var(--ph-left); right: auto; max-width: calc(100% - var(--ph-left) - var(--ph-beside-col)); bottom: var(--ph-above-bar);
    flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 0; padding: 0 10px; border-radius: 12px; font-size: 11.5px;
    background: rgba(248, 242, 227, .9); box-shadow: 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .imprint > * { white-space: nowrap; }
  .imprint > button, .imprint > a, .imprint .lang-btn { min-height: 26px; display: inline-flex; align-items: center; }
  .drawer-open .imprint, .room-open .imprint { display: none; }
}
.wl-legal { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.wl-legal .link-btn { font-size: 12px; }

/* ---- notices to mariners: privacy & terms -------------------------------------------------- */
.notice-page { padding: 26px 28px 22px; }
.nt-head { text-align: center; margin-bottom: 14px; }
.nt-head .kicker { display: flex; justify-content: center; color: var(--red); }
.nt-head h2 { margin: 2px 0 2px; font: 400 30px/1.1 var(--serif); }
.nt-date { margin: 0; font: italic 14px var(--serif); color: var(--ink-3); }
.notice-page section { margin: 0 0 14px; }
.notice-page h3 { margin: 0 0 6px; font: 400 17px var(--serif-sc); letter-spacing: .03em; color: var(--ink); }
.notice-page p, .notice-page li { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.notice-page p { margin: 0 0 8px; }
.notice-page ul { margin: 0; padding-left: 18px; }
.notice-page li { margin-bottom: 4px; }
.notice-page a { color: var(--navy); font-weight: 600; }
.notice-page code { font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: var(--paper-2); }
.nt-short { padding: 11px 14px; border-radius: 10px; background: #fbf4e2; border: 1px dashed var(--line-2); }
.nt-short ul { list-style: none; padding: 0; }
.nt-short li::before { content: '\2693\FE0E'; margin-right: 7px; color: var(--red); font-size: 12px; }
.nt-warn { color: var(--red); }

/* ---- YouTube player: asks once before loading -------------------------------------------- */
.th-gate { position: relative; display: grid; place-items: center; background: #14110d var(--thumb) center / cover no-repeat; }
.th-gate::before { content: ""; position: absolute; inset: 0; background: rgba(20, 16, 11, .8); backdrop-filter: blur(2px); }
.gate-card { position: relative; max-width: 460px; padding: 18px 20px; text-align: center; color: #f1e7d0; }
.gate-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; margin-bottom: 6px; }
.gate-ic .ic { width: 22px; height: 22px; }
.gate-card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; }
.gate-card a:not(.btn) { color: #f0cf8a; }
.gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px; }
.btn.ghost.light { color: #f1e7d0; border-color: rgba(255, 255, 255, .3); }
.btn.ghost.light:hover { background: rgba(255, 255, 255, .08); }
.gate-card small { display: block; font-size: 12px; color: #c7b489; }
.gate-card small .link-btn { font-size: 12px; color: #f0cf8a; text-decoration-color: rgba(240, 207, 138, .4); }
.nt-yt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--paper-2); font-size: 13.5px; }

/* ---- quick tour: Polly, the spyglass and the little tour ship ------------------------------ */
.tour { position: fixed; inset: 0; z-index: 37; animation: tourIn .35s ease-out; }
.tour.out { opacity: 0; transition: opacity .4s; pointer-events: none; }
@keyframes tourIn { from { opacity: 0; } }
.tour-on .modal { z-index: 38; }                 /* e.g. privacy notes opened from the welcome card */
.tour-dim, .tour-sea { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-dim > rect { fill: rgba(43, 31, 17, .58); }
.tour-sea { pointer-events: none; }
.tour-wake { fill: none; stroke: #f4e6c0; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0; transition: opacity .8s; }
.tour-glass { position: absolute; pointer-events: none; box-shadow: 0 0 0 3px #c9a86a, 0 0 0 6px rgba(109, 79, 19, .55), 0 0 0 11px rgba(201, 168, 106, .25), 0 0 30px 6px rgba(255, 236, 190, .35);
  transition: opacity .3s; }
.tour-ship { position: absolute; left: 0; top: 0; width: 32px; height: 32px; color: #fff6df; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.tour-ship svg { width: 32px; height: 32px; animation: bob 2.2s ease-in-out infinite; transform-origin: 50% 80%; }
.tour-ship.west svg { scale: -1 1; }

.tour-card { position: absolute; width: min(390px, calc(100vw - 20px)); padding: 16px 18px 14px; border-radius: 16px; background: var(--panel); color: var(--ink);
  box-shadow: 0 18px 40px -12px rgba(30, 20, 8, .6), 0 0 0 1px rgba(51, 41, 31, .2); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.tour-card.in { opacity: 1; transform: none; }
.tour-card.center { left: 50%; top: 50%; translate: -50% -50%; width: min(470px, calc(100vw - 24px)); padding: 22px 24px 18px; }
.tour-card.sheet-top, .tour-card.sheet-bottom { left: 10px; right: 10px; width: auto; }
.tour-card.sheet-top { top: calc(10px + env(safe-area-inset-top, 0px)); } .tour-card.sheet-bottom { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.tc-head { display: flex; align-items: center; gap: 12px; }
.tc-polly { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #efe0bd; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #c9a86a; }
.tour-card.center .tc-polly { width: 84px; height: 84px; }
.tc-head .kicker { color: var(--red); font-size: 11.5px; }
.tc-head h3 { margin: 2px 0 0; font: 400 22px/1.15 var(--serif); }
.tour-card.center h3 { font-size: 27px; }
.tc-text { margin: 12px 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.tc-aside { margin: 0 0 4px; font: italic 16px/1.4 var(--serif); color: var(--ink-2); }
.tc-aside::before { content: attr(data-label) " "; color: var(--red); font-style: normal; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
/* the word comes from the page (tour.js: data-label, translated) */
.tc-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tc-foot .btn[data-t="next"], .tc-foot .btn[data-t="spin"] { margin-left: 0; }
.tc-foot.first { flex-wrap: wrap; gap: 12px; }
.tc-skip { margin-right: auto; font-size: 12px; }
.tc-knots { display: flex; gap: 5px; list-style: none; margin: 0 auto 0 0; padding: 0; }
.tc-knots li { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-4); }
.tc-knots li.done { background: var(--red); border-color: var(--red); }
.tc-knots li.here { border-color: var(--red); box-shadow: 0 0 0 3px rgba(163, 53, 44, .18); }
.tc-foot:not(.first) .tc-knots + .tc-skip { margin-left: -2px; }
.tc-legal { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.tc-legal .link-btn { font-size: 12px; }

/* Polly */
.polly { width: 88%; height: 88%; overflow: visible; }
.polly .p-perch { stroke: #6d4f2f; stroke-width: 3; stroke-linecap: round; }
.polly .p-tail { fill: #23405e; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.polly .p-chest, .polly .p-skull { fill: #b8372e; stroke: var(--ink); stroke-width: 1.3; }
.polly .p-wing { fill: #c9962f; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.polly .p-wingtip { fill: #23405e; }
.polly .p-feet { fill: none; stroke: #6d4f2f; stroke-width: 1.4; stroke-linecap: round; }
.polly .p-cheek { fill: #fff6e3; }
.polly .p-eye circle { fill: var(--ink); }
.polly .p-eye { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
.polly .p-beak { fill: #efe3c8; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.polly .p-hat { fill: #2b2219; }
.polly .p-hatband { fill: none; stroke: #c9a86a; stroke-width: 1.2; }
.polly .p-head { transform-box: fill-box; transform-origin: 40% 90%; }
.polly.talk .p-head { animation: tilt .9s ease-in-out; }
.polly.talk .p-wing { transform-box: fill-box; transform-origin: 70% 10%; animation: flap .5s ease-in-out 2; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes tilt { 30% { transform: rotate(-14deg); } 70% { transform: rotate(6deg); } }
@keyframes flap { 50% { transform: rotate(-22deg); } }

/* stage business */
.tour-crack .node-inner { animation: crack .7s ease-in-out; }
.tour-stamp { position: fixed; left: 0; top: 0; z-index: 41; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fbf1e6; color: var(--red);
  box-shadow: 0 0 0 2px var(--red), 0 0 0 4px #fbf1e6, 0 0 0 5px var(--red); pointer-events: none; }
.tour-stamp .ic { width: 20px; height: 20px; }
.tour-bump { animation: bump .6s ease-out; }
@keyframes bump { 40% { transform: scale(1.12); } }
.tour-pulse { animation: tpulse 1.4s ease-in-out infinite; }
@keyframes tpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 106, .8); } 50% { box-shadow: 0 0 0 8px rgba(201, 168, 106, 0); } }
.tour-rank #rankBtn .rank-bar i { animation: fillup 1.6s ease-in-out infinite alternate; }
@keyframes fillup { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .tour, .tour-card, .polly *, .tour-ship svg, .tour-pulse { animation: none !important; transition: none !important; }
}

.tc-foot.last { flex-wrap: wrap; justify-content: flex-end; }
.tc-foot.last .tc-knots { flex-basis: 100%; margin-bottom: 4px; }

.tour-glass.g2 { box-shadow: 0 0 0 2px #c9a86a, 0 0 0 5px rgba(109, 79, 19, .5), 0 0 22px 6px rgba(255, 236, 190, .55); border-radius: 14px; animation: tpulse2 1.6s ease-in-out infinite; }
@keyframes tpulse2 { 50% { box-shadow: 0 0 0 2px #c9a86a, 0 0 0 5px rgba(109, 79, 19, .5), 0 0 34px 12px rgba(255, 236, 190, .8); } }

/* passport regions fold, so a long voyage log stays short */
.pp-region { margin-top: 8px; border-bottom: 1px dashed var(--line-2); }
.pp-region > summary { list-style: none; cursor: pointer; padding: 6px 2px; border-radius: 8px; }
.pp-region > summary::-webkit-details-marker { display: none; }
.pp-region > summary:hover { background: #fffaf0; }
.pp-region > summary h4 { margin: 0; }
.pp-region .pp-chev { width: 16px; height: 16px; margin-left: auto; color: var(--ink-3); transition: transform .2s; flex: none; }
.pp-region[open] > .stamps { padding: 6px 0 14px; animation: ppopen .25s ease-out; }
@keyframes ppopen { from { opacity: 0; transform: translateY(-4px); } }
.pp-all { margin-left: auto; align-self: center; font-size: 12.5px; }
.pp-region + :not(.pp-region) { margin-top: 24px; }

/* wind belts: an arrow per belt, thicker when stronger, turning with the month */
.belt-arrow { fill: none; stroke: #23405e; stroke-linecap: round; opacity: .75; }
.belt-head { fill: #23405e; opacity: .75; }
.belt-kn { font: 700 11.5px var(--sans); fill: var(--ink-2); text-anchor: middle; paint-order: stroke; stroke: rgba(219, 226, 210, .85); stroke-width: 3px; letter-spacing: .02em; }
.belt { pointer-events: none; }
.wp-chip small { margin-left: 6px; font: 700 10.5px var(--sans); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.wp-chip.peak { border-color: var(--red); background: #fbe9e1; }
.wp-chip.peak small { color: var(--red); }
.wp-other summary { cursor: pointer; font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 6px; }
.wp-other .wp-chip { opacity: .75; }
.wp-none { margin: 0; font-size: 13px; color: var(--ink-3); }

/* countries inside a passport region: one folding line each */
.pp-countries { display: grid; gap: 2px; padding: 4px 0 12px 14px; border-left: 2px solid var(--paper-3); margin-left: 6px; }
.pp-country > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.pp-country > summary::-webkit-details-marker { display: none; }
.pp-country > summary:hover { background: #fffaf0; }
.pp-country > summary b { font: 800 12px var(--sans); padding: 1px 7px; border-radius: 9px; background: var(--paper-3); color: var(--ink-2); }
.pp-country .pp-bar { max-width: 120px; }
.pp-country[open] > .stamps { padding: 8px 0 12px; animation: ppopen .25s ease-out; }
.pp-region[open] > .pp-countries { animation: ppopen .25s ease-out; }

/* passport folding rows: + when closed, − when open, each row only its own */
.pp-chev.pp-open { display: none; }
details[open] > summary .pp-chev.pp-open { display: inline; }
details[open] > summary .pp-chev.pp-closed { display: none; }
/* unvisited ports: a gold wax seal embossed with the kind of stop */
.port.sealed .m-wax { fill: none; stroke: rgba(255, 246, 223, .55); stroke-width: 1; stroke-dasharray: 1.5 2; pointer-events: none; }
.port.sealed .m-seal { color: #fff6df; opacity: .92; }
.near-ic.sealed .ic, .sr-ic.sealed .ic, .wl-ic.sealed .ic { color: #fff6df; }
.stamp-slot.empty span .ic { width: 26px; height: 26px; color: var(--ink-4); }

/* fanned-out markers: a dashed leader from each marker to its exact spot */
.leader line { stroke: rgba(51, 41, 31, .55); stroke-width: 1.2; stroke-dasharray: 3 3; }
.leader circle { fill: var(--ink); stroke: var(--paper); stroke-width: 1; }
.leader.dim { opacity: .3; }
.winds-on .leaders { display: none; }

/* ---- famous routes: a faint dashed line, a marker, a panel ---- */
.rt-na { --rt: #23405e; } .rt-ocean { --rt: #2f6f73; } .rt-canal { --rt: #a3542c; }
.route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route .rt-under { stroke: rgba(244, 234, 211, .7); stroke-width: 5; opacity: .8; }
.route .rt-line { stroke: var(--rt); stroke-width: 2.2; stroke-dasharray: 7 6; opacity: .5; transition: opacity .2s, stroke-width .2s; }
.route .rt-hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.route.hover .rt-line, .route.active .rt-line { opacity: 1; stroke-width: 3.2; }
.route.active .rt-line { stroke-dasharray: 9 7; animation: sail 1.6s linear infinite; }
.rt-mark { cursor: pointer; outline: none; }
.rt-mark circle { fill: var(--paper); stroke: var(--rt); stroke-width: 2; transition: fill .2s; }
.rt-mark use { color: var(--rt); pointer-events: none; }
.rt-mark .rt-name { font: italic 15px var(--serif); fill: var(--rt); paint-order: stroke; stroke: rgba(244, 234, 211, .92); stroke-width: 4px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.route.named .rt-name, .route.hover .rt-name, .rt-mark:focus-visible .rt-name { opacity: 1; }
.route.hover .rt-mark circle, .route.active .rt-mark circle, .rt-mark:focus-visible circle { fill: var(--rt); }
.route.hover .rt-mark use, .route.active .rt-mark use, .rt-mark:focus-visible use { color: #fbf6ea; }
.winds-on .routes { display: none; }
.route .rt-hit, .route .rt-hit:focus { outline: none; }   /* a clicked line: no focus box around the whole route */
.route-head .kicker .ic { color: var(--rt); }
.route-head .rt-blurb { margin: 6px 0 12px; font: 400 15px/1.6 var(--sans); color: var(--ink-2); }
.rt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.rt-facts div { padding: 8px 11px; border-radius: 12px; background: rgba(255, 252, 244, .85); border: 1px solid var(--line); }
.rt-facts dt { font: 700 10.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.rt-facts dd { margin: 3px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink); }
.rt-about p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.rt-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 4px 0 16px; }
.rt-lists h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 400 17px var(--serif-sc); }
.rt-lists ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.rt-lists li { margin: 3px 0; }
.rt-sources ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.rt-sources a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy); }
.rt-sources a .ic { width: 13px; height: 13px; }
.rt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 12px; font-size: 12px; color: var(--ink-3); }
.rt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: 700 12px var(--sans); color: var(--navy); cursor: pointer; }
.rt-chip:hover { background: #f6e6b8; }
.rt-chip .ic { width: 14px; height: 14px; }
@media (max-width: 560px) { .rt-facts, .rt-lists { grid-template-columns: 1fr; } }

/* ---- a wider screen's port and route panels: the phone's episode rows (mobile-panels.css), each with its card --------
   (ui.js episodeRow with `more`): the picture plays, the rest of the row opens the card under it in place, one at a
   time; the route's key facts under its blurb, the rest of it folded after the episodes */
@media (min-width: 761px) {
  .ep-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .ep-thb { position: relative; display: block; margin: 10px 0; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
  .ep-thb .ep-th { display: block; }
  .ep-thb .ep-th img { transition: filter .2s; }
  .ep-thb:hover .ep-th img { filter: brightness(.8); }
  /* (a play mark on the picture under the pointer or the key: a disc, and a triangle drawn with borders) */
  .ep-thb::before, .ep-thb::after { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; opacity: 0; transition: opacity .15s; pointer-events: none; }
  .ep-thb::before { width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: rgba(244, 234, 211, .94); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
  .ep-thb::after { z-index: 2; margin: -6px 0 0 -3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ink); }
  .ep-thb:hover::before, .ep-thb:hover::after, .ep-thb:focus-visible::before, .ep-thb:focus-visible::after { opacity: 1; }
  .ep-card .ep-rbtn { position: relative; padding: 10px 26px 10px 0; }
  .ep-card .ep-rbtn::after { content: '›'; position: absolute; right: 4px; top: 50%; margin-top: -12px; font-size: 22px; line-height: 1; color: var(--ink-3); transform: rotate(90deg); transition: transform .18s; }
  .ep-card.open .ep-rbtn::after { transform: rotate(-90deg); }
  .ep-card .ep-rbtn:hover .ep-tt { color: var(--navy); }
  .ep-rows .ep-card.open { margin: 6px -10px; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 252, 244, .75); }
  .ep-more { grid-column: 1 / -1; padding: 0 0 14px; }
  .ep-more .ep-meta { margin: 0 0 8px -2px; }
  .ep-more .ep-actions { margin-top: 12px; }
  .rt-intro .rt-key { margin: 0 0 12px; }
}

/* ---- phones: compact controls, a low sheet, a quiet winds panel ---------------------------- */
.dr-grip { display: none; }
@media (max-width: 760px) {
  /* map controls: winds, the magnifying glass and the whole chart, in the right column (pinch replaces +/-): each
     button as wide as the column and a tap tall, so the three icons share the compass's centre line (spec above) */
  .mapctl { display: flex !important; flex-direction: column; right: var(--ph-right); bottom: var(--ph-above-bar); width: var(--ph-col); border-radius: 14px; }
  .mapctl .ctl, .mapctl .ctl.wind-btn { display: grid !important; width: 100%; height: var(--ph-tap); border-right: 0; border-bottom: 1px solid var(--line); }
  .mapctl .ctl:last-child { border-bottom: 0; }
  .mapctl #zoomIn, .mapctl #zoomOut { display: none !important; }
  .hud .hud-btn { position: relative; }
  .hud .hud-badge { position: absolute; top: -4px; right: -4px; }
  /* the episode sheet starts low (46% of the screen as it is now); the grip makes it tall, up to the title */
  .drawer { top: auto; height: 46vh; height: 46dvh; transition: transform .42s cubic-bezier(.2, .8, .2, 1), height .35s ease, opacity .3s; }
  .drawer.tall { height: calc(100% - 70px - var(--ph-st) - var(--ph-sb)); }
  /* The sheet's top edge: the grip (a strip the width of the sheet, tap to make it tall or low) and the close button
     (with the crew card's Share) both stay put while the sheet scrolls. The close button sits above the grip and
     is a tap (44px+) wide: the grip used to lie over the stuck ×, so a tap on it after scrolling only resized the
     sheet. The strip fades the content scrolling under it, so the grip's bar never sits on a picture. */
  .dr-grip { position: sticky; top: 0; z-index: 3; display: flex !important; justify-content: center; width: 100%; height: 24px; margin: 0 0 -12px; padding: 9px 0 0; border: 0;
    background: linear-gradient(var(--panel) 55%, rgba(248, 242, 227, 0)); cursor: pointer; }
  .dr-grip i { width: 44px; height: 5px; border-radius: 99px; background: var(--line-2); }
  .drawer .dr-inner > .dr-close, .drawer .dr-tools { top: 8px; z-index: 4; }
  .drawer .dr-inner > .dr-close { margin: -20px -8px 0 8px; }           /* resting where it sticks: 8px under the sheet's edge */
  .drawer .dr-tools { gap: 8px; margin: -20px -8px -32px 8px; }
  .drawer .dr-close, .drawer .dr-tools .icon-btn, .modal-x, .theatre .th-top .icon-btn { width: 40px; height: 40px; }
  .drawer .dr-tools .icon-btn, .theatre .th-top .icon-btn { position: relative; }
  /* a tap target 4px wider all round than the drawn button (48px) */
  .drawer .dr-close::after, .drawer .dr-tools .icon-btn::after, .modal-x::after, .theatre .th-top .icon-btn::after { content: ''; position: absolute; inset: -4px; }
  /* dialogs: the × a little closer to the corner; the headers keep room for it */
  .modal-x { right: 10px; top: 10px; }
  .modal-card .pp-head > .icon-btn, .modal-card .cp-head > .icon-btn, .modal-card .lk-head > .icon-btn { width: 40px; height: 40px; }
  /* the player's own bar (Now showing, ×) stays at the top of a card taller than the screen */
  .theatre .th-top { position: sticky; top: 0; z-index: 6; background: #1f1912; }
  .drawer .port-head h2 { font-size: 26px; margin: 2px 0; }
  .drawer .coords { display: none; }
  /* winds: beside the map controls (never under them), its foot level with theirs, as tall as a sheet's first height
     and never past the search row; what doesn't fit scrolls inside it under its top bar (the overview: the bar and
     the month selector; a wind's page: just the bar with All winds and ×). It was 34vh with a wind's whole header
     stuck on top, which left a 50px slit for the text: the last line was cut and could hardly be scrolled. */
  .wind-panel { bottom: var(--ph-above-bar); right: var(--ph-beside-col); left: var(--ph-left); width: auto; padding-top: 0; overscroll-behavior: contain;
    max-height: 46vh; max-height: min(46dvh, calc(100dvh - var(--ph-above-bar) - var(--ph-search-top) - var(--ph-tap) - var(--ph-gap))); }
  .wp-top { position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: 10px 16px 6px; background: var(--panel, #f8f2e3); border-bottom: 1px solid var(--line); }
  .wind-panel .wp-intro, .wind-panel .wp-fine { display: none; }
  /* a journey in the making stays in the folded Chart Room; Filters carries a dot */
  .chartroom.folded.plotting { display: none !important; }
}
#filtersBtn.pending, #filtersBtn.on-course { position: relative; }
#filtersBtn.on-course::after { content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--paper); }
#filtersBtn .hud-badge { position: absolute; top: -4px; right: -4px; }
#filtersBtn.on-course:has(.hud-badge)::after { display: none; }
#filtersBtn.pending::after { content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper); }
@media (max-width: 760px) {
  .drawer:not(.tall) .port-head .charted { display: none; }
  .drawer .port-head .kicker { margin-bottom: 0; }
  .drawer .dr-sec h3 { margin-top: 8px; }
}

/* ---- tooltips (js/tips.js): a parchment label with a pointer, in the chart's style ---------- */
.qtip { position: fixed; left: 0; top: 0; z-index: 60; max-width: 240px; padding: 6px 11px 7px; border-radius: 10px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 6px 18px -6px rgba(51, 41, 31, .45);
  font: 600 12.5px/1.35 var(--sans); letter-spacing: .01em; pointer-events: none; opacity: 0; transition: opacity .15s; }
.qtip.on { opacity: 1; }
.qtip::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 9px; height: 9px; margin-left: -5px;
  background: var(--panel); border: 1px solid var(--line-2); border-top: 0; border-left: 0; transform: rotate(45deg); }
.qtip.below::after { bottom: auto; top: -5px; transform: rotate(-135deg); }
@media (hover: none) { .qtip { display: none; } }
@media (prefers-reduced-motion: reduce) { .qtip { transition: none; } }

/* ---- quests (js/quests.js, data/quests.json) ---------------------------------------------- */
.qobj { cursor: pointer; outline: none; }
.qobj .q-hit { fill: transparent; }
.qobj image { filter: drop-shadow(0 2px 2px rgba(51, 41, 31, .35)); transform-box: fill-box; transform-origin: 50% 90%;
  animation: q-appear .6s cubic-bezier(.3, 1.5, .5, 1) both, q-bob 3.2s ease-in-out .6s infinite; }
.qobj:hover image, .qobj:focus-visible image { filter: drop-shadow(0 0 6px rgba(217, 164, 65, .9)); }
@keyframes q-appear { from { transform: scale(.2); opacity: 0; } }
@keyframes q-bob { 50% { transform: translateY(-2px) rotate(-2deg); } }
.winds-on .quests { display: none; }
.modal-card.quest { width: min(620px, calc(100vw - 24px)); overflow-x: hidden; }
.qd { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: start; padding: 6px 4px 4px; }
.qd-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: radial-gradient(circle at 50% 45%, #fffaf0, #efe2c3); border: 1px solid var(--line); }
.qd-art img { width: 86%; height: auto; animation: q-appear .7s cubic-bezier(.3, 1.5, .5, 1) both; }
.qd-body h2 { margin: 4px 0 2px; font: 400 30px/1.1 var(--serif); }
.qd-body .kicker .ic { color: var(--gold); }
.qd-speaker { margin: 0 0 8px; font: italic 15px var(--serif); color: var(--ink-3); }
.qd-text { margin: 8px 0 14px; font: 17px/1.55 var(--serif); color: var(--ink-2); }
.qd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .qd { grid-template-columns: 1fr; } .qd-art { width: 150px; margin: 0 auto; } }
.pp-quests { margin-top: 22px; }
.pp-quests h3 { margin: 0 0 10px; font: 400 19px var(--serif-sc); }
.pq-items { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 0; }
.pq-items li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; border: 1px solid var(--gold); background: #f6e6b8; font: 700 12.5px var(--sans); color: #6d4f13; }
.pq-items img { width: 40px; height: 40px; }
.pq-log { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.pq-log li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 252, 244, .8); }
.pq-log li .ic { flex: none; margin-top: 2px; color: var(--navy); }
.pq-log li.done { border-color: var(--green); } .pq-log li.done .ic { color: var(--green); }
.pq-log li.rumour { border-style: dashed; } .pq-log li.rumour .ic { color: var(--gold); }
.pq-log b { font: 400 17px var(--serif); } .pq-log small { margin-left: 8px; color: var(--ink-3); font-size: 11.5px; font-style: italic; }
.pq-log p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .qobj image, .qd-art img { animation: none; } }

/* ---- quest dialogs come alive (transform/opacity only: cheap for the browser) --------------- */
.qd { position: relative; animation: qd-in .45s cubic-bezier(.2, 1.25, .35, 1) both; }
@keyframes qd-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.qd-art { position: relative; overflow: visible; animation: qd-pop .6s .08s cubic-bezier(.3, 1.6, .5, 1) both; }
.qd-art img { animation: none; }
@keyframes qd-pop { from { opacity: 0; transform: scale(.6) rotate(-6deg); } }
.qd-s { opacity: 0; animation: qd-line .45s calc(.3s + var(--i) * .32s) ease-out forwards; }
@keyframes qd-line { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.qd-s { display: inline; }
.qd-text { cursor: pointer; }
.qd-actions { opacity: 0; animation: qd-line .4s calc(.4s + var(--i) * .32s) ease-out forwards; }
.qd.all .qd-s, .qd.all .qd-actions { animation: none; opacity: 1; }
/* rock: the bottle rocks in the sand */
.qd.fx-rock .qd-art img { transform-origin: 50% 80%; animation: qd-rock 2.8s .7s ease-in-out infinite; }
@keyframes qd-rock { 25% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }
/* glow: a god's hammer hums */
.qd.fx-glow .qd-art img { animation: qd-hum 1.8s .6s ease-in-out infinite; }
@keyframes qd-hum { 50% { filter: drop-shadow(0 0 10px rgba(217, 164, 65, .95)); transform: translateY(-2px) rotate(-1.5deg); } }
.qd.fx-glow .qd-art { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 rgba(217, 164, 65, .5); animation: qd-pop .6s .08s cubic-bezier(.3, 1.6, .5, 1) both, qd-aura 1.8s .6s ease-in-out infinite; }
@keyframes qd-aura { 50% { box-shadow: inset 0 0 0 1px var(--line), 0 0 22px 2px rgba(217, 164, 65, .45); } }
/* crack: a flash, a shake, glass flying */
.qd.fx-crack::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #fffdf4; pointer-events: none; animation: qd-flash .7s ease-out forwards; }
@keyframes qd-flash { from { opacity: .95; } to { opacity: 0; } }
.qd.fx-crack { animation: qd-in .3s ease-out both, qd-shake .5s .05s ease-in-out; }
@keyframes qd-shake { 15%, 55% { transform: translateX(-6px); } 35%, 75% { transform: translateX(6px); } }
.qd-shards { position: absolute; left: 50%; top: 55%; width: 0; height: 0; pointer-events: none; }
.qd-shards i { position: absolute; width: 8px; height: 12px; margin: -6px -4px; background: #cfe3d8; border: 1px solid #33291f; clip-path: polygon(50% 0, 100% 70%, 20% 100%);
  animation: qd-shard .9s .1s cubic-bezier(.2, .7, .3, 1) forwards; opacity: 0; }
@keyframes qd-shard { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(220deg); } }
/* an item on its way to the passport */
.q-fly { position: fixed; left: 0; top: 0; z-index: 70; width: 64px; height: 64px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(51, 41, 31, .35)); }
.pq-items li.trophy { border-color: var(--green); background: #e3efe2; color: #2f5a3d; }
.pq-items li.trophy .ic { width: 22px; height: 22px; color: var(--gold); fill: #f6e6b8; }
@media (prefers-reduced-motion: reduce) {
  .qd, .qd-art, .qd-s, .qd-actions, .qd-art img, .qd.fx-crack::before, .qd-shards i { animation: none !important; opacity: 1; }
  .qd-shards { display: none; }
}

/* ---- the magnifying glass (js/loupe.js) --------------------------------------------- */
.loupe-btn[aria-pressed="true"] { background: #f6e6b8; }
#chart.loupe-on, #chart.loupe-on:active { cursor: crosshair; }
#chart.loupe-on.loupe-hit { cursor: pointer; }
.loupe { position: absolute; left: 0; top: 0; z-index: 3; border-radius: 50%; pointer-events: none; will-change: transform;
  box-shadow: 0 0 0 5px #b58a3c, 0 0 0 7px #6d4f13, 0 14px 28px -6px rgba(60, 40, 15, .5); }
.loupe canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.loupe:not(.fixed)::after { content: ''; position: absolute; left: 88%; top: 88%; width: 16px; height: 62px; border-radius: 8px;
  background: linear-gradient(90deg, #4a2f17, #7a4a24 45%, #4a2f17); border: 2px solid #6d4f13; transform-origin: 50% 0; transform: rotate(-45deg); }
.loupe-x { position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(var(--red), var(--red)) 50% calc(50% - 14px) / 1.5px 18px no-repeat,
    linear-gradient(var(--red), var(--red)) 50% calc(50% + 14px) / 1.5px 18px no-repeat,
    linear-gradient(var(--red), var(--red)) calc(50% - 14px) 50% / 18px 1.5px no-repeat,
    linear-gradient(var(--red), var(--red)) calc(50% + 14px) 50% / 18px 1.5px no-repeat; }
.loupe-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; border: 1.5px solid var(--red); }
.loupe-glare { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .45), transparent 34%), radial-gradient(circle, transparent 62%, rgba(60, 40, 15, .22) 100%); }
.loupe-read { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; background: rgba(51, 41, 31, .88); color: #f8f2e3; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
  font: 600 13px/1.2 ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .02em; }
.loupe-read b { font-weight: 600; white-space: pre; }
.loupe-go { pointer-events: auto; border: 0; border-radius: 999px; padding: 4px 10px; background: var(--gold); color: #fff; font: 700 12px var(--sans); }
.loupe-read:not(.fixed) .loupe-go { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .loupe-go { animation: qd-hum 1.4s ease-in-out infinite; } }
/* something near, too far to make out: a line under the position, and "Closer" */
.loupe-read.far { flex-wrap: wrap; justify-content: center; row-gap: 3px; width: max-content; max-width: min(300px, calc(100vw - 32px)); border-radius: 14px; }
.loupe-far { flex-basis: 100%; text-align: center; white-space: normal; font: italic 500 12px/1.3 var(--sans); letter-spacing: 0; color: #f1dfae; }
/* a find just beyond what the lens shows: a soft gold glint on the rim, its way (--glint: 0-1, stronger when closer) */
.loupe-glint { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fffbe8 0 14%, rgba(255, 214, 110, .95) 26%, rgba(217, 164, 65, .55) 46%, rgba(217, 164, 65, 0) 70%);
  opacity: calc(.35 + .65 * var(--glint, 1)); }
@media (prefers-reduced-motion: no-preference) { .loupe-glint { animation: loupe-glint 1.5s ease-in-out infinite; } }
@keyframes loupe-glint { 50% { scale: 1.35; filter: brightness(1.15); } }

/* ---- quests: lost memory, wrong answers, advice, the guide's memory meter ------------------------ */
.glitch { font-family: ui-monospace, Consolas, monospace; letter-spacing: -.08em; color: var(--navy); }
@media (prefers-reduced-motion: no-preference) { .glitch { animation: glitch 1.6s steps(2) infinite; } }
@keyframes glitch { 0%, 60% { opacity: 1; } 70% { opacity: .35; } 80% { opacity: .85; transform: translateX(1px); } 90% { opacity: .5; } }
.qd-actions .btn.tried { opacity: .45; text-decoration: line-through; cursor: default; }
.qd-note { margin: -4px 0 12px; padding: 6px 10px; border-left: 3px solid var(--navy); background: rgba(35, 64, 94, .07); font: 600 13px var(--sans); color: var(--navy); }
@media (prefers-reduced-motion: no-preference) { .qd-note { animation: qd-line .35s ease-out both; } }
.modal-card.again .qd, .modal-card.again .qd-art { animation: none; }
.qd-list { list-style: none; margin: -6px 0 14px; padding: 0; display: grid; gap: 6px; }
.qd-list li { padding: 7px 10px; border-radius: 10px; background: rgba(255, 252, 244, .9); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.qd-list b { display: block; font: 400 16px var(--serif); color: var(--ink); }
.pq-mem { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(35, 64, 94, .3); background: rgba(35, 64, 94, .05); }
.pq-mem-top { display: flex; align-items: center; gap: 12px; }
.pq-mem-top img { width: 46px; height: 46px; }
.pq-mem-top > div { flex: 1; display: grid; gap: 4px; }
.pq-mem-top b { font: 400 17px var(--serif); }
.pq-mem-top small { color: var(--ink-3); font-size: 11.5px; }
.pq-bar { display: block; height: 7px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.pq-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #23405e, #5b84a8); }
.pq-mem details { margin-top: 8px; font-size: 13px; }
.pq-mem summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.pq-mem ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 5px; color: var(--ink-2); }

/* a blinking red dot: a quest object (Nemo) seen from afar, with a short wake behind it */
.qbeacon { cursor: pointer; outline: none; }
.qbeacon .qb-hit { fill: transparent; }
.qbeacon .qb-dot { fill: var(--red); stroke: #fff6e6; stroke-width: 1.5; }
.qbeacon .qb-ring { fill: none; stroke: var(--red); stroke-width: 2; opacity: 0; }
.qbeacon .qb-wake { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 4; opacity: .55; }
.qbeacon:hover .qb-dot, .qbeacon:focus-visible .qb-dot { r: 6.5; }
@media (prefers-reduced-motion: no-preference) {
  .qbeacon .qb-dot { animation: qb-blink 1.2s steps(1) infinite; }
  .qbeacon .qb-ring { transform-box: fill-box; transform-origin: center; animation: qb-ping 1.8s ease-out infinite; }
}
@keyframes qb-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }
@keyframes qb-ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(4.5); opacity: 0; } }

/* quest areas looked up from a clue: a name and a faint search circle */
.qarea { pointer-events: none; }
.qarea .qa-name { font: italic 600 17px var(--serif); fill: #7a3b22; paint-order: stroke; stroke: rgba(244, 234, 211, .9); stroke-width: 4px; letter-spacing: .03em; }
/* a clue's approximate coordinates */
.pq-where { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pq-where span { font: 600 12px ui-monospace, Consolas, monospace; color: var(--navy); white-space: pre; }
.pq-where b { font: 600 12.5px var(--sans); color: var(--ink-2); }
.pq-where .ic { width: 13px; height: 13px; color: var(--gold); }
/* the M5's areas in the passport: the name sails there, the position brings the magnifying glass */
.pq-go { font: 600 12.5px var(--sans); color: var(--navy); text-decoration: underline dotted; text-underline-offset: 3px; }
.pq-glass { font: 600 12px ui-monospace, Consolas, monospace; color: var(--navy); white-space: pre; text-decoration: underline dotted; text-underline-offset: 3px; }
.pq-go:hover, .pq-glass:hover { color: var(--red); text-decoration-style: solid; }
.sr-ic.quest { color: var(--gold); }

/* quest dialogs in pages: dots and Next, the choices on the last page */
.qd-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.qd-dots { display: flex; gap: 6px; }
.qd-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-3); transition: background .2s, transform .2s; }
.qd-dots i.on { background: var(--navy); transform: scale(1.25); }
@media (prefers-reduced-motion: no-preference) { .qd-nav { opacity: 0; animation: qd-line .35s .35s ease-out forwards; } }
.qd.all .qd-nav { animation: none; opacity: 1; }
/* phones: a smaller picture and type, so a page fits without scrolling */
@media (max-width: 560px) {
  .qd { gap: 10px; }
  .qd-art { width: 104px; }
  .qd-body h2 { font-size: 24px; }
  .qd-text { font-size: 16px; margin: 6px 0 12px; }
  .qd-nav .btn, .qd-actions .btn { min-height: 40px; }
}
/* a phone: the dialog card has no padding of its own, so the story keeps 18px from its edges (it had 4px: the text
   and the Next button touched the card's border); a dusky story fills the card edge to edge, with the same inset */
@media (max-width: 760px) {
  .modal-card.quest > .qd { padding: 18px; }
  .modal-card.quest > .qd.tone-dark { margin: 0; border-radius: 0; }
}

/* a clue's place inside a dialog, as in the passport */
.qd-where { margin: -4px 0 12px; }
.qd-where .pq-where { margin: 0; }

/* stories in two halves: the conflict (dusky) and how it was resolved (bright) */
.qd.tone-dark { margin: -6px -4px; padding: 12px; border-radius: 16px; background: linear-gradient(160deg, #1f3047, #2b3f57 60%, #34485f); color: #e6ddc8; }
.qd.tone-dark .qd-body h2 { color: #f4ead3; }
.qd.tone-dark .qd-speaker, .qd.tone-dark .kicker { color: #c9bda4; }
.qd.tone-dark .qd-text { color: #ded3bc; }
.qd.tone-dark .qd-art { background: radial-gradient(circle at 50% 45%, #3a4f68, #22344a); border-color: rgba(255, 255, 255, .12); }
.qd.tone-dark .qd-art img { filter: grayscale(.55) sepia(.25) brightness(.85) contrast(1.05); }
.qd.tone-dark .qd-dots i { background: rgba(255, 255, 255, .2); } .qd.tone-dark .qd-dots i.on { background: #f6e6b8; }
.qd.tone-dark .qd-note { background: rgba(255, 255, 255, .08); color: #f6e6b8; border-left-color: #f6e6b8; }
.qd.tone-dark .btn.ghost { color: #f4ead3; border-color: rgba(255, 255, 255, .3); }
.qd.tone-light .qd-art { background: radial-gradient(circle at 50% 40%, #ffffff, #e2f0ec 70%, #f6e6b8); }
/* a timing moment: the picture gives its signal, the button lights up */
.qd-art.cue { box-shadow: 0 0 0 3px #f6e6b8, 0 0 22px 6px rgba(246, 230, 184, .8); }
.qd-art.cue::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 3px solid #fff; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .qd-art.cue::after { animation: qd-cue 1s ease-out infinite; } .qd-art.cue img { animation: qd-hum .5s ease-in-out infinite; } }
@keyframes qd-cue { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.qd-timing.cue { background: var(--red); border-color: var(--red); }
.qd-timing.cue::after { content: ' · ' attr(data-now); }   /* the word comes from the page (quests.js: data-now, translated) */
/* harmony: Balanza's meter */
.pq-mem.meter-balanza { border-color: rgba(35, 64, 94, .35); background: linear-gradient(90deg, rgba(31, 48, 71, .08), rgba(246, 230, 184, .25)); }
.pq-mem.meter-balanza .pq-bar i { background: linear-gradient(90deg, #1f3047, #d9a441); }

/* a species card's small table of facts */
.qd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: -4px 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(35, 64, 94, .06); }
.qd-facts div { min-width: 0; }
.qd-facts dt { font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.qd-facts dd { margin: 1px 0 0; font: 14px/1.35 var(--serif); color: var(--ink); }
/* a collection's crest in the passport: found members lit, and clickable; where to look this month */
.pq-season, .pq-mem .pq-season { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pq-season li { padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .6); border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2); }
.pq-season > li > b { margin-right: 6px; font: 400 15px var(--serif); color: var(--ink); }
.pq-season .pq-where { margin-top: 3px; }
.pq-mem.pq-crest { border-color: rgba(35, 64, 94, .3); background: linear-gradient(90deg, rgba(35, 64, 94, .06), rgba(127, 176, 160, .14)); }
.pq-mem.pq-crest .pq-bar i { background: linear-gradient(90deg, #23405e, #4f9a8a); }
.pq-crest-art, .pq-mem-top > .pq-crest-art { flex: none; display: block; width: 52px; }
.pq-crest-art svg { display: block; width: 100%; height: auto; }
.pq-crest .found { cursor: pointer; outline: none; }
.pq-crest .found:hover path, .pq-crest .found:focus-visible path { filter: brightness(1.25); }
@media (max-width: 560px) { .qd-facts { grid-template-columns: 1fr 1fr; } }
/* a full illustration (dialog.scene): framed like a picture, whatever its shape */
.qd-art.scene { aspect-ratio: auto; padding: 6px; background: #fffaf0; }
.qd-art.scene img { width: 100%; border-radius: 11px; display: block; }
@media (max-width: 560px) { .qd-art.scene { width: 100%; max-width: 340px; } }
/* a storyline's things to do: a gold badge in its block, the quests folded under it */
.pq-mem-top .pq-todo { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: #f6e6b8; border: 1px solid #d9a441; color: #7a5410; font: 800 12px var(--sans); }
.pq-todo .ic { width: 14px; height: 14px; color: #b07a1a; }
.pq-todo.live { box-shadow: 0 0 0 0 rgba(217, 164, 65, .55); animation: pq-todo 2.4s ease-out infinite; }
@keyframes pq-todo { 0% { box-shadow: 0 0 0 0 rgba(217, 164, 65, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(217, 164, 65, 0); } }
@media (prefers-reduced-motion: reduce) { .pq-todo.live { animation: none; } }
.pq-mem .pq-todo-list > summary { color: #8a5d12; }
.pq-mem .pq-todo-list .pq-log { margin: 8px 0 2px; padding: 0; color: inherit; }
.pq-mem.unmet .pq-mem-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(217, 164, 65, .16); color: var(--gold); }
.pq-mem.unmet .pq-mem-top small { font-style: italic; }
/* clue cards: a toast with a teaser and buttons (Take a look / Later), longer-lived and clickable */
.toast.card { pointer-events: auto; align-items: flex-start; max-width: min(440px, calc(100vw - 24px)); padding: 12px 16px 12px 12px; border-radius: 16px; }
.toast.card .tc-body { display: grid; gap: 4px; }
.toast.card .tc-body > span { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.toast.card .tc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 560px) {
  .toast.card { width: calc(100vw - 24px); }
  .toast.card .tc-btns .btn { flex: 1; min-height: 40px; justify-content: center; }
}

/* ---- laptops: a compact chart frame ------------------------------------------------------------
   On a shorter or narrower screen (a laptop, not a phone) the title, the Chart Room, the top-right
   buttons, the search, the map controls and the compass take less room; a wide desktop keeps them full size */
@media (min-width: 761px) and (max-height: 900px), (min-width: 761px) and (max-width: 1440px) {
  .cartouche { top: 12px; left: 12px; padding: 4px; }
  .c-inner { padding: 6px 16px 7px; }
  .c-inner::before, .c-inner::after { font-size: 14px; }
  .c-kicker, .c-meta, .c-inner::before, .c-inner::after { display: none; }      /* just the name and its line, as on a phone */
  .cartouche h1 { font-size: 28px; }
  .c-sub { font-size: 13px; }
  .chartroom { left: 12px; top: 96px; width: 280px; max-height: calc(100% - 96px - var(--fleet-h) - 20px); }
  .cr-head h2 { font-size: 17px; }
  .cr-toggle { width: 26px; height: 26px; }
  .hud { top: 12px; right: 12px; gap: 6px; }
  .hud-btn { height: 40px; padding: 0 12px; font-size: 13.5px; }
  .rank { height: 40px; padding: 0 12px 0 8px; gap: 8px; }
  .rank-ic { width: 24px; height: 24px; }
  .rank-name { font-size: 14px; }
  .rank-bar { width: 90px; }
  .rank-sub { font-size: 11px; }
  .search { top: 12px; }
  .search input { height: 40px; }
  .search-ic { top: 10px; }
  .mapctl { right: 132px; bottom: 22px; }
  .ctl { width: 36px; height: 36px; }
  .compass { right: 16px; bottom: calc(var(--fleet-h) + 18px); }
  .compass-rose, .compass-rose .rose { width: 88px; height: 88px; }
  .compass-label { font-size: 14px; }
  /* the port panel: a tighter header and spacing */
  .drawer { top: 12px; right: 12px; width: 420px; }
  .dr-inner { padding: 14px 16px 18px; }
  .port-head { padding-bottom: 10px; }
  .port-head h2 { font-size: 27px; }
  .coords { font-size: 14px; }
  .charted { margin-top: 8px; }
  .dr-sec { margin-top: 14px; }
  .dr-sec h3 { font-size: 17px; margin-bottom: 8px; }
  .ep-note { margin-top: 10px; font-size: 15.5px; }
  .ep-actions { margin-top: 10px; }
}
/* a longer message (how to use the glass): a card, not a pill, at most the screen's width */
.toast.long { max-width: min(440px, calc(100vw - 24px)); border-radius: 16px; align-items: flex-start; }
@media (max-width: 560px) { .toasts { left: var(--ph-left); right: var(--ph-right); transform: none; } .toast.long, .toast.card { width: 100%; max-width: none; } }
@media (max-width: 760px) { .toasts { top: calc(var(--ph-search-top) + var(--ph-tap) + var(--ph-gap)); } }     /* on a phone, a gap below the search row instead of over the title and the search */
/* a guide's needs, inside their to-do list: a ready hand-over (gold), and the quests they need (tagged) */
.pq-log li.needed { border-color: #d9a441; }
.pq-log li.needed.ready { background: #fbf1d6; }
.pq-log li.needed.ready > .ic { color: #b07a1a; }
.pq-log li.needed.ready p { font: italic 15px/1.4 var(--serif); color: var(--ink); }
.pq-log li.needed .pq-go { margin-top: 4px; }
.pq-items li.wanted { border-color: #d9a441; box-shadow: 0 0 0 2px rgba(217, 164, 65, .25); }
.qd-list li.now { border-color: #d9a441; background: #fbf1d6; }
.qd-now { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #f6e6b8; color: #7a5410; font: 700 11px var(--sans); vertical-align: 2px; }
.toast .tc-guide { flex: none; width: 46px; height: 46px; object-fit: contain; }
/* with the Academy's button the phone's bottom bar gets one more button: Filters goes icon-only (its course dot stays;
   its name stays for screen readers) */
@media (max-width: 430px) {
  .hud:has(#academyBtn) #filtersBtn { width: var(--ph-tap); padding: 0; justify-content: center; }
  .hud:has(#academyBtn) #filtersBtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}