:root{
  --sea:#0f2530; --ink:#e9dfc6; --dim:#9fb3b5; --accent:#d6453d; --card:#13232b; --line:#2c4650;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--sea);color:var(--ink);
  font:16px/1.4 'IM Fell English',Georgia,serif;-webkit-user-select:none;user-select:none;
  touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
/* production shell pass, oct 1 */
/* keyboard focus: a two-tone ring (dark ink inside, cream outside) that reads on parchment and on the sea. taps never draw it; components with their own focus look keep it */
:focus-visible{outline:2px solid #3b2414;outline-offset:0;box-shadow:0 0 0 4px #f1d9a0}
:focus:not(:focus-visible){outline:none}
/* reduce motion: no blinking, no slides; colour still carries the warning */
@media (prefers-reduced-motion:reduce){
  .bar.hull i.low,.tb-it.bad b,#touch .grab,#touch .auto{animation:none!important}
  .notice{animation-name:shellFadeIn!important}.notice.out{animation-name:shellFadeOut!important}
  *{scroll-behavior:auto!important}
}
@keyframes shellFadeIn{from{opacity:0}}
@keyframes shellFadeOut{to{opacity:0}}



#toast{position:fixed;top:22%;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
  font-size:18px;text-align:center;opacity:0;transition:opacity .4s;text-shadow:0 2px 8px #000;padding:0 16px;width:100%}
#toast.on{opacity:1}

.overlay{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px;background:rgba(8,20,26,.55);overflow:auto}
#menu h1{font-size:clamp(26px,6vw,48px);font-weight:600;letter-spacing:.02em;text-align:center}
.sub{color:var(--dim);margin:6px 0 22px}
.modes{display:grid;gap:12px;width:min(560px,100%)}
.modes button{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;
  display:flex;flex-direction:column;gap:4px;transition:border-color .15s,transform .15s}
.modes button:hover{border-color:var(--ink);transform:translateY(-1px)}
.modes b{font-size:18px}
.modes span{color:var(--dim);font-size:13px}
.modes em{font-style:normal;font-size:12px;color:var(--accent)}
.keys{color:var(--dim);font-size:12px;margin-top:14px;text-align:center;max-width:560px}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;width:min(460px,100%)}
.card h2{font-size:20px;margin-bottom:10px}
#pBody{color:var(--dim);font-size:14px;margin-bottom:14px}
.pbody p+p{margin-top:6px}
#pBtns{display:grid;gap:8px}
#pBtns button{background:transparent;border:1px solid var(--line);border-radius:6px;padding:10px 12px;text-align:left}
#pBtns button:hover:not(:disabled){border-color:var(--ink)}
#pBtns button:disabled{opacity:.4;cursor:default}
#pBtns button small{display:block;color:var(--dim);font-size:12px}

#touch{position:fixed;inset:auto 0 0 0;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 12px max(14px,env(safe-area-inset-bottom));pointer-events:none}
#touch button{pointer-events:auto;background:rgba(15,37,48,.55);border:1px solid var(--line);border-radius:10px;
  min-width:64px;height:56px;font-size:15px}
#touch button.on{background:rgba(233,223,198,.25)}
#touch .fire{border-color:var(--accent)}
.tl{display:flex;gap:10px}
.tl button{width:72px;height:72px;font-size:22px}
.tr{display:flex;flex-direction:column;gap:8px}
.tr .row{display:flex;gap:8px}

