/* Shared game HUD: day pill, goal, resource pills, labelled tools, dock and cards, sheet and tabs, quests, coach, toast lane and decision cards.
   Used by the solo game (play.html) and the shared ocean (ocean.html); both keep the same element ids. Solo-only scene styles stay inline in play.html. */
/* Layout: full-bleed 3D scene; day pill, goal and resource pills float on top, labelled round tools on the right edge, build catalog as a bottom sheet */
:root{
  --ink:var(--game-ink);
  --glass:var(--game-glass);
  --panel:var(--game-panel);
  --panel-2:var(--game-panel-2);
  --line:var(--game-line);
  --fg:var(--game-fg);
  --muted:var(--game-muted);
  --deck-yellow:var(--game-deck-yellow);
  --good:var(--game-good);
  --warn:var(--game-warn);
  --bad:var(--game-bad);
  --r:var(--game-r);
  --display:var(--game-display);
  --body:var(--game-body);
  --mono:var(--game-mono);
  --hud-h:var(--game-hud-h); --bar-h:var(--game-bar-h);
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--fg)}
body{font-family:var(--body);font-size:15px;line-height:1.4;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--deck-yellow);outline-offset:2px}
svg{display:block}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.glass{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---- top HUD ---- */
.hud{position:fixed;top:0;left:0;right:0;z-index:13;pointer-events:none;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;justify-items:start;
  padding:calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px))}
