/* Rum Locker + cabin games ------------------------------------------------------------ */
/* (the top bar's Games button is one of the plate's like the others, no gold tint of its own: css/desktop-header.css) */

/* the Games page: a short header, the games, the trophies folded, the tip last (cabin.js lockerHTML) */
.locker { padding: 22px 26px 24px; background: radial-gradient(ellipse at 0% 0%, #f2e0bb, var(--paper) 60%); }
.lk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; margin-bottom: 16px; }
.lk-head h2 { margin: 4px 0 4px; font: 400 32px/1.1 var(--serif); }
.lk-head p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 620px; }
.lk-head .kicker .ic { width: 15px; height: 15px; color: var(--red); }
/* the tip: a calm banner at the foot of the page, a thank-you rather than a gate; its panel opens inside it */
.lk-tipbar { margin-top: 22px; padding: 14px 18px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 252, 244, .55); }
.lk-tipline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.lk-glass svg { display: block; width: 40px; height: auto; filter: drop-shadow(0 3px 5px rgba(60, 40, 15, .22)); }
.lk-ask { margin: 0; font: italic 17px/1.3 var(--serif); color: var(--ink-2); }
.lk-ask b { font-weight: 400; color: var(--ink); }
.lk-tipbar .lk-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.lk-note .ic { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.lk-tipbar:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(181, 138, 60, .18); }    /* arrived from the ≡ menu's tip entry */
.lk-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: flex-end; }
.lk-actions .lk-sent { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.btn.disabled { opacity: .75; cursor: not-allowed; }
.lk-open { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 700; color: var(--green); }
.lk-honour { display: grid; gap: 4px; justify-items: start; }
.lk-honour small { font-size: 12px; color: var(--ink-3); }
.lk-honour .link-btn { font-weight: 700; font-size: 13px; }
.lk-tip[hidden] { display: none !important; }
.lk-tip { position: relative; margin: 12px 0 0; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.lk-tip iframe { display: block; width: 100%; height: min(690px, 72vh); border: 0; border-radius: 10px; background: #f9f9f9; }
.lk-tip p { margin: 8px 4px 0; font-size: 12px; color: var(--ink-3); }
.lk-tip.mock { padding: 16px 18px; background: rgba(255, 252, 244, .92); }
/* the real Ko-fi panel: Ko-fi's own card on the locker's parchment (its page is see-through), how it works beside it */
.lk-tip.kofi { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 14px 26px; align-items: start; padding: 14px 18px; background: rgba(255, 252, 244, .8); }
.lk-tip.kofi iframe { width: 100%; height: 680px; border-radius: 0; background: transparent; }
.lk-tip-side { display: grid; gap: 12px; align-content: start; padding-top: 8px; }
.lk-tip-side > b { font: 400 21px var(--serif-sc); letter-spacing: .02em; color: var(--ink); }
.lk-tip-side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lk-tip-side li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.lk-tip-side li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font: 700 12px var(--sans); }
.lk-tip-side .btn { justify-self: start; margin-top: 4px; }
.lk-tip-side .lk-open { margin: 4px 0 0; }
.lk-tip.kofi .lk-tip-alt { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
.lk-tip-x { position: absolute; z-index: 1; top: 8px; right: 8px; }
.lk-tip { scroll-margin-top: 64px; }      /* scrolled into view below the dialog's own ×, not under it */
.lk-tip.kofi .lk-tip-side { padding-right: 40px; }
.locker:has(.lk-tip.kofi) .lk-actions .lk-honour { display: none; }        /* its button is beside the panel now */
@media (max-width: 760px) {
  .lk-tip.kofi { grid-template-columns: minmax(0, 1fr); padding: 48px 10px 10px; }      /* room for its × above the card */
  .lk-tip.kofi .lk-tip-side { padding-right: 0; }
  .lk-tip.kofi iframe { height: 640px; }
}
.lk-tip .mt-ribbon { display: flex; gap: 6px; align-items: center; width: fit-content; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: #f6e6b8; color: #6d4f13; font: 700 12px var(--sans); }
.lk-honour[hidden], .mt-ribbon[hidden], .mt-form[hidden], .mt-thanks[hidden] { display: none !important; }
.mt-form { display: grid; gap: 10px; max-width: 440px; }
.mt-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mt-glass { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; }
.mt-each { flex: 1; font-weight: 700; font-size: 14px; }
.mt-step { display: flex; align-items: center; gap: 8px; }
.mt-n { min-width: 22px; text-align: center; font: 700 17px var(--sans); }
.mt-picks { display: flex; gap: 8px; }
.mt-pick { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: 700 13px var(--sans); color: var(--ink-2); cursor: pointer; }
.mt-pick.on { background: var(--navy); border-color: var(--navy); color: #f6eedb; }
.mt-form input, .mt-form textarea { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font: 14px var(--sans); color: var(--ink); resize: vertical; }
.mt-pay { justify-content: center; }
.mt-pay[disabled] { opacity: .75; cursor: progress; }
.mt-thanks { display: grid; grid-template-columns: 84px 1fr; gap: 6px 18px; align-items: start; max-width: 640px; animation: mt-in .5s ease-out; }
.mt-poured { grid-row: span 7; }
.mt-poured svg { width: 84px; height: auto; animation: mt-clink .9s ease-out; filter: drop-shadow(0 6px 10px rgba(60, 40, 15, .25)); }
.mt-thanks h3 { margin: 0; font: 400 26px/1.15 var(--serif); }
.lk-tip .mt-thanks p { margin: 0; font-size: 14px; color: var(--ink-2); }
.lk-tip .mt-thanks .mt-polly { font-style: italic; }
.lk-tip .mt-thanks .mt-sign { font: italic 16px var(--serif); color: var(--ink); }
.mt-thanks .btn { justify-self: start; margin-top: 4px; }
.mt-thanks small { font-size: 12px; color: var(--ink-3); }
@keyframes mt-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes mt-clink { 0% { transform: rotate(-10deg) scale(.85); } 45% { transform: rotate(6deg) scale(1.06); } 100% { transform: none; } }
@media (max-width: 560px) { .mt-thanks { grid-template-columns: 1fr; } .mt-poured { grid-row: auto; } .mt-poured svg { width: 64px; } }
@media (prefers-reduced-motion: reduce) { .mt-thanks, .mt-poured svg { animation: none; } }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.lk-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lk-game { position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px 16px 12px 62px; border-radius: 16px; border: 1px solid var(--line-2);
  background: rgba(255, 252, 244, .9); transition: transform .15s, box-shadow .15s; min-height: 118px; }
.lk-game:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(60, 40, 15, .4); }
.lk-ic { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #f6eedb; }
.lk-game b { font: 400 19px var(--serif-sc); letter-spacing: .02em; }
.lk-game > span:not(.lk-ic) { font-size: 12.5px; color: var(--ink-2); }
.lk-game > .lk-line { display: none; }               /* a phone's one line (below) */
.lk-game { grid-template-rows: auto 1fr auto; }      /* the title, the blurb from the top, Play at the foot of every card in a row */
.lk-game > .lk-blurb { align-self: start; }
.lk-game em { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font: 700 12.5px var(--sans); font-style: normal; color: var(--green); }
.lk-game.locked { background: repeating-linear-gradient(135deg, rgba(255, 252, 244, .9) 0 12px, rgba(236, 224, 196, .7) 12px 24px); }
.lk-game.locked .lk-ic { background: #b3a286; }
.lk-game.locked em { color: #8a540f; }
.lk-trophies { margin-top: 18px; }
.lk-trophies h3, .passport .lk-trophies h3 { margin: 0 0 10px; font: 400 19px var(--serif-sc); }
.lk-trophies ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lk-trophies li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; border: 1px dashed var(--line-2); font-size: 12.5px; color: var(--ink-3); }
.lk-trophies li.got { border-style: solid; border-color: var(--gold); background: #f6e6b8; color: #6d4f13; font-weight: 700; }
.lk-trophies li.got .ic { fill: currentColor; }
.passport .lk-trophies { margin-top: 22px; }
/* the Locker's trophies: one row that opens ("Cabin trophies 0/14 ›") */
.lk-fold { margin-top: 14px; }
.lk-fold > summary { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; min-height: 44px; list-style: none; cursor: pointer; font: 400 19px var(--serif-sc); color: var(--ink); }
.lk-fold > summary::-webkit-details-marker { display: none; }
.lk-fold .lk-chev { flex: none; width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s; }
.lk-fold[open] .lk-chev { transform: rotate(90deg); }
.lk-fold[open] > summary { margin-bottom: 6px; }
@media (hover: hover) { .lk-fold > summary:hover .lk-fold-t { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; } }
/* a phone and a narrow window: the games as compact cards (icon, title, a line; the whole card plays), in one column on
   a phone and two where they fit; the tip banner stacks */
@media (max-width: 760px) {
  .locker { padding: 16px 16px 20px; }
  .lk-head { gap: 12px; margin-bottom: 12px; }
  .lk-head h2 { margin: 2px 0; font-size: 30px; }
  .lk-head p { font-size: 14px; line-height: 1.4; }
  .lk-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lk-game { grid-template-rows: none; min-height: 72px; align-content: center; gap: 2px; padding: 10px 34px 10px 64px; border-radius: 14px; }
  .lk-game:hover { transform: none; box-shadow: none; }
  .lk-game:active { background: #fff8e8; }
  .lk-ic { left: 12px; top: 50%; width: 40px; height: 40px; translate: 0 -50%; }
  .lk-game b { font-size: 17px; line-height: 1.15; }
  .lk-game > .lk-blurb, .lk-game em { display: none; }
  .lk-game > .lk-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.3; }
  .lk-game::after { content: ''; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: solid var(--ink-3); border-width: 2px 2px 0 0; transform: rotate(45deg); }
  .lk-fold { margin-top: 10px; }
  .lk-fold > summary { min-height: 48px; font-size: 18px; }
  .lk-tipbar { margin-top: 12px; padding: 12px 14px 10px; }
  .lk-tipline { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
  .lk-tipline .lk-actions { grid-column: 2; justify-content: flex-start; }
  .lk-glass svg { width: 34px; }
  .lk-ask { font-size: 16px; }
  .lk-ask b { display: block; }
  .lk-actions .btn.sm { height: 40px; padding: 0 16px; font-size: 13px; }
}
@media (max-width: 560px) { .lk-games { grid-template-columns: minmax(0, 1fr); } }

/* game overlay */
.game-overlay { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; background: var(--paper); animation: goIn .35s ease-out; }
@keyframes goIn { from { opacity: 0; transform: scale(.985); } }
.go-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-2); background: #efe3c6; }
.go-title { display: flex; align-items: center; gap: 10px; font: 400 22px var(--serif-sc); }
.go-title .ic { color: var(--red); }
.go-right { display: flex; gap: 8px; align-items: center; }
.go-body { position: relative; flex: 1; min-height: 0; }
.go-root { position: absolute; inset: 0; }
.go-err { display: grid; justify-items: start; gap: 14px; max-width: 520px; padding: 40px; color: var(--ink-2); }
.go-err p { margin: 0; font-size: 15px; line-height: 1.5; }
.go-err b { color: var(--red); }
.go-err small { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
@media (max-width: 760px) { .go-err { padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)); } }
.th2-loading { position: absolute; inset: 0; display: grid; place-items: center; font: italic 20px var(--serif); color: var(--ink-2); background: var(--paper); z-index: 3; }

/* legends */
.lg { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 360px; }
.lg-stage { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #f7eed8, #e6d5ae); }
.lg-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }   /* a finger turns the globe, not the page */
.lg-card { position: absolute; left: 0; top: 0; width: 280px; padding: 12px 14px; border-radius: 12px; background: #fbf5e6; border: 1px solid var(--ink); box-shadow: var(--shadow); pointer-events: none; }
.lg-card.in { animation: cardIn .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cardIn { from { opacity: 0; scale: .9; } }
.lg-card time, .lg-log time { font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.lg-card b { display: block; font: 400 21px/1.15 var(--serif); margin: 2px 0 4px; }
.lg-card p { margin: 0; font: 400 16px/1.5 var(--sans); color: var(--ink); }      /* upright and plain, as in Pangaea: the old italic was hard to read */
.lg-date { position: absolute; left: 20px; bottom: 18px; padding: 8px 14px; border-radius: 12px; background: rgba(251, 245, 230, .92); border: 1px solid var(--line-2); }
.lg-date small { display: block; font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lg-date b { font: 400 24px var(--serif-sc); }
.lg-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line-2); background: #f6ecd4; }
.lg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
.lg-tabs button { display: grid; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); font: 400 14px/1.15 var(--serif-sc); }
.lg-tabs button small { font: 600 12px var(--sans); color: var(--ink-3); }
.lg-tabs button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lg-tabs button.on small { color: #d9c9a3; }
.lg-tabs button.locked { opacity: .6; }
.lg-tabs button.locked::after { content: '🔒'; font-size: 11px; }
.lg-head { padding: 0 16px 8px; border-bottom: 1px dashed var(--line-2); }
.lg-head h3 { margin: 4px 0; font: 400 22px var(--serif); }
.lg-head p { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.lg-ship { font: 500 14px/1.4 var(--sans) !important; color: var(--ink-3) !important; }
.lg-log { position: relative; flex: 1; overflow: auto; list-style: none; margin: 0; padding: 8px 10px; }   /* (relative: legends.js keeps a landfall in view by its offset) */
.lg-log li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; cursor: pointer; opacity: .7; }
.lg-log li:hover { background: rgba(255, 252, 244, .8); opacity: 1; }
.lg-log li.on { background: #fbf5e6; box-shadow: inset 3px 0 0 var(--red); opacity: 1; }
.lg-log b { font: 400 16px var(--serif); }
.lg-log span { font-size: 12.5px; color: var(--ink-2); display: none; }
.lg-log li.on span { display: block; }
.lg-ctl { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line-2); }
.lg-ctl button { flex: 1; height: 36px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); font-weight: 700; font-size: 13px; }
.lg-ctl button:first-child { background: var(--navy); color: #f6eedb; border-color: var(--navy); }
.lg-ctl button i { font-style: normal; font-size: 11px; margin-right: 7px; }
.lg-paused { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 7px 15px; border-radius: 999px;
  background: rgba(43, 34, 25, .84); color: #f6eedb; font: 600 13px/1.3 var(--sans); text-align: center; pointer-events: none; }

/* treasure + bottle share a map + side layout */
.th2, .bt { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 340px; }
.th2-map, .bt-map { position: relative; overflow: hidden; background: var(--paper); }
.th2-map canvas, .bt-map canvas { position: absolute; left: 0; top: 0; }
.th2-map .marks, .bt-map .marks { cursor: crosshair; }
.th2-side, .bt-side { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-left: 1px solid var(--line-2); background: #f6ecd4; overflow: auto; }
.th2-riddle p { margin: 0; font: italic 19px/1.45 var(--serif); }
.th2-feedback p { margin: 0 0 6px; font-size: 14px; }
.th2-feedback small { color: var(--ink-3); }
.th2-feedback .ok { color: var(--green); font-size: 15px; }
.warm { color: #b06a16; font-weight: 800; } .cold { color: var(--navy); font-weight: 800; }
.hint-line { font: italic 16.5px var(--serif); color: #6d4410; background: #f6e6b8; padding: 6px 10px; border-radius: 8px; }
.th2-pieces { margin-top: auto; display: grid; justify-items: center; gap: 4px; }
.th2-pieces canvas { border-radius: 8px; box-shadow: 0 4px 12px -4px rgba(60, 40, 15, .4); }
.th2-pieces small { font: italic 15px var(--serif); color: var(--ink-3); }
.th2-hint { align-self: flex-start; }
.chest { display: grid; justify-items: center; }
.chest svg { width: 180px; }
.chest .lid { transform-origin: 22px 48px; animation: lid 1s .3s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes lid { to { transform: rotate(-35deg) translate(-6px, -4px); } }
.chest .glow line { stroke: #f3d27a; stroke-width: 3; stroke-linecap: round; opacity: 0; animation: glow 1.6s .8s ease-out infinite; }
@keyframes glow { 30% { opacity: .9; } 100% { opacity: 0; } }
.bt-side textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); font: italic 16px var(--serif); background: #fffaf0; resize: vertical; }
.bt-side h3, .th2-side h3 { margin: 0; font: 400 24px var(--serif); }
.bt-side p { margin: 0; font-size: 14px; }
.bt-counter { font: 400 30px var(--serif-sc) !important; }
.bt-note { padding: 12px 14px; border-radius: 10px; background: #fffaf0; border: 1px solid var(--line-2); box-shadow: 2px 3px 0 rgba(60, 40, 15, .12); transform: rotate(-1deg); }
.bt-note small { font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.bt-note p { margin: 4px 0 0; font: italic 17px var(--serif); }
.bt-legend { display: flex; gap: 8px; align-items: center; font-size: 12.5px !important; color: var(--ink-3); }
.bt-legend i { width: 26px; height: 3px; border-radius: 2px; background: rgba(35, 64, 94, .6); }

/* windward */
.ww { position: absolute; inset: 0; overflow: hidden; }
/* a held steering button or a held finger on the water must not start a text selection or the copy menu */
.ww, .ww * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.ww canvas { position: absolute; inset: 0; touch-action: none; }
.ww-hud { position: absolute; left: 16px; top: 14px; display: flex; gap: 8px; align-items: center; }
.ww-hud > span { padding: 7px 12px; border-radius: 999px; background: rgba(248, 242, 227, .95); border: 1px solid var(--line-2); font-weight: 800; font-size: 13px; }
.ww-wind { display: inline-flex; align-items: center; gap: 4px; }
.ww-wind svg { width: 26px; height: 26px; }
.ww-wind circle { fill: none; stroke: var(--ink-3); }
.ww-wind path { fill: var(--red); transition: transform .3s; }
.ww-wind small { font-weight: 600; color: var(--ink-3); }
.ww-msg { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); padding: 8px 18px; border-radius: 999px; background: #2b2219; color: #f4e6c0; font-weight: 800; opacity: 0; transition: opacity .3s; pointer-events: none; }
.ww-msg.on { opacity: 1; }
.ww-intro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 90%); padding: 24px 26px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--shadow); text-align: center; }
.ww-intro h3 { margin: 0 0 8px; font: 400 30px var(--serif); }
.ww-intro p { color: var(--ink-2); }
kbd { display: inline-block; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: #fff; font: 700 12px var(--sans); }
.ww-pad { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 18px; pointer-events: none; }
.ww-pad button { pointer-events: auto; width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(248, 242, 227, .9); font-size: 26px; box-shadow: var(--shadow); touch-action: none; }
@media (hover: hover) and (pointer: fine) { .ww-pad { display: none; } }
/* a card up (provisioning, the start, the end): nothing to steer yet, and on a phone the pad would sit over the card's
   own buttons (The Long Passage's Cast off, Provision again) */
.ww:has(> .ww-intro) .ww-pad { display: none; }

/* landfall */
/* one column that fits the screen without scrolling: the card takes the height left over (landfall.js measures it),
   the question's slot is as tall as its longest verdict, and Next has its place kept under the answers */
.lf { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: auto;
  padding: 16px max(20px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
.lf > :first-child { margin-top: auto; } .lf > :last-child { margin-bottom: auto; }       /* spare room above and below, not between */
.lf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: min(100%, var(--lf-w, 520px)); font-weight: 700; }
.lf-score b { font: 400 20px var(--serif-sc); }
.lf-stage { position: relative; flex: 1 1 0; min-height: min(150px, 28dvh); width: 100%; display: flex; align-items: center; justify-content: center; }
.lf-card { position: relative; flex: none; }
.lf-shape { display: block; border-radius: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.lf-medal { position: absolute; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(60, 40, 15, .3)); }
.lf-medal svg { display: block; width: 100%; height: 100%; }
.lf-globe { position: absolute; opacity: .35; transition: opacity .4s; pointer-events: none; }
.lf-globe.in { filter: drop-shadow(0 2px 3px rgba(60, 40, 15, .25)); }
.lf-globe.veil { opacity: 0; }
.lf-globe.on { opacity: 1; }
.lf-ask { display: grid; align-items: center; width: min(100%, var(--lf-w, 520px)); text-align: center; }
.lf-ask > * { grid-area: 1 / 1; margin: 0; }
.lf-q { margin: 0; font: italic 20px/1.2 var(--serif); }
.lf-clue { margin: 2px 0 0; font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.lf-clue b { font: italic 17px/1.2 var(--serif); font-weight: 400; color: var(--ink); }
.lf-fb { font-size: 14.5px; line-height: 1.38; color: var(--ink-2); }
.lf-fb b { color: var(--ink); }
.lf:not(.done) .lf-fb, .lf.done .lf-prompt { visibility: hidden; }
.lf.done .lf-fb { animation: lfIn .3s ease-out; }
@keyframes lfIn { from { opacity: 0; } }
.lf-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, var(--lf-w, 520px)); }
.lf-choices .btn { height: 44px; min-width: 0; padding: 0 10px; font-size: 14px; line-height: 1.15; white-space: normal; text-align: center; }
.lf-choices .btn.right { background: #dfeedd; border-color: var(--green); color: #2f5a3d; }
.lf-choices .btn.wrong { background: #f3dcd8; border-color: var(--red); color: var(--red); }
.lf-choices .btn.dim { opacity: .5; }
.lf-next { display: flex; justify-content: center; width: min(100%, var(--lf-w, 520px)); height: 44px; flex: none; }
.lf-next .btn { height: 44px; min-width: 220px; padding: 0 28px; font-size: 14.5px; visibility: hidden; }
.lf.done .lf-next .btn { visibility: visible; animation: lfIn .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .lf.done .lf-fb, .lf.done .lf-next .btn { animation: none; } }
.lf-end { margin: auto; text-align: center; }
.lf-end h3 { font: 400 56px var(--serif-sc); margin: 0; }
@media (max-width: 560px) {
  .lf { gap: 8px; padding-top: 10px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .lf-top .kicker { font-size: 11.5px; } .lf-score b { font-size: 18px; }
  .lf-q { font-size: 19px; }
  .lf-fb { font-size: 14px; line-height: 1.34; }
  .lf-next .btn { width: 100%; }
}
/* a phone on its side: the card on the left, the question and answers beside it */
@media (orientation: landscape) and (max-height: 540px) {
  .lf { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; gap: 8px 16px; justify-items: center; }
  .lf > :first-child, .lf > :last-child { margin: 0; }
  .lf-stage { grid-column: 1; grid-row: 1 / -1; height: 100%; min-height: 0; }
  .lf-top { grid-column: 2; grid-row: 2; } .lf-ask { grid-column: 2; grid-row: 3; }
  .lf-choices { grid-column: 2; grid-row: 4; } .lf-next { grid-column: 2; grid-row: 5; }
  .lf-top, .lf-ask, .lf-choices, .lf-next { width: 100%; }
  .lf-end { grid-column: 1 / -1; grid-row: 1 / -1; }
}

@media (max-width: 560px) { .go-bar .go-lbl { display: none; } .go-title { font-size: 17px; } }
/* a phone: the game header's Rum Locker and × are taps a finger can hit (44px); the bar's padding gives the height back */
@media (max-width: 760px) {
  .go-bar { padding: 5px 8px 5px 16px; }
  .go-bar .go-title { min-width: 0; }
  .go-bar .go-right .btn.sm { height: 44px; min-width: 44px; justify-content: center; padding: 0 12px; }
  .go-bar .go-right .icon-btn { width: 44px; height: 44px; }
  /* Pangaea's voyage marks on the time bar: a bigger tap around each, mostly upwards (the slider is under them) */
  .pg-mark::after { content: ''; position: absolute; inset: -19px -14px -7px; border-radius: 12px; }      /* (about 43×41, from the border box) */
}
@media (max-width: 860px) {
  .lg, .th2, .bt { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lg-side, .th2-side, .bt-side { border-left: 0; border-top: 1px solid var(--line-2); max-height: 44vh; }
  .lg-log { max-height: 120px; }
  /* the explorers on a phone: the globe keeps the top to itself, the landfall card docks under the tabs */
  .lg { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .lg-side { max-height: 52vh; overflow: auto; }
  .lg-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 10px; gap: 5px; }
  .lg-tabs button { min-width: 0; padding: 6px 4px; font-size: 12.5px; }
  .lg-dock .lg-card, .lg-dock .lg-card.ask { position: static; width: auto; margin: 0 10px 8px; transform: none; box-shadow: none; }
  .lg-dock .lg-card b { font-size: 19px; } .lg-dock .lg-card p { font-size: 16px; }
  .lg-side.has-card .lg-head, .lg-side.has-card .lg-log li.on span { display: none; }
  .lg-date { left: 10px; bottom: 10px; padding: 5px 10px; } .lg-date b { font-size: 18px; }
  .lg-ctl button { min-width: 0; }
  /* ...and in reach: compact tabs (the years are in the voyage's heading), the landfalls as one row to swipe and tap,
     the buttons pinned to the bottom of the panel (Pangaea, which shares these classes, has its own) */
  .lg:not(.pg) .lg-tabs button { min-height: 40px; align-content: center; }
  .lg:not(.pg) .lg-tabs button small { display: none; }
  .lg-log { display: flex; gap: 6px; flex: none; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 4px 10px 8px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
  .lg-log::-webkit-scrollbar { display: none; }
  .lg-log li { flex: none; max-width: 46%; padding: 6px 11px; border: 1px solid var(--line-2); background: rgba(255, 252, 244, .55); scroll-snap-align: center; }
  .lg-log li b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lg-log time { font-size: 12px; }
  .lg-log li.on { opacity: 1; border-color: var(--red); background: #fbf5e6; box-shadow: inset 0 -3px 0 var(--red); }
  .lg-log li.on span { display: none; }                      /* (the card above has the words) */
  .lg:not(.pg) .lg-ctl { position: sticky; bottom: 0; z-index: 2; background: #f6ecd4; }
  .th2-pieces { display: none; }
  /* the bottle on a phone: the world on top, as tall as it needs, and the rest of the screen for the steps */
  .bt { grid-template-rows: auto minmax(0, 1fr); }
  .bt-map { height: min(calc(56vw + 8px), 52vh); }
  .bt-side { max-height: none; }
  .rum-btn span { display: none; }
}

/* legends: modes, score, questions, navigator prompt */
.lg-stage { cursor: grab; }
.lg-card.ask { pointer-events: auto; width: 310px; }
.lg-quiz { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.lg-quiz em { font: 600 15.5px/1.4 var(--sans); color: var(--ink); }
/* the explorers' small print a size up, for easier reading (Pangaea, sharing the classes, sets its own) */
.lg:not(.pg) .lg-head p { font-size: 14.5px; line-height: 1.45; }
.lg:not(.pg) .lg-log span { font-size: 13.5px; }
.lg:not(.pg) .lg-quiz button { font-size: 14.5px; }
.lg-quiz button { text-align: left; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line-2); background: #fffaf0; font: 600 13.5px var(--sans); color: var(--ink); cursor: pointer; }
.lg-quiz button:hover:not(:disabled) { border-color: var(--ink-3); background: #fff; }
.lg-quiz button.right { background: #dfeedd; border-color: var(--green); color: #2f5a3d; }
.lg-quiz button.wrong { background: #f3dcd8; border-color: var(--red); color: var(--red); }
.lg-quiz button.dim { opacity: .55; }
.lg-prompt { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 10px 12px 10px 18px; border-radius: 999px;
  background: #2b2219; color: #f4e6c0; font-size: 14px; box-shadow: var(--shadow); max-width: 90%; }
.lg-prompt b { color: #fff; }
.lg-prompt button { height: 30px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--gold); color: #2b2219; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.lg-score { padding: 8px 16px 0; font-size: 13px; color: var(--ink-2); min-height: 8px; }
.lg-score b { color: var(--ink); }

/* flag hoist */
.fl { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 360px; }
.fl-main { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px; overflow: auto; }
.fl-top { display: flex; gap: 20px; font-weight: 700; }
.fl-score b { font: 400 20px var(--serif-sc); }
.fl-stage { display: grid; justify-items: center; gap: 10px; width: 100%; }
.fl-q { margin: 6px 0 0; font: italic 21px var(--serif); }
.fl-meaning { margin: 0; max-width: 560px; padding: 16px 20px; border-radius: 14px; background: #fffaf0; border: 1px solid var(--line-2); font: italic 22px/1.4 var(--serif); text-align: center; }
.fl-hoist { position: relative; display: flex; gap: 6px; padding: 18px 20px 10px; flex-wrap: wrap; justify-content: center; }
.fl-rope { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: #8a6a45; border-radius: 1px; }
.fl-f { display: block; transform-origin: 0 50%; animation: flap 2.6s ease-in-out infinite; }
.fl-f .flag { width: 78px; height: auto; display: block; filter: drop-shadow(0 3px 3px rgba(60, 40, 15, .25)); }
@keyframes flap { 50% { transform: skewY(2deg) scaleX(.97); } }
.fl-form { display: flex; gap: 8px; }
.fl-form input, .fl-name input { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font: 700 17px var(--sans); letter-spacing: .12em; text-transform: uppercase; width: 240px; background: #fff; }
.fl-opts { display: grid; grid-template-columns: repeat(4, 110px); gap: 12px; }
.fl-opt { padding: 10px; border-radius: 14px; border: 2px solid var(--line-2); background: #fffaf0; cursor: pointer; transition: transform .15s; }
.fl-opt:hover { transform: translateY(-2px); }
.fl-opt .flag { width: 100%; height: auto; display: block; }
.fl-opt.right { border-color: var(--green); background: #dfeedd; } .fl-opt.wrong { border-color: var(--red); background: #f3dcd8; } .fl-opt.dim { opacity: .5; }
.fl-after { max-width: 560px; text-align: center; font-size: 15px; }
.fl-after p { margin: 0 0 10px; }
.fl-book { overflow: auto; padding: 18px; border-left: 1px solid var(--line-2); background: #f6ecd4; }
.fl-book h3, .nl-book h3 { margin: 0 0 6px; font: 400 22px var(--serif); }
.fl-book p { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.fl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
.fl-grid div { display: grid; justify-items: center; gap: 3px; }
.fl-grid .flag { width: 56px; height: auto; }
.fl-grid b { font: 700 13px var(--sans); }
.fl-end { margin: auto; text-align: center; display: grid; justify-items: center; gap: 10px; }
.fl-end h3 { margin: 0; font: 400 56px var(--serif-sc); }
.fl-name label { display: grid; gap: 6px; font-weight: 700; }

/* night passage */
.nl { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 360px; }
.nl-sea { position: relative; overflow: hidden; background: #0b1622; }
.nl-sea canvas { position: absolute; inset: 0; cursor: crosshair; }
.nl-ask { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 22px; border-radius: 999px; background: rgba(244, 230, 192, .95); color: #2b2219; font: italic 20px var(--serif); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); max-width: 90%; text-align: center; }
.nl-book { overflow: auto; padding: 18px; border-left: 1px solid var(--line-2); background: #f6ecd4; display: flex; flex-direction: column; gap: 10px; }
.nl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nl-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #fffaf0; border: 1px solid var(--line); font-size: 14px; }
.nl-list code { font: 700 14px ui-monospace, Consolas, monospace; color: var(--navy); }
.nl-book details { font-size: 13px; } .nl-book summary { cursor: pointer; font-weight: 700; }
.nl-legend { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }
.nl-legend b { color: var(--ink); font-family: ui-monospace, Consolas, monospace; }
.nl-after p { margin: 0 0 10px; font-size: 15px; } .nl-tip { color: var(--ink-3); font-size: 13.5px !important; }
.nl-after h3 { margin: 0; font: 400 26px var(--serif); }
@media (max-width: 860px) {
  .fl, .nl { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .fl-book, .nl-book { border-left: 0; border-top: 1px solid var(--line-2); max-height: 40vh; }
  .fl-opts { grid-template-columns: repeat(2, 110px); }
}

/* The Long Passage */
.lp .lp-plan { width: min(540px, 92%); max-height: calc(100% - 32px); overflow: auto; text-align: left; }
.lp .lp-plan h3 { text-align: center; }
.lp-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 12px; }
.lp-pick button { display: grid; gap: 2px; align-content: start; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.lp-pick button b { font-size: 13.5px; line-height: 1.2; }
.lp-pick button small { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.lp-pick button[aria-checked="true"] { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(35, 64, 94, .15); background: #f4f8fb; }
.lp-lede { margin: 0 0 12px; }
.lp-ports b { font-weight: 800; }
.lp-line[hidden] { display: none; }
.lp-line[data-st="fast"], .lp-line[data-st="slow"] { color: var(--red); }
.lp-line[data-st="birds"] { color: var(--green); font-weight: 800; }
.lp-pad [data-tap="fish"][aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.lp-rows { display: grid; gap: 8px; }
.lp-row { display: grid; grid-template-columns: 1fr 34px 84px 34px; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.lp-row.sel { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(35, 64, 94, .15); }
.lp-name b { display: block; font-size: 14px; }
.lp-name small { font-size: 11.5px; color: var(--ink-3); }
.lp-row button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper); font: 700 18px/1 var(--sans); color: var(--ink); cursor: pointer; }
.lp-row output { text-align: center; font: 800 14px var(--sans); }
.lp-load { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.lp-load i { flex: 1; height: 8px; border-radius: 99px; background: rgba(51, 41, 31, .1); overflow: hidden; }
.lp-load b { display: block; height: 100%; background: var(--green); transition: width .2s; }
.lp-load.heavy b { background: #c9822f; }
.lp .lp-tip { font-size: 13px; }
.lp-keys { font-size: 12px; color: var(--ink-3); }
.lp .lp-plan .btn, .lp .lp-end .btn { display: flex; margin: 10px auto 0; }
.lp .lp-end { text-align: center; }
.lp-stores { position: absolute; right: 16px; top: 14px; display: grid; gap: 6px; width: 200px; padding: 10px 12px; border-radius: 14px; background: rgba(248, 242, 227, .95); border: 1px solid var(--line-2); }
.lp-stores[hidden], .lp-help[hidden], .lp-port[hidden] { display: none; }
.lp-store { display: grid; grid-template-columns: 48px 1fr 50px; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.lp-store i { height: 7px; border-radius: 99px; background: rgba(51, 41, 31, .1); overflow: hidden; }
.lp-store b { display: block; height: 100%; background: #3f7fa0; transition: width .3s; }
.lp-store[data-s="food"] b { background: #6d8f3a; }
.lp-store[data-s="fuel"] b { background: #8a6a3a; }
.lp-store em { font-style: normal; text-align: right; color: var(--ink-2); }
.lp-store.low em { color: var(--red); }
.lp-store.low b { background: var(--red) !important; animation: lp-blink 1s ease-in-out infinite; }
@keyframes lp-blink { 50% { opacity: .35; } }
.lp-port { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); box-shadow: var(--shadow); }
.lp-help { position: absolute; left: 16px; bottom: 10px; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(248, 242, 227, .9); }
.lp-pad span { display: flex; gap: 8px; align-self: flex-end; }
.lp-pad span button { width: 64px; height: 46px; border-radius: 999px; font-size: 13px; font-weight: 800; }
@media (hover: none), (pointer: coarse) {
  .lp-help, .lp-plankeys, .lp-port kbd { display: none !important; }      /* no keyboard on a phone */
  .lp-port { bottom: 110px; }
}
@media (max-width: 640px) {
  .lp-stores { top: auto; bottom: 108px; right: 10px; width: 170px; }
  .lp .lp-hud { right: 10px; flex-wrap: wrap; }
  .lp-row { grid-template-columns: 1fr 34px 70px 34px; }
  /* the HUD wraps to two lines on a phone: the messages go low, above the stores, clear of it */
  .lp .ww-msg { top: auto; bottom: 214px; max-width: calc(100% - 24px); width: max-content; text-align: center; }
  /* the port's button to the left of the stores (bottom right), above the pad */
  .lp .lp-port { left: 10px; right: auto; bottom: 108px; transform: none; max-width: calc(100% - 200px); white-space: normal; }
  .lp-pick { grid-template-columns: 1fr; }
  /* the card scrolls on a phone: Cast off stays in sight at its foot */
  .lp .lp-plan [data-go] { position: sticky; bottom: 0; box-shadow: 0 -6px 14px 6px var(--paper); }
  .lp-pick button { grid-template-columns: auto 1fr; column-gap: 8px; }
  .lp-pick button b { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .lp-store.low b { animation: none; } }

/* ---- Sailing Pangaea (built on the Legends globe layout) ------------------------------------------ */
.pg .lg-stage { background: radial-gradient(ellipse at 50% 45%, #f3ead2, #ddcba0); }
/* the four voyages: two by two */
.pg .pg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px 8px; }
.pg .pg-tabs button { min-width: 0; padding: 6px 8px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.pg .pg-tabs button > span { overflow: hidden; text-overflow: ellipsis; }
.pg .pg-tabs button small { font-size: 11px; }
/* the encounter card lives in the side panel (the globe stays clear); only the card area scrolls if it is long */
.pg { grid-template-columns: 1fr 400px; }
.pg .lg-side { overflow: hidden; }
.pg .lg-dock { flex: 0 1 auto; min-height: 0; overflow: auto; }
.pg .lg-dock .lg-card.pg-card { position: static; width: auto; margin: 0 12px 10px; transform: none; box-shadow: none; pointer-events: auto; }
.pg .lg-side.has-card .lg-head { display: none; }
.pg-card-art .pg-art { max-height: 110px; }
.pg-card-art { margin: -4px -6px 6px; border-radius: 10px; background: #f4ead3; color: var(--ink); }
.pg-card-art .pg-art { display: block; width: 100%; height: auto; max-height: 120px; }
/* the card's text and question upright and plain: italics were hard to read */
/* two steps: the scene and the question, then (once answered) the verdict and the explanation */
.pg .pg-card .pg-lead { margin-top: 2px; color: var(--ink-2); }
.pg-reveal { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.pg-reveal.in { animation: pgreveal .45s ease-out; } @keyframes pgreveal { from { opacity: 0; transform: translateY(6px); } }
.pg .pg-card .pg-verdict { margin: 0 0 6px; font: 700 14px var(--sans); color: var(--green); }
.pg .pg-card .pg-verdict.no { color: var(--red); } .pg .pg-card .pg-verdict .pg-ans { color: var(--ink); }
.pg .pg-card p { font: 400 15px/1.5 var(--sans); color: var(--ink); }
.pg .lg-quiz em { font: 600 14.5px/1.4 var(--sans); color: var(--ink); }
.pg-facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pg-facts li { font-size: 13px; line-height: 1.35; color: var(--ink); }
.pg-facts small { display: inline-block; min-width: 92px; margin-right: 6px; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pg-tag { margin: 8px 0 0 !important; padding: 5px 10px; border-radius: 8px; background: #f3dcd8; color: #7a2a23 !important; font: 700 12.5px/1.35 var(--sans) !important; font-style: normal !important; }
.pg-tag::before { content: '✕ '; }
.pg-inland { margin: 8px 0 0 !important; font: 600 12.5px/1.4 var(--sans) !important; font-style: normal !important; color: var(--ink-3) !important; }
.pg-src { display: inline-block; margin-top: 8px; font: 600 12px var(--sans); color: var(--navy); }
.pg .lg-head .btn { margin: 4px 0 8px; }
.pg-credit { margin: 0; padding: 6px 12px 8px; font-size: 10.5px; line-height: 1.35; color: var(--ink-3); }
.pg-caption { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); width: min(460px, calc(100% - 24px)); display: grid; gap: 4px; justify-items: center;
  padding: 10px 16px; border-radius: 14px; background: rgba(251, 245, 230, .95); border: 1px solid var(--line-2); box-shadow: var(--shadow); text-align: center; }
.pg-caption.in { animation: cardIn .45s cubic-bezier(.3, 1.4, .5, 1); }
.pg-caption b { font: 400 22px var(--serif-sc); }
.pg-caption span { font: 400 14.5px/1.4 var(--sans); color: var(--ink-2); }
.pg-journal { position: absolute; z-index: 5; inset: 12px; overflow: auto; padding: 12px 16px; border-radius: 16px; background: #fbf5e6; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.pg-j-head { display: flex; align-items: center; gap: 10px; }
.pg-j-head b { font: 400 22px var(--serif-sc); }
.pg-j-head span { flex: 1; font-size: 12.5px; color: var(--ink-3); }
.pg-journal h4 { margin: 12px 0 6px; font: 400 17px var(--serif); } .pg-journal h4 small { font: 600 11.5px var(--sans); color: var(--ink-3); }
.pg-journal ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pg-journal li { display: grid; gap: 2px; padding: 6px; border-radius: 10px; background: #f4ead3; border: 1px solid var(--line); color: var(--ink); }
.pg-journal li .pg-art { width: 100%; height: auto; }
.pg-journal li img { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 6px; }
.pg-journal li b { font: 600 12px/1.25 var(--sans); }
.pg-journal li.unseen { opacity: .55; } .pg-journal li.unseen span { display: grid; place-items: center; aspect-ratio: 120 / 72; font: 400 28px var(--serif); color: var(--ink-3); }
@media (max-width: 860px) {
  .pg { grid-template-columns: minmax(0, 1fr); }
  .pg-card-art .pg-art { max-height: 90px; }
  .pg-caption { bottom: 72px; padding: 8px 12px; } .pg-caption b { font-size: 18px; } .pg-caption span { font-size: 13.5px; }
  .pg-journal { inset: 6px; }
}
.pg-card-art img { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 10px; }
/* a short screen (a laptop): the picture sits small beside the title, so the question fits without scrolling */
@media (max-height: 820px) and (min-width: 861px) {
  .pg-card-art { float: right; width: 118px; margin: 0 -4px 4px 10px; }
  .pg-card-art .pg-art { max-height: none; }
  .pg .lg-dock .pg-card p { font-size: 14.5px; line-height: 1.38; }
  .pg .lg-dock .pg-card .lg-quiz { clear: both; gap: 5px; margin-top: 8px; padding-top: 8px; }
  .pg .lg-dock .pg-card .lg-quiz button { padding: 5px 10px; }
  .pg-facts { clear: both; }
}
.pg-credit a { color: var(--navy); font-weight: 700; }
.pg-ctl { gap: 5px; } .pg-ctl button { font-size: 12.5px; padding: 0 4px; }
/* the time bar under the globe: the periods, the four voyages (numbered), moments (little marks) and a needle to drag */
.pg .lg-date { top: 14px; bottom: auto; left: 14px; }
.pg-toggles { position: absolute; z-index: 2; top: 14px; right: 14px; display: flex; gap: 6px; }
.pg-toggles button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(251, 245, 230, .9); font: 600 12px var(--sans); color: var(--ink-3); cursor: pointer; }
.pg-toggles button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-3); background: #fbf5e6; }
.pg-toggles button[aria-pressed="false"] i { opacity: .3; }
.pg-dot { width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #a3352c; box-shadow: 6px 0 0 -1px #23405e; }
.pg-time { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 10px; height: 66px; display: flex; align-items: center; gap: 12px; padding: 4px 16px 4px 10px;
  border-radius: 16px; background: rgba(251, 245, 230, .94); border: 1px solid var(--line-2); box-shadow: var(--shadow); cursor: default; }
.pg-tplay { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--navy); color: #f6eedb; font-size: 14px; cursor: pointer; }
.pg-track { position: relative; flex: 1; min-width: 0; height: 54px; }
.pg-bands { position: absolute; left: 0; right: 0; top: 17px; height: 16px; border-radius: 4px; overflow: hidden; }
.pg-bands span { position: absolute; top: 0; bottom: 0; overflow: hidden; font: 700 9.5px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; color: rgba(51, 41, 31, .72); }
/* the range is half a needle wider on each side, so the needle's centre lines up with the marks */
.pg-range { position: absolute; left: -7px; top: 9px; width: calc(100% + 14px); height: 32px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: ew-resize; }
.pg-range::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.pg-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 32px; border-radius: 7px; background: var(--ink); border: 3px solid #fbf5e6; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.pg-range::-moz-range-track { height: 32px; background: transparent; }
.pg-range::-moz-range-thumb { width: 8px; height: 26px; border-radius: 7px; background: var(--ink); border: 3px solid #fbf5e6; }
.pg-range:focus-visible { outline: none; } .pg-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--gold); }
.pg-mark { position: absolute; z-index: 1; top: 0; width: 19px; height: 19px; margin-left: -9.5px; padding: 0; border-radius: 50%; border: 2px solid #fbf5e6; background: var(--c); color: #fff;
  font: 700 10.5px/15px var(--sans); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.pg-mark.on { box-shadow: 0 0 0 2px var(--ink); }
.pg-mark.locked { opacity: .55; }
.pg-moment { position: absolute; top: 34px; width: 14px; height: 10px; margin-left: -7px; padding: 0; border: 0; background: none; cursor: pointer; }
.pg-moment::before { content: ''; display: block; width: 0; margin: 0 auto; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--ink-2); }
.pg-moment:hover::before { border-bottom-color: var(--red); }
.pg-axis { position: absolute; left: 0; right: 0; bottom: -1px; height: 11px; font: 600 10px/11px var(--sans); color: var(--ink-3); }
.pg-axis span { position: absolute; transform: translateX(-50%); }
.pg-axis span:nth-child(1) { left: 0; transform: none; } .pg-axis span:nth-child(2) { left: 33.33%; } .pg-axis span:nth-child(3) { left: 66.67%; }
.pg-axis span:nth-child(4) { right: 0; transform: none; }
.pg .pg-tabs button span i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 5px; border-radius: 50%; background: var(--c); color: #fff; font: 700 10px var(--sans); font-style: normal; vertical-align: 1px; }
/* the time machine takes over the panel's top while the globe follows the time bar */
.pg .lg-side.timing .lg-dock, .pg .lg-side.timing .lg-head { display: none; }
.pg-next { margin: 4px 0; font: 400 14.5px/1.4 var(--sans); color: var(--ink-2); }
.pg .lg-head { border-bottom: 0; }
.pg .lg-ctl { margin-top: auto; }
.pg-fold { display: none; }
.pg-thead { display: none; padding: 4px 16px 10px; border-bottom: 1px dashed var(--line-2); }
.pg .lg-side.timing .pg-thead { display: block; }
.pg-thead h3 { margin: 4px 0; font: 400 22px var(--serif); }
.pg-thead p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 860px) {
  .pg .lg-date { top: 8px; left: 8px; }
  .pg-toggles { top: 8px; right: 8px; flex-direction: column; align-items: flex-end; gap: 4px; }
  .pg-toggles button { padding: 4px 9px; font-size: 12px; }
  .pg-time { left: 6px; right: 6px; bottom: 6px; height: 60px; gap: 8px; padding: 3px 12px 3px 6px; }
  .pg-tplay { width: 34px; height: 34px; }
  .pg-bands span { font-size: 10px; letter-spacing: 0; }       /* (a phone: 10px at least; it was 8.5) */
  .pg-axis { font-size: 11px; } .pg .pg-tabs button small { font-size: 12px; }
  .pg .lg-side { overflow: auto; } .pg .lg-dock { flex: none; overflow: visible; }
  /* the panel folds down to its handle, so the globe gets the screen; the handle says what is waiting */
  .pg-fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 14px; border: 0; border-bottom: 1px solid var(--line-2);
    background: #efe2c2; font: 600 13px var(--sans); color: var(--ink-2); text-align: left; cursor: pointer; position: sticky; top: 0; z-index: 3; }
  .pg-fold i { font-style: normal; font-size: 12px; }
  .pg-fold span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pg.folded .lg-side { max-height: 38px; overflow: hidden; }
  .pg.folded .pg-fold.waiting { background: #f3dcb0; color: var(--ink); animation: pgwait 1.6s ease-in-out infinite; }
  @keyframes pgwait { 50% { background: #fbeccd; } }
  /* a phone: a shorter picture, the question before the facts, the buttons always in reach, the journal full screen */
  .pg-card-art img { aspect-ratio: 5 / 2; }
  .pg .lg-ctl { position: sticky; bottom: 0; z-index: 2; background: #f6ecd4; }
  .pg-journal { position: fixed; inset: 8px; z-index: 30; }
}
@media (max-width: 400px) {
  .pg .pg-tabs button { white-space: normal; font-size: 12px; padding: 5px 6px; }
}
/* Readable on a phone. The old italic (IM Fell English) is hard to read small, for many people, so on a phone the words
   to read are upright: sentences in Manrope at 16px (a phone's usual body size; a text box under 16px also makes an
   iPhone zoom in), lines beside them at 14px, nothing under 13px (small bold capitals, as the dates, at least 12px);
   questions big enough for the serif (20px and more) keep it, upright. Lettering on the charts stays italic, as on a
   chart. (The site's panels, menu and search: the same in css/mobile-shell.css.) */
@media (max-width: 860px) {
  .lk-ask { font: 400 16px/1.45 var(--sans); color: var(--ink); }
  .lk-ask b { font-weight: 700; }
  .lk-tip .mt-thanks .mt-polly { font-style: normal; }
  .lk-tip .mt-thanks .mt-sign { font: 500 14px var(--sans); }
  .th2-loading { font: 600 16px var(--sans); }
  .th2-riddle p { font: 400 16px/1.5 var(--sans); }
  .hint-line { font: 500 15px/1.4 var(--sans); }
  .th2-pieces small { font: 400 14px var(--sans); }
  .bt-side textarea { font: 400 16px/1.45 var(--sans); }
  .bt-note p { font: 400 16px/1.45 var(--sans); }
  .lf-q, .fl-q { font-style: normal; }
  .lf-clue b { font: 600 15.5px/1.3 var(--sans); }
  .fl-meaning { font: 400 17px/1.45 var(--sans); }
  .nl-ask { font: 600 16px var(--sans); }
  /* and reading text that was smaller than that floor */
  .th2-feedback small { font-size: 13.5px; }
  .bt-legend { font-size: 13.5px !important; }
  .lp .lp-tip { font-size: 14px; } .lp-way i { font-style: normal; font-weight: 600; }
  .lp-pick button small { font-size: 12.5px; } .lp-name small, .lp-load { font-size: 13px; }
  .ww-wind small { font-size: 12px; }
  .lg:not(.pg) .lg-tabs button { font-size: 13px; } .lg:not(.pg) .lg-date small { font-size: 12px; }
}