/* open sea port + dig panels */
.card.wide{width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tabs button,.chips button,.acts button,.dig button,.list button{background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--ink)}
.tabs button{padding:6px 10px}
.tabs button.on{border-color:var(--ink);background:rgba(233,223,198,.1)}
button:disabled{opacity:.35;cursor:default}
.stat{color:var(--ink);font-size:13px;margin-bottom:8px}
.small{font-size:12px;margin-top:8px}
.pbody table{width:100%;border-collapse:collapse;font-size:13px}
.pbody th{text-align:left;font-weight:400;color:var(--dim);border-bottom:1px solid var(--line);padding:4px}
.pbody td{padding:4px;border-bottom:1px solid rgba(44,70,80,.5);color:var(--ink)}
.pbody i{font-style:normal;font-size:11px}
.cheap{color:#8fc48a}.dear{color:#e8c35a}
.acts{white-space:nowrap}
.acts button{padding:3px 6px;font-size:12px;margin-left:2px}
.list{display:grid;gap:6px}
.list button{text-align:left;padding:8px 10px}
.list small{display:block;color:var(--dim);font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chips button{padding:6px 8px;font-size:12px}
.dig{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:10px 0;max-width:300px}
.dig button{aspect-ratio:1;background:#6d5a3a;border-color:#8a7650;font-size:14px}
.dig button[class^=d]{background:#3b3222}
.dig button.d0{background:var(--accent)}
@media (max-width:520px){.acts button{padding:3px 4px}.pbody td,.pbody th{padding:3px 2px}}
.dig button[class^=d]:disabled{opacity:1}
#menu h1{margin-bottom:22px}
#menu{background:rgba(5,32,50,.32)}
#menu h1{text-shadow:0 2px 10px rgba(0,20,35,.7)}

.linkbtn{background:transparent;border:0;color:var(--dim);margin-top:14px;text-decoration:underline;font-size:13px}

/* at-sea hud: parchment panels in ink (concept board, section a) */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;color:#3b2414;font-family:'IM Fell English',Georgia,serif;
  --sl:max(12px,env(safe-area-inset-left));--sr:max(12px,env(safe-area-inset-right));--st:max(10px,env(safe-area-inset-top))}
#safeProbe{position:absolute;top:var(--st);left:var(--sl);right:var(--sr);bottom:max(12px,env(safe-area-inset-bottom))}
.parch{background:linear-gradient(170deg,#f1e6c6 0%,#e9dcb8 45%,#dcc99c 100%);border:1px solid #3b2414;border-radius:4px;
  box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 0 0 2px rgba(233,220,184,.6),inset 0 0 0 3px rgba(59,36,20,.25);color:#3b2414}
#left{position:absolute;top:var(--st);left:var(--sl);display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:calc(100vw - 24px)}
#shipCard{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:8px 12px 8px 8px;width:236px}
.sil{width:56px;height:42px;color:#2a1a0e;align-self:center}
.sc-main{min-width:0}
#shipName{display:block;font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:18px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#shipCls{display:block;font-style:italic;font-size:13px;opacity:.8;line-height:1.1;margin-bottom:4px}
.bars{display:grid;gap:3px}
.bar{height:7px;background:rgba(59,36,20,.18);border:1px solid rgba(59,36,20,.7);border-radius:1px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;transition:width .15s}
.bar.hull i{background:linear-gradient(#d4533f,#9a2a1c)}
.bar.hull i.low{animation:hpblink 1s steps(2) infinite}
.bar.sails i{background:linear-gradient(#e8c35a,#b88a22)}
.bar.crew i{background:linear-gradient(#5b93b8,#2d5f82)}
@keyframes hpblink{50%{opacity:.45}}
#rows{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:0 12px;font-size:14px;line-height:1.3;border-top:1px solid rgba(59,36,20,.35);padding-top:4px}
#rows span:nth-child(odd){opacity:.75}
#rows:empty{display:none}
#notes{pointer-events:auto;font:italic 13px/1.2 'IM Fell English',Georgia,serif;padding:3px 10px;max-width:236px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notesList{font-size:13px;line-height:1.35;padding:6px 10px;width:236px}
#notesList p+p{margin-top:3px}
#res{position:absolute;top:var(--st);right:var(--sr);display:flex;align-items:stretch;gap:8px}
#res .btns{display:flex;gap:6px;align-items:center}
#res .btns button{pointer-events:auto;width:34px;height:34px;border-radius:50%;font-size:14px;font-family:Georgia,serif;display:grid;place-items:center;padding:0}
#singBtn{font-size:17px!important}
#singBtn.on{background:#3b2414;color:#e9dcb8}
#pills{display:flex;align-items:center;gap:12px;padding:5px 12px}
#pills:empty{display:none}
.pill{display:flex;align-items:center;gap:6px;line-height:1}
.pill svg{width:22px;height:22px;flex:none}
.pill b{display:block;font-weight:400;font-size:17px}
.pill small{display:block;font-size:11px;opacity:.75;margin-top:1px}
#dateBadge{display:flex;align-items:center;gap:8px;padding:5px 10px}
#dateBadge b{display:block;font-weight:400;font-size:15px;white-space:nowrap}
#dateBadge small{display:block;font-size:12px;font-style:italic;opacity:.8;white-space:nowrap}
#wxIcon{width:22px;height:22px}
@media (max-width:600px){
  #shipCard{width:164px;padding:5px 8px 5px 5px;gap:2px 6px}
  .sil{width:34px;height:26px}
  #shipName{font-size:14px}#shipCls{font-size:11px;margin-bottom:2px}
  .bar{height:5px}
  #shipCard.sea #rows{display:none}
  #rows{font-size:12px;display:flex;flex-wrap:wrap;gap:0 5px;padding-top:2px}#rows span:nth-child(-n+2){display:none}#rows span:nth-child(even){margin-right:6px}
  #notes,#notesList{max-width:164px;width:auto;font-size:12px}
  #res{flex-direction:column;align-items:flex-end;gap:5px}
  #res .btns button{width:30px;height:30px}
  #pills{flex-direction:column;align-items:flex-start;gap:4px;padding:5px 8px}
  .pill svg{width:16px;height:16px}.pill b{font-size:14px}.pill small{display:none}
  #dateBadge{padding:3px 8px;gap:5px}#dateBadge b{font-size:13px}#dateBadge small{font-size:11px}#wxIcon{width:16px;height:16px}
}

/* ===== port town + event cards (port-events) ===== */
.parch{--ink:#3b2414;--dim:#6b5237;--line:#9c7c4d;color:var(--ink);font-family:'IM Fell English',Georgia,serif;
  background:radial-gradient(ellipse at 20% 10%,rgba(255,248,225,.55),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,78,30,.18),transparent 55%),#e6d3a3;
  border:1px solid #7a5a32;border-radius:6px;box-shadow:0 0 0 3px rgba(40,24,10,.35),0 10px 28px rgba(0,0,0,.45),inset 0 0 22px rgba(120,78,30,.28)}
.parch .cheap{color:#3d6b2f}.parch .dear{color:#9a5a10}
#town{position:fixed;inset:0;z-index:12;background:#1d140b;color:#3b2414;font-family:'IM Fell English',Georgia,serif;overflow:hidden;
  --pad:18px;--colw:272px;--sidew:292px;--top:max(var(--pad),env(safe-area-inset-top))}
#townArt{position:absolute;inset:0;width:100%;height:100%}
#town h2,#town h3{font-weight:400}
.tw-plate{position:absolute;top:var(--top);left:max(var(--pad),env(safe-area-inset-left));width:var(--colw);display:flex;align-items:center;gap:12px;padding:10px 14px}
.tw-crest svg{width:46px;height:54px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
#townName{font-family:'IM Fell English SC',Georgia,serif;font-size:32px;line-height:1;letter-spacing:.02em}
#townSub{font-style:italic;font-size:15px;color:var(--dim);margin-top:4px}
.tw-places{position:absolute;top:calc(var(--top) + 90px);left:max(var(--pad),env(safe-area-inset-left));width:var(--colw);padding:6px;display:flex;flex-direction:column;
  max-height:calc(100% - var(--top) - 90px - var(--pad));overflow:auto}
.place{display:flex;align-items:center;gap:12px;background:transparent;border:0;border-bottom:1px solid rgba(122,90,50,.35);padding:9px 8px;text-align:left;color:var(--ink);font-family:inherit;border-radius:4px}
.place:last-child{border-bottom:0}
.place svg{width:30px;height:30px;flex:none;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.place b{display:block;font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:19px;line-height:1.1}
.place small{display:block;font-size:13px;color:var(--dim);font-style:italic}
.place:hover,.place[aria-current]{background:rgba(122,90,50,.16)}
.place[aria-current]{box-shadow:inset 3px 0 0 #8f2a1c}
.place.sail{margin-top:4px;border-top:1px solid rgba(122,90,50,.5)}
.place.sail svg{stroke:#8f2a1c}
.tw-res{position:absolute;top:var(--top);right:max(var(--pad),env(safe-area-inset-right));display:flex;gap:8px}
.pill{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;font-family:'IM Fell English',Georgia,serif;font-size:14px;line-height:1.1}
.pill svg{width:22px;height:22px;flex:none;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pill small{display:block;font-family:'IM Fell English',Georgia,serif;font-size:11px;color:var(--dim)}
.tw-side{position:absolute;top:calc(var(--top) + 64px);right:max(var(--pad),env(safe-area-inset-right));width:var(--sidew);display:flex;flex-direction:column;gap:12px;
  max-height:calc(100% - var(--top) - 64px - var(--pad))}
.tw-box{padding:10px 12px}
.tw-box h4{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:18px;margin-bottom:4px}
.goods-wrap{overflow:visible;max-height:none} /* the whole price list shows; no scroll box inside the card (aaron) */
.tw-box table{width:100%;border-collapse:collapse;font-size:14px}
.tw-box th{font-weight:400;color:var(--dim);text-align:right;padding:2px 4px;font-size:12px;border-bottom:1px solid var(--line)}
.tw-box th:first-child,.tw-box td:first-child{text-align:left}
.tw-box td{padding:3px 4px;border-bottom:1px solid rgba(122,90,50,.25);text-align:right;font-family:'IM Fell English',Georgia,serif;font-size:13px;color:var(--ink)}
.tw-box td:first-child{font-family:'IM Fell English',Georgia,serif;font-size:15px}
.tw-box td i{font-style:normal;font-size:10px;margin-left:4px}
.tw-fact{font-size:13px;font-style:italic;color:var(--dim);margin-top:8px}
#room{position:absolute;top:calc(var(--top) + 64px);bottom:var(--pad);left:calc(max(var(--pad),env(safe-area-inset-left)) + var(--colw) + 16px);right:max(var(--pad),env(safe-area-inset-right));overflow:hidden}
.room-card{height:100%;overflow:auto;padding:14px 20px 20px;font-size:17px}
.room-card .stat,.room-card td,.room-card th,.room-card .small,.room-card small{font-family:'IM Fell English',Georgia,serif}
.room-card .tabs button,.room-card .chips button,.room-card .acts button,.room-card .list button{border-color:var(--line);color:var(--ink);background:rgba(255,248,225,.3)}
.room-card .list button:hover:not(:disabled),.room-card .chips button:hover:not(:disabled){background:rgba(255,248,225,.6)}
.room-card th{color:var(--dim);border-color:var(--line)}
.room-card td{border-color:rgba(122,90,50,.3);color:var(--ink)}
.room-top{display:flex;align-items:center;gap:14px;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.room-top h3{font-family:'IM Fell English SC',Georgia,serif;font-size:28px}
.room-top button{background:transparent;border:1px solid var(--line);border-radius:4px;padding:6px 10px;color:var(--ink);font-family:inherit}
.keeper{font-style:italic;font-size:19px;margin:6px 0 12px}
.said{border-left:3px solid var(--line);padding:8px 12px;margin:12px 0;font-size:18px}
.room-info{display:none;margin-top:16px;background:rgba(255,248,225,.3);border:1px solid var(--line);border-radius:4px}
#town.inroom .tw-side{display:none}
@media (max-width:1100px){#town{--colw:240px;--sidew:250px}}
/* phones: picture on top, then plate + list, the town scrolls */
@media (max-width:760px){
  #town{overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;--pad:12px;display:flex;flex-direction:column;
    padding:0 max(var(--pad),env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left))}
  #townArt{inset:0 0 auto 0;height:42vh}
  #town::before{content:'';position:absolute;left:0;right:0;top:calc(42vh - 60px);height:60px;background:linear-gradient(transparent,#1d140b);pointer-events:none}
  .tw-res{position:relative;top:auto;right:auto;margin-top:var(--top);justify-content:flex-end;flex-wrap:wrap;gap:6px;z-index:1;order:0}
  .pill{padding:4px 8px 4px 6px;font-size:13px}.pill svg{width:18px;height:18px}
  .tw-plate{position:relative;top:auto;left:auto;width:auto;margin-top:calc(42vh - var(--top) - 150px);z-index:1;flex:none;order:1}
  .tw-places{position:relative;top:auto;left:auto;width:auto;margin-top:12px;max-height:none;overflow:visible;flex:none;order:2}
  .place{padding:11px 8px}
  .tw-side{display:none}
  #room{position:fixed;inset:0;z-index:13;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:rgba(20,12,6,.6)}
  .room-card{padding:10px 12px 16px;font-size:16px}
  .room-info{display:block}
}

/* event card */
#event{position:fixed;inset:0;z-index:20;display:flex;background:rgba(6,14,18,.55);overflow:auto;touch-action:pan-y;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.ev-card{display:flex;width:min(820px,100%);padding:0;overflow:hidden;margin:auto}
.ev-main{flex:1;padding:18px 20px 20px;min-width:0}
.ev-head{display:flex;gap:16px;align-items:flex-start}
.ev-art{flex:none;width:170px;height:150px;border:1px solid var(--line);border-radius:4px;background:radial-gradient(ellipse at 50% 30%,#f3e6c2,#cdb27a);display:flex;align-items:center;justify-content:center}
.ev-art svg{width:88%;height:88%;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ev-text{min-width:0}
#evTitle{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:28px;line-height:1.05;margin-bottom:8px}
#evText{font-size:16px}
.ev-quote{font-style:italic;font-size:16px;color:var(--dim);margin-top:8px;border-left:2px solid var(--line);padding-left:10px}
.ev-choices{display:grid;gap:8px;margin-top:16px}
.ev-choices button{display:flex;align-items:center;gap:12px;text-align:left;padding:9px 12px;border:1px solid #7a5a32;border-radius:4px;color:var(--ink);font-family:inherit;
  background:linear-gradient(180deg,rgba(255,248,225,.55),rgba(205,178,122,.45))}
.ev-choices button:hover,.ev-choices button:focus-visible{background:#3b2414;color:#f1e2c0;outline:none}
.ev-choices button:hover svg,.ev-choices button:focus-visible svg{stroke:#f1e2c0}
.ev-choices svg{width:22px;height:22px;flex:none;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ev-choices b{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:18px;min-width:70px}
.ev-choices small{font-size:14px;font-style:italic;opacity:.85}
.ev-out{flex:none;width:220px;padding:18px 16px;border-left:1px solid var(--line);background:rgba(120,78,30,.08)}
.ev-out h4{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:17px;margin-bottom:8px}
.ev-out li{list-style:none;font-size:14px;padding:3px 0 3px 16px;position:relative}
.ev-out li::before{content:'';position:absolute;left:2px;top:10px;width:6px;height:6px;background:var(--ink);transform:rotate(45deg)}
@media (max-width:640px){
  .ev-card{flex-direction:column}
  .ev-main{padding:14px 14px 16px}
  .ev-art{width:84px;height:74px}
  #evTitle{font-size:22px}
  #evText,.ev-quote{font-size:15px}
  .ev-choices b{min-width:58px;font-size:17px}
  .ev-out{width:auto;border-left:0;border-top:1px solid var(--line);padding:12px 14px}
}
/* ===== end port town + event cards ===== */

/* ===== parchment pop-ups + navy choice bars (menu, pause, dialogs, events, notices, town rooms) ===== */
.torn{position:relative;isolation:isolate;background:transparent!important;border:0!important;box-shadow:none!important;color:#3b2414;font-family:'IM Fell English',Georgia,serif}
.torn::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:3px;filter:url(#tornEdge) drop-shadow(0 6px 14px rgba(0,0,0,.45));
  background:radial-gradient(ellipse at 20% 15%,rgba(120,78,30,.14),transparent 45%),radial-gradient(ellipse at 85% 80%,rgba(120,78,30,.16),transparent 50%),
  radial-gradient(ellipse at center,#f3e7c6 0%,#e8d7ab 65%,#d4b980 100%)}
.navy{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px;border-radius:6px;border:1px solid #0b1219;
  background:linear-gradient(180deg,#26384a,#162431);color:#f1e6c8;font-family:'IM Fell English',Georgia,serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 rgba(0,0,0,.35)}
.navy:hover:not(:disabled),.navy:focus-visible{background:linear-gradient(180deg,#30475d,#1b2c3b);outline:none}
.navy:disabled{opacity:.45}
.navy svg{width:24px;height:24px;flex:none;stroke:#f1d9a0;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.navy b{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:19px;min-width:96px}
.navy small{font-style:italic;font-size:14px;opacity:.85;flex:1}
.navy em{font-style:normal;font-size:12px;color:#f1d9a0;white-space:nowrap}
.navy::after{content:'\203A';font-size:22px;opacity:.7;margin-left:auto}
/* main menu */
#menu{background:rgba(6,20,28,.45)}
.menu-card{width:min(520px,100%);padding:28px 26px 22px;text-align:center}
.menu-card h1{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;color:#2a1a0e;text-shadow:none;margin-bottom:18px}
.menu-card .modes{width:100%}
.menu-card .modes button{flex-wrap:wrap}
.menu-card .modes em:empty{display:none}
.menu-card .linkbtn{color:#6b5237}
.menu-card .keys{color:#6b5237}
/* generic dialog (pause, settings, sunk, loot, upgrades) */
#panel{background:rgba(6,14,18,.5)}
#panel .card.torn{padding:24px 24px 20px;width:min(480px,100%)}
#panel .card.torn.wide{width:min(680px,100%)}
#pTitle{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:28px;text-align:center;margin-bottom:6px}
#pBody{color:#3b2414;font-size:16px;text-align:center}
#pBody:empty{display:none}
#pBtns{gap:8px}
#pBtns button{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:6px;border:1px solid #0b1219;
  background:linear-gradient(180deg,#26384a,#162431);color:#f1e6c8;font-family:'IM Fell English SC',Georgia,serif;font-size:18px;text-align:left}
#pBtns button:hover:not(:disabled){background:linear-gradient(180deg,#30475d,#1b2c3b);border-color:#0b1219}
#pBtns button small{font-family:'IM Fell English',Georgia,serif;font-style:italic;color:#e4d3a8;font-size:13px;margin-left:auto}
#pBtns button::after{content:'\203A';font-size:20px;opacity:.7}
/* event card: banner art, centered title, navy choices */
.ev-card{display:block;width:min(560px,100%);padding:22px 26px 24px;margin:auto}
.ev-main{padding:0}
.ev-head{flex-direction:column;align-items:center;gap:8px;text-align:center}
.ev-art{width:100%;height:120px;border:0;background:none}
.ev-art svg{width:auto;height:100%;stroke:#2a1a0e}
.ev-text h2{font-family:'IM Fell English SC',Georgia,serif;font-size:30px;font-weight:400;line-height:1.05}
.ev-text p{font-size:17px;margin-top:6px}
.ev-quote{border-left:0;padding-left:0}
.ev-choices{margin-top:14px}
.ev-choices button{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:6px;border:1px solid #0b1219;
  background:linear-gradient(180deg,#26384a,#162431);color:#f1e6c8}
.ev-choices button:hover,.ev-choices button:focus-visible{background:linear-gradient(180deg,#30475d,#1b2c3b);color:#f1e6c8}
.ev-choices svg,.ev-choices button:hover svg,.ev-choices button:focus-visible svg{stroke:#f1d9a0}
.ev-choices b{font-size:19px;min-width:84px}
.ev-choices small{flex:1}
.ev-choices button::after{content:'\203A';font-size:22px;opacity:.7}
/* phones: a choice's hint sits under its name at full width, not squeezed into a 4-line column beside it */
@media (max-width:600px){
  .ev-choices .navy.navy{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;row-gap:2px;align-items:center}
  .ev-choices .navy.navy > svg,.ev-choices .navy.navy > .ev-noic,.ev-choices .navy.navy > .ev-ic{grid-column:1;grid-row:1 / span 2}
  .ev-choices .navy.navy b{grid-column:2;grid-row:1;min-width:0}
  .ev-choices .navy.navy small{grid-column:2;grid-row:2;margin:0;font-size:14px;line-height:1.25}
  .ev-choices .navy.navy small:empty{display:none}
  .ev-choices .navy.navy::after{grid-column:3;grid-row:1 / span 2;margin:0}
  .ev-choices .navy.navy:not(:has(> svg,> .ev-noic,> .ev-ic)){grid-template-columns:1fr auto}
  .ev-choices .navy.navy:not(:has(> svg,> .ev-noic,> .ev-ic)) b,.ev-choices .navy.navy:not(:has(> svg,> .ev-noic,> .ev-ic)) small{grid-column:1}
  .ev-choices .navy.navy:not(:has(> svg,> .ev-noic,> .ev-ic))::after{grid-column:2}
}
.ev-out{width:auto;border-left:0;border-top:1px solid rgba(122,90,50,.4);background:none;padding:10px 4px 0;margin-top:12px}
/* quest / news notices, top right under the hud */
#notices{position:fixed;right:max(12px,env(safe-area-inset-right));top:calc(max(10px,env(safe-area-inset-top)) + 84px);z-index:14;display:grid;gap:10px;width:min(320px,calc(100vw - 24px));pointer-events:none}
.notice{pointer-events:auto;padding:14px 16px 14px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:start;animation:noticeIn .35s ease-out}
.notice.out{animation:noticeOut .3s ease-in forwards}
@keyframes noticeIn{from{opacity:0;transform:translateX(30px)}}
@keyframes noticeOut{to{opacity:0;transform:translateX(30px)}}
.notice .ni{width:42px;height:42px;border-radius:6px;background:linear-gradient(180deg,#26384a,#162431);display:grid;place-items:center;grid-row:span 2}
.notice .ni svg{width:26px;height:26px;stroke:#f1d9a0;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.notice .nk{font-family:'IM Fell English SC',Georgia,serif;font-size:14px;opacity:.75;line-height:1}
.notice h4{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:19px;line-height:1.1;grid-column:2}
.notice p{grid-column:2/-1;font-size:14px;line-height:1.3;margin-top:2px} /* lines up under the title, not under the icon */
.notice .nx{background:none;border:0;font-size:18px;color:#3b2414;grid-column:3;grid-row:1;padding:0 2px;line-height:1}
.notice .navy{grid-column:1/-1;justify-content:center;margin-top:8px;padding:8px 12px}
.notice .navy::after{content:none}
@media (max-width:600px){#notices{top:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 170px);width:calc(100vw - 24px)}}
/* town rooms: panel sizes to its content, navy buttons */
@media (min-width:761px){
  #room{bottom:auto;max-height:calc(100% - var(--top) - var(--pad));max-width:860px;display:flex} /* rooms start at the plate's top now, so they can run to the bottom margin */
  .room-card{height:auto;max-height:100%;padding:18px 24px 24px}
}
.room-card .list{gap:8px}
.room-card .list button,.room-card .chips button{border-radius:6px;border:1px solid #0b1219!important;background:linear-gradient(180deg,#26384a,#162431)!important;color:#f1e6c8!important;font-family:'IM Fell English',Georgia,serif}
.room-card .list button:hover:not(:disabled),.room-card .chips button:hover:not(:disabled){background:linear-gradient(180deg,#30475d,#1b2c3b)!important}
.room-card .list button small{color:#e4d3a8!important}
.room-card .chips button{padding:9px 14px;font-size:15px}
.room-card .acts button{border-radius:4px}
.room-card table{margin-top:6px}
.room-card .stat{background:rgba(122,90,50,.1);border:1px solid rgba(122,90,50,.3);border-radius:4px;padding:6px 10px;display:inline-block}
.room-card .keeper,.room-card .said{font-size:18px}
/* ===== end parchment pop-ups ===== */
/* polish: compact single-row mode bars, fell title, disabled bars, notices clear town header */
.menu-card .modes button{flex-direction:row;flex-wrap:nowrap;align-items:center;text-align:left;gap:12px;padding:10px 14px;min-height:0}
.menu-card .modes button svg{flex:0 0 26px;width:26px;height:26px}
.menu-card .modes button b{flex:0 0 auto}
.menu-card .modes button small{flex:1 1 auto;min-width:0;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-card .modes button em{flex:0 0 auto;margin-left:auto}
#menu .menu-card h1{text-shadow:none;font-family:'IM Fell English SC',serif;font-weight:400}
.navy:disabled{opacity:1;background:#3b4652;color:#b9b2a3;border-color:#2a323b;box-shadow:none;cursor:not-allowed}
body:has(#town:not([hidden])) #notices{top:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 12px)}
/* touch helm: big arrows bottom corners, sail stacked over right, cannons around a ship */
#touch{align-items:flex-end;padding:0 max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))} /* landscape: arrows clear the island */
#touch .tl,#touch .tr{display:flex;flex-direction:column;gap:8px;align-items:stretch;width:88px}
#touch .arrow{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:rgba(15,37,48,.6);border:2px solid rgba(233,220,184,.45)}
#touch .arrow svg{width:40px;height:40px;fill:none;stroke:#e9dcb8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#touch .small{height:44px;min-width:0;width:88px;font-size:14px;font-family:'IM Fell English',Georgia,serif}
#touch .helm{position:relative;width:150px;height:140px;flex:0 0 auto}
#touch .hull{position:absolute;left:50%;top:10px;width:62px;height:120px;transform:translateX(-50%);pointer-events:none}
#touch .hull path{fill:rgba(233,220,184,.18);stroke:rgba(233,220,184,.6);stroke-width:2}
#touch .hull .deck{fill:none;stroke:rgba(233,220,184,.35);stroke-width:1.5}
#touch .can{position:absolute;width:54px;height:54px;min-width:0;border-radius:50%;padding:0;display:grid;place-items:center;
  background:rgba(60,20,14,.55);border:2px solid var(--accent);color:#e9dcb8}
#touch .can svg{width:30px;height:20px}
#touch .can.port{left:0;top:62px}
#touch .can.port svg{transform:scaleX(-1)}
#touch .can.stbd{right:0;top:62px}
#touch .can.bow{left:50%;top:-30px;transform:translateX(-50%)}
#touch .can.bow svg{transform:rotate(-90deg)}
#touch .can.on{background:rgba(154,42,28,.8)}
/* phone menu: keep the bars inside the card */
.menu-card .modes button{box-sizing:border-box;width:100%;min-width:0;overflow:hidden}
@media (max-width:600px){
  .menu-card{padding:22px 16px 18px}
  .menu-card .modes button small{display:none}
  .menu-card .modes button em{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
  /* compass strip owns the very top; panels sit under it */
  #hud #left,#hud #res{top:calc(var(--st) + 44px)}
}
@media (pointer:coarse){.menu-card .keys{display:none}}
/* date/weather card retired; grapple shows only in boarding (or landing) range */
#dateBadge{display:none!important}
#touch .grab{width:72px;height:72px;min-width:0;border-radius:50%;align-self:center;padding:0;display:grid;place-items:center;
  background:rgba(60,20,14,.6);border:2px solid #c9a45a;animation:grabIn .25s ease-out}
#touch .grab svg{width:40px;height:40px;fill:none;stroke:#e9dcb8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#touch .grab .g-dig,#touch .grab.dig .g-hook{display:none}
#touch .grab.dig .g-dig{display:block}
@keyframes grabIn{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
/* reload rings: the red ring fills as the guns reload; bow greys out with no bow gun */
#touch .can{border:2px solid rgba(233,220,184,.25);--p:1}
#touch .can::before{content:'';position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--accent) calc(var(--p) * 1turn), rgba(233,220,184,.12) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
#touch .can.ready::before{background:var(--accent);filter:drop-shadow(0 0 4px rgba(200,60,40,.8))}
#touch .can:not(.ready) svg{opacity:.55}
#touch .can.none{background:rgba(40,44,48,.45);border-color:rgba(233,220,184,.12);color:rgba(233,220,184,.3);pointer-events:none}
#touch .can.none::before{display:none}
#touch .auto{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);min-width:0;width:50px;height:26px;padding:0;border-radius:13px;
  font:13px 'IM Fell English SC',Georgia,serif;color:rgba(233,220,184,.7);background:rgba(15,37,48,.7);border:1px solid rgba(233,220,184,.3)}
#touch .auto.on{background:var(--accent);color:#fff4df;border-color:#f0c9a0;box-shadow:0 0 8px rgba(200,60,40,.7)}
/* auto fire: earned with a full crew, sits on top of the sail stack */
#touch .auto{position:static;transform:none;width:88px;height:34px;border-radius:17px;align-self:stretch;animation:grabIn .25s ease-out}
/* qa pass */
.room-card .stat span{white-space:nowrap}
.room-card button:disabled,.navy:disabled{opacity:.5;background:linear-gradient(#26364a,#1b2838);color:#d8d0bd;border-color:#1b2838;filter:saturate(.5);box-shadow:none}
body:has(#panel:not([hidden])) #notices,body:has(#event:not([hidden])) #notices{display:none}
@media (max-width:760px){
  #town{background:#d3bf92}
  #town::before{background:linear-gradient(rgba(211,191,146,0),#d3bf92)}
  #townArt{height:34vh}
  .tw-plate{margin-top:calc(34vh - var(--top) - 130px)}
  .tw-plate h2{font-size:30px}
  .place{padding:6px 8px;gap:10px}
  .place b{font-size:17px}
  .place small{font-size:12px}
  .place svg{width:26px;height:26px}
}
.room-card .list button:disabled,.room-card .chips button:disabled{background:rgba(255,248,225,.35)!important;border:1px solid rgba(122,90,50,.45)!important;color:rgba(59,36,20,.55)!important;cursor:not-allowed} /* disabled = outlined parchment, same as the market's -1/all */
/* town left column: name plate, then gold/cargo/crew, then places; rooms line up with the plate */
.tw-left{position:absolute;top:var(--top);left:max(var(--pad),env(safe-area-inset-left));width:var(--colw);bottom:var(--pad);display:flex;flex-direction:column;gap:8px;z-index:1}
.tw-left .tw-plate,.tw-left .tw-res,.tw-left .tw-places{position:relative;top:auto;left:auto;right:auto;width:auto}
.tw-left .tw-res{justify-content:space-between;gap:6px}
.tw-left .tw-res .pill{flex:1;min-width:0}
.tw-left .tw-places{max-height:none;flex:0 1 auto;min-height:0}
.tw-plate h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(20px,2vw,28px)}
.tw-plate > div{min-width:0}
#room{top:var(--top)}
.room-card .job{display:flex;align-items:center;gap:12px;text-align:left}
.room-card .job span{flex:1;min-width:0}
.room-card .job b{display:block}
.room-card .job em{font-style:normal;white-space:nowrap;color:#f1d9a0;font-size:1.05em}
@media (max-width:760px){.tw-left{display:contents}}
.room-res{display:none}
@media (max-width:760px){
  .tw-plate{order:1}.tw-left .tw-res,#townRes{order:2;margin-top:8px;justify-content:space-between}.tw-places{order:3}
  #townRes .pill{flex:1}
  .tw-plate{margin-top:calc(34vh - 110px)}
  .room-res{display:flex;position:static;gap:6px;margin:0 0 10px}.room-res .pill{flex:1}
}
/* four cards in a 2x2 grid; town names wrap instead of truncating */
.tw-left .tw-res,.room-res,#townRes{display:grid!important;grid-template-columns:1fr 1fr;gap:6px}
.tw-plate h2{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.05;font-size:clamp(20px,1.8vw,26px)}
@media (min-width:761px){.room-res{display:none!important}}
/* desktop: the places list is always visible, so no back button (tap the open place again to close it) */
@media (min-width:761px){.room-top button[data-tab=port]{display:none}}
/* passenger countdown under the ship card */
#jobTimer{padding:6px 12px;display:grid;gap:2px;font-size:15px;pointer-events:none}
#jobTimer div{display:flex;gap:10px;align-items:baseline}
#jobTimer b{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:19px;min-width:44px}
#jobTimer span{opacity:.8;font-style:italic}
#jobTimer .soon b{color:#9a2a1c}
#jobTimer .late b{color:#9a2a1c;opacity:.7}
/* desktop: town info lives in the name plate */
.tw-plate{flex-wrap:wrap}
.plate-info{flex-basis:100%;padding:6px 0 0;margin-top:4px;border-top:1px solid rgba(122,90,50,.35)}
.plate-info table{font-size:15px}
.plate-info td{padding:2px 2px}
.plate-info .tw-fact{font-size:14px;margin-top:6px}
.tw-left .tw-places{overflow:auto}
#townInfo{display:none}

/* bigger subtext */
.place small{font-size:15px}
.room-card small,.room-card .job small{font-size:14px}
.pill small{font-size:13px}
@media (max-width:760px){.place small{font-size:14px}}
.tw-plate{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
.plate-info{grid-column:1/-1}
.plate-info td{padding:1px 2px}
@media (min-width:761px) and (max-height:900px){.place{padding:5px 8px}.place svg{width:26px;height:26px}.plate-info .tw-fact{display:none}}
@media (max-width:760px){.place{padding:4px 8px}}
/* shop cards: name + blurb + stat chips on the left, price on the right */
.room-card .item{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px}
.room-card .item .it-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.room-card .item .it-main > b{font-size:19px;font-weight:400;font-family:'IM Fell English SC',Georgia,serif}
.room-card .item .it-main > small{font-style:italic;opacity:.85}
.it-stats{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.it-stats span{font-size:13px;padding:1px 7px;border:1px solid rgba(241,217,160,.3);border-radius:10px;color:#e4d3a8;background:rgba(255,255,255,.04)}
.it-stats span b{color:#f1e6c8;margin-right:4px;font-weight:400}
.it-side{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;min-width:70px}
.it-side em{font-style:normal;font-size:22px;color:#f1d9a0;line-height:1}
.it-side small{font-size:12px!important;opacity:.8}
.it-side .why{font-style:normal;font-size:12px;color:#f0a58f;margin-top:4px}
.slotbar{display:flex;align-items:center;gap:6px;margin:4px 0 10px}
.slotbar i{width:16px;height:16px;border:1.5px solid #6b5237;border-radius:3px;display:inline-block}
.slotbar i.on{background:#26384a;border-color:#162431}
.fitted{display:grid;gap:6px}
.fit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border:1px solid rgba(122,90,50,.35);border-radius:6px;background:rgba(255,248,225,.35)}
.fit-row b{font-weight:400;font-family:'IM Fell English SC',Georgia,serif;font-size:17px}
.fit-row button{padding:6px 12px;border-radius:6px;border:1px solid #0b1219;background:linear-gradient(180deg,#26384a,#162431);color:#f1e6c8;font-family:inherit;font-size:14px}
/* sea chart overlay */
#chart{position:fixed;inset:0;z-index:15;background:rgba(8,14,20,.72);backdrop-filter:blur(3px)}
#chart canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.chart-ui{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:8px}
.chart-ui button{width:48px;height:48px;border-radius:50%;border:1px solid #0b1219;background:linear-gradient(180deg,#26384a,#162431);color:#f1e6c8;font-size:26px;line-height:1;font-family:Georgia,serif}
.chart-ui button[data-z=close]{margin-top:10px;background:#e9dcb8;color:#3b2414;border-color:#6b5237}
.chart-hint{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));text-align:center;color:#f1e6c8;text-shadow:0 1px 3px #000;font-style:italic;pointer-events:none}
/* readable secondary text on parchment dialogs */
#pBody .stat,#pBody small,#pBody .small,#pBody .dim{color:#5a3d22;opacity:1}
#pBody .stat{display:inline-block;margin-top:6px;padding:3px 10px;border:1px solid rgba(122,90,50,.4);border-radius:4px;background:rgba(122,90,50,.1);font-size:15px}
#pBtns button:disabled{opacity:.55;filter:saturate(.4) brightness(.9)}
.ev-quote{color:#6b4a2a!important;opacity:1!important}
/* ship card: a big labeled hull bar, slimmer labeled sails/crew */
.bars{gap:4px}
.bar{position:relative;height:13px;border-radius:3px}
.bar.hull{height:20px}
.bar span{position:absolute;inset:0;display:flex;align-items:center;padding-left:6px;font-size:12px;line-height:1;color:#fff8e6;text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap}
.bar.hull span{font-size:14px}
.bar span:empty{display:none}
@media (max-width:600px){.bar{height:11px}.bar.hull{height:17px}.bar span{font-size:11px}.bar.hull span{font-size:13px}}
/* top band: gold / cargo / crew across the top (the heading compass is gone); minimap goes top right */
#hud #pills{position:fixed;top:var(--st);left:50%;transform:translateX(-50%);flex-direction:row;align-items:center;gap:18px;padding:5px 16px}
#hud #res{top:var(--st)}
@media (max-width:600px){
  #hud #pills{left:var(--sl);right:calc(var(--sr) + 70px);transform:none;justify-content:space-around;gap:6px;padding:5px 8px}
  #hud #pills .pill small{display:none}
  #hud #left{top:calc(var(--st) + 48px)}
}
/* touch: sail level lives between the sail buttons, not on the ship card */
.is-touch #shipCard .bar.sails{display:none}
#touch .sailmeter{position:relative;height:22px;border-radius:11px;background:rgba(15,37,48,.7);border:1px solid rgba(233,220,184,.3);overflow:hidden;pointer-events:none}
#touch .sailmeter i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#e8c35a,#b88a22);opacity:.85}
#touch .sailmeter span{position:relative;display:block;text-align:center;font-size:12px;line-height:20px;color:#fff8e6;text-shadow:0 1px 2px rgba(0,0,0,.8)}
#touch .hull #hullFill{stroke:none}
/* ship card: numbers instead of bars; the top band is gone */
#shipCard .bars,#hud #pills{display:none!important}
#cardStats{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px}
#cardStats .cs{display:inline-flex;align-items:center;gap:4px;font-size:16px;line-height:1}
#cardStats .cs svg{width:18px;height:18px;flex:none}
#cardStats .cs b{font-weight:400}
#cardStats .hull.warn b{color:#9a6a10}#cardStats .hull.bad b{color:#9a2a1c}
@media (max-width:600px){#hud #left{top:var(--st)}#cardStats{gap:3px 9px}#cardStats .cs{font-size:14px}#cardStats .cs svg{width:15px;height:15px}}
html:not(.is-touch) #hud #notes{display:none!important}
/* shop list: ruled rows like the town info table */
.room-card .list{gap:0;border-top:1px solid rgba(122,90,50,.45)}
.room-card .list button.item{background:transparent!important;border:0!important;border-bottom:1px solid rgba(122,90,50,.45)!important;border-radius:0;color:var(--ink)!important;padding:10px 4px}
.room-card .list button.item:hover:not(:disabled){background:rgba(122,90,50,.08)!important}
.room-card .list button.item:disabled{opacity:.45;filter:none}
.room-card .item .it-main > b{font-size:18px}
.room-card .list button.item small{color:#5a3d22!important}
.it-stats{gap:0 6px;margin-top:2px}
.it-stats span{border:0;padding:0;background:none;color:#6b4c2c;font-size:14px}
.it-stats span b{color:var(--ink);margin:0}
.it-stats i{font-style:normal;color:rgba(122,90,50,.6)}
.it-side em{color:var(--ink);font-size:19px}
.it-side em.refund{color:#2f6b2f}
.it-side em.mine{font-style:italic;font-size:16px;color:#6b4c2c}
.it-side .why{color:#9a3b25}
.trade-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 4px;font-size:17px;color:var(--ink)}
.trade-row em{font-style:normal;font-size:19px}
@media (orientation:portrait){.chart-ui{top:auto;right:0;left:0;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 34px);flex-direction:row;justify-content:center}.chart-ui button[data-z=close]{margin:0 0 0 18px}}
/* town as one torn parchment sheet on a dark backdrop, like the chart. the town sketch is printed on the paper, panels sit flat on it */
#town{background:#0c161d;--pad:40px}
#town .tw-sheet{position:absolute;inset:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));z-index:0;pointer-events:none}
#townArt{clip-path:inset(max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)));mix-blend-mode:multiply;opacity:.55;z-index:0}
#town .parch{background:rgba(255,248,225,.42)!important;box-shadow:none!important;border:1px solid rgba(59,36,20,.4)!important}
#town .tw-res .pill{background:rgba(255,248,225,.42)!important;box-shadow:none!important}
@media (max-width:760px){#town{--pad:24px}#town .tw-sheet{position:fixed;inset:6px}#townArt{clip-path:inset(10px)}}
#town.inroom #townArt{opacity:.2}
#town .room-card.parch{background:rgba(247,238,212,.9)!important}
#town:not(.inroom) .parch{background:rgba(250,242,218,.78)!important}
@media (max-width:760px){#townArt{clip-path:inset(10px 12px 0 12px);-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}}
@media (max-width:760px){#town{background:#0c161d!important}#town::before{display:none}}
@media (max-width:760px){#town #room{background:transparent}#town .room-card.parch{background:radial-gradient(ellipse at center,#f3e7c6 0%,#e8d7ab 75%,#dcc596 100%)!important}}
/* panels are solid paper: the town sketch never shows through text */
#town .parch,#town:not(.inroom) .parch,#town .tw-res .pill{background:linear-gradient(170deg,#f6ecd0 0%,#efe2bf 55%,#e6d5ab 100%)!important}
#town .room-card.parch{background:linear-gradient(170deg,#f6ecd0 0%,#efe2bf 55%,#e6d5ab 100%)!important}
#pBody table.glass{width:100%;border-collapse:collapse;margin:4px 0 8px;font-size:16px}#pBody table.glass td{padding:5px 4px;border-bottom:1px solid rgba(122,90,50,.35);color:#3b2414}#pBody table.glass td:last-child{text-align:right}
/* ===== type scale for town rooms: one set of sizes everywhere =====
   title 26 · body/quote 17 · item name 18 · price 18 · buttons 16 · label 14 · detail 14 */
#town .room-card{font-size:17px!important;line-height:1.4}
#town .room-top h3{font-size:26px!important;text-transform:lowercase}
#town .room-card .keeper,#town .room-card .said{font-size:17px!important;line-height:1.45}
#town .room-card .small,#town .room-card p.small{font-size:14px!important;color:#6b4c2c!important;margin:14px 0 6px;letter-spacing:.02em}
#town .room-card .chips button,#town .room-card .acts button{font-size:16px!important;padding:8px 14px}
@media (max-width:520px){#town .room-card .acts button{padding:8px 8px}} /* the big-button rule above undid the narrow-phone padding; keep the market row on screen */
#town .room-card .item .it-main>b{font-family:'IM Fell English',Georgia,serif!important;font-size:18px!important;text-transform:none;letter-spacing:0}
#town .room-card .item .it-main>small{font-size:14px!important;line-height:1.35}
#town .room-card .it-stats span{font-size:14px!important}
#town .room-card .it-side em{font-size:18px!important}
#town .room-card .it-side .why{font-size:13px!important}
#town .room-card .trade-row{font-size:17px}#town .room-card .trade-row em{font-size:18px}
#town .room-card td,#town .room-card th{font-size:15px!important}
#town .room-card .job b{font-size:17px!important}#town .room-card .job small{font-size:14px!important}#town .room-card .job em{font-size:16px!important}
#town .room-card .fit-row{font-size:16px}
#town .room-card .slotbar .small{margin:0!important}
#town .room-card .job b{font-weight:400!important}
#panel{z-index:30}
#pBody table.glass td:first-child{text-align:left}
.room-card .list button.item.off{opacity:.45}
#town .room-card .fit-row span{font-family:'IM Fell English',Georgia,serif;font-size:17px;text-transform:none}
.trade-row .navy-btn{font-family:'IM Fell English',Georgia,serif;font-size:16px;padding:6px 14px;border-radius:6px;border:1px solid #0b1219;background:linear-gradient(180deg,#26384a,#162431);color:#f1e6c8}.trade-row .navy-btn:disabled{opacity:.45}
/* room section headers: bigger than the rows under them, count on the right */
#town .room-card .sec{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:'IM Fell English',Georgia,serif;font-weight:400;font-size:21px;color:#3b2414;margin:22px 0 4px;padding-bottom:6px;border-bottom:1.5px solid rgba(59,36,20,.55)}
#town .room-card .sec:first-of-type{margin-top:8px}
#town .room-card .sec span{font-size:15px;color:#6b4c2c}
#town .room-card .sec + .list{border-top:0}
#town .room-card .fitted:empty{display:none}
#town .room-card .fitted{margin:8px 0 4px}
#town .room-card .it-stats{gap:2px 14px}#town .room-card .it-stats i{display:none}
#town .room-card .ledger table{width:100%;border-collapse:collapse}#town .room-card .ledger td{padding:6px 4px;border-bottom:1px solid rgba(122,90,50,.3);font-size:16px!important}#town .room-card .ledger td:last-child{text-align:right}
/* section headers read as headers: an inked band, not loose text */
#town .room-card .sec{background:linear-gradient(90deg,rgba(59,36,20,.14),rgba(59,36,20,.04));border:0;border-left:4px solid #8a2a1c;border-radius:0 4px 4px 0;padding:8px 12px;margin:24px 0 10px;font-size:20px}
#town .room-card .sec:first-of-type{margin-top:10px}
/* the keeper speaks: name, then the line, like dialogue */
#town .room-card .keeper{margin:6px 0 4px;padding:10px 14px;border-left:3px solid rgba(59,36,20,.35);background:rgba(255,248,225,.5);font-style:normal}
#town .room-card .keeper b{display:block;font-weight:400;font-size:15px;color:#6b4c2c;letter-spacing:.02em}
#town .room-card .keeper p{margin:2px 0 0;font-style:italic;font-size:20px!important;line-height:1.35;color:#3b2414}
/* job buttons keep their spacing */
#town .room-card .list .job{margin-bottom:8px}
#pBody .ledger table{width:100%;border-collapse:collapse;margin-bottom:10px}#pBody .ledger td{padding:5px 4px;border-bottom:1px solid rgba(122,90,50,.35);color:#3b2414}#pBody .ledger td:last-child{text-align:right}
#pBody .ledger .sec{display:flex;justify-content:space-between;font-size:18px;font-weight:400;margin:10px 0 4px;padding:6px 10px;border-left:4px solid #8a2a1c;background:rgba(59,36,20,.1)}
#pBody .ledger td:first-child{text-align:left}
#touch .grab .g-dock{display:none}
#touch .grab.dock .g-dock{display:block}#touch .grab.dock .g-hook,#touch .grab.dock .g-dig{display:none}
#touch .grab.dock.slow{opacity:.45}
/* each room section is a card with its own header; replaces the banded headers */
#town .room-card .sec-card{background:rgba(255,250,232,.7);border:1px solid rgba(59,36,20,.25);border-radius:6px;padding:12px 14px 14px;margin:12px 0}
#town .room-card .sec-card.lead{background:none;border:0;padding:0;margin:0}
#town .room-card .sec-card.lead:not(:has(*)){display:none}
#town .room-card .sec{background:none!important;border:0!important;border-radius:0;padding:0 0 8px!important;margin:0 0 8px!important;font-size:23px!important;border-bottom:1px solid rgba(59,36,20,.25)!important}
#town .room-card .sec-card > .list:last-child > .item:last-child,#town .room-card .sec-card .list .item:last-child{border-bottom:0!important}
#town .room-card .sec-card .list{border-top:0}
/* stat strip: gold: 800 | cargo: 0/20 | crew | hull, one slim line */
.stat-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 8px;padding:7px 12px;border-radius:8px;font-family:'IM Fell English',Georgia,serif;font-size:16px;color:#5a3d22;width:100%;box-sizing:border-box}
.stat-strip b{font-weight:400;color:var(--ink)}
.stat-strip i{font-style:normal;color:rgba(122,90,50,.5)}
@media (max-width:420px){.stat-strip{font-size:15px;padding:6px 10px;gap:2px 6px}}
#town .room-card .list.fitted{margin:4px 0 6px;border-bottom:1px dashed rgba(122,90,50,.45)}
#town .room-card .list.fitted:empty{display:none}
#town .room-card .item .it-side .why{font-style:normal}
@media (min-width:761px){.room-res{display:none!important}}
/* shop tiles: square cards, picture on top */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin-top:10px}
@media (max-width:420px){.tiles{grid-template-columns:repeat(3,1fr);gap:6px}}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 8px;min-height:150px;border:1px solid rgba(122,90,50,.45);border-radius:8px;background:rgba(255,248,225,.55);color:var(--ink);font-family:'IM Fell English',Georgia,serif;text-align:center;cursor:pointer}
.tile:hover{background:rgba(255,248,225,.85)}
.tile.off{border-color:rgba(122,90,50,.22);background:rgba(255,248,225,.3)}.tile.off > :not(.t-why){opacity:.45} /* the red reason stays readable */
.t-art{display:flex;align-items:center;justify-content:center;width:100%;height:58px}
.t-art .ink-art{width:52px;height:52px}
.ink-art{fill:none;stroke:#3b2414;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.t-art .ship-art{max-width:100%;max-height:58px}
.t-name{font-weight:400;font-size:15px;line-height:1.15}
.t-stats{display:flex;flex-direction:column;font-size:12.5px;color:#6b4c2c;line-height:1.25}
.t-stats b{font-weight:400;color:var(--ink)}
.t-price{margin-top:auto;font-style:normal;font-size:16px}
.t-price.refund{color:#2f6b2a;font-size:14px}.t-price.mine{color:#6b4c2c;font-style:italic}
.t-tag{position:absolute;top:4px;right:5px;font-style:normal;font-size:11px;color:#9a2a1c;letter-spacing:.02em}
/* tiles read bigger where there's room (desktop, tablet); phones and short landscape screens keep the tight grid */
@media (min-width:761px) and (min-height:561px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .tile{min-height:172px;padding:12px 8px 10px;gap:4px}
  .t-name{font-size:17px}
  .t-stats{font-size:14px;line-height:1.3}
  .t-price{font-size:18px}.t-price.refund{font-size:16px}
  .t-tag{font-size:12px}
}
@media (min-width:421px) and (max-width:760px){.t-name{font-size:16px}.t-stats{font-size:13px}}
/* info card popup */
#panel .card.info{width:min(720px,100%);max-height:calc(100vh - 24px);overflow:auto}
.ic-art{display:flex;align-items:center;justify-content:center;min-height:150px;border:1px solid rgba(122,90,50,.45);border-radius:8px;background:rgba(255,248,225,.45);padding:10px}
.ic-art .ink-art{width:120px;height:120px}
.ic-art .ship-art{width:100%;max-width:420px}
.ic-sub{margin:10px 0 2px;font-style:italic;color:#6b4c2c;text-align:center}
.ic-desc{margin:2px 0 6px;text-align:center}
.ic-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:8px 0;font-size:16px;color:#5a3d22}
.ic-stats b{font-weight:400;color:#2a1a0e}
.ic-money{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:8px 10px;border-top:1px solid rgba(122,90,50,.45);border-bottom:1px solid rgba(122,90,50,.45);font-size:16px;color:#5a3d22}
.ic-money b{font-weight:400;color:#2a1a0e;text-align:right}.ic-money b.bad{color:#9a2a1c}.ic-money b.good{color:#2f6b2a}
.ic-note{font-size:14px;color:#6b4c2c;margin:6px 0 0}
@media (min-width:761px){.ic{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.ic-sub,.ic-desc{text-align:left}.ic-sub{margin-top:0}}
#pBody .ic-stats,#pBody .ic-money,#pBody .ic-note{text-align:left}
@media (min-width:761px){.room-card{width:min(620px,100%);box-sizing:border-box}}
@media (min-width:1100px){.room-card{width:min(720px,100%)}} /* big screens: room for 4 shop tiles a row at the larger tile type */
#town .pill span b{display:inline;font-weight:400;font-size:inherit;color:var(--ink)}#town .pill span{white-space:nowrap}
#touch .grab{position:relative}
#menu h1.logo{margin:0 auto 14px;text-shadow:none;line-height:0}#menu h1.logo img{display:block;width:min(360px,78vw);height:auto;margin:0 auto}
/* captain top bar (open sea): portrait with a hull ring, name + level, gold / hold / crew, chart + menu */
#topbar{position:absolute;top:var(--st);left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 16px));display:flex;align-items:center;gap:10px;padding:5px 8px 5px 5px;box-sizing:border-box;
  background:linear-gradient(180deg,#1d2322,#101413);border:2px solid #b8862e;border-radius:40px 12px 12px 40px;box-shadow:0 3px 12px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.6);pointer-events:auto;color:#f1e6c8;font-family:'IM Fell English',Georgia,serif;z-index:5}
#topbar[hidden]{display:none}
#tbCap{position:relative;flex:none;width:58px;height:58px;padding:0;border:0;border-radius:50%;background:#0b0e0d;cursor:pointer}
#tbCap img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:50%;object-fit:cover;object-position:50% 18%}
#tbCap svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#tbCap circle{fill:none;stroke-width:3.2}#tbCap .trk{stroke:rgba(184,134,46,.28)}
#tbRing{stroke:#d9a441;stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round;transition:stroke-dashoffset .3s}
.tb-id{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.tb-id b{font-weight:400;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.tb-id small{font-size:13px;color:#d9b36a}
#tbStats{flex:1;display:flex;justify-content:space-around;gap:10px;min-width:0}
.tb-it{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tb-it svg{width:20px;height:20px;stroke:#d9a441;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb-it b{font-weight:400;font-size:17px;color:#f1e6c8}
.tb-btn{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid #b8862e;background:radial-gradient(circle at 40% 35%,#2a302e,#0d100f);display:grid;place-items:center;padding:0;cursor:pointer}
.tb-btn svg{width:22px;height:22px;stroke:#e0b45a;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.topbar #pauseBtn{display:none!important}
body.topbar #hud #left,body.topbar #hud #res{top:calc(var(--st) + 72px)!important}
@media (max-width:600px){
  #topbar{gap:6px;padding:4px 6px 4px 4px}
  #tbCap{width:50px;height:50px}
  .tb-id{flex:1}.tb-id b{font-size:16px;max-width:120px}
  #tbStats{position:absolute;left:62px;right:96px;bottom:4px;justify-content:flex-start;gap:12px}
  .tb-id{align-self:flex-start;margin-top:2px}
  .tb-it svg{width:16px;height:16px}.tb-it b{font-size:15px}
  .tb-btn{width:34px;height:34px}
  body.topbar #hud #left,body.topbar #hud #res{top:calc(var(--st) + 64px)!important}
}
/* town: the same dark bar in place of the four stat cards */
.tbar{display:flex;align-items:center;justify-content:space-around;gap:8px;padding:6px 8px 6px 14px;background:linear-gradient(180deg,#1d2322,#101413);border:2px solid #b8862e;border-radius:12px;color:#f1e6c8;font-family:'IM Fell English',Georgia,serif;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.tw-left .tw-res,.room-res,#townRes{display:block!important}
.tbar .tb-btn{width:34px;height:34px}
@media (min-width:761px){.room-res{display:none!important}}
/* captain picker + sheet */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.cap{position:relative;padding:0;border:2px solid rgba(122,90,50,.5);border-radius:8px;overflow:hidden;background:#1a1512;cursor:pointer;aspect-ratio:3/4}
.cap img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.cap span{position:absolute;left:0;right:0;bottom:0;padding:3px 4px;font-size:12px;color:#f1e6c8;background:linear-gradient(transparent,rgba(0,0,0,.8));text-align:center}
.cap.on{border-color:#d9a441;box-shadow:0 0 0 2px #d9a441}
.cap-pick{display:flex;gap:14px;align-items:flex-start;text-align:left}
.cap-pick>img{width:110px;height:140px;object-fit:cover;object-position:50% 20%;border-radius:8px;border:2px solid #b8862e;flex:none}
.cap-pick label{display:flex;flex-direction:column;font-size:14px;color:#6b4c2c;gap:3px}
.cap-pick input{font:italic 22px/1.2 'IM Fell English',Georgia,serif;padding:4px 2px 3px;border:0;border-bottom:1.5px solid rgba(59,36,20,.7);border-radius:0;background:transparent;color:#2a1a0e;outline:none;-webkit-appearance:none;appearance:none} /* a name signed on the articles, not a form box */
.cap-pick input:focus{border-bottom-color:#9a2a1c;box-shadow:0 2px 0 -0.5px #9a2a1c}
.cap-pick .cap-who{font-style:italic;color:#6b4c2c;margin:8px 0 2px}
.cap-art img{width:100%;max-height:320px;object-fit:cover;object-position:50% 20%;border-radius:6px}
@media (max-width:600px){.cap-pick>img{width:84px;height:108px}.cap span{font-size:10px}}
.cap-pick>div{flex:1;min-width:0}.cap-pick input{width:100%;box-sizing:border-box}
@media (max-width:600px){.cap-art img{max-height:200px}}
/* top bar v2: the chatgpt frame. bar body is a 9-slice of hud-bar.webp, the portrait sits in hud-ring-small.webp */
#topbar{background:none;border-radius:0;box-shadow:none;border-style:solid;border-width:15px 36px 15px 4px;border-image:url(assets/ui/hud-bar.webp) 60 130 60 20 fill / 15px 36px 15px 4px stretch;
  padding:0 4px 0 64px;margin-left:24px;width:min(700px,calc(100vw - 40px));min-height:40px;gap:12px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
#tbCap{position:absolute;left:-58px;top:50%;transform:translateY(-50%);width:112px;height:97px;border-radius:0;background:none}
#tbCap .tb-face{position:absolute;left:48.6%;top:51.2%;width:52%;height:auto;aspect-ratio:1;inset:auto;transform:translate(-50%,-50%);border-radius:50%;object-fit:cover;object-position:50% 18%}
#tbCap svg{left:48.6%;top:51.2%;width:52%;height:auto;aspect-ratio:1;inset:auto;transform:translate(-50%,-50%) rotate(-90deg)}
#tbCap .tb-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#tbCap circle{stroke-width:2.4}#tbCap .trk{stroke:none}
.tb-id{flex-direction:row;align-items:baseline;gap:8px}
.tb-id small{font-size:14px}
.tb-btn{width:34px;height:34px}

body.topbar #hud #left,body.topbar #hud #res{top:calc(var(--st) + 84px)!important}
@media (max-width:600px){
  #topbar{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:6px;row-gap:2px;padding:0 0 0 46px;margin-left:30px;width:calc(100vw - 44px);border-width:13px 30px 13px 4px;border-image-width:13px 30px 13px 4px;min-height:54px}
  #tbCap{left:-60px;width:100px;height:87px}
  .tb-id{grid-column:1;grid-row:1;flex:none;align-self:end;margin:0}.tb-id b{font-size:16px;max-width:150px}.tb-id small{font-size:13px}
  #tbStats{position:static;grid-column:1;grid-row:2;justify-content:flex-start;gap:14px;align-self:start}
  #tbMenu{grid-column:2;grid-row:1/3}
  body.topbar #hud #left,body.topbar #hud #res{top:calc(var(--st) + 88px)!important}
}
@media (min-width:601px){#topbar{min-height:46px;padding-left:74px;margin-left:30px}#tbCap{left:-66px;width:128px;height:111px}}
@media (max-width:600px){#topbar{width:calc(100vw - 58px)}}
@media (max-width:600px){#panel .cap-art img{max-height:180px!important;width:auto;max-width:100%}}
/* town bar: the same frame art as the sea bar (hud-bar.webp 9-slice), not a css box */
.tbar{background:none;border-radius:0;box-shadow:none;border-style:solid;border-width:13px 32px 13px 4px;border-image:url(assets/ui/hud-bar.webp) 60 130 60 20 fill / 13px 32px 13px 4px stretch;padding:0 4px 0 12px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
.tbar{border-width:13px 32px 13px 32px;border-image:url(assets/ui/hud-bar-town.webp) 60 130 60 130 fill / 13px 32px 13px 32px stretch;padding:0 2px}
#pTitle:empty{display:none}.p-logo{display:block;width:min(300px,70vw);height:auto;margin:0 auto 12px}
/* touch controls: real art (assets/ui/touch-*.webp); states are made here from the one image */
#touch button.art,#touch .grab.dock{background:none!important;border:0!important;border-radius:50%;padding:0;box-shadow:none}
#touch .art img,#touch .grab .g-dock{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
#touch .art.on img,#touch .grab.on .g-dock,#touch .rk.on~img{filter:brightness(1.3) drop-shadow(0 0 6px rgba(240,200,110,.7))}
#touch .art.on{transform:scale(.94)}#touch .can.bow.art.on{transform:translateX(-50%) scale(.94)}
#touch .can.art:not(.ready) img{filter:brightness(.55) saturate(.6)}
#touch .can.art.none img{filter:grayscale(1) brightness(.5)}
#touch .grab.dock.slow{opacity:1}#touch .grab.dock.slow .g-dock{filter:grayscale(1) brightness(.55)}
#touch .grab.dock .g-dock{display:block}
#touch .hull{width:48px;height:132px;top:4px}
#touch .hull img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#touch .hull #hullFill{position:absolute;left:0;right:0;bottom:0;height:100%;-webkit-mask:url(assets/ui/touch-helm.webp) center bottom/100% 132px no-repeat;mask:url(assets/ui/touch-helm.webp) center bottom/100% 132px no-repeat;mix-blend-mode:multiply}
#touch .rocker{position:relative;width:64px;height:170px;align-self:center}
#touch .rocker img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
#touch .rk{position:absolute;left:0;right:0;height:50%;min-width:0;background:none!important;border:0!important;padding:0;z-index:1}
#touch .rk.up{top:0}#touch .rk.down{bottom:0}
#touch #sailPct{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);font-size:12px;color:#f1e6c8;text-shadow:0 1px 2px rgba(0,0,0,.9);white-space:nowrap;pointer-events:none}
#touch .can.art::before{inset:2px;background:conic-gradient(#e8c35a calc(var(--p) * 1turn),transparent 0)}
#touch .can.art.ready::before{display:none}
#touch .rocker{width:54px;height:142px}
#touch #sailPct{bottom:auto;top:-18px}
/* town bar in the narrow left column: 2x2 stats, menu button on the right */
@media (min-width:761px){
  .tw-left .tbar,#townRes .tbar{display:grid;grid-template-columns:1fr 1fr auto;column-gap:10px;row-gap:2px;align-items:center;padding:4px 2px 4px 8px}
  .tw-left .tbar .tb-btn,#townRes .tbar .tb-btn{grid-column:3;grid-row:1 / span 2}
  .tw-left .tbar .tb-it b,#townRes .tbar .tb-it b{font-size:16px}
}
/* one rocker body, the sail drawing swaps inside its window */
#touch .rocker{width:54px;height:142px}
#touch .rocker .rk-icon{inset:auto;left:14%;top:30.76%;width:71.9%;height:40.05%;filter:none}
/* the anchor art only shows in dock mode (the hook/shovel take the button otherwise) */
#touch .grab:not(.dock) .g-dock{display:none!important}
#touch .grab:not(.dock){background:rgba(15,37,48,.6)}
.navy .mode-ic{width:40px;height:40px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
/* main menu: settings | how to play */
.menu-links{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px}
.menu-links i{width:1px;height:26px;background:rgba(59,36,20,.35)}
.mlink{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 2px;font-family:'IM Fell English',Georgia,serif;font-size:18px;color:#3b2414;cursor:pointer}
.mlink img{width:28px;height:28px;object-fit:contain}
.mlink:hover{color:#7a1e12}
.how{width:100%;border-collapse:collapse;font-family:'IM Fell English',Georgia,serif;font-size:16px;color:#3b2414}
.how th{text-align:left;font-weight:400;padding:6px 12px 6px 0;white-space:nowrap;vertical-align:top;opacity:.75}
.how td{padding:6px 0;border-bottom:1px solid rgba(59,36,20,.15)}
#pBody .how th,#pBody .how td{color:#3b2414!important;opacity:1!important;background:none!important;text-align:left!important;font-size:16px}
#pBody .how th{color:#7a5a3a!important;border-bottom:1px solid rgba(59,36,20,.15)}
/* gear art in the top bar and town bar */
.tb-btn{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.tb-btn img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.tb-btn:active img{transform:scale(.92)}
.ic-stats i{font-style:normal;font-size:13px;margin-left:4px}
.ic-stats i.up{color:#2f6b2a}.ic-stats i.dn{color:#9a2a1c}.ic-stats i.eq{color:#8a7458}
/* navy buttons: the real button art (assets/ui/btn-navy.webp, 900x152), 9-sliced so the chamfered gold ends never stretch.
   doubled class so it beats the older .modes/.room-card button rules */
.navy.navy,.trade-row .navy-btn.navy-btn{border:1px solid transparent;border-radius:0;background:none;box-shadow:none;
  border-image:url(assets/ui/btn-navy.webp) 26 72 26 72 fill / 9px 25px / 0 stretch;padding-left:26px;padding-right:26px}
.navy.navy:hover:not(:disabled),.navy.navy:focus-visible,.trade-row .navy-btn.navy-btn:hover:not(:disabled){background:none;border-color:transparent;transform:none;filter:brightness(1.18)}
.navy.navy:disabled,.trade-row .navy-btn.navy-btn:disabled{background:none;border-color:transparent;box-shadow:none;filter:grayscale(.7) brightness(.8);opacity:.6}
/* room chips (tavern drinks, crew hire, house) use the same button art; disabled ones are the same art, greyed */
#town .room-card .chips button{border:1px solid transparent!important;border-radius:0;background:none!important;box-shadow:none;border-image:url(assets/ui/btn-navy.webp) 26 72 26 72 fill / 9px 25px / 0 stretch!important;padding:10px 26px!important;color:#f1e6c8!important}
.room-card .chips button:hover:not(:disabled){background:none!important;filter:brightness(1.18)}
#town .room-card .chips button:disabled{background:none!important;border-color:transparent!important;color:#f1e6c8!important;opacity:.5;filter:grayscale(.85) brightness(.8);cursor:not-allowed}
/* review pass, sep 29 */
/* chevron: always at the right edge; none on back/cancel */
.navy.navy::after{margin-left:auto}
#pBtns .navy.navy small{margin-left:auto}
#pBtns .navy.navy:has(small)::after{margin-left:12px}
.navy.nochev::after{content:none}
/* torn edge: cards that scroll or clip keep the ragged edge inside their box (it left rows of dark dashes) */
.ev-card.torn::before,#panel .card.info.torn::before,#panel .card.wide.torn::before{inset:6px}
/* event card starts below the top bar */
#event{padding-top:calc(max(16px,env(safe-area-inset-top)) + 70px)}
/* short landscape screens: art beside the title, tighter card, so the choices fit without scrolling */
@media (max-height:500px){
  #event{padding-top:calc(max(8px,env(safe-area-inset-top)) + 60px);padding-bottom:8px}
  .ev-card{width:min(620px,100%);padding:12px 22px 14px}
  .ev-head{flex-direction:row;align-items:center;text-align:left;gap:16px}
  .ev-art{width:80px;height:66px;flex:none}
  .ev-text h2{font-size:22px}.ev-text p{font-size:15px;margin-top:3px}.ev-quote{margin-top:4px}
  .ev-choices{margin-top:10px;gap:6px}
}
/* notices: below the minimap on tablets and desktop, under the top bar and clear of the helm on phones */
#notices{top:calc(max(10px,env(safe-area-inset-top)) + 290px);bottom:auto}
@media (max-width:600px){#notices{top:calc(max(10px,env(safe-area-inset-top)) + 275px);bottom:auto}}
/* sail %: beside the rocker, so it never sits on the auto pill */
#touch #sailPct{top:50%;bottom:auto;left:auto;right:calc(100% + 6px);transform:translateY(-50%)}
/* the captain picker is the whole screen: no hud behind it */
body:has(#panel:not([hidden]) .cap-pick) #hud,body:has(#panel:not([hidden]) .cap-pick) #touch{visibility:hidden} /* only while the picker is open */
/* dig grid centred in its panel */
.dig{margin:10px auto}
/* red reason on a disabled tile or button; fitted gear gets its own row above the stock */
.t-why{display:block;font-style:normal;font-size:12px;color:#9a3b25;margin-top:2px}
@media (min-width:761px) and (min-height:561px){.tile .t-why{font-size:13px}}
.chips .t-why{flex-basis:100%}
.tiles.fitted{margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed rgba(59,36,20,.35)}
/* top bar hull turns yellow, then red, like the hull bar at sea */
.tb-it.warn b{color:#e8c35a}.tb-it.bad b{color:#ff7a5c;animation:hullBlink 1s steps(2) infinite}.tbar .tb-it.bad b{animation:none} /* in port it's a fact, not an alarm */
@keyframes hullBlink{50%{opacity:.45}}
/* market rows: see 'town pass, oct 1' */

/* no bow gun: the gold art dimmed, not a black disc */
#touch .can.art.none img{filter:saturate(.35) brightness(.8);opacity:.45}
/* painted ship portraits fill their frame (16:10) instead of the small drawn ship */
.t-art:has(.photo){height:auto}
.t-art .ship-art.photo{width:100%;height:auto;max-height:none;aspect-ratio:16/10;object-fit:cover;border-radius:4px;display:block}
.ic-art:has(.photo){padding:0;overflow:hidden;min-height:0}
.ic-art .ship-art.photo{width:100%;max-width:none;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
/* naked-eye hail: the same painting as a far-off hazy shape, so the class stays the spyglass's to reveal */
.ic-art .ship-art.haze{filter:grayscale(1) sepia(.3) contrast(.7) brightness(.95) blur(4.5px);transform:scale(1.06);opacity:.8}
.ic-art:has(.haze){background:#c9c2ae}

#pBtns .navy.nochev::after{content:none}
.t-tag{z-index:1;background:rgba(243,231,198,.92);padding:0 5px;border-radius:3px}
/* aaron's painted icon set (assets/icons) */
.icon-art{object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.t-art:has(.icon-art){height:78px}.t-art .icon-art{width:78px;height:78px}.ic-art .icon-art{width:140px;height:140px}
img.gd{width:22px;height:22px;vertical-align:-6px;margin-right:6px;object-fit:contain}
.notice .ni:has(img){background:none}.notice .ni img{width:44px;height:44px;object-fit:contain}
/* board / dig buttons: the painted hook and shovel, like the anchor */
#touch .grab:not(.dock){background:none!important;border:0!important;box-shadow:none}
#touch .grab .g-hook,#touch .grab .g-dig{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
/* auto fire: the painted round button; dim when off, glowing when on */
#touch .auto.auto{width:60px;height:60px;padding:0;border:0!important;border-radius:50%;background:none!important;box-shadow:none;align-self:center}
#touch .auto img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:grayscale(.8) brightness(.7) drop-shadow(0 2px 4px rgba(0,0,0,.5))}
#touch .auto.on img{filter:drop-shadow(0 0 8px rgba(240,200,110,.8))}
/* dig grid on painted sand; dug holes show the dug tile under the number */
.dig button{background:url(assets/icons/world-sand-tile.webp) center/cover!important;border-color:#b89a62;color:#3b2414;font-weight:700;text-shadow:0 1px 1px rgba(255,240,200,.8)}
.dig button[class^=d]{background-image:url(assets/icons/world-dug-tile.webp)!important;color:#f3e7c6;text-shadow:0 1px 2px #000}
.chest-art{display:block;width:120px;height:120px;margin:0 auto 6px;object-fit:contain}


/* menus + shared components pass, oct 1 */
/* dialog buttons: the real navy art (the old #pBtns id rule reset border-image, so panels showed flat css bars) */
#pBtns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}
#pBtns .navy.navy{flex:1 1 100%;border:1px solid transparent;border-radius:0;background:none;box-shadow:none;min-height:50px;
  border-image:url(assets/ui/btn-navy.webp) 26 72 26 72 fill / 9px 25px / 0 stretch;padding-left:26px;padding-right:26px}
#pBtns .navy.navy:hover:not(:disabled),#pBtns .navy.navy:focus-visible{background:none;border-color:transparent;filter:brightness(1.18)}
#pBtns .navy.navy:disabled{background:none;border-color:transparent}
/* the way out (back, cancel, menu, sail on): an ink link under the choices, never a twin of the buy bar */
#pBtns .p-link{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:88px;margin-top:2px;padding:6px 16px;
  background:none;border:0;border-radius:0;box-shadow:none;color:#5a3d22;font:18px 'IM Fell English',Georgia,serif;text-decoration:underline;text-decoration-color:rgba(90,61,34,.4);text-underline-offset:5px}
#pBtns .p-link:hover:not(:disabled),#pBtns .p-link:focus-visible{background:none;color:#7a1e12;outline:none}
#pBtns .p-link::after{content:none}
/* setting rows: name left, value right (gold when on) */
#pBtns .p-val{margin-left:auto;font:italic 18px 'IM Fell English',Georgia,serif;color:#9fb3b5;text-transform:none}
#pBtns .p-val.on{color:#f1d9a0}
#pBtns .p-val+small{margin-left:12px}
#pBtns .navy.navy:has(.p-val)::after{margin-left:12px}
.p-logo{width:min(240px,58vw)!important}
/* toasts sit on the painted plate (hud-bar-town 9-slice), never bare text on the sea; hidden under cards */
#toast{width:auto;max-width:min(560px,calc(100vw - 32px));padding:2px 8px;color:#f1e6c8;font-size:18px;line-height:1.25;text-shadow:0 1px 2px #000;
  border-style:solid;border-width:13px 32px;border-color:transparent;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
/* the plate art only applies once a toast has shown, so the menu doesn't download it (it's fetched after load below) */
#toast.seen{border-image:url(assets/ui/hud-bar-town.webp) 60 130 60 130 fill / 13px 32px stretch}
@media (max-width:600px){#toast{top:31%;font-size:17px}}
body:has(#panel:not([hidden])) #toast,body:has(#event:not([hidden])) #toast,body:has(#menu:not([hidden])) #toast{opacity:0}
/* the shanty button is a real touch target */
#res .btns button{width:44px;height:44px}
#singBtn{font-size:22px!important}
/* main menu on phones: the mode line shows under the name (your record once you have one) */
@media (max-width:600px){
  .menu-card .modes button{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;row-gap:1px}
  .menu-card .modes button .mode-ic{grid-row:1 / 3}
  .menu-card .modes button b{grid-column:2;grid-row:1;align-self:end;min-width:0}
  .menu-card .modes button small,.menu-card .modes button em{display:block;grid-column:2;grid-row:2;align-self:start;margin:0;font-size:14px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu-card .modes button em{font-style:italic;font-size:14px;color:#f1d9a0}
  .menu-card .modes button:has(em:not(:empty)) small{display:none}
  .menu-card .modes button::after{grid-column:3;grid-row:1 / 3}
}
/* info card: an item icon sits in a small tile beside its name line; ships keep the wide picture */
.ic-item{display:grid;grid-template-columns:108px 1fr;column-gap:16px;align-items:start;text-align:left}
.ic-item .ic-side{display:contents}
.ic-item .ic-art{grid-column:1;grid-row:1 / span 3;width:108px;height:108px;min-height:0;padding:6px}
.ic-item .ic-art .icon-art,.ic-item .ic-art .ink-art{width:92px;height:92px}
.ic-item .ic-sub{grid-column:2;margin:4px 0 2px;text-align:left}
.ic-item .ic-desc{grid-column:2;text-align:left}
.ic-item .ic-stats{grid-column:2;grid-template-columns:1fr;gap:2px;margin:2px 0 6px;align-self:start}
.ic-item .ic-money,.ic-item .ic-note{grid-column:1 / -1}
.ic-item .ic-money{margin-top:10px}
@media (min-width:761px){.ic.ic-item{grid-template-columns:140px 1fr;gap:0 20px}.ic-item .ic-art{width:140px;height:140px}.ic-item .ic-art .icon-art{width:120px;height:120px}.ic-item .ic-stats{grid-template-columns:1fr 1fr}}
/* captain sheet: the portrait fills its frame beside who + ship, the story runs full width under it */
.ic.ic-cap{grid-template-columns:120px 1fr}
.ic-cap .ic-art.cap-art{width:120px;height:160px;padding:0;overflow:hidden;border:2px solid #b8862e;border-radius:8px;background:#1a1512}
.ic-cap .cap-art img,#panel .ic-cap .cap-art img{width:100%;height:100%!important;max-height:none!important;max-width:none;object-fit:cover;object-position:50% 18%;border-radius:0}
.ic-cap .ic-art{grid-row:1 / span 2}
.ic-cap .ic-desc{grid-column:1 / -1;margin-top:12px;font-size:17px;line-height:1.4}
@media (min-width:761px){.ic.ic-cap{grid-template-columns:180px 1fr}.ic-cap .ic-art.cap-art{width:180px;height:240px}.ic-cap .ic-desc{grid-column:2;margin-top:0}.ic-cap .ic-art{grid-row:1 / span 3}}
.ev-noic{width:24px;flex:none}
/* short screens (landscape phones): cards taller than the screen scroll from their top instead of clipping it */
.overlay{justify-content:flex-start}.overlay>.menu-card,.overlay>.card{margin-top:auto;margin-bottom:auto;flex:none}
@media (max-height:500px){#menu h1.logo img{width:auto;height:24vh}#menu h1.logo{margin-bottom:6px}.p-logo{width:auto!important;height:24vh}#menu{padding-top:8px;padding-bottom:8px}.menu-card{padding-top:14px;padding-bottom:10px}.menu-card .modes button{padding-top:4px;padding-bottom:4px}.menu-links{margin-top:6px}}
/* wide screens: the price block sits in the right column beside the icon too */
@media (min-width:761px){.ic-item .ic-money,.ic-item .ic-note{grid-column:2}.ic-item .ic-art{grid-row:1 / span 4}}
/* captain picker: the grid already shows who is picked, so the detail is the name + story only */
.cap-pick{display:block}
/* town pass, oct 1 */
/* name plate: the subtitle names the port kind, so the info is three cells, standing first and colour coded */
.plate-info table{display:none}
.ti-stats{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:6px}
.ti-stats > div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 4px 6px;border-radius:6px;background:rgba(122,90,50,.1);min-width:0}
.ti-stats small{font-size:12px;color:#6b4c2c;letter-spacing:.03em;line-height:1}
.ti-stats b{font-weight:400;font-size:16px;line-height:1.15;color:var(--ink);white-space:nowrap}
.ti-stats > div:first-child{background:rgba(122,90,50,.16)}
.ti-stats b.rep{font-size:17px}
.rep--2,.rep--1{color:#8f2a1c!important}.rep-0{color:#8a5a12!important}.rep-2,.rep-3{color:#2f6b2a!important}
.ti-stats > div:has(.rep--2),.ti-stats > div:has(.rep--1){background:rgba(143,42,28,.14);box-shadow:inset 0 0 0 1px rgba(143,42,28,.35)}
.ti-stats > div:has(.rep-2),.ti-stats > div:has(.rep-3){background:rgba(47,107,42,.12);box-shadow:inset 0 0 0 1px rgba(47,107,42,.3)}
.ti-goods{display:none}
.ti-goods p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:6px 0 0;font-size:15px}
.ti-goods small{width:50px;font-size:12px;color:#6b4c2c;letter-spacing:.03em}
.ti-goods span{display:inline-flex;align-items:center;white-space:nowrap}
.ti-goods img.gd{width:20px;height:20px;margin-right:4px}
@media (max-width:760px){
  .ti-goods{display:block;margin-top:2px}
  .ti-stats b{font-size:17px}.ti-stats b.rep{font-size:18px}
  /* places: taller rows with bigger signs; they're the main buttons on this screen */
  .place{padding:5px 10px!important;gap:12px}
  .place .sign-art{width:38px!important;height:38px!important}
  .plate-info .tw-fact{display:none}
  .place b{font-size:18px!important}
}
/* town stat strip, oct 2: a parchment strip under the plate (it replaced the dark sea-hud bar), four even cells like the plate's;
   the gear sits alone in the plate's corner; rooms on phones show only the stats that room needs in their header */
#townRes{display:block!important}
.tw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;border-radius:8px}
.ts{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:6px 4px;border-radius:6px;background:rgba(122,90,50,.1)}
.ts img{width:28px;height:28px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 1px rgba(40,25,10,.35))}
.ts b{font-weight:400;font-size:17px;line-height:1;color:var(--ink);white-space:nowrap;font-variant-numeric:lining-nums}
.ts.warn,.ts.full{background:rgba(201,138,30,.16);box-shadow:inset 0 0 0 1px rgba(160,88,26,.4)}.ts.warn b,.ts.full b{color:#8a4a10}
.ts.bad{background:rgba(143,42,28,.14);box-shadow:inset 0 0 0 1px rgba(143,42,28,.4)}.ts.bad b{color:#8f2a1c}
#town .tw-gear{position:absolute;top:4px;right:4px;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer;z-index:2}
#town .tw-gear img{width:32px;height:32px;filter:drop-shadow(0 1px 2px rgba(40,25,10,.45))}
#town .tw-gear:hover,#town .tw-gear:focus-visible{filter:brightness(1.15);outline:none}
#town .tw-plate > div:not(.plate-info){padding-right:36px}
.room-top{flex-wrap:wrap}
.room-stats{margin-left:auto;display:flex;gap:6px}
.room-stats .ts{padding:5px 8px}.room-stats .ts img{width:24px;height:24px}.room-stats .ts b{font-size:16px}
@media (min-width:761px){
  .room-stats{display:none}
  /* the left column is narrow: icon over value, like the plate's cells */
  .tw-stats{padding:6px;gap:5px}
  .ts{flex-direction:column;gap:3px;padding:5px 2px}
  .ts img{width:26px;height:26px}.ts b{font-size:16px}
}
/* short landscape screens: the places list must stay usable, so the plate drops its info */
@media (min-width:761px) and (max-height:560px){
  .plate-info,#townSub{display:none}
  #town .tw-crest .crest-art{width:34px;height:38px}
  #town .tw-plate{padding-top:6px;padding-bottom:6px}
  .tw-plate h2{font-size:22px!important}
  .tw-left .tw-places{flex:1 1 auto;min-height:0}
  #town .place{padding:2px 8px!important}#town .place .sign-art{width:30px;height:30px}
  /* the stat strip: one tight row, so the places keep the height */
  .tw-stats{padding:4px;gap:4px}.ts{flex-direction:row;gap:4px;padding:3px 2px}.ts img{width:20px;height:20px}.ts b{font-size:14px}
}

/* room title carries the place's painted sign */
#roomTitle{display:flex;align-items:center;gap:10px}
#roomTitle .sign-art{width:40px;height:40px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 1px rgba(40,25,10,.3))}

/* market: one line per good. the buy price sits over +1/+10, the sell price over -1/all */
table.mk{width:100%;border-collapse:collapse}
table.mk th{text-align:center;font-size:14px!important}
table.mk th:first-child{text-align:left}
table.mk td{padding:5px 2px!important;vertical-align:middle}
table.mk tr.has td{background:rgba(47,107,42,.06)}
.mk-g > div{display:flex;align-items:center;gap:8px;min-width:0}
.mk-g span{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.mk-g b{font-weight:400;font-size:17px}
.mk-g small{display:flex;flex-wrap:wrap;gap:0 8px;font-size:13px!important}
.mk-g small i{font-style:normal}
.mk-g .cheap{color:#2f6b2a}.mk-g .dear{color:#a0581a}.mk-g .held{color:#3b2414}
.mk-g img.gd{width:26px;height:26px;margin:0}
.mk-side{width:1%;white-space:nowrap;text-align:center}
.mk-side em{display:block;font-style:normal;font-size:17px;line-height:1.1;margin-bottom:3px}
.mk-side .acts{display:inline-flex;gap:4px}
#town .room-card table.mk .acts button{margin:0;min-width:46px;height:38px;padding:0 8px!important;font-size:16px!important;border-radius:6px;border:1px solid #0b1219!important;
  background:linear-gradient(#2b3d52,#1b2838)!important;color:#f1e6c8!important}
#town .room-card table.mk .acts button:disabled{opacity:.5;filter:grayscale(.85) brightness(.8);cursor:not-allowed} /* same navy button, dimmed: the row reads as one control set */
@media (min-width:761px){.mk-side{padding-left:14px!important}.mk-side em{display:inline-block;min-width:48px;margin:0 8px 0 0;text-align:right;vertical-align:middle}table.mk th:not(:first-child){text-align:center;padding-left:14px!important}}

/* outfitter: slot pips sit in the section header beside the count */
#town .room-card .sec .slotbar{display:inline-flex;gap:4px;margin:0 8px 0 0;vertical-align:-2px}
#town .room-card .sec .slotbar i{width:13px;height:13px}

/* shipyard: your ship is one wide card, picture left */
.tiles.wide{grid-template-columns:1fr}
.tiles.wide .tile{display:grid;grid-template-columns:46% 1fr;grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:4px;align-items:start;text-align:left;min-height:0;padding:10px}
.tiles.wide .t-art{grid-row:1/4;align-self:center}
#town .tiles.wide .t-name{font-size:19px;margin-top:4px}
#town .tiles.wide .t-stats{font-size:15px}
#town .tiles.wide .t-price{align-self:end;font-size:17px}
.tiles.wide .t-tag{left:12px;right:auto;top:14px}

/* harbormaster: jobs you carry are parchment rows with their own drop button */
#town .room-card .job.mine{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(59,36,20,.3);border-radius:6px;background:rgba(255,248,225,.55)}
#town .room-card .job.mine em{color:#3b2414}
#town .room-card .job.mine small{color:#6b4c2c}
#town .room-card .list button.job-drop{flex:none;width:auto;min-height:40px;padding:0 14px!important;border-radius:6px;border:1px solid rgba(143,42,28,.55)!important;background:transparent!important;color:#8f2a1c!important;font:inherit;font-size:15px!important;cursor:pointer;box-shadow:none}
#town .room-card .list button.job-drop:hover{background:rgba(143,42,28,.08)!important}
/* a greyed job (board full, no room) stays readable: parchment row, dim ink, pay in ink not gold */
#town .room-card .list button.job:disabled{opacity:1;filter:none}
#town .room-card .list button.job:disabled b,#town .room-card .list button.job:disabled em{color:rgba(59,36,20,.62)!important}
#town .room-card .list button.job:disabled small{color:rgba(59,36,20,.5)!important}

/* house: put in / take out as two lined-up rows; the box total is the headline */
#town .room-card .chips.hx{display:grid;grid-template-columns:auto repeat(4,1fr);gap:6px;align-items:center}
#town .room-card .chips.hx button{padding:8px 4px!important;min-height:44px;font-size:16px!important}
.hx-k{font-size:15px;color:#6b4c2c;padding-right:4px;white-space:nowrap}
#town .room-card .sec .t-why{display:inline;font-size:15px;margin:0}
#town .room-card .sec .hx-box{font-weight:400;font-size:22px;color:#3b2414}

/* phones: a room is a sheet over the town, as tall as it needs; tap the town around it to close */
@media (max-width:760px){
  #town #room:not([hidden]){display:flex;flex-direction:column;justify-content:flex-end;background:rgba(8,14,18,.5)!important}
  #town #room .room-card{height:auto;max-height:100%;flex:none;box-sizing:border-box;box-shadow:0 -6px 24px rgba(0,0,0,.45)}
  #town.inroom #townArt{opacity:.55}
}

/* sailing pass, oct 1 */
/* board / dock / land: the art fills the round button (a lazy-loaded img in a grid cell collapsed to 8px wide) */
#touch .grab > img{position:absolute;inset:0;width:100%;height:100%}
/* sail %: inside the rocker's window, under the sail drawing, instead of floating beside it */
#touch .rocker{width:58px;height:152px}
#touch .rocker .rk-icon{top:31.5%;height:28%;left:22%;width:56%}
#touch #sailPct{top:60.5%;bottom:auto;left:0;right:0;transform:none;text-align:center;font:13px/1 'IM Fell English SC',Georgia,serif;color:#f1e6c8;text-shadow:0 1px 2px rgba(0,0,0,.9)}
/* the jobs toggle is a real tap target, the list ties each job to its arrow colour and distance */
html.is-touch #notes{min-height:44px;padding:8px 14px;font-size:15px;max-width:calc(100vw - 150px)}
#notesList p{display:flex;align-items:center;gap:8px}
#notesList .pip,#town .job.mine .pip{flex:none;width:11px;height:11px;border-radius:50%;background:var(--c);border:1.5px solid #3b2414}
#notesList .pip.x{width:13px;height:13px;background:#1c120c;border-color:var(--c);display:grid;place-items:center;font:700 10px/1 Georgia,serif;font-style:normal;color:var(--c)}#notesList .pip.x::before{content:'';width:11px;height:11px;background:url(assets/icons/world-treasure-x.webp) center/contain no-repeat}
#notesList p span{flex:1;min-width:0}
#notesList p em{flex:none;font-style:normal;font-size:12px;opacity:.75;white-space:nowrap}
@media (max-width:600px){html.is-touch #notesList{max-width:calc(100vw - 150px);font-size:14px}}
/* boarding: your crew against theirs, each with a bar that drains */
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:6px 0 2px}
.vs-side{display:grid;justify-items:center;gap:3px}
.vs-side small{font-size:13px;opacity:.75}
.vs-side b{font:400 34px/1 'IM Fell English SC',Georgia,serif}
.vs-bar{width:100%;max-width:130px;height:8px;border-radius:4px;background:rgba(59,36,20,.2);overflow:hidden}
.vs-bar i{display:block;height:100%;background:linear-gradient(#d4533f,#9a2a1c)}
.vs-side em{font-style:normal;color:#9a2a1c;font-size:16px;min-height:18px}
.vs-x{position:relative;width:46px;height:46px;flex:none}
.vs-x img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(40,25,10,.45))}.vs-x img+img{transform:scaleX(-1)} /* two painted cutlasses, one mirrored: crossed blades */
/* landscape phones: the helm column is taller than the screen, so auto fire steps out beside the right arrow (it sat on the ♪ button) */
@media (max-height:500px){#touch .tr{position:relative}#touch .tr .auto.auto{position:absolute;left:auto;top:auto;right:calc(100% + 12px);bottom:14px;transform:none}}
/* dig: the log's quarter, digs left and the last reading as chips */
.dig-head{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0 4px}
.dig-head span{padding:3px 10px;border:1px solid rgba(122,90,50,.5);border-radius:12px;background:rgba(255,248,230,.45);font-size:15px}
.dig-head .heat{color:#fff4df;border-color:transparent}
.dig-head .hot{background:#b8321f}.dig-head .warm{background:#b9802a}.dig-head .cold{background:#3f6a8a}.dig-head .out{background:#5a4a38}

/* town on phones (aaron, oct 1): the painting stays put and the whole column (plate, bar, places) scrolls up over it as one page */
@media (max-width:760px){
  #town:not(.inroom) #townArt{position:fixed}
  #town .tw-plate,#town #townRes,#town .tw-places{flex-shrink:0}
  #town .tw-left .tw-places,#town .tw-places{overflow:visible;max-height:none}
  #town:not(.inroom){padding-bottom:max(24px,env(safe-area-inset-bottom))}
}
/* chart hint on the painted plate (like toasts); short landscape screens drop it so it never sits on the map */
.chart-hint{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;padding:2px 10px;color:#f1e6c8;font-size:16px;border-style:solid;border-width:11px 28px;
  border-image:url(assets/ui/hud-bar-town.webp) 60 130 60 130 fill / 11px 28px stretch;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
@media (max-height:560px){.chart-hint{display:none}}
@media (max-width:760px){.chart-hint{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 74px)}}
/* event art on wider screens: tall enough to show the whole ship, not a strip of sail */
@media (min-width:761px){.ev-art.photo{width:100%;height:220px}.ev-art.photo img{object-position:50% 55%}}
@media (min-width:761px) and (max-height:560px){.ev-art.photo{width:120px;height:80px}}
/* landscape phone town: all seven places (set sail included) fit without scrolling the list */
@media (min-width:761px) and (max-height:560px){
  #town .tw-places{padding:2px 6px}
  #town .place{padding:0 8px!important;min-height:0;height:29px}
  #town .place .sign-art{width:24px;height:24px}
  #town .place b{font-size:15px}
  #town .place.sail{margin-top:0}
}
/* shanty button: painted round button (assets/ui/btn-shanty.webp). desktop: beside the minimap; touch: top of the right control column */
#singBtn.sing{width:44px!important;height:44px!important;padding:0;border:0!important;border-radius:50%;background:none!important;box-shadow:none!important}
#singBtn.sing img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
#singBtn.sing.on img{filter:drop-shadow(0 0 8px rgba(240,200,110,.85))}
#touch #singBtn.sing{width:52px!important;height:52px!important;align-self:center;pointer-events:auto}
@media (max-height:500px){#touch .tr #singBtn.sing{position:absolute;right:calc(100% + 16px);bottom:82px}}
/* local goods on short screens: tighter rows so every good still fits without a scroll box */
@media (min-width:761px) and (max-height:700px){#townGoods td,#townGoods th{padding-top:1px!important;padding-bottom:1px!important;font-size:13px!important}#townGoods td img{width:16px!important;height:16px!important}#townGoods h4{margin-bottom:2px}}
/* tavern keeper portrait beside their line (assets/keepers) */
#town .room-card .keeper.has-face{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center}
#town .room-card .keeper-face{width:84px;height:112px;object-fit:cover;object-position:50% 20%;border-radius:6px;border:2px solid #b8913f;box-shadow:0 2px 6px rgba(40,25,10,.35)}
@media (min-width:761px){#town .room-card .keeper.has-face{grid-template-columns:110px 1fr}#town .room-card .keeper-face{width:110px;height:146px}}
/* event cards, oct 1: painted art + icons, decline as a link */
.ev-art.photo{border:0;background:none;padding:0}
.ev-art.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;border-radius:6px;border:2px solid #b8913f;box-shadow:0 2px 6px rgba(40,25,10,.35)}
@media (max-width:760px){.ev-art.photo{width:min(100%,300px);height:170px;margin:0 auto}}
.ev-choices .ev-ic{width:34px;height:34px;flex:none;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.ev-choices button.ev-link{justify-self:center;display:inline-flex;justify-content:center;min-height:44px;padding:6px 16px;background:none!important;border:0;box-shadow:none;border-image:none;
  color:#5a3d22;font:18px 'IM Fell English',Georgia,serif;text-decoration:underline;text-decoration-color:rgba(90,61,34,.4);text-underline-offset:5px}
.ev-choices button.ev-link::after{content:none}
.ev-choices button.ev-link:hover,.ev-choices button.ev-link:focus-visible{color:#7a1e12;filter:none}
/* painted icons pass, oct 1: line icons swapped for aaron's painted set (sea top bar, town bar, notices) */
.tb-it .pi{width:24px;height:24px;flex:none;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.9)) drop-shadow(0 0 3px rgba(241,214,150,.22))}
@media (max-width:600px){#tbStats .tb-it .pi{width:21px;height:21px}#tbStats .tb-it{gap:4px}}
.tbar .tb-it .pi{width:22px;height:22px}
.tw-left .tbar .tb-it .pi.pi,#townRes .tbar .tb-it .pi.pi{width:20px;height:20px}

/* aaron's painted town menu set: place signs + nation crests (assets/signs, assets/crests) */
.place .sign-art{width:40px;height:40px;flex:none;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(40,25,10,.3))}
.tw-crest .crest-art{width:52px;height:56px;display:block;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
@media (max-width:760px){.place .sign-art{width:34px;height:34px}}

/* town standing: see 'town pass, oct 1' */