@font-face{font-family:Rubik;src:url(fonts/rubik-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-bold.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
  --ink:#1f3150; --mute:#5c6b88; --paper:#f7f9fa; --card:#fdfefe; --line:#d4e0e8;
  --sea:#e3f1f6; --seaM:#bcdbe8; --seaD:#2f6f94; --teal:#2a8c99; --tealL:#ddf0f0;
  --sand:#efede7; --sandD:#8d8a80; --lav:#6a63c9; --lavL:#efeefb; --good:#2b8f80; --goodL:#e0f4ee;
  --navy:#2c3f66; --r:16px; --sh:0 6px 22px rgba(31,49,80,.10); --sh2:0 2px 8px rgba(31,49,80,.08);
  --serif:"Frank Ruhl Libre","David","Times New Roman",serif;
  --px:0; --py:0;
}
*{box-sizing:border-box}
html{scroll-padding-top:120px}
body{margin:0;font-family:Rubik,system-ui,sans-serif;color:var(--ink);line-height:1.6;font-size:17px;
  background:
   linear-gradient(rgba(47,111,148,.05) 1px,transparent 1px) 0 0/48px 48px,
   linear-gradient(90deg,rgba(47,111,148,.05) 1px,transparent 1px) 0 0/48px 48px,
   linear-gradient(180deg,#eef6f9 0,#f6f8f7 60%,#eef3f2 100%);
  background-attachment:fixed;min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit}
a{color:var(--seaD)}
:focus-visible{outline:3px solid #7aa7e0;outline-offset:2px;border-radius:8px}
.skip{position:absolute;right:-999px;top:0;background:#fff;padding:.4em .8em;z-index:99}.skip:focus{right:8px}
.muted{color:var(--mute)}

/* ---------- top bar ---------- */
#top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(250,252,253,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ib{border:0;background:none;cursor:pointer;font-size:20px;line-height:1;padding:8px;border-radius:12px}
.ib:hover{background:var(--sea)}
.brand{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand b{font-size:19px;letter-spacing:.2px}
.brand .sub{font-size:12.5px;color:var(--mute);white-space:nowrap}
.tools{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.stars{display:flex;gap:1px;font-size:18px;color:#cfd7e3;margin-inline-end:4px}
.stars i{font-style:normal;transition:color .3s}
.stars i.on{color:#6a8fd6;text-shadow:0 0 8px rgba(106,143,214,.45)}
.stars i.pop{animation:pop .7s}
.pill{display:flex;align-items:center;gap:5px;font-size:15px;border:1px solid var(--line);background:#fff;padding:6px 10px;border-radius:999px}
.pill .ico{font-size:17px}
.pill .n{background:var(--navy);color:#fff;border-radius:999px;font-size:12px;min-width:20px;padding:1px 6px;text-align:center}
.pill.snap{animation:snap .55s}
.fb-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:15px;text-decoration:none;opacity:.6;background:transparent;border:1px solid var(--line);transition:opacity .2s,background .2s}
.fb-ico:hover,.fb-ico:focus-visible{opacity:1;background:var(--sea)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.7)}100%{transform:scale(1)}}
@keyframes snap{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.95)}100%{transform:scale(1)}}

/* voyage spine */
#voyage{flex:1 1 360px;min-width:260px;max-width:620px;margin:0 auto;padding:0 18px}
body[data-scene="title"] #voyage{visibility:hidden}
.vtrack{position:relative;height:40px}
.vline{position:absolute;top:21px;left:0;right:0;border-top:2px dashed #a9c6d6}
.vdone{position:absolute;top:20px;right:0;height:4px;border-radius:4px;background:linear-gradient(270deg,#6fb3bf,#7d8fd6);transition:width .9s cubic-bezier(.4,0,.2,1)}
.vpt{position:absolute;top:15px;width:14px;height:14px;margin-right:-7px;border-radius:50%;border:2px solid #a9c6d6;background:#fff;padding:0;cursor:pointer}
.vpt span{position:absolute;top:16px;right:50%;transform:translateX(50%);font-size:10.5px;white-space:nowrap;color:var(--mute);pointer-events:none;opacity:0;transition:opacity .2s}
.vpt:hover span,.vpt.cur span{opacity:1}
.vpt.past{background:#7fb6c3;border-color:#7fb6c3}
.vpt.cur{border-color:var(--navy);background:var(--navy)}
.vpt:disabled{cursor:default;opacity:.7}
.vship{position:absolute;top:-6px;width:34px;margin-right:-17px;transition:right 1.1s cubic-bezier(.4,0,.2,1);pointer-events:none;animation:bob 2.6s ease-in-out infinite}
.vship svg{width:34px;height:30px;transform:scaleX(-1)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}

#stage{max-width:1180px;margin:0 auto;padding:18px 16px 70px;outline:none}

/* ---------- buttons ---------- */
.btn{border:0;cursor:pointer;background:var(--navy);color:#fff;padding:11px 20px;border-radius:999px;font-weight:500;font-size:16.5px;box-shadow:var(--sh2);transition:transform .15s,box-shadow .15s,background .2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{background:#aab5c7;cursor:not-allowed;transform:none;box-shadow:none}
.btn.big{font-size:18.5px;padding:13px 26px}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid #b9cbe0}
.btn.ghost:disabled{color:#9aa6b8;background:#f4f6f8}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.row.center{justify-content:center}
.row.next{margin-top:16px}
.kicker{font-size:13px;letter-spacing:.4px;color:var(--teal);font-weight:700;margin:0 0 4px}
h1,h2,h3{line-height:1.2;margin:.1em 0 .35em}
h2{font-size:clamp(24px,3.2vw,32px)}
h3{font-size:21px}
.scenehead{max-width:760px;margin:6px auto 18px;text-align:center}
.scenehead p{margin:.3em 0;color:#33456a}
.scenehead.small{margin-top:26px}
.hint{text-align:center;color:var(--mute);font-size:15px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);padding:18px 20px;margin:14px auto;max-width:860px;animation:rise .5s both}
.simnote{max-width:860px;margin:0 auto 12px;background:#f0f1fb;border:1px dashed #b7b3ea;border-radius:12px;padding:8px 14px;font-size:14.5px;color:#3c3f72}
.simtag{display:inline-block;font-size:11px;font-style:normal;background:#ecebfb;color:#4d48a4;border-radius:6px;padding:1px 6px;margin-inline-start:6px;vertical-align:middle;font-weight:500}
.fact{background:var(--sea);border-radius:12px;padding:10px 14px;font-size:15.5px;border-inline-start:4px solid #8dbdd3}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.enter{animation:rise .5s both}

/* ---------- hero / chart ---------- */
.mapwrap{position:relative;overflow:hidden;background:#d8edf4}
.chart{display:block;width:100%;height:100%}
.chart .land path,.chart .land circle{fill:#d6e4cf;stroke:#88a796;stroke-width:2}
.chart .waves{animation:waves 14s linear infinite}
@keyframes waves{to{transform:translateX(-46px)}}
.chart .lbl text{font-family:Rubik;fill:#56708a}
.chart .lbl .big{font-size:24px;font-weight:700;fill:#6c8574;letter-spacing:1px}
.chart .lbl .sea{font-size:17px;font-style:italic;fill:#4f86a5}
.chart .lbl .port{font-size:17px;font-weight:700;fill:var(--navy)}
.chart .portdot{fill:var(--navy);stroke:#fff;stroke-width:3}
.chart .compass text{font:700 14px Rubik;fill:#4b5a86}
.chart .routeBase{stroke:transparent}
.chart .route{stroke:#2c3f66;stroke-width:3.2;stroke-dasharray:9 9;stroke-linecap:round}
.chart .endmark{opacity:0;transition:opacity .6s}
.chart.arrived .endmark{opacity:1}
.chart .endmark circle{fill:#5a6fc0}
.chart .endmark .ring{fill:none;stroke:#5a6fc0;stroke-width:2;transform-origin:0 0;animation:ring 2.2s ease-out infinite}
.chart .endt{font:700 17px Rubik;fill:var(--navy)}
.chart .endd{font:500 14px Rubik;fill:#4f86a5}
.chart .approx{font:13px Rubik;fill:#56708a}
.chart .shipin{animation:bob 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ring{from{transform:scale(.6);opacity:1}to{transform:scale(2.4);opacity:0}}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px}
.tags span{font-size:12.5px;background:var(--tealL);color:#22666f;border-radius:999px;padding:2px 10px}
.hc-credit{display:inline-block;font-size:13px;color:var(--mute);text-decoration:none;margin-top:8px;border-bottom:1px dotted #9fb0c4}
.hc-credit:hover{color:var(--seaD)}


/* ---------- prologue / logbook pages ---------- */
@keyframes floatIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1}}
.dots{justify-content:center}
.dots i{width:9px;height:9px;border-radius:50%;background:#c3d3df;display:inline-block}
.dots i.on{background:var(--navy);width:22px;border-radius:6px}

/* ---------- deck spots ---------- */
.flipin{animation:flipIn .7s calc(var(--i)*110ms) both}
@keyframes flipIn{from{opacity:0;transform:perspective(600px) rotateY(80deg)}to{opacity:1;transform:none}}

/* ---------- modal ---------- */
#modal{position:fixed;inset:0;z-index:50;background:rgba(24,38,62,.45);display:flex;align-items:center;justify-content:center;padding:12px;animation:fade .25s}
@keyframes fade{from{opacity:0}}
#modal .box{position:relative;background:var(--card);border-radius:20px;max-width:640px;width:100%;max-height:calc(100vh - 24px);overflow:auto;box-shadow:0 20px 50px rgba(20,30,60,.3);animation:rise .35s both}
#modal .in{padding:18px 20px 20px}
#modal .x{position:sticky;top:8px;float:left;margin:8px;z-index:3;border:0;background:#fff;border-radius:50%;width:36px;height:36px;cursor:pointer;box-shadow:var(--sh2);font-size:16px}
#modal.teach .box,.box.teach{max-width:720px}

/* ---------- quiz ---------- */
.qq{margin:.6em 0 .4em}
.qtag{display:inline-block;font-size:12px;border-radius:6px;padding:1px 8px;margin-inline-end:6px;font-weight:500}
.qtag.open{background:var(--lavL);color:#4d48a4}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:right;border:1.5px solid #cad8e4;background:#fff;border-radius:14px;padding:10px 12px;cursor:pointer;transition:border-color .2s,background .2s,transform .15s;animation:rise .4s calc(var(--i,0)*70ms) both;line-height:1.45;width:100%;text-decoration:none;color:inherit}
.opt:hover:not(:disabled){border-color:#8fb2d6;background:#f6fafd;transform:translateX(-3px)}
.opt .k{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sea);display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;color:var(--seaD)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--good);background:var(--goodL)}
.opt.right .k{background:var(--good);color:#fff}
.opt.alt{border-color:#b7b3ea;background:var(--lavL);border-style:dashed}
.opt.sel{border-color:var(--lav);background:var(--lavL)}
.opt.sel .k{background:var(--lav);color:#fff}
.opt.dim{opacity:.6}
.opts.multi .opt .k{background:none;font-size:18px;color:var(--lav)}
.fb{margin-top:12px;border-radius:14px;padding:12px 14px;animation:rise .4s both;font-size:16px}
.fb>b:first-child{display:block;margin-bottom:3px}
.fb.good{background:var(--goodL);border-inline-start:4px solid var(--good)}
.fb.hm{background:var(--lavL);border-inline-start:4px solid #9b97e0}
.fb.open{background:#f2f1fc;border-inline-start:4px solid #a7a2e6}
.fb p{margin:.4em 0 0}
.fb .after{margin-top:.5em}
.fb ul.notes{margin:.4em 0;padding-inline-start:1.2em}
.fb ul.notes li{margin:.25em 0}
.fb ul.notes li.m::marker{content:'＋ '}
.fb ul.notes li.x::marker{content:'○ '}
.fb ul.notes li.a::marker{content:'✓ '}

/* ---------- chart room (design) ---------- */
.chartgrid{display:grid;grid-template-columns:1fr;gap:16px;max-width:1080px;margin:0 auto}
.stepcard{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh2);padding:18px 18px 20px}
.stepn{font-size:13px;color:var(--mute);margin:0}
.plan{background:#fbfbf8;border:1px solid #d9d6cb;border-radius:18px;padding:14px 16px;box-shadow:var(--sh2);background-image:linear-gradient(transparent 31px,#e9e6dc 32px);background-size:100% 32px;align-self:start}
.plan h3{font-size:18px;margin:0 0 8px}
.plan dl{margin:0}
.pr{padding:6px 0;border-bottom:1px dashed #ddd9cd}
.pr dt{font-size:12.5px;color:var(--sandD)}
.pr dd{margin:0;font-family:var(--serif);font-size:17px;color:#24345a}
.pr .blank{color:#b7b3a6;font-family:Rubik;font-size:14px}
.pr.ink dd{animation:ink .8s both}
@keyframes ink{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@media (min-width:900px){.chartgrid{grid-template-columns:1fr 330px}.plan{position:sticky;top:120px}}
.orders{border:1.5px solid #d6d2c4;border-radius:16px;background:#fcfbf7;padding:12px}
.ordhead{font-family:var(--serif);font-size:18px;text-align:center;border-bottom:2px double #d6d2c4;padding-bottom:6px;margin-bottom:10px;color:#3d4a6a}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid #cad8e4;background:#fff;border-radius:999px;padding:7px 13px;cursor:pointer;font-size:15.5px;transition:all .2s}
.chip[aria-pressed="true"]{border-color:var(--teal);background:var(--tealL)}
.chip .cb{margin-inline-end:5px}
.chip.need{border-color:var(--good)}
.chip.miss{border-style:dashed;background:#f2f1fc;border-color:#9b97e0}
.chip.nope{opacity:.65}
.howto{display:block;font-size:14px;color:var(--mute)}
.assign .pool{display:flex;flex-wrap:wrap;gap:6px;min-height:64px;padding:8px;border:2px dashed #c3d6e2;border-radius:14px;background:#f5fafc;margin-bottom:10px}
.sailor{display:flex;flex-direction:column;align-items:center;gap:0;width:66px;border:1.5px solid #cad8e4;background:#fff;border-radius:12px;padding:4px 2px;cursor:grab;touch-action:none;user-select:none;transition:transform .15s,box-shadow .15s}
.sailor .face svg{width:34px;height:34px}
.sailor .nm{font-size:12.5px;line-height:1.2}
.sailor .sev{font-size:10px;letter-spacing:1px;color:#6d6aa9}
.sailor .sev.s3{color:#4b4790}
.sailor.pick{border-color:var(--lav);box-shadow:0 0 0 3px #d8d6f6;transform:translateY(-3px)}
.sailor.dragging{opacity:.35}
.sailor.ghost{position:fixed;z-index:80;pointer-events:none;box-shadow:var(--sh);transform:rotate(-6deg)}
.bunks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bunk{border:1.5px solid #d6dfe8;border-radius:14px;background:#fbfcfd;padding:6px;transition:background .2s,border-color .2s;cursor:pointer}
.bunk.over{background:var(--tealL);border-color:var(--teal)}
.bunk .bh{display:flex;align-items:center;gap:6px;font-size:14px}
.bunk .bs{display:flex;gap:6px;justify-content:center;min-height:70px;align-items:center}
.slot{width:62px;height:62px;border:2px dashed #cfdbe5;border-radius:12px;display:inline-block}
.bunk.ok{border-color:var(--good);background:var(--goodL)}
.bunk.lite,.bunk.heavy{border-color:#9b97e0;background:var(--lavL);border-style:dashed}
.sum{margin-inline-start:auto;font-size:12px;font-weight:700;border-radius:6px;padding:0 6px;background:#fff}
@media (min-width:700px){.bunks{grid-template-columns:repeat(3,1fr)}}
.cmp{display:grid;gap:10px}
.flip{position:relative;display:grid;width:100%;min-height:96px;border:0;background:none;padding:0;cursor:pointer;perspective:900px;text-align:right;animation:rise .4s calc(var(--i)*80ms) both}
.flip .f-front,.flip .f-back{grid-area:1/1;border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;justify-content:center;backface-visibility:hidden;transition:transform .6s cubic-bezier(.4,.2,.2,1);border:1.5px solid #cad8e4;background:#fff}
.flip .f-back{transform:rotateY(180deg);background:#f4f9fb;border-color:#9ec3d6}
.flip.on .f-front{transform:rotateY(-180deg)}
.flip.on .f-back{transform:rotateY(0)}
.flip small{color:var(--mute);font-size:12.5px}
.flip b{font-weight:500;font-size:15.5px;line-height:1.4}
.flip em{font-size:12px;color:var(--teal);font-style:normal;margin-top:2px}
.stamp{position:absolute;left:10px;top:8px;font-size:12.5px;font-weight:700;border:2px solid;border-radius:8px;padding:0 7px;transform:rotate(-7deg);background:#fff}
.stamp.same{color:var(--good)}
.stamp.diff{color:var(--lav)}
.flip.on .stamp{animation:stampIn .5s .45s both}
@keyframes stampIn{from{transform:rotate(-7deg) scale(2.2);opacity:0}to{transform:rotate(-7deg) scale(1);opacity:1}}
.compare .flip{min-height:118px}

/* ---------- bet ---------- */
.betgrid{display:grid;grid-template-columns:1fr;gap:10px;max-width:900px;margin:0 auto}
.betc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:var(--sh2);animation:rise .4s calc(var(--i)*70ms) both}
.bh{display:flex;align-items:center;gap:8px}
.seg{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center}
.seg button{flex:1;border:1.5px solid #cad8e4;background:#fff;border-radius:12px;padding:6px 4px;cursor:pointer;font-size:14.5px;display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:64px}
.seg button span{font-size:20px}
.seg button[aria-checked="true"]{border-color:var(--lav);background:var(--lavL)}
@media (min-width:800px){.betgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- trial ---------- */
@keyframes rock{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.dnum{display:flex;align-items:baseline;gap:4px}
.dnum b{font-size:34px;color:var(--navy);min-width:1.4em;text-align:center}
.trialgrid{display:grid;grid-template-columns:1fr;gap:12px}
.wards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ward{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px 10px;box-shadow:var(--sh2);transition:box-shadow .4s,border-color .4s}
.ward .bh{font-size:14.5px}
.ward.winner{border-color:var(--good);box-shadow:0 0 0 3px #bfe5da,var(--sh)}
.wstamp{position:absolute;left:8px;top:6px;font-size:11.5px;font-weight:700;color:var(--lav);border:2px solid var(--lav);border-radius:6px;padding:0 5px;background:#fff;transform:rotate(-6deg) scale(2);opacity:0;transition:all .4s cubic-bezier(.3,1.6,.5,1)}
.wstamp.on{opacity:1;transform:rotate(-6deg) scale(1)}
.st{font-size:12.5px;color:var(--mute)}
.daylog{background:#fbfbf8;border:1px solid #d9d6cb;border-radius:16px;padding:10px 14px;box-shadow:var(--sh2)}
.daylog h3{font-size:17px;margin:0 0 6px}
.daylog ol{margin:0;padding-inline-start:1.2em;font-family:var(--serif);font-size:16px;max-height:330px;overflow:auto}
.daylog li{margin:.3em 0}
.daylog li.new{animation:rise .5s both}
@media (min-width:900px){.trialgrid{grid-template-columns:1fr 300px}.wards{grid-template-columns:repeat(3,1fr)}}
.rtable{display:grid;gap:8px;max-width:960px;margin:0 auto}
.rr{display:grid;grid-template-columns:40px 1fr;gap:2px 10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;animation:rise .4s calc(var(--i)*80ms) both}
.rr .mine{grid-column:2;font-size:14px;color:var(--mute)}
.rr .mine em{color:var(--good);font-style:normal;font-weight:700}
.rr .real{grid-column:1/-1;font-size:15px}
.rr.yes{border-color:var(--good);background:#f2fbf8}
@media (min-width:800px){.rr{grid-template-columns:40px 170px 170px 1fr}.rr .mine{grid-column:auto}.rr .real{grid-column:auto}}

/* ---------- findings ---------- */
.card.art-r{display:grid;grid-template-columns:1fr;gap:10px;align-items:center}
.crit{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0}
.crit-c{min-height:120px}
.crit-c .f-back span{font-size:14.5px;line-height:1.45}
@media (min-width:700px){.crit{grid-template-columns:repeat(2,1fr)}.crit-c{min-height:150px}}
@media (min-width:1000px){.crit{grid-template-columns:repeat(3,1fr)}}
.chance .gsize{max-width:340px;flex-wrap:nowrap}
.chance .gsize span{font-size:14.5px;color:var(--mute)}
.chance .gsize button{flex:0 0 50px;min-width:0;font-size:18px;font-weight:700}
.chance .gsize span{flex:none}
@keyframes dotIn{from{transform:scale(0)}}
.simout{font-size:15.5px}

/* ---------- admiralty ---------- */
.meter-wrap{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px}
.pmeter{flex:1;height:12px;border-radius:12px;background:#fff;overflow:hidden;border:1px solid #cdd8e6}
.pmeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9ab8e6,#2a8c99);transition:width .9s cubic-bezier(.4,0,.2,1)}
.pmeter.bump{animation:snap .5s}
.evpick{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0}
.evc{position:relative;text-align:right;border:1.5px solid #d6d2c4;background:#fcfbf7;border-radius:12px;padding:8px 12px;cursor:pointer;display:grid;grid-template-columns:28px 1fr;gap:0 6px;transition:all .2s}
.evc small{grid-column:2;font-family:var(--serif);font-size:14.5px;color:#4b5670;line-height:1.35}
.evc[aria-pressed="true"]{border-color:var(--teal);background:var(--tealL);transform:translateX(-4px) rotate(-.5deg)}
.evc .evtag{position:absolute;left:8px;top:6px;font-size:11.5px;font-style:normal;font-weight:700;border-radius:6px;padding:0 6px}
.evc.k-strong .evtag{color:var(--good);border:1.5px solid var(--good);background:#fff}
.evc.k-mid .evtag,.evc.k-weak .evtag{color:var(--lav);border:1.5px solid #b7b3ea;background:#fff}
@media (min-width:800px){.evpick{grid-template-columns:repeat(2,1fr)}}
.speech{display:flex;gap:10px;align-items:flex-start}
.speech blockquote{margin:0;background:#f3f5fa;border-radius:4px 16px 16px 16px;padding:10px 14px;font-family:var(--serif);font-size:17.5px;position:relative;animation:rise .4s both}
.speech blockquote b{font-family:Rubik;font-size:14px;display:block;color:var(--mute);font-weight:500}
.evuse{display:inline-block;font-size:12px;background:var(--tealL);color:#22666f;border-radius:6px;padding:0 6px}
.verdict{position:relative;overflow:hidden;padding-top:66px}
.bigstamp{position:absolute;left:14px;top:18px;font-size:20px;font-weight:700;color:var(--lav);border:3px double var(--lav);border-radius:10px;padding:2px 12px;transform:rotate(-10deg);animation:stampIn .6s .2s both;background:rgba(255,255,255,.8)}

/* ---------- timeline ---------- */
.tl{position:relative;max-width:900px;margin:0 auto;padding-inline-start:54px}
.tline{position:absolute;right:22px;top:6px;bottom:6px;border-right:3px dashed #a9c6d6}
.tship{position:absolute;right:4px;top:0;width:40px;transition:top 1s cubic-bezier(.4,0,.2,1);z-index:2;animation:bob 2.6s ease-in-out infinite}
.tship svg{width:40px;height:35px;transform:scaleX(-1) rotate(90deg)}
.tl ol{list-style:none;margin:0;padding:0}
.tli{position:relative;margin:0 0 14px}
.tli::before{content:'';position:absolute;right:-38px;top:10px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.ty{display:inline-block;font-weight:700;color:#fff;background:var(--navy);border-radius:8px;padding:1px 10px;font-size:14.5px;margin-bottom:6px}
.tc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--sh2)}
.tc.hasimg{display:grid;grid-template-columns:1fr;gap:10px}
.tt h3{margin-top:0}
.letter{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.letter textarea{width:100%;font-family:var(--serif);font-size:18px;border:1.5px solid #d6d2c4;border-radius:12px;padding:10px 12px;background:#fcfbf7 linear-gradient(transparent 31px,#ebe7dc 32px) 0 6px/100% 32px;line-height:32px;color:var(--ink);resize:vertical}
.letter.sealed textarea{border-color:#9ec3d6}

/* ---------- certificate ---------- */
.cert .mapwrap.small{height:240px;border-radius:20px;max-width:900px;margin:0 auto;border:1px solid var(--line)}
.diploma{position:relative;max-width:720px;margin:-36px auto 0;background:#fdfdfb;border:2px solid #c9d6e2;outline:6px double #dbe4ee;outline-offset:-14px;border-radius:18px;padding:30px 30px 22px;text-align:center;box-shadow:var(--sh);animation:rise .7s .2s both}
.diploma h2{color:var(--navy)}
.diploma .nm{display:flex;justify-content:center;align-items:baseline;gap:8px;font-family:var(--serif);font-size:20px}
.diploma .nm input{font:inherit;font-size:24px;border:0;border-bottom:2px solid #b9c9da;background:transparent;text-align:center;width:min(320px,70%);color:var(--navy)}
.dstars{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.dstars span{border:1.5px solid #d4dce7;border-radius:999px;padding:3px 12px;color:#9aa6b8;font-size:14.5px}
.dstars span i{font-style:normal;margin-inline-end:4px}
.dstars span.on{color:var(--navy);border-color:#8fa6d8;background:#f1f4fc}
.dstars span.on i{color:#6a8fd6}
.learned{text-align:right;max-width:520px;margin:10px auto;font-size:15.5px}
.dsum{color:var(--mute);font-size:14.5px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall 3s ease-in both;transform:rotate(var(--r))}
@keyframes fall{to{transform:translateY(105vh) rotate(calc(var(--r) + 540deg))}}

/* ---------- logbook drawer ---------- */
.flypage{position:fixed;z-index:95;width:140px;height:44px;background:#fbfbf8;border:1.5px solid #cfc9b8;border-radius:8px;box-shadow:var(--sh);display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:12px;line-height:1.2;pointer-events:none;overflow:hidden}
.flypage b{font-weight:500}

/* ---------- toast, menu ---------- */
#toast{pointer-events:none;position:fixed;top:64px;left:50%;transform:translate(-50%,-20px);opacity:0;visibility:hidden;background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px;z-index:96;box-shadow:var(--sh);transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .3s,visibility .3s;font-size:15.5px;max-width:92vw;text-align:center}
#toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}
#menu{position:fixed;inset:0;z-index:70;background:rgba(24,38,62,.4);display:flex;justify-content:flex-start;animation:fade .2s}
#menu .mbox{background:#fbfcfd;width:min(360px,90vw);height:100%;overflow:auto;padding:16px;box-shadow:-8px 0 30px rgba(20,30,60,.2);animation:slideIn .3s both;display:flex;flex-direction:column;gap:8px}
@keyframes slideIn{from{transform:translateX(100%)}}
#menu .x{align-self:flex-end;border:0;background:#fff;border-radius:50%;width:34px;height:34px;cursor:pointer;box-shadow:var(--sh2)}
.mway{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
#menu .opt{animation:none}

/* ---------- phone ---------- */
@media (max-width:800px){
  #toast{top:92px}
  body{font-size:16.5px}
  #top{padding:6px 10px;gap:6px}
  .pill .lbl{display:none}
  .pill{padding:6px 8px}
  #voyage{order:5;flex-basis:100%;max-width:none;padding:0 14px;margin-top:-2px}
  .vtrack{height:30px}
  .vline{top:15px}.vdone{top:14px}.vpt{top:9px}
  .vship{top:-10px}
  .vpt span{display:none}
  .brand .sub{display:none}
  #stage{padding:12px 12px 60px}
  .card{padding:14px}
  .stepcard{padding:14px}
}
@media (max-width:800px){.chart .lbl .big{font-size:34px}.chart .lbl .sea{font-size:25px}.chart .lbl .port{font-size:26px}.chart .endt{font-size:26px}.chart .endd{font-size:21px}.chart .approx{font-size:20px}.chart .route{stroke-width:5}}

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{
  #top,#log,#scrim,#toast,.noprint,.mapwrap,.fb-ico{display:none!important}
  body{background:#fff}
  .diploma{box-shadow:none;margin:0 auto}
}


/* usability: equal-size choices in pairs, step lines, passive empty areas */
.opts:not(.multi){display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:8px}
@media (min-width:700px){.opts:not(.multi){grid-template-columns:repeat(2,1fr)}}
.opts.multi{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr}
@media (min-width:700px){.opts.multi{grid-template-columns:repeat(2,1fr)}}
.steps{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:0;margin:8px 0 2px;font-size:14px;color:var(--mute)}
.steps li{display:flex;align-items:center;gap:5px}
.steps li b{width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.steps li+li::before{content:'←';margin-inline-end:8px;color:#a5b4c8}
.stepcard .steps,.card .steps{justify-content:flex-start}
.empty{color:#8b97ab;font-size:14.5px;border:2px dashed #d3dde7;border-radius:12px;padding:10px 12px;margin:6px 0;text-align:center;background:rgba(255,255,255,.5);font-style:italic}
.empty.big{max-width:860px;margin:18px auto;padding:22px}
.vfut{position:absolute;top:18px;width:8px;height:8px;margin-right:-4px;border-radius:50%;background:#d3e0e8}
@media (max-width:800px){.vfut{top:12px}}
.ward{cursor:default}

.cmp,.crit{overflow:hidden;padding:2px}

/* text-fix Oct 29: longer story text on 'רופא הספינה' — keep the continue button on screen on a 390x844 phone */

/* ====================== v2: inside the ship ====================== */
@font-face{font-family:'Gveret Levin';src:url(fonts/gveret-levin-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:'Gveret Levin';src:url(fonts/gveret-levin-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
:root{--logw:300px;--hh:64px}
.hand{font-family:'Gveret Levin',Rubik,sans-serif;font-size:1.14em;letter-spacing:.2px;font-weight:400}
.paper{background:#fcfdfd linear-gradient(270deg,transparent 16px,#dcd9f4 16px,#dcd9f4 18px,transparent 18px);border:1px solid #cfdbe5;border-radius:18px;box-shadow:0 8px 26px rgba(24,40,66,.14)}
.parchment{background:radial-gradient(ellipse at 30% 15%,#fdfdfb,#eef1f0 75%);border:1px solid #d3dad9;box-shadow:0 10px 30px rgba(24,40,66,.18)}
.glass{background:rgba(250,252,253,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.scene{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 8px 24px rgba(24,40,66,.2);background:#2b2a30}
.scene img{display:block;width:100%;height:100%;object-fit:cover}
.scene .vig{position:absolute;inset:0;box-shadow:inset 0 0 70px rgba(16,24,40,.38);pointer-events:none}
.scenebg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.scenebg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04) translate(calc(var(--px)*-10px),calc(var(--py)*-6px));transition:transform .6s}
.scenebg .vig{position:absolute;inset:0;background:linear-gradient(180deg,rgba(232,242,247,.42),rgba(232,242,247,.74) 50%,rgba(232,242,247,.86))}
.scenehead.onbg{background:rgba(250,252,253,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:20px;padding:12px 18px;box-shadow:var(--sh2);border:1px solid rgba(207,219,229,.8)}
.context{display:inline-block;background:#f2f1fc;border:1px dashed #b7b3ea;border-radius:12px;padding:4px 12px;font-size:15px;color:#3c3f72}
.sceneband{max-width:1000px;margin:0 auto 10px}
.sceneband .scene{max-height:300px;aspect-ratio:auto;height:clamp(160px,28vw,300px)}
.btn.small{font-size:14px;padding:7px 14px}
section{position:relative}

/* hero */
.hero{position:relative;margin:-18px calc(50% - 50vw) 0;width:100vw;min-height:calc(100vh - var(--hh));overflow:hidden;display:flex;align-items:center}
.herobg{position:absolute;inset:0}
.herobg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05) translate(calc(var(--px)*-12px),calc(var(--py)*-8px));transition:transform .6s}
.herobg .vig{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(18,30,52,0),rgba(18,30,52,.45))}
.waves-fg{position:absolute;left:0;bottom:0;width:200%;height:56px;opacity:.8;animation:wv 16s linear infinite}
.waves-fg .w1{fill:rgba(220,236,244,.28)}.waves-fg .w2{fill:rgba(220,236,244,.45)}
@keyframes wv{to{transform:translateX(-50%)}}
.herogrid{position:relative;display:grid;grid-template-columns:1fr;gap:16px;width:100%;max-width:1240px;margin:0 auto;padding:16px}
.hero .mapwrap{height:46vh;min-height:280px;border-radius:20px;transform:rotate(-1deg);overflow:hidden}
.herocard{border-radius:22px;box-shadow:var(--sh);padding:22px 22px 18px;border:1px solid rgba(207,219,229,.9);animation:rise .8s .3s both}
.herocard h1{font-size:clamp(40px,7vw,64px);margin:0;color:var(--navy);letter-spacing:.5px}
.herocard .h2{font-size:19px;font-weight:500;color:var(--seaD);margin:0 0 .6em}
@media (min-width:900px){.herogrid{grid-template-columns:1.25fr 1fr;align-items:center;padding:28px 34px}.hero .mapwrap{height:min(72vh,560px)}}

/* prologue */
.pro{max-width:1080px;margin:10px auto}
.lpage{position:relative;display:grid;grid-template-columns:1fr;gap:0}
.lp-art{border-radius:20px}
.lp-txt{position:relative;margin:-26px 10px 0;border-radius:18px;padding:18px 20px 18px;font-size:17px;animation:rise .6s .15s both}
.lp-txt h2{color:var(--navy)}
.dots{justify-content:center}
.dots i{width:9px;height:9px;border-radius:50%;background:#c3d3df;display:inline-block}
.dots i.on{background:var(--navy);width:22px;border-radius:6px}
@media (min-width:1000px){.lpage{grid-template-columns:1fr}.lp-art{max-height:calc(100vh - var(--hh) - 40px)}.lp-txt{position:absolute;right:18px;bottom:18px;width:min(460px,46%);margin:0;max-height:calc(100% - 36px);overflow:auto}}

/* ship cross-section */
.ship .scenehead{margin-bottom:10px}
.hud{position:sticky;top:var(--hh);z-index:6;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;max-width:1000px;margin:0 auto 10px;padding:6px 12px;border-radius:16px;background:rgba(250,252,253,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--sh2);border:1px solid var(--line)}
.hud b{font-size:14.5px}.hud small{color:var(--mute);font-size:13px}
.hud-clues,.inv{display:flex;align-items:center;gap:8px}
.pips{display:flex;gap:4px}.pips i{width:13px;height:17px;border-radius:2px 4px 4px 2px;background:#d6e0ea;display:inline-block;transition:background .4s}.pips i.on{background:var(--navy)}
.slots{display:flex;gap:5px}
.slot{width:42px;height:42px;border-radius:10px;border:2px dashed #b9cbe0;display:inline-grid;place-items:center;color:#9aa8bd;font-weight:700;background:rgba(255,255,255,.7);overflow:hidden;font-size:15px}
.slot.full{border:2px solid #fff;box-shadow:0 1px 5px rgba(31,49,80,.3)}
.slot img{width:100%;height:100%;object-fit:cover;display:block}.slot em{display:none}
.slot.snap,#logHead.snap{animation:snap .55s}
.hud-done{display:flex;align-items:center;gap:10px;flex-basis:100%;justify-content:center;border-top:1px dashed var(--line);padding-top:6px}
.shipview{max-width:1000px;margin:0 auto;border-radius:22px;background:linear-gradient(#cde4ef,#e9f3f7 62%,#cfe2ec);box-shadow:var(--sh);overflow:hidden;border:1px solid #c9dbe6}
.shipsx{display:block;width:100%;height:auto}
.shipsway{transform-origin:500px 470px;animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-.8deg) translateY(0)}50%{transform:rotate(.8deg) translateY(5px)}}
.seaback{fill:#a8cde1}
.seafront{animation:sea1 7s linear infinite}.seafront2{fill:rgba(240,248,252,.45);animation:sea2 9s linear infinite}
@keyframes sea1{to{transform:translateX(-420px)}}@keyframes sea2{to{transform:translateX(210px)}}
.sails .sl{transform-box:fill-box;transform-origin:50% 0;animation:billow 5s ease-in-out infinite}
@keyframes billow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.04)}}
.flag{transform-box:fill-box;transform-origin:0 50%;animation:flag 1.6s ease-in-out infinite}
@keyframes flag{0%,100%{transform:skewY(0)}50%{transform:skewY(6deg)}}
.lamp{animation:flick 3.2s ease-in-out infinite}.lamp.l2{animation-delay:-1s}.lamp.l3{animation-delay:-2s}
@keyframes flick{0%,100%{opacity:.85}45%{opacity:.55}60%{opacity:1}}
.room{cursor:pointer;outline:none}
.room .rframe{fill:none;stroke:#d8c39a;stroke-width:4;transition:stroke .2s}
.room:hover .rframe,.room:focus-visible .rframe{stroke:#fff;stroke-width:7}
.room .rhit{fill:rgba(255,255,255,0);stroke:rgba(255,255,255,0);stroke-width:3;stroke-dasharray:8 7;transition:all .2s}
.room:hover .rhit,.room:focus-visible .rhit{fill:rgba(255,255,255,.16);stroke:#fff}
.plaque rect{fill:rgba(250,252,253,.95);stroke:#2c3f66;stroke-width:1.6}
.plaque text{font:700 15px Rubik,sans-serif;fill:#2c3f66}
.room:not(.done) .plaque{animation:plq 2.4s ease-in-out infinite}
@keyframes plq{0%,100%{opacity:1}50%{opacity:.78}}
.room.done .plaque rect{fill:#e0f4ee;stroke:#2b8f80}.room.done .plaque text{fill:#1f6b60}
.crewt{font:12px Rubik,sans-serif;fill:#d8cbb4}
.roomlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;max-width:1000px;margin:10px auto 0}
.rbtn{position:relative;display:flex;flex-direction:column;text-align:right;border:1.5px solid #cad8e4;background:rgba(255,255,255,.95);border-radius:14px;padding:8px 12px;cursor:pointer;transition:transform .15s,border-color .2s}
.rbtn:hover{transform:translateY(-2px);border-color:#8fb2d6}
.rbtn small{color:var(--mute);font-size:13px}
.rbtn .rc{position:absolute;left:10px;top:8px;font-size:13px;font-weight:700;color:var(--seaD)}
.rbtn.done{border-color:var(--good);background:#f2fbf8}.rbtn.done .rc{color:var(--good)}
/* inside a room */
.room-v{max-width:1120px;margin:0 auto;animation:rise .45s both}
.roomtop{display:flex;align-items:center;gap:12px;margin:4px 0 10px;flex-wrap:wrap}
.roomtop h3{margin:0}.roomtop small{color:var(--mute)}
.roomtop>div{background:rgba(250,252,253,.9);border-radius:12px;padding:2px 12px}
.roomgrid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.roomimg{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--sh);background:#1e1a17}
.roomimg .scene{border-radius:0;box-shadow:none}
.holdsvg{display:block;width:100%;height:auto}
.dust{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,245,220,.55) 0 1.2px,transparent 1.6px) 0 0/90px 70px,radial-gradient(circle,rgba(255,245,220,.35) 0 1px,transparent 1.4px) 30px 20px/60px 80px;animation:dust 18s linear infinite;mix-blend-mode:screen;opacity:.7}
@keyframes dust{to{background-position:-90px -70px,90px -160px}}
.hs{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;border:0;background:none;padding:0;cursor:pointer;z-index:2}
.hs .ring{position:absolute;inset:0;border-radius:50%;border:3px solid #fff;background:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(44,63,102,.55),0 0 22px rgba(255,255,255,.75);animation:hsp 1.9s ease-out infinite}
.hs .ring::after{content:'';position:absolute;inset:13px;border-radius:50%;background:#fff}
@keyframes hsp{0%{transform:scale(.85)}50%{transform:scale(1.08)}100%{transform:scale(.85)}}
.hs .hl{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(250,252,253,.95);color:var(--navy);font-size:13px;font-weight:700;border-radius:999px;padding:1px 10px;margin-top:5px;box-shadow:var(--sh2);pointer-events:none}
.hs:hover .ring,.hs.cur .ring{box-shadow:0 0 0 4px #6a63c9,0 0 26px rgba(255,255,255,.9)}
.hs.done .ring{animation:none;background:rgba(43,143,128,.75);border-color:#e0f4ee}
.hs.done .ring::after{content:'✓';inset:0;background:none;color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px}
.hs.k-info .ring::after,.hs.k-food .ring::after{inset:16px}
.rpanel{border-radius:18px;padding:14px 16px}
.rintro{margin:0 0 6px;font-size:16px}
.rlook{margin:4px 0;font-size:14px;color:var(--mute)}
.rchip{border:1.5px solid #cad8e4;background:#fff;border-radius:999px;padding:2px 10px;margin:2px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.rchip.done{border-color:var(--good);background:var(--goodL)}.rchip.cur{border-color:var(--lav);box-shadow:0 0 0 2px #d8d6f6}
.disc{margin-top:6px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--sh2)}
.dcard h4{margin:0 0 4px;font-size:18px;color:var(--navy)}
.dcard p{margin:.3em 0}
.dcard.item{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start}
.dose{display:inline-block;background:var(--sea);border-radius:8px;padding:1px 8px;font-size:13.5px;color:#2b5d7c}
.ipic{display:inline-block;width:44px;height:44px;border-radius:10px;overflow:hidden;border:2px solid #fff;box-shadow:0 1px 5px rgba(31,49,80,.28);flex:none;background:#e9eef3;vertical-align:middle}
.ipic img{width:100%;height:100%;object-fit:cover;display:block}
.ipic.big{width:96px;height:96px;border-radius:14px}.ipic.sm{width:36px;height:36px;border-radius:8px}
.flyitem,.flyfood{position:fixed;z-index:95;width:64px;height:64px;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(20,30,50,.35);border:2px solid #fff;pointer-events:none}
.flyfood{width:46px;height:46px;border-radius:10px}
.flyitem img,.flyfood img{width:100%;height:100%;object-fit:cover;display:block}
.hlantern{transform-box:fill-box;transform-origin:50% 0;animation:swing 4s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.hglow{animation:flick 3.5s ease-in-out infinite}
.weevil{animation:crawl 3s ease-in-out infinite}.weevil.w1{animation-delay:-1s}.weevil.w2{animation-delay:-2s}
@keyframes crawl{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-6px)}}
.drip{animation:drip 2.4s ease-in infinite}@keyframes drip{0%{transform:translateY(-8px);opacity:0}30%{opacity:1}100%{transform:translateY(30px);opacity:0}}
@media (min-width:1000px){.roomgrid{grid-template-columns:1.45fr 1fr}.rpanel{position:sticky;top:calc(var(--hh) + 70px)}}
@media (max-width:700px){.hs{width:38px;height:38px;margin:-19px 0 0 -19px}.hs .ring::after{inset:10px}.hs .hl{display:none}.shipsx .plaque{display:none}.dcard.item{grid-template-columns:72px 1fr}.ipic.big{width:72px;height:72px}}
/* the galley menu board */
.menuboard{background:#2f3b4a;color:#eef3f8;border-radius:14px;padding:12px;margin:8px 0;box-shadow:inset 0 0 0 5px #4a5a6e,0 4px 14px rgba(20,30,50,.25)}
.mbhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.mbhead .wk{font-size:14px;background:rgba(255,255,255,.12);border-radius:999px;padding:1px 10px}
.mbhead .wk b{font-size:18px}
.mbdays{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px}
.mbdays.flipwk .mday{animation:flipday .6s calc(var(--d,0)*60ms) both}
@keyframes flipday{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.mday{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 6px;display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.25}
.mday>small{font-weight:700;color:#b9d6e8}
.fi{display:flex;align-items:center;gap:5px}
.fi svg{width:20px;height:20px;flex:none;background:#f2f4f7;border-radius:5px;padding:1px}
.fresh{color:#c9c6f2;font-size:12px;margin-top:2px}
.mbnote{font-size:11.5px;opacity:.75;margin:6px 0 0}
.menuboard .btn.ghost{background:rgba(255,255,255,.95)}
.landmenu{background:#eef7f4;color:var(--ink);border:1.5px solid #a8d6cd;border-radius:12px;padding:10px 12px;margin-top:10px}
.lm{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.lm .fi{background:#fff;border-radius:999px;padding:2px 10px 2px 6px;font-size:14px;border:1px solid #cfe4de}
/* the six on Lind's table */
.supp .sceneband .scene{height:clamp(170px,30vw,330px)}
.sus{display:grid;grid-template-columns:1fr;gap:10px;max-width:1000px;margin:0 auto}
.susc{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:start;background:rgba(253,254,254,.97);border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:var(--sh2)}
.susc .ipic{width:84px;height:84px;border-radius:12px}
.susc b{display:block;font-size:17px}
.susc .dose{margin:2px 0}
.susc p{font-size:14.5px;margin:.3em 0 0;color:#3b4a66}
@media (min-width:800px){.sus{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1250px){.sus{grid-template-columns:repeat(3,1fr)}}
.supp .row.next,.bet .row.next{justify-content:center}

/* chart table */
.pr dd .hand{font-size:21px;color:#24345a;line-height:1.3}
.flip b.hand{font-size:19px;font-weight:400}
.stepcard{padding:18px 30px 20px 18px}
.plan.paper{background:#fcfdfd linear-gradient(transparent 31px,#e3ecf3 32px) 0 0/100% 32px}
.orders{background:#fcfdfd}
.bunk .bh .ipic,.betc .bh .ipic,.ward .bh .ipic{width:32px;height:32px;border-radius:8px}

/* the trial */
.foodtable{max-width:1000px;margin:0 auto 12px;border-radius:18px;padding:12px;background:linear-gradient(180deg,#6f7f92,#56657a);box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 22px rgba(24,40,66,.22);background-image:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 26px,rgba(0,0,0,.12) 26px 28px),linear-gradient(180deg,#6f7f92,#56657a)}
.ftitems{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ft{position:relative;display:flex;flex-direction:column;align-items:center;width:86px;color:#fff;font-size:12px;text-align:center;line-height:1.2;gap:3px;transition:opacity .4s,filter .4s}
.ft .ipic{width:62px;height:62px;border-radius:12px}
.ft.out{opacity:.45;filter:grayscale(1)}
.ft.out::after{content:'נגמר';position:absolute;top:18px;font-weight:700;font-size:12px;background:#fff;color:var(--lav);border:2px solid var(--lav);border-radius:6px;padding:0 5px;transform:rotate(-10deg)}
.ftctl{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.ftctl .dnum{background:#fff;border-radius:999px;padding:0 14px;box-shadow:var(--sh2)}
.dnum{display:flex;align-items:baseline;gap:4px}
.dnum b{font-size:30px;color:var(--navy);min-width:1.4em;text-align:center}
.ftctl .btn.ghost{background:rgba(255,255,255,.92)}
.wards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ward{position:relative;background:rgba(253,254,254,.96);border:1px solid var(--line);border-radius:16px;padding:8px 10px;box-shadow:var(--sh2);transition:box-shadow .4s,border-color .4s}
.ward .bh{font-size:14.5px}
.ward.winner{border-color:var(--good);box-shadow:0 0 0 3px #bfe5da,var(--sh)}
.wstamp{position:absolute;left:8px;top:6px;font-size:11.5px;font-weight:700;color:var(--lav);border:2px solid var(--lav);border-radius:6px;padding:0 5px;background:#fff;transform:rotate(-6deg) scale(2);opacity:0;transition:all .4s cubic-bezier(.3,1.6,.5,1);z-index:2}
.wstamp.on{opacity:1;transform:rotate(-6deg) scale(1)}
.beds{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.pt{position:relative;display:flex;flex-direction:column;align-items:center;background:#eef3f8;border-radius:12px;padding:6px 4px 4px}
.pfig{display:block;width:100%;max-width:96px}
.fig{display:block;width:100%;height:auto}
.pt .st{font-size:12.5px;color:var(--mute)}
.pt[data-pose=fit]{background:#e6f5f0}.pt[data-pose=fit] .st{color:var(--good);font-weight:700}
.pt[data-pose=up] .st,.pt[data-pose=sit] .st{color:var(--navy)}
.pt.chg .fig{animation:popfig .8s both}
@keyframes popfig{0%{transform:translateY(6px) scale(.92);opacity:.3}60%{transform:translateY(-4px) scale(1.05);opacity:1}100%{transform:none}}
.plate{position:absolute;top:4px;left:6px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #9fb6cf;opacity:0;transform:scale(.3);transition:all .35s cubic-bezier(.3,1.6,.5,1)}
.pt.fed .plate{opacity:1;transform:scale(1)}
.daylog{padding:10px 14px}
.daylog h3{font-size:17px;margin:0 0 6px}
.daylog ol{margin:0;padding-inline-start:1.2em;font-size:15px;max-height:360px;overflow:auto}
.daylog li{margin:.35em 0}
.daylog li.new{animation:rise .5s both;background:#f2f1fc;border-radius:8px;padding:2px 6px}
.trialgrid{display:grid;grid-template-columns:1fr;gap:12px;max-width:1100px;margin:0 auto}
@media (min-width:1000px){.trialgrid{grid-template-columns:1fr 280px}.wards{grid-template-columns:repeat(3,1fr)}}
.resgrid{display:grid;grid-template-columns:1fr;gap:12px;max-width:1000px;margin:0 auto}
@media (min-width:1000px){.resgrid{grid-template-columns:300px 1fr}.resart{position:sticky;top:calc(var(--hh) + 12px)}}
.rr{grid-template-columns:40px 1fr}
@media (min-width:800px){.rr{grid-template-columns:40px 150px 150px 1fr}}

/* findings */
.card{background:rgba(253,254,254,.97)}
.card.paper{background:#fcfdfd linear-gradient(270deg,transparent 16px,#dcd9f4 16px,#dcd9f4 18px,transparent 18px);padding-right:30px}
.cart .scene{border-radius:12px}
@media (min-width:800px){.card.art-r{grid-template-columns:280px 1fr}}
.legend{display:flex;gap:18px;font-size:14px;color:var(--mute);flex-wrap:wrap}
.legend svg{height:20px;width:auto;vertical-align:middle}
.oneward{max-width:560px;margin:10px 0}
.mwl{display:grid;grid-template-columns:repeat(6,1fr);font-size:11.5px;color:var(--mute);text-align:center;margin-bottom:3px}
.mw{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.mg{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;background:#eaf0f6;border-radius:6px;padding:3px 0;min-height:100%}
.tf{width:13px;height:8px}.tf.up{width:8px;height:14px}
.mw.big{gap:6px}.mw.big .mg{padding:6px 0;gap:4px;min-height:70px}
.mw.big .tf{width:30px;height:18px}.mw.big .tf.up{width:20px;height:34px;animation:popfig .5s both}
.oneout{min-height:1.6em;font-size:15.5px}
.many .mcap{font-size:14px;color:var(--mute);margin:.4em 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.tile{position:relative;border:2px solid transparent;border-radius:8px;padding:3px;background:#fff;animation:rise .3s calc(var(--i)*25ms) both}
.tile.luck{border-color:var(--lav);background:var(--lavL)}
.tile em{position:absolute;top:-9px;left:4px;font-size:11px;background:var(--lav);color:#fff;border-radius:6px;padding:0 5px;font-style:normal;z-index:1}
.bars{margin-top:10px;display:grid;gap:6px;max-width:560px}
.bars .bar{display:grid;grid-template-columns:90px 1fr 56px;gap:8px;align-items:center;font-size:14px}
.bt{height:12px;background:#e6edf3;border-radius:9px;overflow:hidden}
.bt i{display:block;height:100%;background:linear-gradient(90deg,#9ab8e6,#6a63c9);border-radius:9px;transition:width .8s}

/* admiralty */
.adm{--wood:#3e2c22}
body[data-scene=adm]{background:linear-gradient(180deg,#e7edf3,#dfe6ee)}
.boardroom{max-width:1000px;margin:0 auto}
.room-scene{border-radius:20px;overflow:hidden;box-shadow:var(--sh);border:4px solid #7a5a43}
.boardsvg{display:block;width:100%;height:auto}
.member>g>*{transition:none}
.member{transition:transform .45s cubic-bezier(.3,1.4,.5,1),filter .45s;transform-box:view-box}
.member.quiet{filter:saturate(.55) brightness(.82)}
.member.talk{transform:translateY(-10px)}
.nplate.talk rect{stroke:#6a63c9;stroke-width:4}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame 1.2s ease-in-out infinite}
@keyframes flame{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.18) skewX(4deg)}}
.meter-wrap{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;background:rgba(250,252,253,.9);border-radius:999px;padding:4px 14px}
.speech .bust svg{width:76px;height:76px;border-radius:50%;background:#efe7dc;border:3px solid #fff;box-shadow:var(--sh2);flex:none}
.speech .bust{flex:none}
.evuse{display:inline-block;font-size:12.5px;background:var(--tealL);color:#22666f;border-radius:6px;padding:0 6px;margin-top:4px}
.evc small.hand{font-size:16.5px}

/* timeline & certificate */
.home .scenehead{background:rgba(250,252,253,.85);border-radius:18px;padding:8px 14px}
body[data-scene=home],body[data-scene=cert]{background:linear-gradient(180deg,#dcebf2,#eef4f6 40%,#e6eef2)}
.tart{border-radius:12px;overflow:hidden;align-self:start}
.tart .scene{border-radius:12px}
.vitc{display:block;width:100%;max-width:200px;margin:0 auto;background:#f4f8fb;border-radius:12px;padding:8px}
@media (min-width:800px){.tc.hasimg{grid-template-columns:230px 1fr}}
.letter textarea{font-family:'Gveret Levin',Rubik,sans-serif;font-size:22px;background:#fcfdfd linear-gradient(transparent 31px,#e3ecf3 32px) 0 6px/100% 32px;border-color:#cfdbe5}
.cert .mapwrap.small{height:240px}
.diploma .nm input{font-family:'Gveret Levin',Rubik,sans-serif;font-size:30px}
.dport{position:absolute;left:18px;top:18px;width:86px;height:86px;border-radius:50%;overflow:hidden;border:5px solid #c8d6e3;box-shadow:inset 0 0 0 2px #fff,var(--sh2)}
.dport img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.dport{position:static;display:block;margin:0 auto 6px;width:72px;height:72px}}

/* ---------- the logbook: always on screen ---------- */
#log{position:fixed;z-index:40;background:#fbfcfd;display:flex;flex-direction:column;box-shadow:0 6px 26px rgba(20,30,60,.18);border:1px solid #cfdbe5}
#logHead{position:relative;display:flex;align-items:center;gap:8px;width:100%;border:0;background:linear-gradient(180deg,#2f456f,#2c3f66);color:#fff;padding:9px 12px;cursor:pointer;text-align:right;font-size:16px;flex:none}
#logHead .n{background:#fff;color:var(--navy);border-radius:999px;font-size:12px;min-width:22px;padding:1px 6px;text-align:center;font-weight:700}
#logHead .lsub{font-size:12px;opacity:.8}
#logHead .chev{margin-inline-start:auto;font-size:13px;opacity:.85}
#logMin{position:absolute;left:8px;top:6px;z-index:2;border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:8px;width:30px;height:28px;cursor:pointer;font-size:15px;line-height:1}
#logBody{overflow:auto;padding:6px 14px 12px;flex:1;background:#fcfdfd linear-gradient(transparent 29px,#e3ecf3 30px) 0 4px/100% 30px;scroll-behavior:smooth}
.lempty{margin:8px 0;font-size:14px}
.lent{padding:6px 0 6px;border-bottom:1px dashed #d6dfe8}
.lent .lt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
.lent .lt em{font-size:10.5px;font-style:normal;background:var(--tealL);color:#22666f;border-radius:6px;padding:0 6px}
.lent .lt em.simtag{background:#ecebfb;color:#4d48a4}
.lent p{margin:.1em 0 0;line-height:1.35;color:#24345a;font-size:18px}
.lent.ev{border-inline-start:3px solid #8dbdd3;padding-inline-start:8px}
.lent.t-inv{opacity:.92}
.lent.new{animation:inkin 1.4s both}
@keyframes inkin{0%{background:#e9e7fb}100%{background:transparent}}
.flypage{position:fixed;z-index:95;width:150px;height:44px;background:#fbfcfd;border:1.5px solid #cfdbe5;border-radius:8px;box-shadow:var(--sh);display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:12px;line-height:1.2;pointer-events:none;overflow:hidden}
.flypage b{font-weight:500}
body[data-scene=title] #log{display:none}
@media (min-width:1100px){
  #log{left:12px;top:calc(var(--hh) + 12px);bottom:12px;width:var(--logw);border-radius:16px;overflow:hidden}
  body:not([data-scene=title]) #stage{margin-left:calc(var(--logw) + 24px);margin-right:auto;max-width:min(1180px,calc(100vw - var(--logw) - 48px))}
  body:not([data-scene=title]) #toast{left:calc(50% + var(--logw) / 2)}
  #logMin,#logHead .chev{display:none}
  #logHead{cursor:default}
}
@media (max-width:1099px){
  #log{left:0;right:0;bottom:0;border-radius:16px 16px 0 0;border-bottom:0;max-height:72vh}
  body[data-log=peek] #logBody{max-height:50px;overflow:hidden;padding-top:2px}
  body[data-log=peek] #logBody .lent:not(:last-child){display:none}
  body[data-log=peek] #logBody .lent{border:0;padding:0}
  body[data-log=peek] #logBody .lent p{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  body[data-log=full] #logBody{max-height:62vh}
  body[data-log=min] #logBody{display:none}
  body[data-log=full] #logHead .chev::after{content:'▾ לסגור'}
  #logHead .chev::after{content:'▴ כל היומן'}
  body:not([data-scene=title]) #stage{padding-bottom:120px}
  body[data-log=min]:not([data-scene=title]) #stage{padding-bottom:64px}
  #logHead{padding:7px 12px 7px 46px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.waves-fg,.shipsway,.seafront,.seafront2,.dust{animation:none!important}}
@media print{.hud,.scenebg,.herobg{display:none!important}body{padding:0!important}#stage{margin:0 auto!important}}

body[data-scene=title] #voyage{display:none}
.ship .scenehead{margin:0 auto 8px}.ship .scenehead h2{margin:0}.ship .scenehead p{margin:.15em 0}
.shipview{max-width:min(1000px,calc((100vh - var(--hh) - 150px) * 1.79));min-width:min(100%,560px)}
@media (max-width:700px){
  .hud{gap:4px 10px;padding:5px 8px;top:var(--hh)}
  .hud .w{display:none}
  .slot{width:32px;height:32px;border-radius:8px;font-size:12px}
  .slots{gap:3px}
  .pips i{width:10px;height:14px}
}

/* ===== v2 fix (Oct 29, task f406d0ac): image framing, logbook inside viewport, bigger supplement thumbnails ===== */
/* 1. every episode frame keeps its people in view: per-image focal point (x = phone portrait crops, y = wide banners) */
img[src$="bg-pairs.webp"]{object-position:50% 3%}
img[src$="bg-cabin.webp"]{object-position:38% 16%}
img[src$="bg-citrus.webp"]{object-position:45% 10%}
img[src$="bg-deck.webp"]{object-position:62% 6%}
img[src$="bg-desk.webp"]{object-position:36% 16%}
img[src$="bg-galley.webp"]{object-position:56% 10%}
img[src$="bg-intro.webp"]{object-position:47% 4%}
img[src$="bg-items.webp"]{object-position:50% 60%}
img[src$="bg-ship.webp"]{object-position:50% 40%}
img[src$="bg-sick.webp"]{object-position:24% 28%}
img[src$="bg-ward.webp"]{object-position:50% 40%}
.sceneband .scene{height:clamp(170px,26vw,320px);max-height:320px}
/* 2. nothing runs off the side; the logbook column always sits fully inside the window */
html,body{max-width:100%;overflow-x:clip}
#logBody{overflow-x:hidden}
.lent p,.lent .lt b{overflow-wrap:anywhere}
@media (min-width:1100px){
  #log{left:max(12px,env(safe-area-inset-left));width:min(var(--logw),calc(100% - 24px));max-width:var(--logw);box-sizing:border-box}
  body:not([data-scene=title]) #stage{max-width:min(1180px,calc(100% - var(--logw) - 36px))}
}
/* 3. supplement pictures big enough to read */
.ipic{width:64px;height:64px;border-radius:14px;border:2px solid #fff;box-shadow:0 0 0 1px #cfdbe5,0 3px 10px rgba(31,49,80,.22)}
.ipic.sm,.bunk .bh .ipic,.betc .bh .ipic,.ward .bh .ipic{width:68px;height:68px;border-radius:14px}
.bh{gap:12px}.bh b{font-size:17px}
.betc .bh,.ward .bh,.bunk .bh{min-height:68px}
.ft{width:96px}.ft .ipic{width:80px;height:80px;border-radius:16px}
.susc{grid-template-columns:92px 1fr}.susc .ipic{width:92px;height:92px;border-radius:16px}
.ipic.big{width:110px;height:110px;border-radius:18px}.dcard.item{grid-template-columns:110px 1fr}
.rr,.rr.yes{grid-template-columns:68px 1fr}
@media (min-width:800px){.rr,.rr.yes{grid-template-columns:68px 150px 150px 1fr}}
.rr .ipic{grid-row:span 2}
@media (min-width:800px){.rr .ipic{grid-row:auto}}
.hud .slot{width:52px;height:52px;border-radius:12px}
@media (max-width:700px){
  .ipic{width:52px;height:52px;border-radius:12px}
  .ipic.sm,.bunk .bh .ipic,.betc .bh .ipic,.ward .bh .ipic{width:52px;height:52px;border-radius:12px}
  .betc .bh,.ward .bh,.bunk .bh{min-height:52px}
  .bh{gap:10px}.bh b{font-size:16px}
  .ftitems{display:grid;grid-template-columns:repeat(3,76px);justify-content:center;gap:6px 14px}
  .ft{width:76px}.ft .ipic{width:60px;height:60px;border-radius:13px}
  .susc{grid-template-columns:76px 1fr}.susc .ipic{width:76px;height:76px}
  .ipic.big{width:84px;height:84px}.dcard.item{grid-template-columns:84px 1fr}
  .rr,.rr.yes{grid-template-columns:52px 1fr}
  .hud .slot{width:40px;height:40px;border-radius:10px}
}

/* 4. supplements as die-cut stickers (Oct 29, task d4dc9f75): the images carry their own white border + shadow, so no square frame */
.ipic,.ipic.sm,.ipic.big,.bunk .bh .ipic,.betc .bh .ipic,.ward .bh .ipic,.ft .ipic,.susc .ipic,.rr .ipic{border:0;border-radius:0;box-shadow:none;background:none;overflow:visible}
.ipic img,.slot img,.flyitem img,.flyfood img{object-fit:contain}
.slot.full{border:0;box-shadow:none;background:none;overflow:visible}
.flyitem,.flyfood{border:0;border-radius:0;box-shadow:none;background:none;overflow:visible}

/* ===== 6. animations + speech bubbles (Oct 30): Lind at the foot of his logbook, sailors who talk back, a rocking ship =====
   every decoration: pointer-events none; bubbles are short and leave on their own; prefers-reduced-motion stops all motion (bubbles still show, still) */
#lind,#lsay,.sbub,.lantern{pointer-events:none}
#lind img{display:block;height:100%;width:auto;transform-origin:50% 100%;filter:drop-shadow(0 4px 6px rgba(20,30,60,.22))}
#lind img{animation:lbreathe 4.6s ease-in-out infinite}
#lind.nod img{animation:lnod .8s ease,lbreathe 4.6s .8s ease-in-out infinite}
#lind.shake img{animation:lshake .7s ease,lbreathe 4.6s .7s ease-in-out infinite}
#lind.hop img{animation:lhop .75s ease,lbreathe 4.6s .75s ease-in-out infinite}
#lind.write img{animation:lwrite 1.2s ease,lbreathe 4.6s 1.2s ease-in-out infinite}
@keyframes lbreathe{0%,100%{transform:none}50%{transform:scaleY(1.018) rotate(-.7deg)}}
@keyframes lnod{30%{transform:rotate(-4deg) translateY(3px)}60%{transform:rotate(2deg)}}
@keyframes lshake{20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
@keyframes lhop{35%{transform:translateY(-12px) rotate(-2deg)}70%{transform:translateY(0) scaleY(.97)}}
@keyframes lwrite{20%,60%{transform:rotate(3deg) translateY(2px)}40%,80%{transform:rotate(1deg)}}
#lsay{position:absolute;z-index:3;margin:0;background:#fff;color:var(--ink);border:1.5px solid #c9d6e2;padding:7px 13px;font-size:15.5px;font-weight:500;line-height:1.3;box-shadow:0 6px 16px rgba(20,30,60,.18);opacity:0;transform:translateY(8px) scale(.85);transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1)}
#lsay:empty{display:none}
#lsay.on{opacity:1;transform:none}
#lsay.m-no{border-color:#cfc8ee}
@media (min-width:1100px){
  #lind{position:relative;flex:none;height:132px;border-top:1px dashed #d6dfe8;background:linear-gradient(180deg,#f4f8fa,#e9f0f5)}
  #lind img{position:absolute;left:12px;bottom:-2px;height:150px}
  #lsay{left:98px;right:12px;bottom:66px;border-radius:16px 16px 16px 4px}
  #lsay::after{content:'';position:absolute;left:-9px;bottom:6px;border:8px solid transparent;border-right-color:#fff;border-left:0}
}
@media (max-width:1099px){
  #logHead{padding-left:96px}
  #lind{position:absolute;left:44px;top:-10px;width:44px;height:54px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent);z-index:3}
  #lind img{height:106px;margin:0 auto}
  #lsay{left:10px;right:10px;top:calc(var(--lhh,44px) + 4px);border-radius:4px 14px 14px 14px;font-size:14.5px;padding:6px 12px}
  body[data-log=peek] #log:has(#lsay.on) #logBody{opacity:.15;transition:opacity .2s}
}
body[data-scene=title] #lind,body[data-scene=title] #lsay{display:none}

/* the sailors in the sick bay: breathe, blink, eat, complain, perk up */
.beds{position:relative;padding-top:30px}
.pfig{transform-origin:50% 100%}
.fig .eyes circle{transform-box:fill-box;transform-origin:center;animation:blink 4.4s infinite}
.pt[data-k="1"] .fig .eyes circle{animation-delay:-2.1s}
@keyframes blink{0%,93%,100%{transform:none}96%{transform:scaleY(.15)}}
.fig .p-bed{transform-box:fill-box;transform-origin:50% 100%;animation:snore 3.8s ease-in-out infinite}
.fig .p-sit{transform-box:fill-box;transform-origin:50% 100%;animation:sitsway 4.2s ease-in-out infinite}
.fig .p-up,.fig .p-fit{transform-box:fill-box;transform-origin:50% 100%;animation:standbob 2.6s ease-in-out infinite}
.pt[data-k="1"] .fig g{animation-delay:-1.7s}
@keyframes snore{0%,100%{transform:none}50%{transform:scaleY(1.06)}}
@keyframes sitsway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes standbob{0%,100%{transform:none}50%{transform:translateY(-1.5px)}}
.pt.fed .pfig{animation:chomp .55s ease}
@keyframes chomp{30%{transform:scale(1.06,.94)}60%{transform:scale(.97,1.04)}}
.pt.talk .pfig{animation:jab .45s ease 3}
.pt.yuck .pfig{animation:yuck .55s ease 3}
.pt.jeal .pfig{animation:stomp .4s ease 4}
.pt.joy .pfig,.pt.perk .pfig{animation:perk .8s cubic-bezier(.3,1.6,.5,1) 2}
@keyframes jab{50%{transform:rotate(-4deg) translateY(-2px)}}
@keyframes yuck{20%{transform:translateX(-3px) rotate(-3deg) scaleY(.94)}40%{transform:translateX(3px) rotate(3deg)}60%{transform:translateX(-2px) scaleY(.96)}80%{transform:translateX(2px)}}
@keyframes stomp{50%{transform:translateY(-4px) scale(1.04)}}
@keyframes perk{40%{transform:translateY(-9px) scale(1.06)}}
.ward.winner .pfig{animation:perk .8s cubic-bezier(.3,1.6,.5,1) 4}
.sbub{position:absolute;top:0;z-index:2;max-width:94%;background:#fff;color:var(--ink);border:1.5px solid #c9d6e2;border-radius:12px;padding:3px 9px 4px;font-size:13.5px;font-weight:500;line-height:1.28;box-shadow:0 4px 12px rgba(20,30,60,.16);animation:bubIn .35s cubic-bezier(.3,1.6,.5,1) both;transition:opacity .35s,transform .35s}
.sbub.k0{right:0;border-bottom-right-radius:3px}.sbub.k1{left:0;border-bottom-left-radius:3px}
.sbub::after{content:'';position:absolute;bottom:-7px;border:7px solid transparent;border-top-color:#fff;border-bottom:0}
.sbub.k0::after{right:18%}.sbub.k1::after{left:18%}
.sbub.m-yuck{background:#f1f7ec;border-color:#c9dcc0}.sbub.m-yuck::after{border-top-color:#f1f7ec}
.sbub.m-jeal{background:#efedfb;border-color:#cfc8ee}.sbub.m-jeal::after{border-top-color:#efedfb}
.sbub.m-joy{background:#e8f6f2;border-color:#b9e0d5}.sbub.m-joy::after{border-top-color:#e8f6f2}
.sbub.off{opacity:0;transform:translateY(-6px)}
@keyframes bubIn{from{opacity:0;transform:translateY(8px) scale(.7)}}
@media (max-width:600px){.sbub{font-size:12.5px;padding:3px 7px}.beds{padding-top:34px}}
.ward[data-r=citrus] .pt.perk::after{content:'✦';position:absolute;top:2px;left:8px;color:#4fb39c;font-size:15px;animation:spark 1s both}
@keyframes spark{from{transform:scale(.2) rotate(-40deg);opacity:0}50%{opacity:1}to{transform:scale(1.2) rotate(30deg);opacity:0}}

/* objects move: supplement stickers bob on the table, the ship rocks, lanterns swing */
.ft .ipic img,.susc .ipic img,.bunk .ipic img{animation:fbob 3.4s ease-in-out infinite;transform-origin:50% 90%}
.ft:nth-child(2n) .ipic img,.susc:nth-child(2n) .ipic img,.bunk:nth-child(2n) .ipic img{animation-delay:-1.2s}.ft:nth-child(3n) .ipic img,.susc:nth-child(3n) .ipic img,.bunk:nth-child(3n) .ipic img{animation-delay:-2.3s}
@keyframes fbob{0%,100%{transform:rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
.ward .bh .ipic img{animation:fbob 4s ease-in-out infinite}
.scenebg img{scale:1.03;animation:rockbg 11s ease-in-out infinite}
@keyframes rockbg{0%,100%{rotate:-.55deg;translate:0 0}50%{rotate:.55deg;translate:0 6px}}
.sceneband .scene img,.cart .scene img,.lp-art img,.resart img{scale:1.05;animation:rockimg 9s ease-in-out infinite}
@keyframes rockimg{0%,100%{rotate:-.45deg;translate:0 0}50%{rotate:.45deg;translate:0 3px}}
.lamp{transform-box:fill-box;transform-origin:50% -120%;animation:flick 3.2s ease-in-out infinite,lampsw 4.4s ease-in-out infinite}
@keyframes lampsw{0%,100%{rotate:-6deg}50%{rotate:6deg}}
.hglow{transform-box:fill-box;transform-origin:50% 0;animation:lampsw 7s ease-in-out infinite}
.lantern{position:absolute;top:0;width:clamp(34px,4vw,54px);transform-origin:50% 0;animation:lantern 4.6s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(20,30,60,.25))}
.lantern.l1{left:29%}.lantern.l2{right:8%;animation-delay:-2.2s;animation-duration:5.2s}
@keyframes lantern{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.lantern .gl{animation:flick 3s ease-in-out infinite}
@media (max-width:1099px){.lantern.l1{display:none}}
@media (prefers-reduced-motion:reduce){#lind img,.lantern,.lamp,.hglow,.scenebg img,.sceneband .scene img,.cart .scene img,.lp-art img,.resart img,.pfig,.fig g,.fig .eyes circle,.ipic img,.sbub{animation:none!important}#lsay,.sbub{transition:none!important}}
@media print{#lind,#lsay,.sbub,.lantern{display:none!important}}

/* generated ship cutaway + hold (Oct 30, gen art round) */
.shipsx .room .rhit.gen{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.9);stroke-width:3;stroke-dasharray:9 7;animation:rpulse 2.6s ease-in-out infinite}
.shipsx .room.done .rhit.gen{stroke:#9fe0cf;stroke-dasharray:none;animation:none;fill:rgba(159,224,207,.10)}
.shipsx .room:hover .rhit,.shipsx .room:focus-visible .rhit{fill:rgba(255,255,255,.2);stroke:#fff;stroke-dasharray:none;stroke-width:3.5}
.rdone circle{fill:#e0f4ee;stroke:#2b8f80;stroke-width:2}.rdone path{fill:none;stroke:#1f6b60;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes rpulse{50%{stroke:rgba(255,255,255,.45)}}
.shipimg{filter:drop-shadow(0 6px 8px rgba(30,50,80,.25))}
.flag.f1{animation-delay:-.5s}.flag.f2{animation-delay:-1.1s}
.mote{animation:mote 7s ease-in-out infinite;opacity:0}
.mote.m1{animation-delay:-1.2s}.mote.m2{animation-delay:-2.4s}.mote.m3{animation-delay:-3.6s}.mote.m4{animation-delay:-4.8s}.mote.m5{animation-delay:-6s}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}30%{opacity:.8}70%{opacity:.6}100%{opacity:0;transform:translate(26px,60px)}}
.holdsvg .weevils,.holdsvg .hmotes,.holdsvg .hlantern{pointer-events:none}
@media (prefers-reduced-motion:reduce){.mote,.shipsx .room .rhit.gen,.flag,.hlantern,.weevil,.drip{animation:none!important}.mote{opacity:.5}}
@media (max-width:700px){.shipsx .room .rhit.gen{stroke-width:5;stroke-dasharray:12 9}}

/* unlock announcement (unlock-ann.js) — sea chart look */
#ua{--ua-accent:var(--navy);--ua-ink:var(--ink);--ua-ink2:var(--mute);--ua-card:var(--card);--ua-soft:var(--sea);--ua-ring:#b9dbe8;--ua-shade:rgba(31,49,80,.55);--ua-name-font:var(--serif)}