/* Ink Crossing styles. Lines are pure black (--line). Everything else is a flat, muted print palette after Chris Ware:
   cream paper, deep navy for fills, shadows and text (--ink), and mustard, brick, slate blue, sage and peach for flat colour. */
:root{--paper:#FBF5E8;--page:#F1E6CF;--ink:#1F2A3C;--line:#000;--soft:#6B6156;--hatch:rgba(31,42,60,.22);
  --mustard:#D9A93A;--brick:#B5533C;--slate:#5E7487;--sage:#93A47E;--peach:#EDC9A8;
  --mustard-p:#F1DDA6;--brick-p:#E9C2B3;--slate-p:#C9D5DC;--sage-p:#D4DCC0;--peach-p:#F4DFCB;--sea:#CFDCDE;--land:#C9CFA2;--fog:#E8DFD0;
  --display:"Fraunces",Georgia,serif;--ui:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#FBF5E8;--page:#F1E6CF;--ink:#1F2A3C;--line:#000;--soft:#6B6156;--hatch:rgba(31,42,60,.22);color-scheme:light}}
:root[data-theme="dark"]{--paper:#FBF5E8;--page:#F1E6CF;--ink:#1F2A3C;--line:#000;--soft:#6B6156;--hatch:rgba(31,42,60,.22);color-scheme:light}
*,*::before,*::after{margin:0;box-sizing:border-box}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
body{min-height:100%;background:var(--page);color:var(--ink);font:600 16px/1.4 var(--ui);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{max-width:480px;margin:0 auto;padding:14px 14px 116px}
h1,h2,.display{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.01em}
h2{font-size:24px;line-height:1}
h3{font-size:15px;font-weight:800;line-height:1.15}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
button:focus-visible{outline:3px solid var(--line);outline-offset:3px}
.soft{color:var(--soft)}

/* buttons: squash on press, spring back */
.primary,.ghost,.buy,.speed button{transition:transform .22s var(--spring)}
.primary:active,.ghost:active,.buy:active,.speed button:active{transform:scale(1.05,.88)}
.primary{display:block;width:100%;background:var(--ink);color:var(--paper);border:2.5px solid var(--line);border-radius:18px;padding:13px 18px;font:italic 900 24px/1.1 var(--display)}
.ghost{background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:9px 14px;font-weight:800;font-size:15px}

/* ink icons */
.ic{width:100%;height:100%;display:block;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ic .w{fill:var(--face,var(--paper))}
.ic .k{fill:currentColor;stroke:none}

/* title */
.title{min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px);display:flex;flex-direction:column;justify-content:center;gap:20px;padding-bottom:30px}
.sea{position:relative;height:150px;margin:0 -14px;overflow:hidden}
.sea .waves{position:absolute;left:0;bottom:18px;width:200%;height:36px;animation:drift 7s linear infinite}
.sea .waves.back{bottom:30px;opacity:.35;animation-duration:11s;animation-direction:reverse}
@keyframes drift{to{transform:translateX(-50%)}}
.ship{position:absolute;left:50%;bottom:30px;width:120px;margin-left:-60px;transform-origin:50% 90%;animation:bob 2.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg) scale(1,1)}25%{transform:translateY(-6px) rotate(0) scale(.98,1.03)}50%{transform:translateY(0) rotate(3deg) scale(1,1)}75%{transform:translateY(3px) rotate(0) scale(1.03,.96)}}
.ship .flag{transform-origin:52px 6px;animation:flap .7s ease-in-out infinite alternate}
@keyframes flap{to{transform:scaleX(.8) skewY(-6deg)}}
.chart{border:2.5px solid var(--line);border-radius:16px;padding:8px 10px 10px;margin-bottom:18px;background:var(--paper)}
.chart .tapmap{display:block;width:100%;background:none;border:0;padding:0}
.chart .w{fill:var(--paper)}.chart .k{fill:var(--ink);stroke:none}
.chart .ink{stroke-dasharray:1;stroke-dashoffset:1;animation:ink 1.3s ease-in-out .35s forwards}
@keyframes ink{to{stroke-dashoffset:0}}
.chart .new{transform-box:fill-box;transform-origin:50% 50%;animation:pop-in .55s var(--spring) 1.5s both}
.chart .fogtxt{font:italic 400 10px var(--display);fill:var(--soft)}
.chart-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.linkbtn{background:none;border:0;padding:4px 0;font-weight:800;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.log{font:italic 400 17.5px/1.45 var(--display)}
.journal{max-height:82vh;overflow:auto}
.entry{display:grid;gap:4px;padding-top:12px;border-top:1.5px dashed var(--soft)}
.entry:first-of-type{border-top:0;padding-top:0}
.entry .meta{font-size:13px;font-weight:800}
.entry .meta span{font-weight:600;color:var(--soft)}
.picks{display:grid;gap:10px}
.pick{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;text-align:left;background:var(--paper);border:2.5px solid var(--line);border-radius:16px;box-shadow:4px 5px 0 var(--ink);padding:10px 12px;transition:transform .22s var(--spring)}
.pick:active{transform:scale(1.03,.92)}
.pick svg{width:44px;height:44px;stroke:var(--line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pick .w{fill:var(--paper)}.pick .k{fill:var(--ink);stroke:none}
.pick b{display:block;font-weight:800}
.pick span{font-size:13.5px}
.label{font-weight:800;font-size:14px}

.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .route{fill:none;stroke:var(--line);stroke-width:1.6;stroke-dasharray:0 6;stroke-linecap:round}
.chart .done{fill:none;stroke:var(--line);stroke-width:2.4;stroke-linecap:round}
.chart .port{fill:var(--paper);stroke:var(--line);stroke-width:2}
.chart .port.past{fill:var(--ink)}
.chart .end{fill:var(--paper);stroke:var(--line);stroke-width:2.4}
.chart .boat{animation:bob 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.chart-text{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:6px}
.chart-text h2{font-size:22px}
.chart-text span{font-size:13px;font-weight:800;white-space:nowrap}
.threat{font-size:13.5px;margin-top:2px;color:var(--soft)}
.threat b{color:var(--ink);font-weight:800}
.title h1{font-size:clamp(56px,17vw,84px);line-height:.9;animation:land .8s cubic-bezier(.3,.7,.3,1) both .1s}
@keyframes land{0%{opacity:0;transform:translateY(50px) scale(.8,1.25)}55%{opacity:1;transform:translateY(-8px) scale(1.05,.95)}78%{transform:translateY(2px) scale(.99,1.01)}100%{transform:none}}
.tag{font-weight:800;font-size:18px}
.title .buttons{display:grid;gap:10px}
.rules{display:grid;gap:12px;border-top:2px solid var(--line);padding-top:16px;font-size:14.5px;line-height:1.35}
.rules b{font-weight:800}

/* top bar */
.bar{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.pill{border:2px solid var(--line);border-radius:999px;padding:3px 8px;font-weight:800;font-size:13px;white-space:nowrap;background:var(--paper)}
.pill.day{background:var(--ink);color:var(--paper);font:italic 900 15px/1.2 var(--display)}
.pill.bump{animation:bump .45s var(--spring)}
@keyframes bump{30%{transform:scale(1.25,.8)}60%{transform:scale(.92,1.1)}}

/* shop */
.m-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.offers{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;margin-bottom:22px}
.offer{background:var(--paper);border:2.5px solid var(--line);border-radius:18px;box-shadow:4px 5px 0 var(--ink);padding:11px;display:flex;flex-direction:column;gap:7px;min-height:176px}
.offer.sold{align-items:center;justify-content:center;box-shadow:none;border-style:dashed;border-width:2px;color:var(--soft);font:italic 900 20px var(--display)}
.offer.in{animation:pop-in .5s var(--spring) both}
@keyframes pop-in{0%{transform:scale(.6,1.3);opacity:0}60%{transform:scale(1.06,.94);opacity:1}100%{transform:none}}
.o-top{display:flex;gap:9px;align-items:center}
.o-icon{width:42px;height:42px;flex:none;border-radius:10px;padding:4px}
.o-meta{font-size:12px;color:var(--soft);font-weight:600}
.o-desc{font-size:13px;flex:1;line-height:1.3}
.buy{border:2px solid var(--line);border-radius:12px;padding:8px 4px;font-weight:800;background:var(--ink);color:var(--paper);font-size:13.5px;white-space:nowrap}
.buy.up{background:var(--paper);color:var(--ink)}
.buy[aria-disabled="true"]{background:var(--paper);color:var(--soft);border-color:var(--soft);border-style:dashed}
.stall-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.hint{font-size:13px;color:var(--soft);margin-bottom:9px}
.hint.on{color:var(--ink);font-weight:800}

/* tiers, drawn in ink: bronze single line, silver double line, gold heavy with a drop shadow, diamond solid ink */
.t0{border:2px solid var(--line)}
.t1{border:2px solid var(--line);box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3.5px var(--ink)}
.t2{border:3px solid var(--line);box-shadow:3px 3px 0 var(--ink)}
.t3{border:3px solid var(--line);background:var(--ink)!important;color:var(--paper);--face:var(--ink)}
.tierword{font-weight:800;color:var(--ink)}

/* board */
.board{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;padding:6px 7px 7px 6px;border:2.5px solid var(--line);border-radius:16px;background:var(--paper)}
.item,.slot{height:66px;border-radius:9px;position:relative;padding:0;min-width:0}
.slot{border:1.5px dashed var(--soft);background:transparent}
.item{background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden}
.item .ico{width:min(28px,82%);aspect-ratio:1;position:relative;z-index:1}
.item .cdt{font-size:10px;font-weight:800;position:relative;z-index:1}
.item .fill{position:absolute;left:0;right:0;bottom:0;height:0;border-top:1.5px solid currentColor;background:repeating-linear-gradient(-45deg,var(--hatch) 0 1.5px,transparent 1.5px 5px)}
.t3 .fill{--hatch:rgba(255,255,255,.35)}
.item.passive .cdt{letter-spacing:.1em}
.item.sel{transform:translateY(-5px) rotate(-3deg);outline:2.5px solid var(--line);outline-offset:2px}
.item.hasted{outline:2px dashed var(--line);outline-offset:2px}
.item.slowed .ico{opacity:.35}
.item.fire{animation:fireP .42s ease-out}
.board[data-side="e"] .item.fire{animation:fireE .42s ease-out}
@keyframes fireP{20%{transform:translateY(3px) scale(1.12,.84)}50%{transform:translateY(-9px) scale(.9,1.16)}75%{transform:translateY(1px) scale(1.04,.96)}}
@keyframes fireE{20%{transform:translateY(-3px) scale(1.12,.84)}50%{transform:translateY(9px) scale(.9,1.16)}75%{transform:translateY(-1px) scale(1.04,.96)}}

/* battle */
.battle{display:flex;flex-direction:column;gap:11px}
.fighter{background:var(--paper);border:2.5px solid var(--line);border-radius:16px;box-shadow:4px 5px 0 var(--ink);padding:10px 12px}
.fighter.hit{animation:hit .3s ease-out}
@keyframes hit{25%{transform:translateX(-5px) scale(1.02,.95)}55%{transform:translateX(3px) scale(.99,1.02)}}
.fighter.ko{animation:ko .6s var(--spring) forwards}
@keyframes ko{40%{transform:scale(1.08,.8)}100%{transform:scale(.97,.9) rotate(-2deg);opacity:.45}}
.who{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.who .name{font:italic 900 20px/1 var(--display)}
.who .num{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.hpbar{position:relative;height:16px;border:2px solid var(--line);border-radius:8px;overflow:hidden;margin:8px 0 6px;background:var(--paper)}
.hpbar .hp{position:absolute;inset:0 auto 0 0;background:var(--ink);transition:width .18s}
.hpbar .sh{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(-45deg,var(--paper) 0 2px,transparent 2px 5px);border-right:2px solid var(--paper)}
.status{display:flex;gap:12px;font-size:13px;font-weight:800;min-height:18px}
.status .none{color:var(--soft);font-weight:600}
.mid{display:flex;align-items:center;justify-content:space-between;gap:8px}
.clock{font-size:13px;white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums}
.clock.bell{animation:ring .5s ease-in-out infinite}
@keyframes ring{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.speed{display:flex;gap:4px}
.speed button{border:2px solid var(--line);background:var(--paper);border-radius:10px;padding:4px 7px;font-size:13px;font-weight:800}
.speed button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tip{font-size:12.5px;color:var(--soft);text-align:center}

.pop{position:fixed;font-weight:800;font-size:15px;pointer-events:none;z-index:50;white-space:nowrap;animation:up .95s ease-out forwards;
  text-shadow:0 2px 0 var(--paper),0 -2px 0 var(--paper),2px 0 0 var(--paper),-2px 0 0 var(--paper)}
.pop.crit{font:italic 900 24px var(--display)}
.pop.heal,.pop.shield,.pop.haste{font-style:italic}
.pop.soft{color:var(--soft)}
@keyframes up{0%{opacity:0;transform:translate(-50%,-30%) scale(.5,1.5)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.25,.8)}32%{transform:translate(-50%,-70%) scale(1)}100%{opacity:0;transform:translate(-50%,-190%)}}

.cta{position:fixed;left:0;right:0;bottom:0;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(255,255,255,0),var(--paper) 30%)}
.cta .inner{max-width:452px;margin:0 auto}
.chev{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}
.chev svg{width:min(78%,34px);height:88%;max-height:52px;overflow:visible;fill:none;stroke:var(--line);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.chev .h{stroke:var(--paper);stroke-width:8}
.chev g{opacity:0;animation:chev 1.2s ease-out infinite}
.chev g:nth-child(1){animation-delay:.32s}.chev g:nth-child(2){animation-delay:.16s}.chev g:nth-child(3){animation-delay:0s}
@keyframes chev{0%{opacity:.15;transform:translateY(6px)}30%{opacity:.9}100%{opacity:.15;transform:translateY(-7px)}}
.t3 .chev svg{stroke:var(--paper)}.t3 .chev .h{stroke:var(--line)}
.o-icon .chev{inset:-4px}
.o-icon{position:relative}
@media (prefers-reduced-motion:reduce){.chev g{animation:none!important;opacity:.55}}
.cta.dock{background:var(--paper);border-top:2.5px solid var(--line);border-radius:22px 22px 0 0;padding-top:12px;box-shadow:0 -6px 0 rgba(255,255,255,.9);z-index:20}
.dock .stall-head h2{font-size:21px}
.dock .hint{margin-bottom:8px;font-size:12.5px}
.dock .board{margin-bottom:12px}

/* overlays */
.overlay{position:fixed;inset:0;background:rgba(255,255,255,.72);z-index:40;display:flex;align-items:flex-end;justify-content:center;padding:0 10px}
.overlay.center{align-items:center;padding:20px}
.sheet{background:var(--paper);width:100%;max-width:470px;border:2.5px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;
  animation:rise .55s cubic-bezier(.3,.7,.3,1) both;transform-origin:50% 100%}
.center .sheet{border-bottom:2.5px solid var(--line);border-radius:24px;box-shadow:7px 8px 0 var(--ink);padding-bottom:20px;transform-origin:50% 50%}
/* a pop-up never grows past the screen: anything taller scrolls inside it */
.sheet{max-height:calc(100vh - 12px - env(safe-area-inset-top,0px));max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.center .sheet{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
@keyframes rise{0%{transform:translateY(60px) scale(.9,1.14);opacity:0}55%{opacity:1;transform:translateY(-6px) scale(1.03,.97)}80%{transform:translateY(1px) scale(.995,1.005)}100%{transform:none}}
.sh-top{display:flex;gap:12px;align-items:center}
.big{width:60px;height:60px;border-radius:14px;padding:8px;flex:none}
.sheet ul{padding-left:18px;display:grid;gap:4px;font-size:15px}
.gloss{font-size:13px;color:var(--soft);display:grid;gap:2px}
.sh-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.sh-actions>*{flex:1}
.result h2{font-size:32px;line-height:.95}
.result .lines{display:grid;gap:4px}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:14px;font-weight:800;font-size:14px;z-index:60;max-width:90vw;text-align:center;
  animation:toast .45s var(--spring) both}
@keyframes toast{0%{transform:translate(-50%,20px) scale(.8,1.2);opacity:0}100%{transform:translate(-50%,0);opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .pop{animation:none;transform:translate(-50%,-50%)}
}

/* ---- voyage map ---- */
.seahead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.seahead h2{font-size:28px}
.seahead span{font-size:13px;font-weight:800;white-space:nowrap}
.map{border:2.5px solid var(--line);border-radius:18px;padding:6px;background:var(--paper);position:relative}
.map svg{display:block;width:100%;height:auto;overflow:visible}
.map .w{fill:var(--paper)}.map .k{fill:var(--ink);stroke:none}
.map .gw{fill:var(--paper)}.map .gk{fill:var(--ink);stroke:none}
.node{cursor:default}
.node.reach{cursor:pointer}
.node.reach .body{animation:nodebob 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes nodebob{0%,100%{transform:none}15%{transform:scale(1.1,.88)}35%{transform:translateY(-5px) scale(.94,1.08)}55%{transform:translateY(0) scale(1.03,.97)}}
.node.reach .ring{animation:ring2 1.4s ease-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes ring2{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
.node.visited .body circle{fill:var(--ink)}
.node.visited .glyph{stroke:var(--paper)}
.node.visited .gw{fill:var(--ink)}.node.visited .gk{fill:var(--paper)}
.node.dim{opacity:.5}
.node:focus-visible{outline:none}.node:focus-visible .body circle{stroke-width:4}
.maplabel{font:italic 900 12px var(--display);fill:var(--ink)}
.fogtxt{font:italic 400 11px var(--display);fill:var(--soft)}
.tapnote{font-size:12.5px;color:var(--soft);text-align:center;margin-top:8px}
/* ---- choices ---- */
.picks{display:grid;gap:10px}
.pick{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;text-align:left;background:var(--paper);border:2.5px solid var(--line);border-radius:16px;box-shadow:4px 5px 0 var(--ink);padding:10px 12px;transition:transform .22s var(--spring)}
.pick:active{transform:scale(1.03,.92)}
.pick[disabled]{box-shadow:none;border-style:dashed;color:var(--soft);cursor:default}
.pick .pi{width:44px;height:44px;border-radius:10px;padding:4px;position:relative}
.pick .pi.plain{padding:0;border:0}
.pick svg{width:100%;height:100%}
.pick .gl{stroke:var(--line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pick .gl .w{fill:var(--paper)}.pick .gl .k{fill:var(--ink);stroke:none}
.pick b{display:block;font-weight:800}
.pick span.d{font-size:13.5px;display:block}
.opt{display:block;width:100%;text-align:left;background:var(--paper);border:2.5px solid var(--line);border-radius:16px;box-shadow:4px 5px 0 var(--ink);padding:11px 14px;transition:transform .22s var(--spring)}
.opt:active{transform:scale(1.03,.92)}
.opt b{display:block;font-weight:800;font-size:16px}
.opt span{font-size:13.5px}
.opt[disabled]{box-shadow:none;border-style:dashed;color:var(--soft)}
.label{font-weight:800;font-size:14px}
.log{font:italic 400 17.5px/1.45 var(--display)}
.journal{max-height:84vh;overflow:auto}
.entry{padding-top:8px;border-top:1.5px dashed var(--line,#bbb);font-size:14.5px}
.entry b{font-weight:800}
.traitlist{display:grid;gap:6px}
.traitlist p b{font-weight:800}
.traits{font-size:12.5px;font-weight:800;margin-top:4px}
.traits span{color:var(--soft);font-weight:600}
.mini-board .board{pointer-events:none}
.mini-board .item,.mini-board .slot{height:48px}
/* ---- ships + atlas ---- */
.ships{display:grid;gap:10px}
.shipcard{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center;text-align:left;background:var(--paper);border:2.5px solid var(--line);border-radius:16px;box-shadow:4px 5px 0 var(--ink);padding:10px 12px;transition:transform .22s var(--spring)}
.shipcard:active{transform:scale(1.03,.92)}
.shipcard[disabled]{box-shadow:none;border-style:dashed;color:var(--soft)}
.shipcard svg{width:54px;height:40px}
.shipcard b{font:italic 900 19px var(--display);display:block}
.shipcard .d{font-size:13px;display:block}
.atlas h2{margin:22px 0 10px}
.atlas .stat{font-size:15px}
.beasts{display:grid;gap:8px}
.beast{border:2px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13px}
.beast.unknown{border-style:dashed;color:var(--soft)}
.beast b{font-weight:800;font-size:14.5px}
.beast .tag{float:right;font-weight:800;font-size:12px}
.cargo{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.cargo .c{aspect-ratio:1;border:2px solid var(--line);border-radius:10px;padding:5px}
.cargo .c.unknown{border-style:dashed;border-color:var(--soft)}
.back{margin-bottom:10px}
.seed{font-size:12.5px;color:var(--soft)}
.dock .note{font-size:12.5px;color:var(--soft);text-align:center;margin-top:-2px}

.boatbob{animation:bob 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.hpwrap{position:relative;margin:10px 0 16px}
.hpwrap .hpbar{height:18px;margin:0}
.hpbar .lag{position:absolute;inset:0 auto 0 0;background:var(--soft);opacity:.4;transition:width .5s ease .35s}
.hpbar .lag.snap{transition:none}
.hpbar .hp{z-index:1}
.hpbar .inc{position:absolute;top:0;bottom:0;z-index:2;transition:left .15s,width .15s}
.burnseg{background:repeating-linear-gradient(90deg,var(--paper) 0 1.6px,transparent 1.6px 4px)}
.poiseg{background:radial-gradient(circle,var(--paper) 1.3px,transparent 1.7px) 0 0/5px 5px}
.hpbar .sh{z-index:3}
.chips{position:absolute;right:8px;bottom:-13px;display:flex;gap:4px;z-index:4}
.chip{display:inline-flex;align-items:center;gap:3px;background:var(--paper);border:2px solid var(--line);border-radius:999px;height:22px;padding:0 7px 0 5px;font-weight:800;font-size:12px;font-variant-numeric:tabular-nums;transform-origin:50% 100%}
.chip svg{width:13px;height:13px;display:block}
.chip.new{animation:pop-in .45s var(--spring)}
.chip.bump{animation:bump .4s var(--spring)}
.chip.tick{animation:tickc .3s ease-out}
@keyframes tickc{35%{transform:scale(1.12,.84) translateY(1px)}}
.fighter .traits{margin-top:2px}
.dock .board{position:relative}
.dock .board .item{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.item.dragging{opacity:.25}
.item.ghost{position:fixed;left:0;top:0;margin:0;z-index:80;pointer-events:none;box-shadow:4px 6px 0 var(--ink);transition:none;cursor:grabbing}
.dropmark{position:absolute;top:5px;bottom:5px;width:4px;border-radius:2px;background:var(--ink);display:none;z-index:5;pointer-events:none}
.dropmark.pop{animation:markpop .3s var(--spring)}
@keyframes markpop{0%{transform:scale(1,.3)}60%{transform:scale(1.6,1.08)}100%{transform:none}}
.item.land{animation:land2 .45s var(--spring)}
@keyframes land2{0%{transform:translateY(-10px) scale(.9,1.15)}45%{transform:translateY(2px) scale(1.12,.86)}75%{transform:scale(.97,1.03)}}
.primary.sellzone{background:var(--paper);color:var(--ink);border-style:dashed;font-size:18px;transition:transform .2s var(--spring)}
.primary.sellzone.hot{background:var(--ink);color:var(--paper);border-style:solid;transform:scale(1.04,.94)}
.npc{display:flex;gap:12px;align-items:center}
.portrait{width:64px;height:64px;flex:none;border:2.5px solid var(--line);border-radius:50%;background:var(--paper);overflow:hidden}
.npc h2{font-size:24px}
.visitor{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;background:var(--paper);border:2.5px solid var(--line);border-radius:18px;box-shadow:4px 5px 0 var(--ink);padding:8px 12px;margin:0 0 20px;transition:transform .22s var(--spring)}
.visitor:active{transform:scale(1.03,.92)}
.visitor .portrait{width:52px;height:52px;animation:nodebob 2.4s ease-in-out infinite;transform-origin:50% 100%}
.visitor b{display:block;font-weight:800}.visitor .soft{font-size:12.5px}
.visitor .talk{font:italic 900 18px var(--display);border-bottom:2px solid var(--line)}
.market{margin-bottom:20px}
.fishlist{display:grid;gap:8px}
.fishrow{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;border:2px solid var(--line);border-radius:14px;padding:6px 10px}
.fishrow b{display:block;font-weight:800;font-size:14.5px}.fishrow .soft{font-size:12.5px}
.fishrow .buy,.fishrow .ghost{padding:7px 10px}
.fishsvg{width:64px;height:32px;display:block}
.fishsvg .w,.bigfish .w{fill:var(--paper)}.fishsvg .k,.bigfish .k{fill:var(--ink);stroke:none}
.catch{display:grid;place-items:center;padding:6px 0}
.bigfish{width:220px;height:110px;animation:flop .9s var(--spring) both}
@keyframes flop{0%{transform:translateY(40px) scale(.4,1.6) rotate(-20deg);opacity:0}40%{transform:translateY(-12px) scale(1.15,.85) rotate(8deg);opacity:1}65%{transform:scale(.95,1.06) rotate(-4deg)}100%{transform:none}}
.pond{border:2.5px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);touch-action:none;-webkit-user-select:none;user-select:none}
.pond svg{display:block;width:100%;height:auto}
.pwave{animation:pw 3s linear infinite}.pwave.back{animation-duration:5s;animation-direction:reverse}
@keyframes pw{to{transform:translateX(40px)}}
.bang{font:italic 900 26px var(--display)}
.reel{margin-top:14px;touch-action:none;-webkit-user-select:none;user-select:none}
.track{position:relative;height:44px;border:2.5px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper)}
.zone{position:absolute;top:3px;bottom:3px;border:2.5px solid var(--line);border-radius:18px;background:repeating-linear-gradient(-45deg,var(--hatch) 0 2px,transparent 2px 6px)}
.zone.on{background:repeating-linear-gradient(-45deg,rgba(0,0,0,.35) 0 2px,transparent 2px 5px);border-width:3.5px}
.fishmark{position:absolute;top:50%;width:30px;height:18px;margin:-9px 0 0 -15px;transition:transform .15s}
.fishmark.flip{transform:scaleX(-1)}
.fishmark svg{width:100%;height:100%;display:block}
.prog{height:10px;border:2px solid var(--line);border-radius:6px;margin-top:8px;overflow:hidden}
.prog div{height:100%;background:var(--ink);width:30%}
.fmsg{text-align:center;font-weight:800;margin:12px 0 10px;min-height:22px}
.fbtns{display:grid;gap:6px;justify-items:center}
.primary.wait{background:var(--paper);color:var(--soft);border-style:dashed}
.primary.hot{animation:bump .4s var(--spring) infinite}
.primary.hold:active{transform:scale(1.05,.9)}
.fishgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fc{border:2px solid var(--line);border-radius:12px;padding:6px;display:grid;justify-items:center;font-size:11.5px;font-weight:800;text-align:center}
.fc.unknown{border-style:dashed;border-color:var(--soft);color:var(--soft);min-height:62px;align-content:center}
.locker-head{margin-top:10px}
.locker-head h3{font:italic 900 17px var(--display)}
.locker-head h3 .soft{font:600 11.5px var(--ui);margin-left:4px}
.board.locker{grid-template-columns:repeat(6,1fr);border-style:dashed;margin-bottom:12px}
.board.locker .item,.board.locker .slot{height:50px}
.board.locker .item .ico{width:min(24px,80%)}
.dock .board.locker~.primary{margin-top:0}
.board.droppable{transition:transform .2s var(--spring)}
.board.over{transform:scale(1.02,.97)}
.board.over.full{transform:none}
.dropmark.no{background:repeating-linear-gradient(0deg,var(--ink) 0 3px,transparent 3px 6px)}
.visitor.quest{border-style:dashed}
.sh-actions [disabled]{opacity:.4;border-style:dashed}
.item .emb,.o-icon .emb{position:absolute;top:3px;left:3px;width:9px;height:9px;z-index:2;fill:var(--ink)}
.o-icon .emb{top:-5px;left:-5px;width:13px;height:13px;background:var(--paper);border-radius:50%;padding:1px}
.t3 .emb{fill:var(--paper)}.t3 .ic.crew g{stroke:var(--paper)}
.ic.crew{border:0;border-radius:0;overflow:visible}
.item.proc{animation:procA .35s ease-out}
@keyframes procA{30%{transform:scale(1.08);box-shadow:0 0 0 3px var(--ink)}}
.shipcard{grid-template-columns:64px 1fr}
.shipemb{width:54px;height:54px;border:2.5px solid var(--line);border-radius:50%;background:var(--paper);padding:8px;display:grid;place-items:center;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4.5px var(--ink);transition:transform .3s var(--spring)}
.shipemb svg{width:100%;height:100%;fill:var(--ink);display:block}
.shipcard:not([disabled]):not(.static):hover .shipemb,.shipcard:not([disabled]):not(.static):focus-visible .shipemb{transform:scale(1.12,.9) rotate(-8deg)}
.shipcard:not([disabled]):not(.static):active .shipemb{transform:scale(.9,1.12)}
.shipcard[disabled] .shipemb,.shipcard.static.locked .shipemb{border-style:dashed;border-color:var(--soft);box-shadow:none}
.shipcard[disabled] .shipemb svg,.shipcard.static.locked .shipemb svg{fill:var(--soft)}
.shipcard.static{box-shadow:none;border-width:2px}
.shipcard.static.locked{border-style:dashed;color:var(--soft)}.shipcard.static.locked .shipemb{border-style:dashed;border-color:var(--soft)}.shipcard.static.locked .shipemb svg{fill:var(--soft)}

/* version + feedback */
.ver{font-size:12px;font-weight:800;color:var(--soft);margin-top:4px}
.ver .linkbtn{font-size:12px;color:var(--ink)}
.fbk{display:flex;flex-wrap:wrap;gap:6px}
.fbc{border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 12px;font:800 13px var(--ui)}
.fbc.on{background:var(--ink);color:var(--paper)}
#fbNote{width:100%;border:2.5px solid var(--line);border-radius:14px;padding:10px 12px;font:600 15px var(--ui);resize:vertical;background:var(--paper);color:var(--ink)}
#fbNote:focus{outline:3px solid var(--line);outline-offset:2px}
.fbmsg{font-size:13px;font-weight:800;min-height:18px}

/* tutorial coach and tips */
.coach{position:fixed;left:10px;right:10px;max-width:460px;margin:0 auto;z-index:55;display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:start;background:var(--paper);border:2.5px solid var(--line);border-radius:20px;box-shadow:5px 6px 0 var(--ink);padding:12px 16px 12px 12px;animation:coachIn .5s cubic-bezier(.3,.7,.3,1) both;pointer-events:none}
.coach button{pointer-events:auto}
.coach.top{top:calc(8px + env(safe-area-inset-top,0px))}
.coach.bottom{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.coach .portrait{width:48px;height:48px;animation:nodebob 2.4s ease-in-out infinite;transform-origin:50% 100%}
.coach small{display:block;font-size:11px;font-weight:800;color:var(--soft);margin-bottom:2px}
.coach p{font:italic 400 16px/1.4 var(--display)}
.coach-btns{display:flex;gap:14px;align-items:center;margin-top:8px}
.cnext{pointer-events:auto;height:32px;padding:0 16px;border:2.5px solid var(--line);border-radius:999px;background:var(--ink);color:var(--paper);font:800 13.5px var(--ui);cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .2s var(--spring)}
.cnext:active{transform:scale(1.06,.9)}
.cnext:focus-visible{outline:3px solid var(--line);outline-offset:2px}
.coach-btns .linkbtn{font-size:12.5px;color:var(--soft);padding:2px 0}
/* the reading timer: a ring fills, then pops into the close button */
@keyframes ringFill{to{stroke-dashoffset:0}}
@keyframes ringOut{to{transform:scale(1.25,.7);opacity:0}}
@keyframes xIn{0%{transform:scale(.3,1.5) rotate(-90deg);opacity:0}55%{transform:scale(1.2,.85) rotate(8deg);opacity:1}80%{transform:scale(.95,1.05)}100%{transform:none}}
@keyframes coachIn{0%{opacity:0;transform:translateY(-14px) scale(.92,1.1)}60%{opacity:1;transform:translateY(3px) scale(1.02,.98)}100%{transform:none}}
.coach.bottom{animation-name:coachUp}
@keyframes coachUp{0%{opacity:0;transform:translateY(14px) scale(.92,1.1)}60%{opacity:1;transform:translateY(-3px) scale(1.02,.98)}100%{transform:none}}
.coach-hi{position:relative;z-index:3;outline:3px dashed var(--line);outline-offset:5px;border-radius:18px;animation:hiPulse 1.2s ease-in-out infinite}
@keyframes hiPulse{50%{outline-offset:9px}}
g.coach-hi{outline:none;animation:none}
g.coach-hi .ring{stroke-width:3;stroke-dasharray:4 3}
.tutlink{display:block;margin:2px auto 0}
@media (prefers-reduced-motion:reduce){.coach,.coach .portrait,.coach-hi{animation:none}.ctimer .prog{animation:ringFill var(--dur) linear forwards!important;animation-duration:var(--dur)!important}}

/* ---- desktop: a wide table. Only on big windows, so phones (even turned sideways) keep the layout above. ---- */
@media (min-width:900px) and (min-height:560px){
  #app{max-width:1080px;padding:22px 24px 140px}
  .title{max-width:480px;margin:0 auto}
  .atlas{max-width:760px;margin:0 auto}
  .cargo{grid-template-columns:repeat(10,1fr)}
  #app:has(.pond){max-width:720px}
  /* port: the whole market in one row */
  .offers{grid-template-columns:repeat(4,1fr);gap:16px}
  .fishlist{grid-template-columns:1fr 1fr}
  .visitor{max-width:520px}
  /* the hold: one long row with roomy slots, Set sail beside it */
  .item,.slot{height:84px}
  .item .ico{width:min(38px,70%)}
  .item .cdt{font-size:12px}
  .item .emb{width:11px;height:11px}
  .cta.dock{max-width:1080px;margin:0 auto;border:2.5px solid var(--line);border-bottom:0;padding:14px 24px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 0 var(--paper)}
  .cta.dock .inner{max-width:none;display:grid;grid-template-columns:1fr;row-gap:8px}
  .cta.dock .inner:has(>.primary){grid-template-columns:1fr 210px;column-gap:18px}
  .dock .inner>*{grid-column:1;margin:0}
  .dock .inner>.stall-head:first-child{grid-column:1/-1}
  .dock .inner>.primary{grid-column:2;grid-row:3;align-self:stretch;margin:0;font-size:26px}
  .dock .inner>.primary.sellzone{font-size:18px}
  .dock .hint{margin:0}
  .dock .board{margin:0}
  .dock .locker-head{margin-top:6px}
  .board.locker{grid-template-columns:repeat(9,1fr)}
  .board.locker .item,.board.locker .slot{height:60px}
  /* chart: the whole sea fits the window, no scrolling */
  .map{width:fit-content;margin:0 auto;padding:8px 14px}
  .map svg{width:auto;height:clamp(420px,calc(100vh - var(--dock,190px) - 170px),820px)}
  .seahead,.tapnote{max-width:none}
  /* fight: the same stack as on a phone, stretched wide so every item is big and easy to read */
  .battle{gap:14px}
  .battle>.mid{justify-content:center;gap:22px}
  .who .name{font-size:24px}
  /* pop-ups open as cards in the middle of the screen */
  .overlay{align-items:center;padding:24px}
  .sheet{max-width:520px;max-height:calc(100vh - 48px);overflow:auto;border-bottom:2.5px solid var(--line);border-radius:24px;box-shadow:7px 8px 0 var(--ink);padding-bottom:20px;transform-origin:50% 50%}
  .sheet:has(.ships){max-width:780px}
  .ships{grid-template-columns:1fr 1fr}
  .journal{max-height:calc(100vh - 48px)}
}
/* with a mouse: things you can press lift a little when you point at them */
@media (hover:hover) and (pointer:fine){
  .primary:hover,.ghost:hover,.buy:hover,.speed button:hover,.fbc:hover{transform:translateY(-2px)}
  .pick:not([disabled]):hover,.opt:not([disabled]):hover,.shipcard:not([disabled]):not(.static):hover,.visitor:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--ink)}
  .dock .board .item:not(.dragging):not(.sel):hover,.battle .item:hover{transform:translateY(-3px)}
  .o-top:hover h3,.linkbtn:hover{text-decoration:underline;text-decoration-thickness:2px}
  .fighter.e:hover{cursor:pointer}
  .primary:active,.ghost:active,.buy:active,.speed button:active{transform:scale(1.05,.88)}
  .pick:active,.opt:active,.shipcard:active,.visitor:active{transform:scale(1.03,.92);box-shadow:4px 5px 0 var(--ink)}
  .item,.pick,.opt,.visitor{transition:transform .22s var(--spring),box-shadow .22s var(--spring)}
}

/* ---- the captain's desk: big screens during a voyage (body.desk is set by desk.js). The stage on the left, the desk panel on the right, the hold along the bottom. ---- */
.item .nm{display:none}
#desk{display:none}
@media (min-width:1180px) and (min-height:640px){
  body.desk{--fx:max(0px,calc((100vw - 1760px)/2));--dw:clamp(320px,22vw,390px)}
  body.desk #app{max-width:1760px;padding:22px calc(var(--dw) + 32px) 150px 32px;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;column-gap:24px;align-content:start}
  body.desk #app>*{grid-column:1/-1}
  body.desk #app>.visitor{grid-column:1;max-width:none;margin-bottom:16px}
  body.desk #app>.market{grid-column:2}
  body.desk #app:has(.pond)>*{width:100%;max-width:720px;justify-self:center}
  /* the desk panel */
  body.desk #desk{display:flex;flex-direction:column;gap:18px;position:fixed;top:0;bottom:0;right:var(--fx);width:var(--dw);z-index:21;background:var(--paper);border-left:2.5px solid var(--line);padding:22px 22px calc(18px + env(safe-area-inset-bottom,0px));overflow:hidden}
  #desk h3{font:italic 900 19px/1.1 var(--display);margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline}
  #desk h3 .soft{font:800 12.5px var(--ui)}
  #desk>section+section,#desk>p+section{border-top:2px solid var(--line);padding-top:16px}
  .desk-ship{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center}
  .desk-ship b{display:block;font:italic 900 24px/1 var(--display);margin-bottom:3px}
  .desk-ship .soft{font-size:12.5px}
  .desk-trait{font-size:13.5px;line-height:1.35;margin-top:-6px}
  .desk-trait b{font-weight:800}
  .marks{display:grid;gap:10px}
  .mark{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;font-size:13px;line-height:1.3}
  .mark b{font-weight:800}
  .mark svg{width:38px;height:38px;border:2px solid var(--line);border-radius:10px;padding:4px;stroke:var(--line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
  .mark .w{fill:var(--paper)}.mark .k{fill:var(--ink);stroke:none}
  .catchlist{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
  .fishline{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800}
  .fishline .fishsvg{width:40px;height:20px;flex:none}
  .desk-log{flex:1;min-height:0;display:flex;flex-direction:column}
  .desk-log .entries{flex:1;overflow:auto;display:grid;gap:8px;align-content:start;padding-right:6px;scrollbar-width:thin}
  .desk-log .entry{font-size:13.5px;line-height:1.4;padding-top:8px}
  .desk-log .entry:first-child{border-top:0;padding-top:0}
  .desk-log .log.entry{font-size:15px}
  /* the hold: a band along the bottom of the stage, with big named tiles */
  body.desk .cta.dock{left:var(--fx);right:calc(var(--fx) + var(--dw));max-width:none;margin:0;border:0;border-top:2.5px solid var(--line);border-radius:0;box-shadow:none;padding:14px 32px calc(16px + env(safe-area-inset-bottom,0px))}
  body.desk .cta.dock .inner:has(>.primary){grid-template-columns:1fr 200px;column-gap:22px}
  body.desk .item,body.desk .slot{height:clamp(80px,calc(100vh / 8.5),112px)}
  body.desk .item{justify-content:center;gap:5px;padding:12px 4px 8px}
  body.desk .item .ico{width:min(40px,64%)}
  body.desk .item .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.15;font-weight:800;text-align:center;position:relative;z-index:1;max-width:100%;word-break:break-word}
  body.desk .item .cdt{font-size:11.5px}
  body.desk .item .emb{width:12px;height:12px;top:5px;left:5px}
  body.desk .board.locker .item,body.desk .board.locker .slot,body.desk .mini-board .item,body.desk .mini-board .slot{height:62px}
  body.desk .board.locker .item .nm,body.desk .mini-board .item .nm{display:none}
  body.desk .battle .item,body.desk .battle .slot{height:clamp(100px,calc((100vh - 500px) / 2),150px)}
  body.desk .battle .item .ico{width:min(52px,64%)}
  body.desk .battle .item .nm{font-size:12px}
  body.desk .battle{gap:18px;min-height:calc(100vh - 104px);justify-content:center}
  body.desk #app:has(>.battle){padding-bottom:22px}
  body.desk .fighter{padding:14px 18px}
  /* port: big market cards */
  body.desk .m-head{margin-bottom:14px}
  body.desk .offers{grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:26px}
  body.desk .offer{min-height:clamp(220px,calc(100vh - var(--dock,210px) - 330px),400px);padding:16px;gap:10px}
  body.desk .o-top{flex-direction:column;align-items:flex-start;gap:10px}
  body.desk .o-icon{width:clamp(68px,calc(100vh / 10),92px);height:clamp(68px,calc(100vh / 10),92px);padding:10px;border-radius:16px}
  body.desk .offer h3{font-size:18px}
  body.desk .o-meta{font-size:13px}
  body.desk .o-desc{font-size:14.5px;line-height:1.35}
  body.desk .buy{padding:11px 6px;font-size:15px}
  body.desk .offer.sold{font-size:26px}
  body.desk .market{margin-bottom:16px}
  /* chart: the sea fills the stage (desk.js and fitMap() redraw it to this size) */
  body.desk .map{margin:0;width:auto;padding:8px 10px}
  body.desk .map svg{width:100%;height:auto}
  body.desk .tapnote{display:none}
  /* things that float over the stage centre on the stage, not the whole window */
  body.desk .coach{left:calc(var(--fx) + 16px);right:calc(var(--fx) + var(--dw) + 16px)}
  body.desk .toast{left:calc(var(--fx) + (100vw - 2 * var(--fx) - var(--dw)) / 2)}
}

/* hull damage card, shown on the chart after a lost fight */
.hullcard{position:fixed;left:16px;right:16px;top:30%;margin:0 auto;width:min(360px,calc(100vw - 32px));z-index:39;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;background:var(--paper);border:2.5px solid var(--line);border-radius:20px;box-shadow:6px 7px 0 var(--ink);padding:14px 18px;pointer-events:none;animation:hcIn .55s var(--spring) both}
.hullcard.out{animation:hcOut .4s ease-in forwards}
@keyframes hcIn{0%{opacity:0;transform:translateY(24px) scale(.8,1.2)}60%{opacity:1;transform:translateY(-4px) scale(1.04,.96)}100%{transform:none}}
@keyframes hcOut{30%{transform:scale(1.03,.97)}100%{opacity:0;transform:translateY(-16px) scale(.94,1.06)}}
.hc-ship{width:64px;height:64px;transform-origin:50% 85%;animation:hcRock .5s ease-in-out .55s 4 both}
@keyframes hcRock{25%{transform:rotate(-9deg) translateX(-2px)}75%{transform:rotate(7deg) translateX(2px)}}
.hc-head{font:italic 900 21px/1.1 var(--display)}
.hc-num{font-weight:800;font-size:14px;margin-top:2px;display:flex;align-items:baseline;gap:6px}
.hc-num b{display:inline-block;font:italic 900 30px/1 var(--display);font-variant-numeric:tabular-nums;min-width:1.2em}
.hc-num b.bump{animation:bump .3s var(--spring)}
.hc-loss{margin-left:auto;font:italic 900 22px var(--display);animation:hcLoss .5s var(--spring) .45s both}
@keyframes hcLoss{0%{opacity:0;transform:scale(.3,1.6)}60%{opacity:1;transform:scale(1.25,.85)}100%{transform:none}}
.planks{display:flex;flex-wrap:wrap;gap:3px;margin-top:9px}
.planks i{width:8px;height:16px;border:2px solid var(--line);border-radius:2px;background:var(--paper)}
.planks i.go{animation:plankOff .7s cubic-bezier(.5,0,.8,.4) calc(.6s + var(--d)) forwards}
@keyframes plankOff{0%{transform:none}20%{transform:translateY(-5px) rotate(-14deg) scale(1.1,.9);background:repeating-linear-gradient(-45deg,var(--ink) 0 1.5px,var(--paper) 1.5px 4px)}100%{transform:translateY(34px) rotate(55deg);opacity:0;background:repeating-linear-gradient(-45deg,var(--ink) 0 1.5px,var(--paper) 1.5px 4px)}}
@media (min-width:1180px) and (min-height:640px){body.desk .hullcard{left:calc(var(--fx) + 16px);right:calc(var(--fx) + var(--dw) + 16px)}}
@media (prefers-reduced-motion:reduce){.hullcard,.hc-ship,.hc-loss{animation:none!important}.planks i.go{animation:none!important;opacity:.2}}

/* spoils screen: cards above the docked hold, dragged in like cargo */
.offer.spoil{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.offer.spoil.dragging{opacity:.35}
.offer.spoil.taken{border-style:dashed;box-shadow:none;transition:transform .2s var(--spring)}
.offer.spoil.left{opacity:.45;box-shadow:none;border-style:dashed;cursor:default}
.offer.spoil.backzone{outline:3px dashed var(--line);outline-offset:5px}
.offer.spoil.backzone.hot{transform:scale(1.04,.96);background:repeating-linear-gradient(-45deg,var(--hatch) 0 1.5px,transparent 1.5px 6px)}
.dock #sailon{font-size:21px}
@media (min-width:1180px) and (min-height:640px){body.desk .offers.spoils{grid-template-columns:repeat(3,1fr)}}

/* pause button in the top bar, and the pause card (like Ink Nine and Ink Rally) */
.pausebtn{width:34px;height:34px;flex:none;border-radius:50%;border:2.5px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:2px 3px 0 var(--ink);display:grid;place-items:center;padding:0;margin-left:6px;transition:transform .28s var(--spring)}
.pausebtn svg{width:20px;height:20px}
.pausebtn:active{transform:scale(1.12,.86)}
.pausebtn:focus-visible{outline:3px solid var(--line);outline-offset:3px}
.pausecard h2{font-size:34px}
.pausecard .ver{text-align:center}

/* the chart unrolls like a scroll (chart.js unroll()): the paper shows from the top down while the roll travels to the bottom */
.map.unroll{clip-path:inset(0 -12px 0 -12px round 18px);animation:unrollClip 1.5s cubic-bezier(.5,.05,.25,1) both}
@keyframes unrollClip{0%,8%{clip-path:inset(0 -12px calc(100% - 30px) -12px round 18px)}92%,100%{clip-path:inset(0 -12px 0 -12px round 18px)}}
.roll{position:absolute;left:-8px;right:-8px;top:0;height:30px;z-index:4;pointer-events:none;border:2.5px solid var(--line);border-radius:15px;box-shadow:0 4px 0 var(--ink);
  background:repeating-linear-gradient(180deg,var(--paper) 0 5px,var(--hatch) 5px 6.5px,var(--paper) 6.5px 9px),var(--paper);
  animation:rollDown 1.5s cubic-bezier(.5,.05,.25,1) var(--ud,0ms) both,rollAway .45s var(--spring) calc(var(--ud,0ms) + 1.5s) forwards;transform-origin:50% 100%}
.roll::before,.roll::after{content:"";position:absolute;top:50%;width:20px;height:20px;margin-top:-10px;border:2.5px solid var(--line);border-radius:50%;background:radial-gradient(circle,var(--ink) 0 2px,var(--paper) 2.5px 5px,var(--ink) 5.5px 6.5px,var(--paper) 7px)}
.roll::before{left:-4px}.roll::after{right:-4px}
@keyframes rollDown{0%{top:0;transform:scale(1.02,1.1)}8%{top:0;transform:scale(1,1)}92%{top:calc(100% - 30px)}96%{top:calc(100% - 27px);transform:scale(1.03,.85)}100%{top:calc(100% - 30px);transform:none}}
@keyframes rollAway{0%{opacity:1;top:calc(100% - 30px)}40%{transform:scale(1.04,.55)}100%{top:calc(100% - 30px);transform:scale(1.06,.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.map.unroll{animation:none;clip-path:none}.roll{display:none}}

/* fittings: the shipwright stall, the ship card and the hold slot Double Planking boards up */
.shippill{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:var(--ink)}
.shippill svg{width:13px;height:13px;fill:var(--ink)}
.slot.boarded{border:2px solid var(--soft);background:repeating-linear-gradient(-45deg,var(--soft) 0 1.5px,transparent 1.5px 6px);opacity:.6;cursor:default}
.wright{margin-bottom:6px}
.repair{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:2px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:12px}
.repair>div{flex:1;min-width:150px}
.repair b{display:block;font-weight:800}
.repair .soft{font-size:12.5px}
.repair .buy{padding:8px 10px}
.offers.fits .offer{min-height:0}
.o-icon.plain{border:2px solid var(--line)}
.offer .gl,.fitrow .gl,.fitpick .gl{width:100%;height:100%;display:block;stroke:var(--line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.offer .gl .w,.fitrow .gl .w{fill:var(--paper)}.offer .gl .k,.fitrow .gl .k{fill:var(--ink);stroke:none}
.fitlist{display:grid;gap:8px}
.fitrow{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;border:2px solid var(--line);border-radius:14px;padding:8px 12px}
.fitrow>svg{width:42px;height:42px;border:2px solid var(--line);border-radius:10px;padding:4px}
.fitrow.empty{border-style:dashed;color:var(--soft)}
.fitnone{display:block;width:42px;height:42px;border:2px dashed var(--soft);border-radius:10px}
.fitrow .soft{display:block;font-size:11.5px;font-weight:800}
.fitrow b{display:block;font-weight:800}
.fitrow .d{display:block;font-size:13px;line-height:1.3}
.pick .soft{font-weight:600;font-size:12.5px}

/* renown on the ship card */
.renown{border:2px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:7px}
.rn-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rn-head b{font:italic 900 19px var(--display)}
.rn-head .soft{font-size:12.5px;font-weight:800}
.rn-bar{height:10px;border:2px solid var(--line);border-radius:6px;overflow:hidden}
.rn-bar span{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--ink) 0 2px,var(--paper) 2px 4.5px);border-right:2px solid var(--line)}
.perks{padding-left:18px;display:grid;gap:3px;font-size:13.5px}
.perks b{font-weight:800}
.mark>.gl,.pick .pi .gl{stroke:var(--line);stroke-width:1.8;stroke-linejoin:round;fill:none}
.mark>.gl .w{fill:var(--paper)}

/* crafts and crew */
.cri{width:13px;height:13px;flex:none;display:inline-block;vertical-align:-2px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.cri .w{fill:var(--paper)}.cri .k{fill:currentColor;stroke:none}
.chipc{display:inline-flex;align-items:center;gap:3px;border:1.5px solid var(--line);border-radius:999px;padding:0 6px 0 4px;font-size:11px;font-weight:800;margin:2px 4px 0 0;white-space:nowrap}
.item.use-none .ico{opacity:.28}
.item.use-none{border-style:dashed}
.item.use-some::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);z-index:2}
.crewic{display:grid;place-items:center;overflow:hidden;border-radius:50%!important;border:2px solid var(--line)}
.crewic svg{width:100%;height:100%}
.offers.hires .offer{min-height:0}
.tavern h2 .soft{font:800 12.5px var(--ui);margin-left:6px}
.shead{font:italic 900 18px var(--display);display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.shead .soft{font:800 12px var(--ui)}
.crewlist{display:grid;gap:8px}
.crewrow{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;border:2px solid var(--line);border-radius:14px;padding:8px 10px}
.crewrow .o-icon{width:44px;height:44px;padding:2px}
.crewrow b{display:block;font-weight:800}
.crewrow .soft{display:block;font-size:12px;margin-top:2px}
.crewrow.empty{border-style:dashed;color:var(--soft);grid-template-columns:44px 1fr}
.crewrow .fitnone{width:44px;height:44px;border-radius:50%}
.mor{display:inline-flex;gap:2px;vertical-align:-1px}.mor i{width:7px;height:7px;border:1.5px solid var(--line);border-radius:50%}.mor i.on{background:var(--ink)}
.crewbar{display:flex;align-items:center;gap:5px;width:100%;background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:4px 8px;margin-bottom:10px;text-align:left}
.cb-l{font:italic 900 15px var(--display);margin-right:2px}
.cb-c{width:28px;height:28px;border:2px solid var(--line);border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none}
.cb-c svg{width:100%;height:100%}
.cb-c.empty{border-style:dashed;border-color:var(--soft)}
.cb-cr{margin-left:auto;display:flex;gap:3px}
.crewmark .crewic{width:34px;height:34px}
@media (min-width:1180px) and (min-height:640px){body.desk .dock .crewbar{margin:0}}
@media (min-width:1180px) and (min-height:640px){
  body.desk #app>.tavern{grid-column:1}
  body.desk #app>.wright{grid-column:2}
  body.desk .offers.hires,body.desk .offers.fits{grid-template-columns:repeat(2,1fr);gap:14px}
  body.desk .offers.hires .offer,body.desk .offers.fits .offer{min-height:0}
  body.desk .offers.hires .o-icon,body.desk .offers.fits .o-icon{width:56px;height:56px}
}

/* captain's orders: when each one fires */
.perks .when{display:block;font-size:12.5px;font-weight:800;margin:3px 0 4px}
.perks select{font:600 13px var(--ui);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:10px;padding:3px 6px;margin-left:4px;max-width:100%}
.perks li{margin-bottom:4px}
.opt span{display:block}

/* abilities: a box is ticked when someone in your crew can work it */
.ab{display:inline-flex;align-items:flex-start;gap:6px}
.ab .abt{flex:1}
.cbx{flex:none;width:15px;height:15px;margin-top:2px;border:2px solid var(--line);border-radius:4px;display:grid;place-items:center;background:var(--paper)}
.cbx svg{width:11px;height:11px;stroke:var(--line);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ab.off .cbx{border-style:dashed;border-color:var(--soft)}
.ab .crt{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:800;white-space:nowrap;color:var(--soft)}
.ab.off .crt{color:var(--ink)}
.o-desc .ab{display:flex;margin-bottom:3px}
/* voyage code entry */
#codein{width:100%;border:2.5px solid var(--line);border-radius:14px;padding:11px 14px;font:italic 900 22px var(--display);letter-spacing:.06em;text-transform:uppercase;background:var(--paper);color:var(--ink)}
#codein:focus{outline:3px solid var(--line);outline-offset:2px}
.sheet ul li:has(>.ab){list-style:none;margin-left:-18px}

/* the harbour: an ink drawing of the port, each building a button */
.harbour{border:2.5px solid var(--line);border-radius:18px;background:var(--paper);padding:6px 4px 0;margin-bottom:6px;overflow:hidden}
.harbour svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.harbour .w{fill:var(--paper)}.harbour .k{fill:var(--ink);stroke:none}
.harbour .hit{fill:transparent;stroke:none}
.bld{cursor:pointer;outline:none}
.bld .bart{transform-box:fill-box;transform-origin:50% 100%;transition:transform .25s var(--spring)}
.bld:active .bart{transform:scale(1.05,.92)}
.bld:focus-visible .hit{stroke:var(--line);stroke-width:2;stroke-dasharray:4 4}
.hlabel{font:italic 900 16px var(--display);fill:var(--ink);stroke:var(--paper);stroke-width:5px;paint-order:stroke}
.hbdg circle{fill:var(--ink);stroke:var(--paper);stroke-width:2.5}
.hbdg text{font:800 12px var(--ui);fill:var(--paper);stroke:none}
.hbdg{animation:nodebob 2s ease-in-out infinite;transform-box:fill-box}
.hwater path{animation:pw 4s linear infinite;stroke-width:1.6}
.hwater path+path{animation-duration:6s;animation-direction:reverse}
@media (hover:hover) and (pointer:fine){.bld:hover .bart{transform:translateY(-3px) scale(1.02)}}
.bldnav{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:8px;scrollbar-width:none}
.bldnav::-webkit-scrollbar{display:none}
.bldtab{flex:none;border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px;font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;gap:5px}
.bldtab.on{background:var(--ink);color:var(--paper)}
.bdg{min-width:17px;height:17px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:11px;display:inline-grid;place-items:center;padding:0 4px}
.bldtab.on .bdg{background:var(--paper);color:var(--ink)}
.dockempty{margin:18px 4px;font-size:14.5px}
@media (min-width:900px) and (min-height:560px){.harbour{max-width:760px;margin:0 auto 6px;width:100%}}
@media (min-width:1180px) and (min-height:640px){body.desk #app>.tavern,body.desk #app>.wright,body.desk #app>.stallsec{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.hbdg,.hwater path{animation:none}}
.bldnav{flex-wrap:wrap;overflow:visible;gap:5px}
.bldtab{padding:4px 9px;font-size:12.5px}
@media (min-width:900px) and (min-height:560px){
  .harbour{width:fit-content;max-width:100%}
  .harbour svg{width:auto;max-width:100%;height:clamp(280px,calc(100vh - var(--dock,230px) - 150px),640px)}
}

/* ship drawings */
.shipart{display:block;width:100%;height:auto;overflow:visible}
.shipcard.art{grid-template-columns:84px 1fr}
.shipcard.art .shipart{width:84px;transition:transform .3s var(--spring);transform-origin:50% 90%}
.shipcard.art:not([disabled]):not(.static):hover .shipart,.shipcard.art:not([disabled]):not(.static):focus-visible .shipart{transform:rotate(-4deg) scale(1.06,.96)}
.shipcard.art[disabled] .shipart,.shipcard.static.locked .shipart{opacity:.35}
.shipsheet-top .shipart{width:96px;flex:none}
.desk-ship{grid-template-columns:76px 1fr}
.desk-ship .shipart{width:76px}
.ship .flag{transform-box:fill-box;transform-origin:0 50%}
.shipcard.art .shipart,.shipsheet-top .shipart,.desk-ship .shipart{height:auto}

/* the title screen on a computer: the ship, name and rules on the left, the way in on the right, both centred */
.title .brand,.title .way{display:contents}
@media (min-width:900px) and (min-height:560px){
  .title{max-width:1080px;min-height:calc(100vh - 44px);display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto auto;align-content:start;column-gap:56px;row-gap:18px;align-items:center;padding-bottom:0}
  html:has(.title){overflow-x:hidden}
  .title>.sea{grid-column:1/-1;grid-row:1;margin:0 calc(50% - 50vw) 10px;height:250px}
  .title .sea .waves{bottom:40px}.title .sea .waves.back{bottom:52px}
  #app:has(>.title){padding-bottom:22px}
  .title .brand{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:14px}
  .title .way{grid-column:2;grid-row:2/4;align-self:center;display:flex;flex-direction:column;gap:10px}
  .title>.rules{grid-column:1;grid-row:3;font-size:15px}
  .title .sea .ship{width:200px;margin-left:-100px;bottom:56px}
  .title h1{font-size:clamp(72px,7vw,104px)}
  .title .tag{font-size:20px}
  .title .buttons{border:2.5px solid var(--line);border-radius:24px;box-shadow:7px 8px 0 var(--ink);padding:22px}
}

/* fish under the title's waves. The drawings face left, so fish swimming right are flipped. */
.seafish{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sfish{position:absolute;display:block;width:56px;height:28px}
.sfish svg{display:block;width:100%;height:100%}
.sf1{bottom:3px;animation:swimR 17s linear infinite;animation-delay:-3s}
.sf2{bottom:8px;width:40px;height:20px;animation:swimL 23s linear infinite;animation-delay:-11s;opacity:.55}
.sf3{bottom:3px;width:50px;height:25px;animation:swimR 20s linear infinite;animation-delay:-15s}
@keyframes swimR{from{left:-60px;transform:scaleX(-1) translateY(0)}25%{transform:scaleX(-1) translateY(-2px)}50%{transform:scaleX(-1) translateY(0)}75%{transform:scaleX(-1) translateY(2px)}to{left:calc(100% + 60px);transform:scaleX(-1) translateY(0)}}
@keyframes swimL{from{left:calc(100% + 60px)}50%{transform:translateY(-2px)}to{left:-60px}}
.sfish.leap{left:68%;bottom:0;width:44px;height:22px;animation:leapX 9s linear infinite;animation-delay:2s}
.sfish.leap>span{display:block;width:100%;height:100%;animation:leapY 9s cubic-bezier(.3,0,.7,1) infinite;animation-delay:2s;opacity:0}
@keyframes leapX{0%,80%{transform:translateX(0)}92%,100%{transform:translateX(70px)}}
@keyframes leapY{0%,79%{transform:translateY(0) rotate(30deg) scaleX(-1);opacity:0}80%{opacity:1;transform:translateY(0) rotate(30deg) scaleX(-1)}86%{transform:translateY(-46px) rotate(0) scaleX(-1)}92%{transform:translateY(0) rotate(-35deg) scaleX(-1);opacity:1}93%,100%{opacity:0;transform:translateY(4px) rotate(-35deg) scaleX(-1)}}
@media (min-width:900px) and (min-height:560px){.sfish{width:72px;height:36px}.sf2{width:52px;height:26px}.sf3{width:64px;height:32px}.sfish.leap{width:58px;height:29px}@keyframes leapY{0%,79%{transform:translateY(0) rotate(30deg) scaleX(-1);opacity:0}80%{opacity:1;transform:translateY(0) rotate(30deg) scaleX(-1)}86%{transform:translateY(-70px) rotate(0) scaleX(-1)}92%{transform:translateY(0) rotate(-35deg) scaleX(-1);opacity:1}93%,100%{opacity:0;transform:translateY(4px) rotate(-35deg) scaleX(-1)}}}
@media (prefers-reduced-motion:reduce){.sfish,.sfish.leap>span{animation:none!important}.sfish.leap{display:none}.sf1{left:22%}.sf2{left:58%}.sf3{left:78%}}
.seafish .fishsvg .w{fill:var(--paper)}.seafish .fishsvg .k{fill:var(--ink);stroke:none}

/* the harbour scene: a side-on ink panorama you walk along */
.hscene{position:relative;border:2.5px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden;margin-bottom:6px}
.hscroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{display:none}
.hworld{display:block;height:clamp(250px,calc(100vh - var(--dock,250px) - 180px),400px);width:auto;fill:none;stroke:var(--line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hworld .w{fill:var(--paper)}.hworld .k{fill:var(--ink);stroke:none}
.hworld .hit{fill:transparent;stroke:none}
.hworld text{stroke:none;fill:var(--ink)}
.hsign text{font:italic 900 14px var(--display)}
.hboard text{font:800 9.5px var(--ui);fill:var(--paper)}
.hchalk{font:italic 400 12px var(--display);fill:var(--soft)!important}
.hstop{cursor:pointer;outline:none}
.hstop:focus-visible .hit{stroke:var(--line);stroke-width:2;stroke-dasharray:6 6}
.hstop .hsign{transform-box:fill-box;transform-origin:50% 0;transition:transform .3s var(--spring)}
.hstop:active .hsign{transform:rotate(-6deg)}
@media (hover:hover) and (pointer:fine){.hstop:hover .hsign{transform:rotate(4deg) scale(1.06)}.hstop:hover .hsign rect{stroke-width:2.6}}
.smoke{animation:smoke 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes smoke{50%{transform:translate(3px,-3px) scale(1.05);opacity:.6}}
.hflag{transform-box:fill-box;transform-origin:0 50%;animation:flap .7s ease-in-out infinite alternate}
.hlamp,.hswing{transform-box:fill-box;transform-origin:50% 0;animation:swing 2.6s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.hboat{animation:bob 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.hwaves path{animation:pw 4s linear infinite}.hwaves path+path{animation-duration:6s;animation-direction:reverse}
.hnav{position:absolute;bottom:10px;height:40px;display:inline-flex;align-items:center;gap:4px;padding:0 12px;border:2.5px solid var(--line);border-radius:999px;background:var(--paper);box-shadow:3px 4px 0 var(--ink);font:800 13px var(--ui);color:var(--ink);transition:transform .25s var(--spring);z-index:2}
.hnav span{font:900 22px/1 var(--display)}
.hnav.prev{left:8px}.hnav.next{right:8px}
.hnav:active{transform:scale(1.08,.9)}
.hnav[hidden]{display:none}
@media (min-width:900px) and (min-height:560px){.hworld{height:clamp(300px,calc(100vh - var(--dock,230px) - 150px),560px)}}
@media (prefers-reduced-motion:reduce){.smoke,.hflag,.hlamp,.hswing,.hboat,.hwaves path,.hbubble{animation:none!important}.hscroll{scroll-behavior:auto}}
.hbeam{animation:beam 3s ease-in-out infinite}@keyframes beam{50%{opacity:.1}}
@media (prefers-reduced-motion:reduce){.hbeam{animation:none}}
.hcat{transform-box:fill-box;transform-origin:50% 100%;animation:catb 4s ease-in-out infinite}@keyframes catb{50%{transform:scale(1.03,.97)}}
@media (prefers-reduced-motion:reduce){.hcat{animation:none}}

/* the harbour sky: clouds drift and wrap, gulls fly across flapping, the sun's rays turn and its beams shimmer */
.hcloud{animation:hdrift 150s linear infinite}
@keyframes hdrift{from{transform:translateX(-130px)}to{transform:translateX(1410px)}}
.hgull{animation:hfly 70s linear infinite}
@keyframes hfly{from{transform:translateX(-60px)}to{transform:translateX(1340px)}}
.hglide{animation:hglide 9s ease-in-out infinite}
@keyframes hglide{0%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}65%{transform:translateY(6px)}}
.hrays{transform-box:view-box;transform-origin:120px 58px;animation:hrays 40s linear infinite}
@keyframes hrays{to{transform:rotate(360deg)}}
.hsun-rays{animation:hbeams 6s ease-in-out infinite}
@keyframes hbeams{50%{opacity:.02}}
@media (prefers-reduced-motion:reduce){.hcloud,.hgull,.hglide,.hrays,.hsun-rays{animation:none!important}}

/* the tavern bar: the scene fills the room, and the one you're talking to speaks in a bubble floating just under them */
.barroom{position:relative;border:2.5px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden;min-height:260px}
.barscene{position:absolute;inset:0;width:100%;height:100%;display:block;fill:none;stroke:var(--line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.barscene .w{fill:var(--paper)}.barscene .hit{fill:transparent;stroke:none}
.barscene text{stroke:none}
.patron{cursor:pointer;outline:none}
.patron .bust{transition:transform .35s var(--spring)}
.patron:focus-visible .hit{stroke:var(--line);stroke-width:3;stroke-dasharray:8 8}
@media (hover:hover) and (pointer:fine){.patron:not(.sel):hover .bust{transform:translateY(-6px)}}
.talk{position:absolute;left:8px;top:150px;width:max-content;min-width:min(300px,calc(100% - 16px));max-width:calc(100% - 16px);border:2.5px solid var(--line);border-radius:20px;box-shadow:5px 6px 0 var(--ink);background:var(--paper);padding:14px 16px;display:grid;gap:8px;justify-items:start;z-index:2;animation:pop-in .4s var(--spring) both;transform-origin:var(--ax,50%) 0}
.talk::before{content:"";position:absolute;top:-12px;left:calc(var(--ax,50%) - 10px);width:18px;height:18px;background:var(--paper);border-left:2.5px solid var(--line);border-top:2.5px solid var(--line);transform:rotate(45deg)}
.talk .say{font:italic 400 16px/1.35 var(--display)}
.talk .who{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:4px 6px}
.talk .who b{font:italic 900 17px/1.2 var(--display);margin:0 2px 0 0}
.talk .who .chipc{margin:0}
/* the bubble is as wide as the name and its craft chips on one line (300px at least); the quote and terms wrap to fit it */
.talk .say,.talk .terms{width:0;min-width:100%}
.talk>*{margin:0}
.talk .terms{font-size:12.5px;color:var(--soft)}
.talk .terms b{color:var(--ink)}
.talk .buy{justify-self:start;padding:8px 16px;font-size:14px}
.talk.quiet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:italic 400 16px var(--display);text-align:center}
.talk.quiet::before{display:none}
@media (prefers-reduced-motion:reduce){.talk{animation:none}}
.bldtab{min-height:32px}
.bldtab .hic{width:13px;height:13px;margin:0 -1px 0 -3px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* the top strip: chips with small ink icons, the log and pause on the right */
.bar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-bottom:14px}
.bar .stats{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.bar .acts{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.stat{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border:2px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:800 12px var(--ui);white-space:nowrap}
.stat b{font:italic 900 17px/1 var(--display)}
.stat small{font:800 11.5px var(--ui);color:var(--soft)}
.stat.day{background:var(--ink);color:var(--paper);font:italic 400 14px var(--display)}
.stat.day b{font-size:18px}
button.stat{cursor:pointer;transition:transform .22s var(--spring)}
button.stat:active{transform:scale(1.06,.9)}
.stat.bump b{display:inline-block;animation:bump .45s var(--spring)}
.sic{width:16px;height:16px;flex:none;fill:none;stroke:var(--line);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sic .w{fill:var(--paper)}.sic .k{fill:var(--ink);stroke:none}
.hullst .sic{fill:var(--ink);stroke:none;width:14px;height:14px}
.hmeter{width:30px;height:8px;border:1.6px solid var(--line);border-radius:5px;overflow:hidden;display:inline-block;margin-left:2px}
.hmeter i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--ink) 0 1.6px,var(--paper) 1.6px 3.6px);border-right:1.6px solid var(--line)}
.logbtn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border:2px solid var(--line);border-radius:999px;background:var(--paper);font:800 13px var(--ui);color:var(--ink);transition:transform .22s var(--spring)}
.logbtn:active{transform:scale(1.06,.9)}
.bar .pausebtn{margin-left:0}
/* phones: icons and numbers only, so the strip fits on one line */
@media (max-width:520px){.stat small,.hmeter,.logbtn span{display:none}.stat{padding:0 8px}.logbtn{width:34px;padding:0;justify-content:center}}
/* small phones, with health and a creel aboard: tighter pills so the strip still fits on one line */
@media (max-width:430px){.bar{gap:4px}.bar .stats,.bar .acts{gap:3px}.stat{padding:0 5px;gap:2px}.stat b{font-size:16px}.stat.day{padding:0 7px}.stat.day b{font-size:16px}.sic{width:14px;height:14px}.bar .logbtn,.bar .pausebtn{width:32px;height:32px}}
@media (hover:hover) and (pointer:fine){button.stat:hover,.logbtn:hover{transform:translateY(-2px)}}
/* phones: a tighter word at the bar so the hands stay in view above the hold */
@media (max-width:520px){.talk{padding:12px;gap:8px}.talk .who{gap:4px 5px}.talk .who b{font-size:16px}.talk .who .chipc{padding:0 5px 0 3px}.talk .say{font-size:15px}.talk .terms{display:none}.tavern .m-head{margin-bottom:8px}}
.portrait.ghost{border-style:dashed}
/* the market stall: the seller behind the table with their bubble beside them, and the goods out on the table below */
.stall{position:relative;border:2.5px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.stallwall{position:absolute;left:0;top:0;width:100%;height:200px;pointer-events:none}
.stallsign{position:absolute;z-index:3;left:10px;top:7px;transform:rotate(-2deg);margin:0;background:var(--paper);border:2.5px solid var(--line);border-radius:8px;box-shadow:3px 3px 0 var(--ink);padding:2px 12px;font-size:17px;white-space:nowrap}
.ghost.more{position:absolute;z-index:3;right:10px;top:6px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:12.5px;border-radius:12px;line-height:1.2}
.ghost.more .cost{display:inline-flex;align-items:center;gap:2px}
.stalltop{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:16px;padding:46px 10px 0}
.seller{flex:none;width:108px;height:94px}
.seller svg{display:block;width:100%;height:100%}
.stall .talk{position:relative;left:auto;top:auto;flex:1 1 auto;width:auto;min-width:0;max-width:none;align-self:flex-end;margin:0 0 10px;gap:6px;padding:10px 12px}
.stall .talk::before{top:auto;bottom:34px;left:-12px;border-top:0;border-bottom:2.5px solid var(--line)}
.stall .talk .say{font-size:14px}
.stall .talk .who b{font-size:15.5px}
.stall .talk .desc{width:0;min-width:100%;font-size:12.5px;line-height:1.35}
.stall .talk .buy{padding:7px 12px;font-size:13.5px}
.stall .talk.quiet{transform:none;text-align:left}
.table{position:relative;z-index:2;flex:1;border-top:3px solid var(--line);padding:16px 10px 10px;background:var(--paper) repeating-linear-gradient(180deg,transparent 0 27px,rgba(0,0,0,.14) 27px 28px)}
.goods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:640px;margin:0 auto}
.good{position:relative;background:none;border:0;padding:0 0 12px;display:flex;flex-direction:column;align-items:stretch;cursor:grab;min-width:0;touch-action:none;-webkit-user-select:none;user-select:none}
.good.dragging{opacity:.35}
.good .o-icon{width:100%;height:auto;aspect-ratio:1;padding:16%;border-radius:14px;background:var(--paper);transition:transform .35s var(--spring),translate .35s var(--spring)}
.good .ptag{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:1;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);padding:0 8px 0 5px;font-weight:800;font-size:13px;line-height:22px;transition:translate .35s var(--spring)}
.good .ptag .sic{width:13px;height:13px}
.good.sel .o-icon,.good.sel .ptag{translate:0 -8px}
.good.sel .ptag{background:var(--ink);color:var(--paper)}.good.sel .ptag .sic{stroke:var(--paper)}.good.sel .ptag .sic .w{fill:var(--ink)}
.good.gone{cursor:default}.good.gone .o-icon{border:2px dashed var(--soft)}.good.gone .ptag{border-style:dashed;color:var(--soft);padding:0 8px}
.good.in{animation:pop-in .5s var(--spring) both}
@media (hover:hover) and (pointer:fine){.good:not(.sel):not(.gone):hover .o-icon{transform:translateY(-5px)}}
@media (min-width:900px) and (min-height:560px){
  .stallsign{font-size:20px;left:16px;top:8px}.ghost.more{right:16px;top:7px;font-size:14px;padding:6px 14px}
  .stalltop{gap:22px;padding-top:50px}
  .stall .talk{max-width:440px;padding:14px 16px;gap:8px;margin-bottom:24px}
  .stall .talk::before{bottom:74px}
  .stall .talk .say{font-size:16px}.stall .talk .who b{font-size:17px}.stall .talk .desc{font-size:14px}.stall .talk .buy{padding:8px 16px;font-size:14px}
  .goods{gap:28px;max-width:600px}
  body.desk .good .o-icon,.good .o-icon{width:100%;height:auto;padding:16%;border-radius:18px}
  .good .ptag{font-size:14px;line-height:24px;padding:0 10px 0 6px}
  .table{padding:22px 16px 18px}}
@media (prefers-reduced-motion:reduce){.good .o-icon,.good .ptag{transition:none}}
/* the shipwright's yard: the market stall's layout, with a workbench of fittings and the repair mallet */
.stall .talk .acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bench .goods{display:flex;justify-content:center;gap:10px}
.bench .good{flex:0 0 calc((100% - 30px) / 4)}
.fitgood .o-icon .gl{width:100%;height:100%;display:block;stroke:var(--line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.fitgood .o-icon .gl .w{fill:var(--paper)}.fitgood .o-icon .gl .k{fill:var(--ink);stroke:none}
.yard .table{background:var(--paper) repeating-linear-gradient(180deg,transparent 0 21px,rgba(0,0,0,.14) 21px 22px)}
@media (min-width:900px) and (min-height:560px){.bench .goods{gap:28px}.bench .good{flex-basis:calc((100% - 84px) / 4)}}
/* the docks: the fishmonger at their crates, people waiting in the corner, your catch on the crates */
.pchips{position:absolute;z-index:3;right:10px;top:6px;display:flex;gap:6px}
.pchip{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:var(--paper);padding:0;overflow:hidden;cursor:pointer}
.pchip svg{display:block;width:100%;height:100%}
.pchip.on{border-width:3px;box-shadow:2px 2px 0 var(--ink)}
.docksec .stalltop{padding-top:52px}
.crates{background:var(--paper) repeating-linear-gradient(90deg,transparent 0 58px,rgba(0,0,0,.16) 58px 60px)}
.fishgood .o-icon{padding:10%}
.fishgood .o-icon svg{width:100%;height:100%;display:block}
.fishgood .want{position:absolute;top:-7px;right:-7px;background:var(--ink);color:var(--paper);border-radius:999px;font-size:11px;font-weight:800;padding:1px 5px;line-height:15px}
.cratenote{text-align:center;margin:8px 12px;font-size:14px}
@media (min-width:900px) and (min-height:560px){.pchips{right:16px;top:8px}.pchip{width:44px;height:44px}.docksec .stalltop{padding-top:58px}}
/* more than four fish: the crates scroll sideways instead of stacking, so the dock never grows past the hold */
.crates .goods{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-top:10px;margin-top:-10px;max-width:none}
.crates .goods::-webkit-scrollbar{display:none}
.crates .good{flex:0 0 calc((100% - 30px) / 4)}
@media (min-width:900px) and (min-height:560px){.crates .goods{gap:28px;max-width:600px}.crates .good{flex-basis:calc((100% - 84px) / 4)}}
body.desk .crewrow .o-icon,.crewrow .o-icon{width:44px;height:44px;padding:2px;border-radius:50%}
/* the ship card on big screens: the ship as the hero with its fittings pinned to it, numbers along the top, crew along the bottom */
.sheet.shipview{max-width:1080px;width:100%;position:relative;padding:28px 32px 26px;gap:14px}
.sc-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border:2.5px solid var(--line);border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink)}
.sc-x svg{width:16px;height:16px;fill:none;stroke:var(--line);stroke-width:2.6;stroke-linecap:round}
.sc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding-right:56px}
.sc-title h2{font-size:44px;line-height:1}
.sc-title .soft{margin-top:6px;font-size:14px}
.sc-trait{margin-top:10px;font-size:15px;max-width:420px}
.sc-stats{display:flex;gap:10px}
.sc-stat{border:2.5px solid var(--line);border-radius:16px;padding:8px 14px 10px;min-width:96px;display:grid;gap:2px;align-content:start}
.sc-stat b{font:italic 900 30px/1 var(--display)}
.sc-stat b small{font-size:16px}
.sc-stat .soft{font-size:12px}
.sc-lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.sc-bar{display:block;height:8px;border:2px solid var(--line);border-radius:5px;overflow:hidden;margin-top:4px}
.sc-bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--ink) 0 1.6px,var(--paper) 1.6px 3.6px);border-right:2px solid var(--line)}
.sc-hero{position:relative;display:grid;grid-template-columns:1fr minmax(300px,min(480px,calc(100vh - 510px))) 1fr;align-items:center;gap:40px;padding:8px 0 4px;border-top:2.5px solid var(--line);border-bottom:2.5px solid var(--line);background:var(--paper) radial-gradient(rgba(0,0,0,.12) 1px,transparent 1.4px) 0 0/16px 16px}
.sc-ship{position:relative;z-index:1}
.sc-art{display:block;width:100%;height:auto}
.sc-waves{display:block;width:120%;height:22px;margin:-14px -10% 0;fill:none;stroke:var(--line);stroke-width:2;stroke-linecap:round}
.sc-fits{display:grid;gap:26px;position:relative;z-index:2}
.sc-fits.left{justify-items:end}.sc-fits.right{justify-items:start}
.sc-fit{background:var(--paper);border:2.5px solid var(--line);border-radius:16px;box-shadow:4px 4px 0 var(--ink);padding:10px 12px;max-width:250px;display:grid;gap:4px}
.sc-fit.empty{border-style:dashed;box-shadow:none}
.sc-fithead{display:flex;align-items:center;gap:8px}
.sc-fithead b{font:italic 900 18px/1.1 var(--display)}
.sc-fit.empty .sc-fithead b{color:var(--soft)}
.sc-fit .gl,.sc-fit .fitnone{width:30px;height:30px;flex:none;stroke:var(--line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.sc-fit .gl .w{fill:var(--paper)}.sc-fit .gl .k{fill:var(--ink);stroke:none}
.sc-fit .fitnone{border:2px dashed var(--soft);border-radius:8px}
.sc-fit p{font-size:13px;line-height:1.35}
.sc-fit.empty p{color:var(--soft)}
.sc-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;fill:none;stroke:var(--line);stroke-width:2}
.sc-lines circle{fill:var(--paper);stroke-width:2.5}
.sc-note{font-size:12.5px;text-align:center;margin-top:-4px}
.sc-foot{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
.sc-crew,.sc-picks{display:grid;gap:10px;align-content:start}
.sc-hands{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.sc-hand{border:2px solid var(--line);border-radius:16px;padding:10px;display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start;position:relative}
.sc-hand.empty{border-style:dashed;color:var(--soft)}
.sc-face{width:52px;height:52px;border-radius:50%;border:2px solid var(--line);overflow:hidden;display:block}
.sc-face svg{display:block;width:100%;height:100%}
.sc-hand.empty .sc-face{border-style:dashed;border-color:var(--soft)}
.sc-who{display:grid;gap:3px;min-width:0}
.sc-who b{font:italic 900 17px/1.15 var(--display)}
.sc-who .soft{font-size:12px}
.sc-crafts{display:flex;flex-wrap:wrap;gap:3px}
.sc-crafts .chipc{margin:0}
.sc-hand .linkbtn{grid-column:2;justify-self:start;font-size:12px;padding:0}
.sc-picks .perks{padding-left:16px}
/* the chart's water: bobbing wave marks, and ripples lapping the islands' shores */
.map .wv{fill:none;stroke:var(--line);stroke-width:1.5;stroke-linecap:round;opacity:.45;animation:wvbob 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes wvbob{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-2px)}}
.map .shore{fill:none;stroke:var(--line);stroke-width:1.4;stroke-dasharray:3 5;opacity:.55;animation:lap 3.5s linear infinite}
@keyframes lap{to{stroke-dashoffset:-16}}
.map .ripple{fill:none;stroke:var(--line);stroke-width:1.5;stroke-linecap:round;opacity:.5;animation:wvbob 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.map .wv,.map .shore,.map .ripple{animation:none}}
.map .isles .edge path{fill:none;stroke:var(--line);stroke-width:4.4}
.map .isles .land path{fill:var(--paper);stroke:none}
.map .isles .land .hatch{fill:none;stroke:var(--line);stroke-width:1.2;opacity:.5}
/* the fog: a cloud bank with a billowing edge, and wisps drifting through it */
.map .billow{fill:var(--paper);stroke:var(--line);stroke-width:2;stroke-linejoin:round;animation:fogbob 9s ease-in-out infinite}
.map .billow.back{stroke-width:1.4;stroke-dasharray:2 5;stroke-linecap:round;animation-duration:12s;animation-direction:reverse}
.map .fog .wisp{fill:none;stroke:var(--line);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.55;animation:wisp 16s ease-in-out infinite;transform-box:fill-box}
@keyframes wisp{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}
@keyframes fogbob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.map .fog .wisp,.map .billow{animation:none}}
/* the spoils chest: drops in, rattles, bursts open in a shower of coins and jewels, and throws the spoils out */
.chestfx{position:fixed;inset:0;z-index:60;background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;transition:opacity .45s;overflow:hidden}
.chestfx.gone{opacity:0;pointer-events:none}
.chestfx canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.ch-wrap{position:relative;z-index:1;width:min(46vw,220px);transform-origin:50% 100%;animation:chdrop 1.25s both}
.chest{display:block;width:100%;height:auto;overflow:visible}
.ch-lid{transform-box:fill-box;transform-origin:2% 100%;transition:transform .45s var(--spring)}
.chestfx.open .ch-lid{transform:translate(-2px,-6px) rotate(-26deg)}
.chestfx.open .ch-wrap{animation:chpop .55s var(--spring) both}
.ch-rays{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:repeating-conic-gradient(rgba(217,169,58,.28) 0 5deg,transparent 5deg 18deg);-webkit-mask:radial-gradient(circle,#000 0 14%,transparent 50%);mask:radial-gradient(circle,#000 0 14%,transparent 50%);scale:0;opacity:0;transition:scale .7s var(--spring),opacity .3s;animation:raysspin 24s linear infinite}
.chestfx.open .ch-rays{scale:1;opacity:1}
.ch-skip{position:absolute;bottom:16%;left:0;right:0;text-align:center;font:italic 400 16px var(--display);color:var(--soft);animation:fadein .4s 1s both}
.spoil.flying{position:relative;z-index:61}
@keyframes chdrop{0%{transform:translateY(-90vh) rotate(-8deg)}28%{transform:translateY(0) scale(1.2,.78)}38%{transform:translateY(-14px) scale(.92,1.08)}48%{transform:none}58%{transform:rotate(-3deg)}64%{transform:rotate(3deg)}70%{transform:rotate(-4deg) scale(1.02)}76%{transform:rotate(4deg) scale(1.04)}82%{transform:rotate(-5deg) scale(1.06,1.02)}88%{transform:rotate(5deg) scale(1.08,1.02)}94%{transform:rotate(-2deg) scale(1.1,.96)}100%{transform:scale(1.12,.92)}}
@keyframes chpop{0%{transform:scale(1.12,.92)}40%{transform:translateY(-12px) scale(.94,1.12)}100%{transform:none}}
@keyframes raysspin{to{rotate:360deg}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* the victory card: a stamped banner in a burst of ink, popping stars, gold counting up, lines dropping in one by one */
.result.win{text-align:center;align-items:center;overflow:hidden}
.vic-top{position:relative;display:grid;place-items:center;padding:24px 0 14px;width:100%}
.vic-head{position:relative;z-index:1;font-size:46px;line-height:1;background:var(--ink);color:var(--paper);padding:6px 22px 10px;border-radius:14px;transform:rotate(-4deg);box-shadow:5px 5px 0 var(--paper),7px 7px 0 var(--ink);animation:stamp .55s .1s cubic-bezier(.2,1.6,.4,1) both}
.vic-burst{position:absolute;left:50%;top:50%;width:240px;height:144px;margin:-72px 0 0 -120px;fill:none;stroke:var(--line);stroke-width:3.4;stroke-linecap:round;animation:vburst .6s .35s ease-out both}
.vic-star{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;fill:var(--paper);stroke:var(--line);stroke-width:1.8;stroke-linejoin:round;transform:translate(var(--x),var(--y));animation:vstar .5s calc(.45s + var(--i) * 70ms) var(--spring) both}
.vic-star:nth-of-type(odd){fill:var(--ink)}
.vic-sub{font:italic 400 17px var(--display);animation:vline .4s .55s both}
.vic-gold{display:inline-flex;align-items:center;gap:6px;justify-self:center;align-self:center;font:italic 900 28px var(--display);animation:vline .4s .6s both}
.vic-gold .sic{width:26px;height:26px;stroke-width:1.4}
.vic-gold b.bump{animation:bump .25s var(--spring)}
.result.win .lines p{animation:vline .4s calc(1.4s + var(--i) * 160ms) both}
.result.win #next{animation:vbtn .45s calc(1.6s + var(--i) * 160ms) var(--spring) both}
@keyframes stamp{0%{transform:scale(2.4) rotate(-14deg);opacity:0}60%{transform:scale(.92) rotate(-3deg);opacity:1}100%{transform:rotate(-4deg)}}
@keyframes vburst{0%{transform:scale(.4);opacity:0}40%{opacity:1}100%{transform:scale(1.15);opacity:.9}}
@keyframes vstar{0%{transform:translate(0,0) scale(0) rotate(-90deg)}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(0)}}
@keyframes vline{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vbtn{from{opacity:0;transform:scale(.7,1.2)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vic-head,.vic-burst,.vic-star,.vic-sub,.vic-gold,.result.win .lines p,.result.win #next{animation:none}}
/* something new in the hold: it drops in with a squash; an upgrade spins up big. An ink burst and a rising label mark it. */
.item.gain{animation:gain .6s var(--spring)}
.item.upgain{animation:upgain .75s var(--spring)}
@keyframes gain{0%{transform:translateY(-26px) scale(.6,1.3);opacity:0}50%{transform:translateY(3px) scale(1.14,.86);opacity:1}75%{transform:scale(.96,1.04)}100%{transform:none}}
@keyframes upgain{0%{transform:none}30%{transform:scale(1.32) rotate(-7deg)}55%{transform:scale(.9) rotate(3deg)}80%{transform:scale(1.04)}100%{transform:none}}
.inkburst{position:fixed;z-index:70;width:100px;height:100px;margin:-50px 0 0 -50px;pointer-events:none}
.inkburst.big{width:150px;height:150px;margin:-75px 0 0 -75px}
.inkburst svg{width:100%;height:100%;fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round;animation:iburst .7s ease-out both}
.inkburst .star{fill:var(--ink);stroke:none}
@keyframes iburst{0%{transform:scale(.3);opacity:0}30%{opacity:1}100%{transform:scale(1.2);opacity:0}}
.floatlbl{position:fixed;z-index:71;transform:translate(-50%,-100%);pointer-events:none;background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:1px 10px;font:italic 900 15px var(--display);white-space:nowrap;animation:floatup 1.2s ease-out both}
.floatlbl.up{background:var(--ink);color:var(--paper);font-size:17px}
@keyframes floatup{0%{transform:translate(-50%,-60%) scale(.6);opacity:0}20%{transform:translate(-50%,-110%) scale(1.08);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-190%);opacity:0}}
@media (prefers-reduced-motion:reduce){.item.gain,.item.upgain{animation:none}}
/* the defeat card: a sign that falls and swings crooked from one nail, a crack inking across it, rain (or bubbles if sunk) behind */
.result.lose{text-align:center;align-items:center;overflow:hidden}
.def-top{position:relative;width:100%;display:grid;place-items:center;padding:30px 0 16px}
.def-fx{position:absolute;inset:-10px 0 0;overflow:hidden;pointer-events:none}
.def-fx i{position:absolute;left:var(--x);top:-20px;width:2px;height:14px;background:var(--ink);border-radius:2px;opacity:.35;transform:rotate(12deg);animation:rain var(--s) var(--d) linear infinite}
.sunk .def-fx i{top:auto;bottom:-14px;width:9px;height:9px;background:none;border:2px solid var(--line);border-radius:50%;transform:none;animation-name:bubble;animation-duration:calc(var(--s) * 2)}
.def-sign{position:relative;z-index:1;transform-origin:14% -18px;animation:defswing 1.6s .1s both}
.def-sign h2{font-size:42px;line-height:1;background:var(--paper);border:3px solid var(--line);border-radius:12px;padding:6px 22px 10px;box-shadow:5px 5px 0 var(--ink)}
.def-nail{position:absolute;left:14%;top:-18px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink)}
.def-nail::after{content:"";position:absolute;left:4px;top:8px;width:2px;height:14px;background:var(--ink)}
.def-crack{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);fill:none;stroke:var(--line);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;animation:crack .35s 1.05s ease-out forwards;pointer-events:none}
.def-sub{font:italic 400 17px var(--display);animation:vline .45s .9s both}
.result.lose .lines p{animation:vline .45s calc(1.25s + var(--i) * 170ms) both}
.result.lose #next{animation:vbtn .45s calc(1.45s + var(--i) * 170ms) var(--spring) both}
@keyframes defswing{0%{transform:translateY(-120px) rotate(0);opacity:0}22%{transform:translateY(0) rotate(0);opacity:1}38%{transform:rotate(16deg)}52%{transform:rotate(-7deg)}66%{transform:rotate(9deg)}78%{transform:rotate(3deg)}88%{transform:rotate(6.5deg)}100%{transform:rotate(5deg)}}
@keyframes crack{to{stroke-dashoffset:0}}
@keyframes rain{from{transform:translateY(0) rotate(12deg)}to{transform:translateY(190px) rotate(12deg)}}
@keyframes bubble{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:.5}100%{transform:translateY(-170px) scale(1.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.def-sign{animation:none;transform:rotate(5deg)}.def-crack{animation:none;stroke-dashoffset:0}.def-fx{display:none}.def-sub,.result.lose .lines p,.result.lose #next{animation:none}}
/* the fight's opening: the enemy sails in from above and you from below, cargo drops in tile by tile, then "Fight!" stamps down */
.battle.intro{animation:jolt .32s .78s both}
.battle.intro .fighter.e,.battle.intro .board[data-side="e"]{animation:fromtop .5s var(--spring) both}
.battle.intro .fighter.p,.battle.intro .board[data-side="p"]{animation:frombot .5s .12s var(--spring) both}
.battle.intro .mid{animation:fadein .3s .55s both}
.battle.intro .board .item{animation:tilein .42s calc(.22s + var(--i,0) * 55ms) var(--spring) both}
.fightcall{position:fixed;left:50%;top:50%;z-index:30;pointer-events:none;transform:translate(-50%,-50%)}
.fightcall span{display:block;font:italic 900 54px/1 var(--display);background:var(--ink);color:var(--paper);padding:8px 26px 12px;border-radius:16px;box-shadow:5px 5px 0 var(--paper),8px 8px 0 var(--ink);animation:fightcall 1.2s .62s both}
@keyframes fromtop{from{transform:translateY(-70px);opacity:0}to{transform:none;opacity:1}}
@keyframes frombot{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
@keyframes tilein{0%{transform:translateY(-18px) scale(.5,1.3);opacity:0}60%{transform:translateY(2px) scale(1.1,.9);opacity:1}100%{transform:none;opacity:1}}
@keyframes fightcall{0%{transform:scale(2.6) rotate(-14deg);opacity:0}16%{transform:scale(.9) rotate(-3deg);opacity:1}24%{transform:rotate(-5deg)}70%{transform:rotate(-5deg);opacity:1}100%{transform:scale(1.7) rotate(-2deg);opacity:0}}
@keyframes jolt{0%,100%{transform:none}20%{transform:translate(-5px,3px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
/* the catch: the fish flops onto the card with a splash and wiggles, its rarity is stamped on, rare fish shine */
.catchcard{text-align:center;align-items:center;overflow:hidden}
.catch{position:relative;padding:14px 0 18px}
.catch .bigfish{position:relative;z-index:1;animation:flop .9s var(--spring) both,wiggle .5s 1s ease-in-out 3}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg) scale(1.03,.97)}75%{transform:rotate(6deg) scale(.97,1.03)}}
.catch-splash{position:absolute;left:50%;top:58%;width:0;height:0}
.catch-splash i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border:2px solid var(--line);border-radius:50% 50% 50% 0;background:var(--paper);transform:rotate(var(--a)) translateY(0);opacity:0;animation:splashout .7s calc(.3s + var(--d)) ease-out both}
@keyframes splashout{0%{transform:rotate(var(--a)) translateY(0) scale(.4);opacity:0}25%{opacity:1}100%{transform:rotate(var(--a)) translateY(-90px) scale(1);opacity:0}}
.catch-rays{position:absolute;left:50%;top:50%;width:260px;height:156px;margin:-78px 0 0 -130px;fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round;animation:vburst .6s .45s ease-out both,raysspin 30s 1s linear infinite}
.rarstamp{position:absolute;z-index:2;right:6%;bottom:6px;font:italic 900 17px var(--display);border:2.5px solid var(--line);border-radius:8px;padding:0 10px 2px;background:var(--paper);transform:rotate(-8deg);animation:stamp .45s .75s cubic-bezier(.2,1.6,.4,1) both}
.catch.r2 .rarstamp{background:var(--ink);color:var(--paper)}
.catch.r1 .rarstamp{border-style:double;border-width:4px}
.newtag{position:absolute;z-index:2;left:8%;top:8px;background:var(--ink);color:var(--paper);font:800 13px var(--ui);border-radius:999px;padding:2px 10px;transform:rotate(6deg);animation:stamp .45s .95s cubic-bezier(.2,1.6,.4,1) both}
.catch-name{animation:vline .4s .6s both}
.catch-note{animation:vline .4s .75s both}
.catch-btn{animation:vbtn .45s .95s var(--spring) both}
@media (prefers-reduced-motion:reduce){.catch .bigfish,.catch-splash i,.catch-rays,.rarstamp,.newtag,.catch-name,.catch-note,.catch-btn{animation:none}.catch-splash{display:none}}
/* renown up: a star medal spins in with the level on it, stars burst off it, the picks are dealt in; the chosen one is stamped */
.perkpick{overflow:hidden}
.rn-up{position:relative;display:grid;place-items:center;height:96px;margin-top:4px}
.rn-medal{width:92px;height:92px;fill:var(--ink);stroke:var(--line);stroke-width:3;stroke-linejoin:round;filter:drop-shadow(4px 4px 0 var(--paper)) drop-shadow(2px 2px 0 var(--ink));animation:medal .8s .05s cubic-bezier(.2,1.5,.4,1) both}
.rn-medal text{fill:var(--paper);stroke:none;font:italic 900 34px var(--display)}
@keyframes medal{0%{transform:scale(0) rotate(-200deg)}70%{transform:scale(1.15) rotate(12deg)}100%{transform:scale(1) rotate(0)}}
.rn-bits{position:absolute;left:50%;top:50%;width:0;height:0}
.rn-bits i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;opacity:0;transform:rotate(var(--a)) translateY(0);animation:bitout .8s calc(.45s + var(--d)) ease-out both}
.rn-bits svg{width:100%;height:100%;fill:var(--paper);stroke:var(--line);stroke-width:1.4;stroke-linejoin:round}
.rn-bits i:nth-child(even) svg{fill:var(--ink)}
@keyframes bitout{0%{transform:rotate(var(--a)) translateY(0) scale(.3);opacity:0}25%{opacity:1}100%{transform:rotate(var(--a)) translateY(-78px) scale(1) rotate(180deg);opacity:0}}
.rn-ribbon{justify-self:center;align-self:center;background:var(--ink);color:var(--paper);font:800 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 12px;animation:stamp .45s .6s cubic-bezier(.2,1.6,.4,1) both}
.perkpick{text-align:left}
.perkpick .rn-ribbon,.perkpick .rn-title{text-align:center}
.rn-title{animation:vline .4s .7s both}
.rn-sub{animation:vline .4s .8s both}
.perkpick .pick{animation:deal .55s calc(.95s + var(--i) * 140ms) cubic-bezier(.3,1.4,.5,1) both;transition:transform .35s var(--spring),opacity .3s}
@keyframes deal{0%{transform:translateY(60px) rotate(calc((var(--i) - 1) * 9deg)) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.perkpick .pick.chosen{animation:chosen .6s cubic-bezier(.2,1.5,.4,1) both;position:relative;z-index:1}
@keyframes chosen{0%{transform:none}35%{transform:scale(1.08) rotate(-2deg)}100%{transform:scale(1.03)}}
.perkpick .pick.chosen{background:var(--ink);color:var(--paper)}
.perkpick .pick.chosen .soft{color:var(--paper)}
.perkpick .pick.chosen .gl{stroke:var(--paper)}.perkpick .pick.chosen .gl .w{fill:var(--ink)}
.perkpick .pick.dropped{animation:dropaway .45s ease-in both}
@keyframes dropaway{to{transform:translateY(40px) rotate(4deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.rn-medal,.rn-bits i,.rn-ribbon,.rn-title,.rn-sub,.perkpick .pick,.perkpick .pick.chosen,.perkpick .pick.dropped{animation:none}.rn-bits{display:none}}
/* a new hand flying from the bar into the crew strip */
.hirefly{position:fixed;z-index:72;border:2.5px solid var(--line);border-radius:50%;background:var(--paper);overflow:hidden;pointer-events:none;box-shadow:3px 3px 0 var(--ink)}
.hirefly svg{display:block;width:100%;height:100%}
.cb-c.land{animation:land2 .45s var(--spring)}
.cb-cr.bump{animation:bump .45s var(--spring)}
/* a fitting going on: the ship big on a paper veil, the fitting flying onto its part, hammer sparks, "Fitted!" */
.fitfx{position:fixed;inset:0;z-index:74;background:rgba(255,255,255,.92);display:grid;place-items:center;align-content:center;gap:14px;cursor:pointer;transition:opacity .4s;animation:fadein .3s both}
.fitfx.gone{opacity:0;pointer-events:none}
.ff-ship{width:min(70vw,340px);animation:shipin .5s var(--spring) both}
.ff-ship.jolt{animation:jolt .18s}
.ff-art{display:block;width:100%;height:auto}
.ff-cap{font:italic 400 17px var(--display);text-align:center;opacity:0;transition:opacity .3s}
.ff-cap b{font-weight:900}
.fitfx.done .ff-cap{opacity:1}
.ff-glyph{position:fixed;z-index:75;background:var(--paper);border:2.5px solid var(--line);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:5px;pointer-events:none}
.ff-glyph .gl{width:100%;height:100%;display:block;stroke:var(--line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ff-glyph .gl .w{fill:var(--paper)}.ff-glyph .gl .k{fill:var(--ink);stroke:none}
@keyframes shipin{from{transform:translateY(30px) scale(.8);opacity:0}to{transform:none;opacity:1}}
/* a sale: a puff of ink where the cargo was, coins flying up into the purse */
.flycoin{position:fixed;z-index:80;pointer-events:none;width:22px;height:22px}
.flycoin .sic{width:22px;height:22px;stroke-width:1.6;background:var(--paper);border-radius:50%}
.sellpuff{position:fixed;z-index:79;width:0;height:0;pointer-events:none}
.sellpuff i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border:2.5px solid var(--line);border-radius:50%;background:var(--paper);transform:rotate(var(--a)) translateY(0) scale(.3);animation:puff .6s ease-out both}
@keyframes puff{0%{transform:rotate(var(--a)) translateY(0) scale(.3);opacity:1}100%{transform:rotate(var(--a)) translateY(-34px) scale(1.1);opacity:0}}
#goldst.bump b{display:inline-block;animation:bump .3s var(--spring)}
/* crossing into a new sea: letterbox bars, a ship driving through swell and rain, fog or lightning, the sea's name slammed on */
.seacross{position:fixed;inset:0;z-index:90;background:var(--paper);overflow:hidden;cursor:pointer;animation:fadein .35s both}
.seacross.out{opacity:0;transition:opacity .45s}
.sx-bar{position:absolute;left:0;right:0;height:0;background:var(--ink);z-index:5;transition:height .55s cubic-bezier(.7,0,.3,1)}
.sx-bar.top{top:0;animation:barin .6s .1s cubic-bezier(.3,.9,.4,1) both}.sx-bar.bot{bottom:0;animation:barin .6s .1s cubic-bezier(.3,.9,.4,1) both}
@keyframes barin{from{height:0}to{height:11vh}}
.seacross.close .sx-bar{animation:none;height:51vh}
.sx-sea{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.sx-sea .w{fill:var(--paper);stroke:var(--line);stroke-width:2.4;stroke-linejoin:round}
.sx-w1 .w{stroke-width:1.6;opacity:.6}
.sx-horizon{stroke:var(--line);stroke-width:1.6;opacity:.5}
.sx-w1{--len:80px;animation:swell 7s linear infinite}
.sx-w2{--len:100px;animation:swell2 3.2s linear infinite}
.sx-w3{--len:120px;animation:swell3 2.2s linear infinite}
.deep .sx-w2{--len:120px}.deep .sx-w3{--len:150px}
@keyframes swell{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--len)))}}
@keyframes swell2{0%{transform:translate(0,0)}50%{transform:translate(calc(-.5 * var(--len)),-6px)}100%{transform:translate(calc(-1 * var(--len)),0)}}
@keyframes swell3{0%{transform:translate(0,0)}50%{transform:translate(calc(-.5 * var(--len)),-10px)}100%{transform:translate(calc(-1 * var(--len)),0)}}
.sx-ship{animation:sxsail 4.6s cubic-bezier(.4,0,.6,1) both;transform-box:fill-box;transform-origin:50% 80%}
@keyframes sxsail{0%{transform:translate(-300px,6px) rotate(6deg)}14%{transform:translate(-200px,-8px) rotate(-9deg)}28%{transform:translate(-110px,8px) rotate(8deg)}42%{transform:translate(-40px,-10px) rotate(-10deg)}56%{transform:translate(10px,8px) rotate(7deg)}70%{transform:translate(60px,-8px) rotate(-8deg)}84%{transform:translate(140px,6px) rotate(6deg)}100%{transform:translate(320px,-4px) rotate(-4deg)}}
.deep .sx-ship{animation-name:sxsaildeep}
@keyframes sxsaildeep{0%{transform:translate(-300px,10px) rotate(10deg)}14%{transform:translate(-200px,-16px) rotate(-15deg)}28%{transform:translate(-110px,14px) rotate(13deg)}42%{transform:translate(-40px,-18px) rotate(-16deg)}56%{transform:translate(10px,14px) rotate(12deg)}70%{transform:translate(60px,-14px) rotate(-13deg)}84%{transform:translate(140px,10px) rotate(9deg)}100%{transform:translate(320px,-6px) rotate(-6deg)}}
.sx-rain{position:absolute;inset:0;z-index:1;pointer-events:none}
.sx-rain i{position:absolute;left:var(--x);top:-30px;width:2px;height:22px;background:var(--ink);opacity:.35;transform:rotate(18deg);animation:sxrain var(--s) var(--d) linear infinite}
@keyframes sxrain{from{transform:translate(0,0) rotate(18deg)}to{transform:translate(-36vh,115vh) rotate(18deg)}}
.sx-bolt{fill:var(--ink);opacity:0;animation:bolt 4.6s both}
@keyframes bolt{0%,30%{opacity:0}31%,33%{opacity:1}34%,52%{opacity:0}53%,54.5%{opacity:1}56%,100%{opacity:0}}
.seacross.deep{animation:fadein .35s both,flash 4.6s both}
@keyframes flash{0%,30%{filter:none}31%,32%{filter:invert(1)}33%,52%{filter:none}53%,54%{filter:invert(1)}55%,100%{filter:none}}
.sx-fog{position:absolute;inset:0;z-index:2;pointer-events:none}
.sx-fog span{position:absolute;bottom:calc(14vh + var(--i) * 6vh);left:0;width:70vw;height:18vh;border-radius:50%;background:var(--paper);border:2px dashed var(--line);opacity:0;animation:fogroll 4.6s calc(var(--i) * .35s) ease-in-out both}
@keyframes fogroll{0%{transform:translateX(110vw) scale(.9);opacity:0}25%{opacity:.92}70%{opacity:.92}100%{transform:translateX(-80vw) scale(1.15);opacity:0}}
.sx-title{position:absolute;inset:0;z-index:4;display:grid;place-content:center;text-align:center;pointer-events:none}
.sx-kicker{font:800 13px var(--ui);letter-spacing:.2em;text-transform:uppercase;animation:vline .5s 1.5s both}
.sx-name{font:italic 900 clamp(46px,13vw,110px)/1 var(--display);background:var(--paper);padding:4px 20px 12px;border:3.5px solid var(--line);border-radius:18px;box-shadow:7px 7px 0 var(--ink);margin-top:10px;animation:seaname 3.2s 1.7s both}
@keyframes seaname{0%{transform:scale(3) rotate(-10deg);opacity:0}9%{transform:scale(.94) rotate(-2deg);opacity:1}13%{transform:rotate(-3deg)}85%{transform:rotate(-3deg) scale(1.02);opacity:1}100%{transform:scale(1.1) rotate(-3deg);opacity:0}}
.seacross.still *{animation:none!important}.seacross.still .sx-bar{height:11vh}.seacross.still .sx-rain,.seacross.still .sx-fog,.seacross.still .sx-bolt{display:none}
/* Show me more: the old goods are swept off the table while the seller ducks, then the new ones thump down one by one */
.stall.sweeping .good{animation:sweep .42s cubic-bezier(.5,0,.8,.5) both}
.stall.sweeping .good:nth-child(2){animation-delay:50ms}.stall.sweeping .good:nth-child(3){animation-delay:100ms}.stall.sweeping .good:nth-child(4){animation-delay:150ms}
@keyframes sweep{0%{transform:none}30%{transform:translate(-6px,-10px) rotate(-6deg)}100%{transform:translate(120px,40px) rotate(40deg);opacity:0}}
.stall.sweeping .seller{animation:duck .5s cubic-bezier(.5,0,.6,1) both}
@keyframes duck{0%{transform:none}35%{transform:translateY(-6px)}100%{transform:translateY(40%) scale(1,.92)}}
.seller.popup{animation:popup .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes popup{0%{transform:translateY(40%) scale(1,.92)}100%{transform:none}}
.good.thump{animation:thump .5s cubic-bezier(.4,0,.6,1) both}
@keyframes thump{0%{transform:translateY(-140px) rotate(-10deg);opacity:0}55%{transform:translateY(0) rotate(0);opacity:1}68%{transform:scale(1.14,.82)}84%{transform:scale(.96,1.05) translateY(-4px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.stall.sweeping .good,.stall.sweeping .seller,.seller.popup,.good.thump{animation:none}}
/* hull repairs: the damage card run backwards, planks knocked into place by a mallet */
.hullcard.repair .hc-ship{animation:none}
.hullcard.repair{position:fixed}
.planks i.come{animation:plankOn .35s cubic-bezier(.3,1.6,.5,1) calc(.55s + var(--d)) both}
@keyframes plankOn{0%{transform:translateY(-14px) scale(1,.4);opacity:0;background:var(--ink)}60%{transform:translateY(2px) scale(1.15,.9);opacity:1;background:var(--ink)}100%{transform:none;background:var(--paper)}}
.hc-mallet{position:absolute;right:12px;top:-14px;width:34px;height:34px;fill:none;stroke:var(--line);stroke-width:2;stroke-linejoin:round;transform-origin:20% 90%;transform:rotate(18deg)}
.hc-mallet .w{fill:var(--paper)}
.hc-mallet.knock{animation:knock .16s ease-in}
@keyframes knock{0%{transform:rotate(18deg)}50%{transform:rotate(-26deg)}100%{transform:rotate(18deg)}}
.hullcard.repair .hc-loss{animation:hcLoss .5s var(--spring) .35s both}
@media (prefers-reduced-motion:reduce){.planks i.come{animation:none}.hc-mallet.knock{animation:none}}
/* a fish sale: fish arcing from the crates into the fishmonger's arms */
.flyfish{position:fixed;z-index:78;width:58px;height:29px;pointer-events:none}
.flyfish svg{width:100%;height:100%;display:block;background:none}
.flyfish .w{fill:var(--paper)}.flyfish .k{fill:var(--ink);stroke:none}
.seller.catchit{animation:catchit .3s var(--spring)}
@keyframes catchit{0%{transform:none}40%{transform:translateY(5px) scale(1.04,.95)}100%{transform:none}}
/* the bandits' card game */
.bandits{display:grid;gap:12px}
.bd-top{display:flex;align-items:flex-end;gap:12px}
.bd-face{flex:none;width:96px;height:84px;border-bottom:2.5px solid var(--line)}
.bd-face svg{display:block;width:100%;height:100%}
.bd-face.big{width:120px;height:104px;margin:0 auto;border:0}
.bandits .talk.bd-talk{position:relative;left:auto;top:auto;width:auto;min-width:0;max-width:none;flex:1;margin:0 0 8px;padding:10px 12px;animation:none}
.bandits .talk.bd-talk::before{top:auto;bottom:18px;left:-12px;border-top:0;border-bottom:2.5px solid var(--line)}
.bandits .talk .say{font-size:15px;width:auto;min-width:0}
.bd-score{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bd-score>div{border:2.5px solid var(--line);border-radius:14px;padding:6px 8px;display:grid}
.bd-score b{font:italic 900 24px/1.1 var(--display)}
.bd-score .bd-mine{background:var(--ink);color:var(--paper)}.bd-score .bd-mine .sc-lbl{color:var(--paper)}
.bd-score b.bump{display:inline-block;animation:bump .3s var(--spring)}
.bd-bar{height:10px;border:2px solid var(--line);border-radius:6px;overflow:hidden}
.bd-bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--ink) 0 2px,var(--paper) 2px 4.5px);border-right:2px solid var(--line);transition:width .6s var(--spring)}
.bd-now{text-align:center;font-size:14px;min-height:20px}
.bd-now b{font:italic 900 16px var(--display)}
.bd-hand{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding-top:14px}
.bcard{position:relative;aspect-ratio:5/7;border:2.5px solid var(--line);border-radius:8px;background:var(--paper);box-shadow:2px 3px 0 var(--ink);display:grid;place-items:center;align-content:center;gap:0;padding:0;font:italic 900 clamp(15px,4.6vw,24px)/1 var(--display);transition:translate .25s var(--spring),box-shadow .2s;cursor:pointer}
.bcard i{font:normal 400 clamp(13px,4vw,20px)/1 var(--ui)}
.bcard.red i{-webkit-text-stroke:1.4px var(--line);color:var(--paper)}
.bcard.on{translate:0 -12px;box-shadow:2px 6px 0 var(--ink);border-width:3.5px}
.bcard.deal{animation:dealin .45s var(--spring) both}
.bcard:nth-child(2).deal{animation-delay:.04s}.bcard:nth-child(3).deal{animation-delay:.08s}.bcard:nth-child(4).deal{animation-delay:.12s}.bcard:nth-child(5).deal{animation-delay:.16s}.bcard:nth-child(6).deal{animation-delay:.2s}.bcard:nth-child(7).deal{animation-delay:.24s}.bcard:nth-child(8).deal{animation-delay:.28s}
@keyframes dealin{from{transform:translate(40px,-60px) rotate(20deg);opacity:0}to{transform:none;opacity:1}}
.bcard.played{translate:0 -34px;transition:translate .3s var(--spring)}
.bcard.played.scores{background:var(--ink);color:var(--paper)}.bcard.played.scores.red i{color:var(--ink);-webkit-text-stroke:1.4px var(--paper)}
.bd-acts{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.bd-acts button[disabled]{opacity:.45}
.bd-help summary{font-weight:800;cursor:pointer;font-size:13.5px}
.bd-table{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:13px;margin:6px 0}
.bd-end{text-align:center;display:grid;gap:10px;justify-items:center}
.bd-end .bd-face.big{animation:bdlaugh .5s .2s ease-in-out 3}
.bd-end.won .bd-face.big{animation:bdgrumble .6s .2s ease-in-out 2}
@keyframes bdlaugh{0%,100%{transform:none}30%{transform:translateY(-6px) rotate(-4deg)}60%{transform:translateY(-2px) rotate(4deg)}}
@keyframes bdgrumble{0%,100%{transform:none}50%{transform:rotate(-6deg) translateX(-3px)}}
.bd-verdict{font-size:30px;background:var(--ink);color:var(--paper);padding:4px 16px 8px;border-radius:12px;transform:rotate(-3deg);animation:stamp .5s .15s cubic-bezier(.2,1.6,.4,1) both}
.bd-end.won .bd-verdict{background:var(--paper);color:var(--ink);border:3px solid var(--line);box-shadow:4px 4px 0 var(--ink)}
.bd-vs{display:flex;align-items:center;gap:12px;animation:vline .4s .45s both}
.bd-vs span{display:grid;justify-items:center;border:2.5px solid var(--line);border-radius:12px;padding:4px 14px}
.bd-vs small{font:800 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.bd-vs b{font:italic 900 26px/1.1 var(--display)}
.bd-vs i{font:italic 400 16px var(--display)}
.bd-end.won .bd-vs span:first-child,.bd-end.lost .bd-vs span:last-child{background:var(--ink);color:var(--paper)}
.bd-end.won .bd-vs span:first-child small,.bd-end.lost .bd-vs span:last-child small{color:var(--paper)}
.bd-lost{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:44px}
.bd-lost .o-icon{width:42px;height:42px;animation:snatch .7s calc(.75s + var(--i) * .18s) cubic-bezier(.5,0,.7,.4) both}
@keyframes snatch{0%{transform:none;opacity:1}30%{transform:translateY(6px) scale(1.08,.92);opacity:1}100%{transform:translate(40px,-120px) rotate(-35deg) scale(.6);opacity:0}}
.bd-gone{animation:vline .4s var(--d) both}
.bd-purse{display:flex;align-items:center;gap:8px;font:italic 900 34px/1 var(--display);animation:stamp .5s .8s cubic-bezier(.2,1.6,.4,1) both}
.bd-purse .sic{width:30px;height:30px}
.bd-hull{display:grid;justify-items:center;gap:4px;animation:vline .4s var(--d) both}
.bd-hull span{font:800 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.bd-hull b{display:inline-block;font:italic 900 34px/1 var(--display)}
.bd-hull b.bump{animation:bump .2s var(--spring)}
.bd-hull .planks{justify-content:center;max-width:280px}
.bd-hull .planks i.go{animation:plankOff .6s cubic-bezier(.5,0,.8,.4) calc(var(--hd) + .6s + var(--d)) forwards}
.bd-go{animation:vbtn .45s var(--d) var(--spring) both}
.bdresult.jolt,.bdresult .jolt{animation:jolt .3s}
@media (prefers-reduced-motion:reduce){.bcard,.bcard.deal,.bd-lost .o-icon{animation:none;transition:none}}
/* the bandits boarding: their black ship runs alongside, hooks fly and bite, the bandits swing across, "Boarded!" */
.boardfx{position:fixed;inset:0;z-index:90;background:var(--paper);overflow:hidden;cursor:pointer;animation:fadein .3s both}
.boardfx.out{opacity:0;transition:opacity .35s}
.bf-sea{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bf-sea .w{fill:var(--paper);stroke:var(--line);stroke-width:2.2;stroke-linejoin:round}
.bf-w1 .w{stroke-width:1.4;opacity:.6}
.bf-w1{--len:80px;animation:swell 6s linear infinite}.bf-w2{--len:100px;animation:swell2 3s linear infinite}.bf-w3{--len:120px;animation:swell3 2.2s linear infinite}
.bf-black .flag{fill:var(--paper)}
.bf-mine{animation:bfbob 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
@keyframes bfbob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(2px)}}
.bf-pirate{animation:bfin 1.1s cubic-bezier(.2,.8,.3,1) both,bfpull .5s 2s ease-in-out both;transform-box:fill-box}
@keyframes bfin{from{transform:translateX(260px)}to{transform:none}}
@keyframes bfpull{from{translate:0 0}to{translate:-14px 0}}
.bf-rope{fill:none;stroke:var(--line);stroke-width:1.8;stroke-dasharray:160;stroke-dashoffset:160;animation:rope .45s calc(1.05s + var(--i) * .16s) ease-out forwards}
.bf-claw{fill:none;stroke:var(--line);stroke-width:2.2;stroke-linecap:round;opacity:0;animation:claw .2s calc(1.45s + var(--i) * .16s) forwards}
@keyframes rope{to{stroke-dashoffset:0}}
@keyframes claw{to{opacity:1}}
.boardfx .bf-mine{animation:bfbob 1.6s ease-in-out infinite,bfjolt .3s 1.55s}
@keyframes bfjolt{0%,100%{translate:0 0}40%{translate:6px -3px}70%{translate:-3px 1px}}
.bf-bandit{opacity:0;animation:swing 1s calc(1.9s + var(--i) * .22s) cubic-bezier(.4,0,.6,1) forwards}
@keyframes swing{0%{transform:translate(0,0);opacity:1}50%{transform:translate(calc(-60px - var(--i) * 10px),-22px);opacity:1}100%{transform:translate(calc(-150px - var(--i) * 14px),18px);opacity:1}}
.bf-call{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.bf-call span{font:italic 900 clamp(48px,14vw,110px)/1 var(--display);background:var(--ink);color:var(--paper);padding:8px 26px 14px;border-radius:18px;box-shadow:6px 6px 0 var(--paper),9px 9px 0 var(--ink);animation:fightcall 1.3s 2.5s both}
/* playing a hand: the table above your cards, scoring cards popping, chips climbing, the mult stamping, the total flying home */
.bandits{position:relative}
.bd-felt{position:relative;height:148px;border:2px dashed var(--soft);border-radius:16px;display:grid;place-items:center}
.bd-felt>span{font:italic 400 14px var(--display);color:var(--soft)}
.bd-felt.busy>span{visibility:hidden}
.bd-stage{position:absolute;inset:0;z-index:5;display:grid;align-content:center;justify-items:center;gap:10px;pointer-events:none}
.bds-total{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:10}
.bd-stage:has(.bds-total) .bds-cards,.bd-stage:has(.bds-total) .bds-sum{opacity:.35;transition:opacity .2s}
.bds-cards{display:flex;gap:6px;justify-content:center}
.bds-cards .bcard{width:46px;flex:none;translate:none;box-shadow:2px 3px 0 var(--ink)}
.bds-cards .bcard:not(.scores){opacity:.45}
.bds-cards .bcard.scores{border-width:3.5px;box-shadow:4px 4px 0 var(--ink)}
.bds-cards .bcard.pop{animation:cpop .3s var(--spring)}
@keyframes cpop{0%{transform:none}40%{transform:translateY(-10px) scale(1.2)}100%{transform:none}}
.bds-plus{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font:italic 900 16px var(--display);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:0 6px;animation:plusup .7s ease-out forwards;white-space:nowrap}
@keyframes plusup{0%{transform:translate(-50%,0) scale(.5);opacity:0}25%{transform:translate(-50%,-16px) scale(1.1);opacity:1}100%{transform:translate(-50%,-34px);opacity:0}}
.bds-sum{display:flex;align-items:center;gap:8px;background:var(--paper);border:2.5px solid var(--line);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:4px 12px;animation:vline .3s .35s both}
.bds-name{font:italic 900 17px var(--display);margin-right:4px}
.bds-sum span{display:grid;justify-items:center;line-height:1}
.bds-sum span b{font:italic 900 22px/1 var(--display)}
.bds-sum small{font:800 9.5px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.bds-sum .bds-mult{background:var(--ink);color:var(--paper);border-radius:8px;padding:2px 8px}.bds-sum .bds-mult small{color:var(--paper)}
.bds-sum span.bump{animation:bump .25s var(--spring)}
.bds-mult.stamp{animation:mstamp .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes mstamp{0%{transform:scale(1.9) rotate(-12deg)}100%{transform:none}}
.bds-total{font:italic 900 46px/1 var(--display);background:var(--ink);color:var(--paper);border-radius:14px;padding:2px 16px 6px;box-shadow:4px 4px 0 var(--paper),6px 6px 0 var(--ink);animation:stamp .4s cubic-bezier(.2,1.6,.4,1) both}
/* the chart's header (stats bar and the sea's name) is pinned to the top; the chart scrolls under it */
.charthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);margin:-14px -14px 0;padding:14px 14px 4px;transition:box-shadow .2s}
.charthead .seahead{margin-bottom:4px}
.charthead+.map{margin-top:4px}
.charthead.stuck{box-shadow:0 2.5px 0 var(--ink)}
@media (min-width:900px) and (min-height:560px){.charthead{margin:-22px -24px 0;padding:22px 24px 4px}body.desk .charthead{margin:-22px 0 0;padding:22px 0 4px}}
/* the fight recap */
.rcbtn{display:block;margin:10px auto 0;opacity:0;animation:fadein .4s 1.4s both}
.recap .rc-h{font-size:18px;margin:14px 0 6px}
.rc-list{display:grid;gap:8px}
.rc-row{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center}
.rc-row .o-icon{width:40px;height:40px}
.rc-txt{display:grid;gap:2px;min-width:0}
.rc-txt b{font-weight:800;font-size:14.5px}
.rc-txt .soft{font-size:13px;line-height:1.3}
.rc-bar{display:block;height:8px;border:1.6px solid var(--line);border-radius:5px;overflow:hidden}
.rc-bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--ink) 0 1.6px,var(--paper) 1.6px 3.6px);border-right:1.6px solid var(--line)}
/* desktop hover card for cargo, and the items it works on */
.itip{position:fixed;z-index:70;max-width:260px;background:var(--paper);border:2.5px solid var(--line);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:10px 12px;font-size:13.5px;pointer-events:none;animation:fadein .12s both}
.itip b{font:italic 900 17px/1.1 var(--display)}
.itip p{margin:3px 0 0}
.itip ul{margin:6px 0 0;padding-left:16px;display:grid;gap:3px}
.itip-aff{font-weight:800;font-size:12.5px}
.board .item.src{outline:3px solid var(--line);outline-offset:2px}
.board .item.aff{outline:2.5px dashed var(--line);outline-offset:2px}
/* how a hand grows, in the tavern */
.talk .ranks{font-size:13px;margin-top:6px}
.talk .ranks summary{font-weight:800;cursor:pointer}
.talk .ranks p{margin:4px 0 0;line-height:1.35}
/* the telescope */
.seahead .scope{display:inline-flex;align-self:center;align-items:center;gap:6px;height:30px;padding:0 10px;border:2px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:800 12.5px var(--ui);margin-left:auto;cursor:pointer}
.seahead .scope svg{width:22px;height:15px;fill:none;stroke:var(--line);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.peekov .sheet{display:grid;gap:10px}
.peekhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.peekwrap{max-height:calc(100dvh - 190px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;border-radius:18px}
.map.peek .node{pointer-events:none}
/* the dimmer behind a tip or tutorial step: the hole is a clear window, its huge shadow is the dim */
.coachdim{position:fixed;inset:0;z-index:54;pointer-events:none;overflow:hidden;animation:fadein .25s both}
.coachdim i{position:fixed;display:block;border-radius:16px;box-shadow:0 0 0 200vmax rgba(0,0,0,.45);transition:left .2s,top .2s,width .2s,height .2s}
@media (prefers-reduced-motion:reduce){.coachdim{animation:none}.coachdim i{transition:none}}
/* the desk keeps the stat pills under the ship's name and passive ability */
.desk-stats .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.desk-stats .stat{justify-content:flex-start}
.desk-stats .stat small{display:inline}
/* the desk: Log and Pause sit at the end of the title line; the emptied top bar folds away */
body.desk .seahead>.acts{display:flex;align-items:center;gap:6px;align-self:center;margin-left:14px}
body.desk .bar:not(:has(*)){display:none}
body.desk .seahead>span{margin-left:auto}
body.desk .seahead>.scope+span{margin-left:12px}
/* the fight recap keeps small icons on every screen size */
body.desk .recap .rc-row .o-icon,.recap .rc-row .o-icon{width:40px;height:40px;padding:4px;border-radius:10px}
/* a stop's hover card on the chart */
.ntip{max-width:300px}
.ntip .traits,.ntip .trait{font-size:13px}
.ntip p{line-height:1.35}
/* the fight report */
.recap .rc-row{align-items:start}
.rc-pos{font:800 11px var(--ui);color:var(--soft);margin-left:2px}
.rc-meta{font-size:12.5px;line-height:1.35}
.rc-did{margin:3px 0 3px;padding-left:15px;display:grid;gap:1px;font-size:13px;line-height:1.3}
.rc-did b{font-weight:800}
.rc-help{color:var(--soft)}
/* what an item touches: the source is outlined, the items it works on glow and bob with a label saying how */
.board .item.aff{outline:2.5px solid var(--line);outline-offset:2px;animation:affglow 1.1s ease-in-out infinite;z-index:3}
@keyframes affglow{0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(0,0,0,.0)}50%{transform:translateY(-4px);box-shadow:0 0 0 5px rgba(0,0,0,.14)}}
.board .item{position:relative}
.board{position:relative}
.afflbl{position:absolute;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--paper);font:800 9.5px/1 var(--ui);padding:3px 6px;border-radius:999px;z-index:4;pointer-events:none}
@media (prefers-reduced-motion:reduce){.board .item.aff{animation:none}}
/* cooldowns stand out on every tile */
.item .cdt{font:800 11px/1 var(--ui);background:var(--paper);border:1.6px solid var(--line);border-radius:999px;padding:2px 5px;margin-top:2px}
body.desk .item .cdt{font-size:12.5px;padding:2px 7px}
/* an upgrade, previewed */
.upgr{font-weight:800;font-size:13px}
.upgr-cd{font-size:13px}
s.was{color:var(--soft);text-decoration-thickness:1.5px}
b.now{font-weight:800}
@media (max-width:520px){.afflbl{font-size:8.5px;padding:2px 4px}.rc-meta{font-size:12px}}

/* ---------- colour, flat fills only (after Chris Ware): no gradients, no soft light, black only for the lines ---------- */
/* the chart: slate sea, sage land, a pale fog bank */
.map{background:var(--sea)}
.map .isles .land path{fill:var(--land)}
.map .billow{fill:var(--fog)}
.map .node .body circle{fill:var(--paper)}
.map .node.visited .body circle{fill:var(--peach-p)}
.map .node.reach .body circle{fill:var(--mustard-p)}
/* the harbour: a peach sky, each place its own flat colour */
.harbour,.hscroll{background:var(--peach-p)}
.hworld .hsign rect,.hworld .hstop .hsign rect{fill:var(--paper)}
/* cargo tiles take a pale wash by kind */
.item.c-W,.o-icon.c-W{background:var(--brick-p)}
.item.c-C,.o-icon.c-C{background:var(--peach)}
.item.c-X,.o-icon.c-X{background:var(--peach-p)}
.item.c-R,.o-icon.c-R{background:var(--slate-p)}
.item.c-F,.o-icon.c-F{background:var(--mustard-p)}
.item.c-A,.o-icon.c-A{background:var(--sage-p)}
.item.c-V,.o-icon.c-V{background:var(--sage)}
.item.c-T,.o-icon.c-T{background:#E6DCC8}
.item.t3{background:var(--ink)}
/* the one bright accent: gold is mustard */
.sic .w{fill:var(--paper)}
#goldst .sic circle:first-child,.flycoin .sic circle:first-child,.vic-gold .sic circle:first-child{fill:var(--mustard)}
/* stalls: brick awnings, a navy bench rail */
.stall{background:var(--paper)}
.table{background-color:var(--peach-p)}
.yard .table{background-color:var(--sage-p)}
.pier .table,.table.crates{background-color:var(--slate-p)}
/* the hold and the docked bar sit on the darker page */
.cta.dock{background:var(--page)}
.board{background:var(--paper)}
/* icon line art is pure black; their solid parts navy. Diamond tiles (solid navy) keep light icons */
.ic{stroke:var(--line)}.ic .k{fill:var(--ink)}
.t3 .ic{stroke:currentColor}.t3 .ic .k{fill:currentColor}
.item.t3 .cdt{color:var(--ink)}
/* the harbour, coloured by plane (after Chris Ware): every surface one flat colour; a recessed or side plane is a darker
   shade of the same hue, shadows under eaves and awnings are flat darker shapes, windows are charcoal, never black */
.hworld{--wall:#E6D6BC;--wall2:#CDBB9E;--shade:rgba(31,42,60,.22);--roof:#5D6E7C;--roof2:#4B5A67;--trim:#F3E9D6;--win:#3B4454;--winlit:#E3BE6A;
  --door:#7B5A49;--door2:#644737;--wood:#B98E64;--wood2:#9A7350;--crate:#D7BA8E;--awn:#F3E9D6;--awnstripe:#B5533C;--awn2:#94412F;--lamp:#F0D78A;
  --hull:#9C5E48;--hull2:#7E4A38;--flag:#B5533C;--flag2:#D9A93A;--sea:#B4C6CE;--water:#7F98A7;--water2:#6C8494;--quay:#B7A7A0;--stone:#CEC0B8;--land:#A9B68E;--land2:#909D76;--sun:#F0D78A}
.hstop[data-bld="market"]{--wall:#C27866;--wall2:#9E5A4C}
.hstop[data-bld="tavern"]{--wall:#D8B05E;--wall2:#BE9447;--roof:#7C5848;--roof2:#634537}
.hstop[data-bld="wright"]{--wall:#9DAE8A;--wall2:#83956F}
.hworld .h-wall{fill:var(--wall)}.hworld .h-wall2{fill:var(--wall2)}.hworld .h-shade{fill:var(--shade)}
.hworld .h-roof{fill:var(--roof)}.hworld .h-roof2{fill:var(--roof2)}.hworld .h-trim{fill:var(--trim)}.hworld .h-trimline{stroke:var(--trim)}
.hworld .h-win{fill:var(--win)}.hworld .h-winlit{fill:var(--winlit)}.hworld .h-door{fill:var(--door)}.hworld .h-door2{fill:var(--door2)}
.hworld .h-wood{fill:var(--wood)}.hworld .h-wood2{fill:var(--wood2)}.hworld .h-crate{fill:var(--crate)}
.hworld .h-awn{fill:var(--awn)}.hworld .h-awnstripe{fill:var(--awnstripe)}.hworld .h-awn2{fill:var(--awn2)}.hworld .h-lamp{fill:var(--lamp)}
.hworld .h-hull{fill:var(--hull)}.hworld .h-hull2{fill:var(--hull2)}.hworld .h-flag{fill:var(--flag)}.hworld .h-flag2{fill:var(--flag2)}
.hworld .h-sea{fill:var(--sea)}.hworld .h-water{fill:var(--water)}.hworld .h-water2{fill:var(--water2)}.hworld .h-quay{fill:var(--quay)}.hworld .h-stone{fill:var(--stone)}
.hworld .h-land{fill:var(--land)}.hworld .h-land2{fill:var(--land2)}.hworld .h-sun{fill:var(--sun)}
.hworld .hwaves path{stroke:var(--line)}
/* inside the port's places, the same flat planes: each back wall its own colour, stock and tools in material colours, and
   the bar a wood counter whose front is a darker plane than its top */
.stall:not(.yard):not(.pier){background:#EED8BE}
.stall.yard{background:#DCE3CB}
.stall.pier{background:#F4DFCB}
.barroom{background:#E7CF93}
.barscene .t-glass{fill:#A9B68E}.barscene .t-glass2{fill:#7F98A7}.barscene .t-box{fill:#D7BA8E}.barscene .t-jar{fill:#C27866}
.barscene .t-top{fill:#B98E64}.barscene .t-front{fill:#8E6A4B}.barscene .t-floor{fill:#B7A7A0}
/* the ships, coloured by plane: a hull with a darker lower plane, sails (a second, darker set where they face away), a flag */
.ship-sloop{--hull:#5E7487;--hull2:#4B5E70;--sail:#FBF5E8;--sail2:#E3D7C1;--flag:#B5533C}
.ship-galleon{--hull:#8E6A4B;--hull2:#72543A;--sail:#F3E9D6;--sail2:#DCCBAE;--flag:#B5533C}
.ship-privateer{--hull:#A35A49;--hull2:#84463A;--sail:#F3E9D6;--sail2:#DCCBAE;--dsail:#2F3A4C;--dsail2:#232C3B;--flag:#2F3A4C}
.ship-junk{--hull:#7E8F69;--hull2:#667652;--sail:#D9A93A;--sail2:#BE912A;--flag:#B5533C}
.shipdraw{fill:var(--sail)}
.shipdraw .s-sail{fill:var(--sail)}.shipdraw .s-sail2{fill:var(--sail2)}.shipdraw .s-dsail{fill:var(--dsail)}.shipdraw .s-dsail2{fill:var(--dsail2)}
.shipdraw .s-hull{fill:var(--hull)}.shipdraw .s-hull2{fill:var(--hull2)}.shipdraw .s-flag{fill:var(--flag)}.shipdraw .s-port{fill:#26303F}.shipdraw .s-eye{fill:#FBF5E8}
/* the bandits' ship stays a black-sailed menace: all deep navy, lined in cream */
.bf-black .s-sail,.bf-black .s-sail2,.bf-black .s-hull,.bf-black .s-hull2{fill:#232C3B}.bf-black .s-flag{fill:#FBF5E8}
/* portraits: skin and clothes in flat colour, the line art black */
.peepart .ar-s{fill:var(--skin)}.peepart .ar-h{fill:var(--hair)}.peepart .ar-t{fill:var(--hat)}.peepart .ar-c{fill:var(--cloth)}
.peepart .ar-p{fill:#F3E9D6}.peepart .ar-l{fill:#DCE5E9}
.peepart .pl-body [fill="#000"]{fill:#232C3B}
/* fights in flat colour: each card is a plane of its own. Your card takes your ship's sail colour, an ordinary
   enemy is brick, an elite slate, a boss deep navy. Health is sage for you and brick for them, the shield slate. */
.fighter.p{background:var(--sail,var(--slate-p))}
.fighter.ship-privateer.p{background:#E9C2B3}
.fighter.ship-junk.p{background:#F1DDA6}
.fighter.ship-sloop.p{background:var(--slate-p)}
.fighter.ship-galleon.p{background:#E6D3B8}
.fighter.k-threat{background:var(--brick-p)}
.fighter.k-elite{background:var(--slate-p)}
.fighter.k-boss{background:var(--ink);color:var(--paper);box-shadow:4px 5px 0 var(--brick)}
.fighter.k-boss .hpbar{border-color:var(--paper)}
.fighter.k-boss .traits,.fighter.k-boss .trait{color:var(--paper)}
.hpbar{background:var(--paper)}
.fighter.p .hpbar .hp{background:#6F8259}
.fighter.e .hpbar .hp{background:var(--brick)}
.hpbar .lag{background:var(--mustard);opacity:.7}
.hpbar .sh{background:repeating-linear-gradient(-45deg,var(--slate) 0 2px,transparent 2px 5px);border-right:2px solid var(--slate)}
.burnseg{background:repeating-linear-gradient(90deg,var(--mustard) 0 1.6px,transparent 1.6px 4px)}
.poiseg{background:radial-gradient(circle,var(--sage-p) 1.3px,transparent 1.7px) 0 0/5px 5px}
.chip[data-c="sh"]{background:var(--slate-p)}
.chip[data-c="bu"]{background:var(--peach)}
.chip[data-c="po"]{background:var(--sage-p)}
.battle>.mid .speed button[aria-pressed="true"]{background:var(--mustard)}
.fightcall span{background:var(--brick);box-shadow:5px 5px 0 var(--paper),8px 8px 0 var(--ink)}
.vic-head{background:var(--mustard);color:var(--ink)}
.vic-star{fill:var(--mustard-p)}.vic-star:nth-of-type(odd){fill:var(--mustard)}
.def-sign h2{background:#B98E64;color:var(--ink)}
.sunk .def-sign h2{background:var(--slate);color:var(--paper)}
/* fishing: a peach sky over slate water, the boat in wood, the reel a slate channel with a mustard catch zone */
.pond{background:var(--peach-p)}
.pond .pw-sea{fill:#B4C6CE}.pond .pw-deep{fill:#8FA6B3}
.pond .pw-boat{fill:#B98E64;stroke:none}.pond .pw-boat2{fill:#8E6A4B}.pond .pw-rod{stroke:#B98E64}
.track{background:var(--slate-p)}
.zone{background:var(--mustard-p)}
.zone.on{background:var(--mustard)}
.prog div{background:#6F8259}
/* each fish its own flat colour: body, a darker belly plane, fins darker again */
[class*="fish-"] .w.fb{fill:var(--fb,var(--paper))}
[class*="fish-"] .fbel{fill:var(--fb2,var(--fog))}
[class*="fish-"] .w.fn{fill:var(--fn,var(--fb2,var(--fog)))}
[class*="fish-"] .w.fl{fill:var(--mustard)}
.fish-sardine{--fb:#C9D5DC;--fb2:#E8ECEA;--fn:#7F98A7}
.fish-mackerel{--fb:#7F98A7;--fb2:#DDE3CC;--fn:#5E7487}
.fish-snapper{--fb:#C27866;--fb2:#E9C2B3;--fn:#A35A49}
.fish-moonfish{--fb:#F1DDA6;--fb2:#FBF5E8;--fn:#D9A93A}
.fish-herring{--fb:#E8DFD0;--fb2:#FBF5E8;--fn:#C9D5DC}
.fish-lanternf{--fb:#5E7487;--fb2:#8FA6B3;--fn:#4B5E70}
.fish-fogeel{--fb:#A9B68E;--fb2:#D4DCC0;--fn:#7E8F69}
.fish-marlin{--fb:#4B5E70;--fb2:#C9D5DC;--fn:#2F3A4C}
.fish-angler{--fb:#7E6A5C;--fb2:#B7A7A0;--fn:#5D4E44}
.fish-oarfish{--fb:#E9C2B3;--fb2:#FBF5E8;--fn:#B5533C}
.fish-squid{--fb:#C27866;--fb2:#E9C2B3;--fn:#A35A49}
.fish-boot{--fb:#8E6A4B;--fb2:#72543A}
.fish-angler .k.k,.fish-marlin .k.k,.fish-lanternf .k.k{fill:#FBF5E8}
/* on a wide, short tavern the bubble sits beside the hands, pointing back at them */
.talk.side{min-width:300px;max-width:360px}
.talk.side::before{top:calc(var(--ay,40px) - 9px);left:-11px;border-top:0;border-bottom:2.5px solid var(--line)}
/* on a computer, bubbles show only while you point at whoever's talking (ui.js talkOn); the other hands at the bar fade back
   then, washed toward the paper but still solid */
body.hovtalk .talk:not(.quiet){opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility 0s .16s}
body.hovtalk #app.talkon .talk:not(.quiet){opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .2s var(--spring),visibility 0s}
body.hovtalk #app.talkon .barroom.sided .patron:not(.sel) .bust{filter:url(#tfade)}