.hud > *{pointer-events:auto}
.hrow{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;width:100%}
.online-count{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.online-count::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--good)}
#title [data-online-count]{font-size:14px}
.daypill{display:flex;align-items:center;gap:9px;border-radius:999px;padding:4px 13px 4px 4px}
.daypill .logo{font-family:var(--display);color:#1b1a12;background:var(--deck-yellow);border-radius:999px;padding:4px 10px 3px;font-size:15px;letter-spacing:.06em;line-height:1}
.daypill b{font-family:var(--mono);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.daypill .wx{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12.5px;white-space:nowrap}
.daypill .wx svg{width:16px;height:16px;color:var(--deck-yellow)}
.goal{flex:1 1 160px;max-width:320px;display:grid;gap:4px;border-radius:999px;padding:6px 14px}
.goal .gt{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;font-family:var(--mono);letter-spacing:.04em;color:var(--muted)}
.goal .gt b{color:var(--fg);font-weight:600}
.goalbar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.goalbar i{display:block;height:100%;background:var(--deck-yellow);border-radius:3px;transition:width .5s}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px 3px 3px;min-width:0}
.pill .ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff}
.pill .ic svg{width:15px;height:15px}
.pill .v{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill .d{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.pill.low{border-color:rgba(239,109,97,.8);box-shadow:0 0 0 1px rgba(239,109,97,.35)}
.pill.low .v{color:var(--bad)}
.pill[aria-expanded="true"]{border-color:var(--deck-yellow)}
.pop{width:min(360px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;display:grid;gap:9px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.pop h3{margin:0;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600}
.pop h3 .ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff}
.pop h3 .ic svg{width:14px;height:14px}
.pop .rows{display:grid;gap:5px;font-size:13px}
.pop .row{display:flex;justify-content:space-between;gap:12px}
.pop .row span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pop .net{border-top:1px solid var(--line);padding-top:7px;font-weight:600}
.pop p{margin:0;font-size:12.5px;color:var(--muted)}
@media (max-width:699px){
  .daypill .wx span{display:none}
  .goal{flex-basis:120px}
  .pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:5px}
  .pill{padding:2px 6px 2px 2px;gap:5px}
  .pill .ic{width:22px;height:22px}
  .pill .ic svg{width:13px;height:13px}
  .pill .v{font-size:12.5px}
  .pill .d{display:none}
}
.pos{color:var(--good)!important}.neg{color:var(--bad)!important}.wrn{color:var(--warn)!important}

/* ---- floating tools ---- */
.fabs{position:fixed;z-index:11;right:max(16px, env(safe-area-inset-right, 0px));top:calc(var(--hud-h) + 12px);display:grid;gap:20px;transition:right .25s ease}
body.sheet-open .fabs{right:calc(max(16px, env(safe-area-inset-right, 0px)) + 362px)}
.fab{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.3);padding:0}
.fab svg{width:20px;height:20px}
.fab b{font-family:var(--mono);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.fab small{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);font-size:9.5px;font-family:var(--mono);letter-spacing:.06em;color:var(--fg);text-shadow:0 1px 3px rgba(0,0,0,.9);white-space:nowrap}
.fab.on{background:var(--deck-yellow);color:#1b1a12;border-color:transparent}
.audio-tools{position:relative}
.audio-tools #fabRadio{position:absolute;right:calc(100% + 12px);top:0}
.radio-sheet-title{flex:1;margin:0;font-size:16px}
#tab-radio .radio-volume{display:grid;gap:8px;font-size:13px}
#tab-radio .radio-volume input{width:100%;margin:0;accent-color:var(--deck-yellow)}
#tab-radio .radio-mute{min-height:44px}
#tab-radio .audio-channel{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
#tab-radio .audio-channel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#tab-radio .audio-channel-head h3{margin:0;font-size:14px}
#tab-radio .audio-channel small{color:var(--muted);font-size:12px}
#tab-radio #allMute{min-height:44px;width:100%}
.fab .badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:10px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:600;font-style:normal;display:grid;place-items:center;padding:0 5px;border:2px solid var(--ink)}
.fab .badge.dot{min-width:13px;width:13px;height:13px;padding:0;top:-1px;right:-1px;background:var(--good)}
@media (max-width:699px){
  .fabs{gap:18px}
  .fab{width:44px;height:44px}
  body.sheet-open .fabs{right:max(16px, env(safe-area-inset-right, 0px))}
}

/* ---- bottom dock ---- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:14;pointer-events:none;display:grid;justify-items:center;
  padding:0 max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.dock > *{pointer-events:auto;width:min(800px,100%)}
.bsheet{border-radius:var(--r);display:grid;overflow:hidden;box-shadow:0 -6px 30px rgba(0,0,0,.25)}
.bhead{display:flex;align-items:center;gap:10px;padding:10px 14px;background:none;border:0;width:100%;text-align:left;min-width:0}
.bhead .bi{width:30px;height:30px;border-radius:50%;background:var(--deck-yellow);color:#1b1a12;display:grid;place-items:center;flex:0 0 auto}
.bhead .bi svg{width:16px;height:16px}
.bhead .bt{font-family:var(--display);font-size:18px;letter-spacing:.05em}
.bhead .hint{flex:1;min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bhead .scr{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:13px;font-weight:600;background:var(--panel-2);border-radius:999px;padding:3px 10px 3px 6px}
.bhead .scr svg{width:14px;height:14px;color:#d39a6a}
.bhead .chev{width:18px;height:18px;transition:transform .2s;color:var(--muted)}
.bsheet.open .chev{transform:rotate(180deg)}
.bbody{display:grid;gap:10px;padding:0 0 12px}
.bsheet:not(.open) .bbody{display:none}
.cats{display:flex;gap:6px;overflow-x:auto;padding:0 14px;scrollbar-width:none}
.cat{flex:0 0 auto;border-radius:999px;padding:6px 13px;background:var(--panel-2);border:1px solid var(--line);font-size:12.5px;font-weight:600;white-space:nowrap}
.cat[aria-pressed="true"]{background:var(--fg);color:var(--ink);border-color:transparent}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;padding:0 14px;max-height:min(34vh,290px);overflow:auto;overscroll-behavior:contain}
.card{position:relative;display:grid;justify-items:center;gap:2px;padding:12px 6px 9px;background:var(--panel);border:1px solid var(--line);border-radius:13px;text-align:center;min-width:0}
.card img{width:60px;height:60px}
.card .cn{font-size:12.5px;font-weight:600;line-height:1.15;max-width:100%}
.card .cw{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.card .cost{position:absolute;top:6px;right:6px;display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.5);border-radius:999px;padding:2px 7px 2px 4px;font-family:var(--mono);font-size:11px;font-weight:600}
.card .cost svg{width:11px;height:11px;color:#d39a6a}
.card.poor{opacity:.5}
.card.poor .cost{color:var(--bad)}
.card[aria-pressed="true"]{border-color:var(--deck-yellow);box-shadow:inset 0 0 0 1px var(--deck-yellow)}
@media (hover:hover){ .card:hover:not(.poor){border-color:rgba(230,183,64,.6)} }
@media (max-width:699px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr));max-height:31vh} .bhead .hint{display:none} }

.icard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 12px 14px;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:6px 12px;align-items:center;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.icard img{width:52px;height:52px}
.icard .ttl{min-width:0}
.icard .eb{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--deck-yellow)}
.icard h3{margin:0;font-size:17px;line-height:1.15}
.icard .x{width:34px;height:34px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;padding:0}
.icard .x svg{width:16px;height:16px}
.icard .tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}
.tag{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);white-space:nowrap}
.icard .note{grid-column:1/-1;font-size:13.5px}
.icard .acts{grid-column:1/-1;display:flex;gap:8px;margin-top:2px}
.btn{flex:1;border-radius:999px;padding:10px 14px;font-weight:600;font-size:14px;background:var(--panel-2);border:1px solid var(--line)}
.btn.primary{background:var(--deck-yellow);color:#1b1a12;border-color:transparent}
.btn.danger{color:#f4b0a8}

/* ---- ship / boat / log sheet ---- */
.sheet{position:fixed;z-index:16;right:max(16px, env(safe-area-inset-right, 0px));top:calc(var(--hud-h) + 10px);bottom:calc(var(--bar-h) + 22px);width:346px;border-radius:var(--r);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.shead{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px;border-bottom:1px solid var(--line)}
.grab{display:none}
.seg{display:flex;background:var(--panel-2);border-radius:999px;padding:3px;gap:2px;flex:1}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:6px 8px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--ink)}
.shead .x{width:34px;height:34px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;padding:0;flex:0 0 auto}
.shead .x svg{width:16px;height:16px}
.sbody{overflow:auto;padding:14px;display:grid;gap:14px;align-content:start;-webkit-user-select:text;user-select:text;overscroll-behavior:contain}
@media (max-width:699px){
  .sheet{left:max(16px, env(safe-area-inset-left, 0px));right:max(16px, env(safe-area-inset-right, 0px));width:auto;top:auto;bottom:calc(10px + env(safe-area-inset-bottom, 0px));max-height:60%}
  .grab{display:block;position:absolute;top:5px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
  .shead{padding-top:16px;position:relative}
}
.sheet h2{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.06em;margin:0;text-wrap:balance}
.sec{display:grid;gap:10px;min-width:0}
.sec + .sec{border-top:1px solid var(--line);padding-top:14px}
.sub{font-size:13px;color:var(--muted);margin:0}
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.readout{display:grid;gap:2px}
.readout .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.readout .v{font-family:var(--mono);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.clino{width:100%;max-width:290px;justify-self:center;height:auto;display:block}
.trimbar{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--bad) 0 12.5%,var(--warn) 12.5% 25%,var(--good) 25% 75%,var(--warn) 75% 87.5%,var(--bad) 87.5%);opacity:.85}
.trimbar i{position:absolute;top:-4px;width:4px;height:18px;margin-left:-2px;background:var(--fg);border-radius:2px}
.trimlbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--muted)}
.forecast{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13.5px}
.forecast b{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.boat{font-size:13.5px;padding:10px 12px;border-radius:12px;background:var(--panel-2)}
.boat.fleet{display:grid;gap:8px;padding:10px}
.fleet .bt{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;align-items:start;font-size:13px;line-height:1.35}
.fleet .bn{font-family:var(--display);font-size:14px;letter-spacing:.04em;color:var(--good)}
.fleet .bt.out .bn{color:var(--deck-yellow)}
.fleet .bt.locked{color:var(--muted)}
.fleet .bt.locked .bn{font-family:var(--mono);font-size:12px;color:var(--muted)}
.site{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.site .n{font-weight:600}
.site .m{font-family:var(--mono);font-size:11px;color:var(--muted);grid-column:1}
.site .t{font-size:12.5px;color:var(--muted);grid-column:1}
.site button{grid-row:1/span 3;grid-column:2;background:var(--deck-yellow);color:#1b1a12;border:0;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}
.site button:disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed}
.log{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px}
.log li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px}
.log li b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);padding-top:2px}
.log li.good span{color:#a9dfbf}
.log li.bad span{color:#f4b0a8}
.ghostbtn{justify-self:start;background:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--muted)}

/* ---- overlays ---- */
.banner{position:fixed;left:50%;top:calc(var(--hud-h) + 24px);transform:translateX(-50%);z-index:9;pointer-events:none;text-align:center;font-family:var(--display);font-size:32px;letter-spacing:.06em;color:var(--fg);text-shadow:0 2px 14px rgba(0,0,0,.65);transition:opacity .8s}
.banner small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--deck-yellow)}
.nogl{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}
.order{display:flex;align-items:center;gap:9px;border-radius:999px;padding:4px 12px 4px 4px;max-width:min(520px,100%);text-align:left;min-width:0}
.order .oi{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--deck-yellow);color:#1b1a12;display:grid;place-items:center}
.order .oi svg{width:14px;height:14px}
.order .ot{min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order .ot b{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-right:6px}
.order .or{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--good)}
.order.done{border-color:var(--good)}
.pop .acts{display:flex;gap:8px}
.meter{height:10px;border-radius:5px;background:var(--panel-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:5px;transition:width .4s}
.hullrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hullrow .v{font-family:var(--mono);font-size:22px;font-weight:600}
.hullrow .d{font-family:var(--mono);font-size:12px;color:var(--muted)}
.trends{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trend{display:grid;gap:3px;background:var(--panel-2);border-radius:10px;padding:8px 10px;min-width:0}
.trend .k{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-family:var(--mono)}
.trend .k b{color:var(--fg);font-weight:600}
.trend svg{width:100%;height:34px}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px}
.setrow .seg{flex:0 0 auto;width:auto}
.deck-radio{display:grid;gap:8px;min-width:0}
.deck-radio > .setrow{flex-wrap:wrap}
.deck-radio .seg button{min-height:40px;white-space:nowrap}
.radio-player{display:grid;gap:8px;min-width:0;padding:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px}
.radio-player[hidden]{display:none}
.radio-player label{font-size:12px;color:var(--muted)}
.radio-player select{width:100%;min-width:0;min-height:44px;font:inherit;font-size:14px;color:var(--fg);background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px}
.radio-player select:focus-visible,.radio-player a:focus-visible{outline:2px solid var(--deck-yellow);outline-offset:2px}
.radio-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.radio-actions button{min-height:44px;flex:0 0 auto}
.radio-actions a{font-size:12px;color:var(--deck-yellow)}
.radio-status{margin:0;font-size:12px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.diffopt{display:grid;gap:2px}
.diffopt small{font-weight:400;font-size:12.5px;opacity:.8}
@media (max-width:699px){ .order .ot b{display:none} }
.radar{width:100%;height:auto;aspect-ratio:5/3;border-radius:10px;display:block;background:#06171a}
.days3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.day3{background:var(--panel-2);border-radius:10px;padding:7px 8px;display:grid;justify-items:center;gap:2px;text-align:center}
.day3 small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.day3 svg{width:20px;height:20px;color:var(--deck-yellow)}
.day3 span{font-size:11.5px;line-height:1.2}
.day3.storm{box-shadow:inset 0 0 0 1px var(--bad)}
.crewlist{display:grid;gap:8px}
.cm{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 10px;align-items:center;background:var(--panel-2);border-radius:12px;padding:9px 10px}
.cm .av{grid-row:1/span 3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:13px;color:#14181a}
.cm .nm{display:flex;justify-content:space-between;gap:8px;align-items:baseline;min-width:0}
.cm .nm b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm .nm span{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.cm .xp{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.cm .xp i{display:block;height:100%;border-radius:3px}
.cm small{font-size:12px;color:var(--muted);line-height:1.3}
.cm small.idle{color:var(--warn)}
.seg button{padding:6px 4px}
body.titling .hud, body.titling .fabs, body.titling .dock, body.titling .sheet, body.titling .banner, body.titling .toast{display:none!important}
.story{position:fixed;inset:0;z-index:61;display:grid;align-content:end;gap:22px;cursor:pointer;
  padding:calc(24px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  background:linear-gradient(180deg, rgba(5,14,16,.15) 0%, rgba(5,14,16,.55) 45%, rgba(5,14,16,.96) 100%)}
.story p{margin:0;max-width:30ch;font-size:clamp(22px, 4.2vw, 34px);line-height:1.25;color:var(--fg);text-wrap:balance;animation:storyIn .9s ease both}
.story .bar{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.story .dots{display:flex;gap:6px}
.story .dots i{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}
.story .dots i.on{background:var(--deck-yellow)}
.story .skip{margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--fg);font-size:13px}
@keyframes storyIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .story p{animation:none} }
@media (prefers-reduced-motion:reduce){ .goalbar i,.fabs,.bhead .chev,.banner,.meter i{transition:none} }

/* ---- online: forms, ocean, shipyard ---- */
.ferr{color:#f4b0a8;font-size:13px;margin:0}
#netModal{z-index:70}
#netModal .dialog{max-height:calc(100dvh - 32px);overflow:auto}
.opts small{display:block}
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.swatch{display:grid;gap:4px;align-content:start;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:8px;font-size:12.5px;font-weight:600;min-width:0}
.swatch i{display:block;width:100%;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.12)}
.swatch small{font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:400}
.swatch[aria-pressed="true"]{outline:2px solid var(--deck-yellow);outline-offset:1px}
.swatch:disabled{opacity:.45;cursor:not-allowed}
.row2{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:8px}
.bps{display:grid;gap:10px}
.bp{display:grid;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:10px;min-width:0}
.bp img{width:100%;height:auto;border-radius:8px;display:block}
.bp .n{font-weight:600;overflow-wrap:anywhere}
.bp .m{font-family:var(--mono);font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.bp .acts{display:flex;gap:6px;flex-wrap:wrap}
.chip{border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:600;background:var(--panel);border:1px solid var(--line);line-height:1.2}
.chip.primary{background:var(--deck-yellow);color:#1b1a12;border-color:transparent}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--ink)}
.chip:disabled{opacity:.45;cursor:not-allowed}
.chip small{font-family:var(--mono);font-size:10px;font-weight:400;opacity:.8}
.pick3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pick3 .chip{border-radius:12px;padding:9px 6px}
/* Ocean tab: sail card, map with legend, settlement rows that open to show actions, outgoing offers */
.oc-hero{display:grid;gap:12px;padding:14px;border-radius:14px;background:linear-gradient(150deg,rgba(230,183,64,.16),rgba(230,183,64,.02) 65%),var(--panel-2);border:1px solid rgba(230,183,64,.32)}
.oc-hero b{display:block;font-size:15px;margin-bottom:3px}
.oc-hero .btn{width:100%;min-height:44px}
.oc-rooms{display:grid;gap:8px}
.oc-rooms .btn{display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-align:left}
.oc-rooms .btn small{font-family:var(--mono);font-size:11px;font-weight:400;opacity:.75}
.oc-new{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.oc-new input{min-width:0;font:inherit;font-size:14px;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 14px}
.oc-new .btn{width:auto;padding-left:20px;padding-right:20px}
.oc-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.oc-status .live.off{background:var(--muted);box-shadow:none}
.oc-map{display:grid;gap:7px}
.oc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--muted)}
.oc-legend span{display:inline-flex;align-items:center;gap:6px}
.oc-legend i{width:9px;height:9px;border-radius:50%;background:#6f7a80;border:1.5px solid rgba(238,242,236,.7)}
.oc-legend i.you{background:var(--deck-yellow);border-color:#fff6d8}
.oc-legend i.on{box-shadow:0 0 0 3px rgba(98,196,139,.4)}
.oc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.oc-head .ghostbtn{padding:5px 12px}
.board{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.board li{border-radius:12px;background:var(--panel-2);border:1px solid transparent}
.board li.open{border-color:var(--line)}
.board li.me{background:linear-gradient(90deg,rgba(230,183,64,.18),rgba(230,183,64,.05));border-color:rgba(230,183,64,.38)}
.board .ent{box-sizing:border-box;display:grid;grid-template-columns:18px 24px minmax(0,1fr) auto 16px;gap:10px;align-items:center;width:100%;padding:9px 10px;background:none;border:0;border-radius:12px;color:inherit;font:inherit;text-align:left}
.board button.ent{cursor:pointer}
.board button.ent:hover{background:rgba(255,255,255,.035)}
.board button.ent:focus-visible{outline:2px solid var(--deck-yellow);outline-offset:-2px}
.board .rk{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}
.board .sw{position:relative;width:24px;height:24px;border-radius:7px;border:1px solid rgba(255,255,255,.2)}
.board .sw .live{position:absolute;top:-4px;right:-4px;margin:0;border:2px solid var(--panel-2)}
.board .who{min-width:0}
.board .who b{display:flex;align-items:center;gap:6px;min-width:0}
.board .who b span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .who b .tag{flex:0 0 auto;font-size:10px;padding:1px 7px;background:var(--deck-yellow);color:#1b1a12;border-color:transparent}
.board .who > span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .pp{display:grid;justify-items:end;line-height:1.1}
.board .pp b{font-family:var(--mono);font-size:14px}
.board .pp small{font-size:10px;color:var(--muted)}
.board .chev{width:16px;height:16px;color:var(--muted);transition:transform .2s}
.board li.open .chev{transform:rotate(180deg)}
.board .row-acts{display:flex;gap:6px;padding:0 10px 10px}
.board .row-acts .chip{flex:1;min-height:36px;padding:7px 6px}
.offers{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.offers li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:9px 10px 9px 12px;border-radius:12px;background:var(--panel-2)}
.offers .deal{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:600;font-size:14px}
.offers .deal i{font-style:normal;color:var(--muted)}
.offers .m{grid-column:1;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offers .chip{grid-column:2;grid-row:1/3}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:6px;vertical-align:middle;box-shadow:0 0 0 3px rgba(98,196,139,.22)}
.oceanmap{width:100%;height:auto;aspect-ratio:2/1;border-radius:12px;display:block}
.inbox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;background:rgba(98,196,139,.12);border:1px solid rgba(98,196,139,.35);border-radius:12px;padding:10px 12px;font-size:13.5px}
.netline{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.title .acct{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.title .note{font-size:14px;max-width:40ch;margin:0;background:rgba(18,39,44,.85);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
@media (max-height:760px) and (max-width:720px){ #fabView{display:none} }

/* ---- game feel ---- */
.pill, .fab, .card, .btn, .chip, .title .menu button, .opts button, .seg button, .ghostbtn{transition:transform .12s cubic-bezier(.3,1.6,.5,1)}
.pill:active, .fab:active, .card:active, .btn:active, .chip:active, .title .menu button:active, .opts button:active, .ghostbtn:active{transform:scale(.93)}
@keyframes pillpulse{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.pill.pulse{animation:pillpulse .45s ease-out}
.flyico{position:fixed;left:0;top:0;z-index:80;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;pointer-events:none;box-shadow:0 3px 10px rgba(0,0,0,.4);border:2px solid #fff}
.flyico svg{width:13px;height:13px}
@keyframes floatup{0%{opacity:0;transform:translateY(6px) scale(.8)}15%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-26px) scale(1)}}
.floattxt{position:fixed;z-index:81;pointer-events:none;font-family:var(--mono);font-weight:600;font-size:13px;padding:2px 7px;border-radius:999px;animation:floatup 1.1s ease-out forwards;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.talk{position:fixed;left:0;top:0;z-index:12;pointer-events:none;background:#fffdf4;color:#1b1a12;font-size:12.5px;font-weight:600;line-height:1.25;padding:5px 9px;border-radius:12px;max-width:170px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.3);transition:opacity .15s}
.talk::after{content:'';position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#fffdf4}
body.titling .talk{display:none}
/* ---- crew quests, chart ---- */
.quests{display:grid;gap:6px;justify-items:start;pointer-events:auto;max-width:min(360px, 100%)}
.quest{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;border-radius:16px;padding:5px 10px 5px 5px;text-align:left;font-size:12.5px;line-height:1.25;max-width:100%}
.quest .qp{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block}
.quest .qt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quest .qt b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--deck-yellow)}
.quest .qt i{font-style:normal;font-family:var(--mono);color:var(--muted)}
.quest .qr{font-family:var(--mono);font-size:11.5px;display:flex;align-items:center;gap:3px;color:var(--fg)}
.quest .qr .ri svg{width:12px;height:12px}
.quest.done{border-color:rgba(230,183,64,.8);box-shadow:0 0 0 2px rgba(230,183,64,.35), 0 6px 18px rgba(0,0,0,.3)}
.quest.done .qr{background:var(--deck-yellow);color:#1b1a12;border-radius:999px;padding:3px 9px;font-weight:600}
@keyframes qpop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
.quest.pop{animation:qpop .5s ease-out}
#questModal{z-index:65}
.qhead{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center}
.qhead img{width:64px;height:64px;border-radius:50%;display:block}
.qline{font-size:16px;line-height:1.45;margin:0}
.chart{width:100%;height:auto;aspect-ratio:8/5;border-radius:12px;display:block;cursor:pointer}
body.titling .quests{display:none}
@media (max-width:560px){ .quest{font-size:12px} .quests{max-width:calc(100vw - 90px)} }
@media (max-height:660px){ .fabs{gap:13px} .fab{width:42px;height:42px} #fabView{display:none} }
/* ---- game type: steady numbers in the HUD ---- */
#clockTxt{display:inline-block;min-width:4.6ch} .pill .v{display:inline-block;min-width:2.6ch;text-align:left}
.eyebrow,.quest .qt b{letter-spacing:.08em}
body .title h1{font-size:clamp(46px, 9.5vw, 98px);line-height:.95;letter-spacing:.01em}
body .dialog h3{font-size:21px;letter-spacing:.01em;line-height:1.15} body .banner{font-size:25px;letter-spacing:.02em} body .banner small{letter-spacing:.06em}
body .sheet h2{font-size:14.5px;letter-spacing:.03em} body .bhead .bt{font-size:16px;letter-spacing:.03em} body .daypill .logo{font-size:12.5px;letter-spacing:.03em}
body .chhead h2{font-size:clamp(26px, 4.8vw, 42px);letter-spacing:.01em} body .mg b{font-size:18px;letter-spacing:.02em} body .pcard .pch b{font-size:15px;letter-spacing:.01em}
body .vb-h b{font-size:18px;letter-spacing:.01em} body .photo .pcap b{font-size:clamp(22px, 4vw, 36px)} body .fleet .bn{font-size:12px} body .endstats dd{font-size:24px}
/* ---- mute, volumes ---- */
.fab.muted{color:var(--bad)} .fab svg{display:block;margin:0 auto}
.setrow.vol input{flex:1;max-width:220px;accent-color:var(--deck-yellow)}
/* ---- guide, tips, today on deck ---- */
.coach{position:fixed;z-index:31;left:50%;transform:translateX(-50%);bottom:calc(var(--bar-h) + 22px);width:min(470px, calc(100vw - 32px));border-radius:var(--r);padding:12px 14px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:start;box-shadow:0 14px 34px rgba(0,0,0,.4);border:1px solid rgba(230,183,64,.45)}
.coach img{width:52px;height:52px;border-radius:50%;background:#2f7fa3;display:block}
.coach .cb{display:grid;gap:6px;min-width:0}
.coach p{margin:0;font-size:14px;line-height:1.45}
.coach .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.coach .btn,.coach .ghostbtn{min-height:40px}
@keyframes cpop{0%{opacity:0;transform:translate(-50%,10px)}100%{opacity:1;transform:translate(-50%,0)}}
.coach.pop{animation:cpop .35s ease-out}
@keyframes gspot{0%{box-shadow:0 0 0 0 rgba(230,183,64,.95), 0 0 0 2px rgba(230,183,64,.9)}70%{box-shadow:0 0 0 14px rgba(230,183,64,0), 0 0 0 2px rgba(230,183,64,.9)}100%{box-shadow:0 0 0 0 rgba(230,183,64,0), 0 0 0 2px rgba(230,183,64,.9)}}
.gspot{animation:gspot 1.5s ease-out infinite!important;position:relative;z-index:2}
.agenda{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;border-radius:999px;padding:5px 12px;font-size:12px;max-width:min(520px, calc(100vw - 90px))}
.agenda[hidden]{display:none}
.agenda b{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--deck-yellow)}
.agenda i{font-style:normal;font-family:var(--mono);color:var(--muted)}
body.titling .agenda, body.titling .coach, body.minigame .agenda{display:none}
@media (max-width:560px){ .coach{bottom:calc(var(--bar-h) + 14px);padding:10px 12px;grid-template-columns:40px minmax(0,1fr);gap:10px} .coach img{width:40px;height:40px} .coach p{font-size:13.5px} .agenda{border-radius:14px} }
@media (prefers-reduced-motion:reduce){ .gspot{animation:none!important;box-shadow:0 0 0 3px rgba(230,183,64,.9)!important} .coach.pop{animation:none} }
/* ---- phones ---- */
.coach .acts .btn,.coach .acts .ghostbtn{flex:0 0 auto;width:auto;padding-left:18px;padding-right:18px}
@media (pointer:coarse){ .pill{position:relative} .pill::before{content:'';position:absolute;inset:-5px -2px} .chip{min-height:36px} }
@media (max-width:560px){
  .fabs{gap:9px} .fab{width:42px;height:42px} .fab small{display:none} .fab b{font-size:11.5px}
  .coach{left:max(12px, env(safe-area-inset-left, 0px));right:68px;width:auto;transform:none}
  @keyframes cpop{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
}
@media (max-height:500px) and (orientation:landscape){
  .hud{gap:5px;padding-top:calc(6px + env(safe-area-inset-top, 0px))}
  .daypill{padding:2px 10px 2px 2px} .daypill .logo{font-size:13px} .goal{padding:4px 12px} .goal .gt{font-size:9.5px}
  .pills{gap:4px} .pill{padding:1px 8px 1px 1px;gap:4px} .pill .ic{width:22px;height:22px} .pill .ic svg{width:13px;height:13px} .pill .v{font-size:12.5px} .pill .d{display:none}
  .order{min-height:0;padding-top:3px;padding-bottom:3px;font-size:12px} .order .ot b{display:none}
  #agenda{display:none!important} .quests > :nth-child(n+2){display:none} .quest{padding-top:3px;padding-bottom:3px}
  .fabs{grid-template-columns:repeat(3,40px);gap:7px;top:calc(var(--hud-h) + 4px)} .fab{width:40px;height:40px} .fab small{display:none} .fab b{font-size:11px} #fabView{display:grid}
  .audio-tools{display:contents} .audio-tools #fabRadio{position:relative;right:auto;top:auto}
  .sheet{top:calc(6px + env(safe-area-inset-top, 0px));bottom:calc(6px + env(safe-area-inset-bottom, 0px));z-index:18}
  .coach{left:max(14px, env(safe-area-inset-left, 0px));transform:none;width:min(440px, 56vw);bottom:calc(var(--bar-h) + 10px);padding:9px 12px;grid-template-columns:38px minmax(0,1fr);gap:10px}
  .coach img{width:38px;height:38px} .coach p{font-size:13px;line-height:1.4} .coach .btn,.coach .ghostbtn{min-height:36px}
  @keyframes cpop{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
  .banner{font-size:24px}
}
/* ---- a calmer screen ---- */
#toast,#banner{display:none!important}
.lane{position:fixed;left:50%;transform:translate(-50%,8px);z-index:32;pointer-events:none;opacity:0;transition:opacity .25s, transform .25s;max-width:min(460px, calc(100vw - 32px));display:flex;align-items:center;gap:8px;background:rgba(14,30,33,.92);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13.5px;line-height:1.3;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.lane.on{opacity:1;transform:translate(-50%,0)}
.lane i{font-style:normal;font-family:var(--mono);color:var(--deck-yellow);font-size:12px}
.lane.k-big,.lane.k-day{flex-direction:column;gap:1px;border-radius:16px;padding:8px 20px;border-color:rgba(230,183,64,.55);text-align:center}
.lane.k-big b,.lane.k-day b{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.02em;line-height:1.05}
.lane.k-big small,.lane.k-day small{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--deck-yellow)}
.lane.k-day b{font-size:16px}
.quest.bhide{display:none!important}
.bmore{justify-self:start;border-radius:999px;padding:4px 12px;font-size:12px;font-family:var(--mono);color:var(--muted);min-height:28px}
.bmore[hidden]{display:none}
.agenda{padding:3px 10px;font-size:12px} .agenda b{font-size:10px}
body .coach{width:min(400px, calc(100vw - 32px));padding:10px 12px;grid-template-columns:40px minmax(0,1fr);gap:10px}
body .coach img{width:40px;height:40px} body .coach p{font-size:13.5px;line-height:1.4} body .coach .acts{gap:6px} body .coach .btn,body .coach .ghostbtn{min-height:34px;padding:0 14px;font-size:13px}
#modal.decision{background:rgba(3,10,12,.25);place-items:end center;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
#questModal{background:rgba(3,10,12,.25);place-items:end center;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
#modal.decision .dialog,#questModal .dialog{max-width:560px;padding:16px 18px;gap:10px;animation:sheetUp .25s ease-out;max-height:calc(100vh - 90px);overflow:auto}
@keyframes sheetUp{0%{transform:translateY(24px);opacity:0}100%{transform:none;opacity:1}}
#modal.decision .dialog h3,#questModal .dialog h3{font-size:19px}
.dialog p.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;color:var(--muted);font-size:14px}
.dialog p.clamp.open{-webkit-line-clamp:unset;display:block}
.opts button span{display:block} .opts button small{display:block;font-weight:500;opacity:.72;font-size:12px;margin-top:2px}
.opts button{padding:10px 14px}
@media (min-width:700px){ #modal.decision .opts{grid-template-columns:1fr 1fr} #modal.decision .opts button:first-child{grid-column:1/-1} }
.whatsnew summary{cursor:pointer;color:var(--deck-yellow);font-weight:600;font-size:14px;padding:4px 0}
.coach .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--deck-yellow)}
@media (max-width:560px){ body .coach{width:auto;grid-template-columns:minmax(0,1fr);padding:9px 12px;gap:4px} body .coach img{display:none} body .coach p{font-size:13px;line-height:1.35} body .coach .btn,body .coach .ghostbtn{min-height:32px;font-size:12.5px} .lane{font-size:12.5px;padding:7px 14px} }
@media (prefers-reduced-motion:reduce){ .lane{transition:none} #modal.decision .dialog,#questModal .dialog{animation:none} }
@media (prefers-reduced-motion:reduce){ .pill.pulse{animation:none} .floattxt{animation-duration:.01s} }