:root{
  --navy:#0D2A4C; --navy2:#123761; --deep:#0A2140; --burg:#5D1832; --gold:#CCA667; --gold2:#E3C98F;
  --cream:#F8F5EE; --ink:#1B2433; --muted:#6B7280; --sand:#E9D6A6; --leaf:#4E7A5A; --leaf2:#3C6448; --shallow:#2E6E8E;
  --radius:18px;
}
@font-face{font-family:"Heebo";src:url("assets/heebo.woff2") format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--deep);color:var(--cream);line-height:1.5;-webkit-text-size-adjust:100%;overflow-x:hidden}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--gold);color:var(--navy);padding:8px 12px;z-index:50}
.skip:focus{inset-inline-start:8px}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--gold2);outline-offset:2px;border-radius:6px}

.top{background:var(--navy);padding:0 max(14px, calc((100% - 560px) / 2)) 10px}
.top .proto{margin:0 calc(-1 * max(14px, calc((100vw - 560px) / 2))) 8px}
.proto{margin:0 -14px 8px;padding:5px 14px;background:var(--burg);color:var(--cream);font-size:12.5px;font-weight:500;text-align:center;letter-spacing:.2px}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:10px}
h1{margin:0;font-size:24px;font-weight:800;color:var(--cream);line-height:1.15}
.sub{margin:0;font-size:13px;color:var(--gold2)}
.btn{border:0;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;background:var(--gold);color:var(--navy);min-height:40px}
.btn.ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(248,245,238,.45)}
.btn.ghost[aria-pressed="true"]{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn.small{font-size:13px;padding:7px 12px;min-height:36px}
.btn.burg{background:var(--burg);color:var(--cream)}
.btn.line{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.stat{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:13px;background:rgba(248,245,238,.1);color:var(--cream);border:0;cursor:default}
.stat b{font-weight:800}
.stat.wait{background:var(--burg);cursor:pointer;border:1px solid rgba(248,245,238,.3)}
.islandnav{position:sticky;top:0;z-index:20;display:flex;gap:6px;overflow-x:auto;padding:8px 14px;background:rgba(13,42,76,.97);border-bottom:1px solid rgba(204,166,103,.35);box-shadow:0 6px 16px rgba(0,0,0,.25);scrollbar-width:none}
.islandnav::-webkit-scrollbar{display:none}
.islandnav a{flex:0 0 auto;text-decoration:none;color:var(--navy);background:var(--cream);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:600;white-space:nowrap}
.islandnav a .n{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:var(--navy);color:var(--gold2);font-size:11px;margin-inline-end:5px}

main{display:block;max-width:560px;margin:0 auto;padding:10px 0 0}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:12.5px;color:var(--cream);padding:4px 12px 2px;opacity:.95}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--cream)}
.dot.done{background:var(--gold);border-color:var(--gold)}
.dot.progress{background:#3E86C6;border-color:var(--gold2)}
.dot.waiting{background:var(--burg);border-color:#F2B8C6}
.dot.todo{background:transparent;border-color:rgba(248,245,238,.85);border-style:dashed}
.sea svg{display:block;width:100%;height:auto}
.sea text{font-family:"Heebo",system-ui,sans-serif;direction:rtl;unicode-bidi:embed}
.hit{cursor:pointer}
.hit:focus{outline:none}
.hit:focus-visible .ring{stroke:var(--gold2);stroke-width:3}
.pt-label{font-size:13px;font-weight:500;fill:var(--cream)}
.pt-label.done{fill:#D9CDB3}
.isl-name{font-size:17px;font-weight:800;fill:var(--navy)}
.isl-ver{font-size:11.5px;font-weight:500;fill:var(--navy)}
.ship{animation:bob 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.pulse{animation:pulse 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.bottle{animation:float 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-3px) rotate(6deg)}}

.foot{max-width:560px;margin:0 auto;padding:18px 16px 40px;text-align:center;font-size:12.5px;color:rgba(248,245,238,.75)}
.footbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

.backdrop{position:fixed;inset:0;background:rgba(5,15,30,.55);z-index:40}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:41;max-width:560px;margin:0 auto;max-height:82vh;overflow:auto;background:var(--cream);color:var(--ink);border-radius:22px 22px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.35);transform:translateY(0);transition:transform .22s ease}
.sheet.enter{transform:translateY(100%)}
.grab{width:42px;height:5px;border-radius:3px;background:#CFC6B4;margin:0 auto 8px}
.close{position:absolute;top:10px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;border:0;background:#ECE5D6;color:var(--navy);font-size:16px;cursor:pointer}
.sheet h2{margin:4px 0 2px;font-size:21px;font-weight:800;color:var(--navy);padding-inline-end:40px;line-height:1.25}
.sheet .meta{font-size:13px;color:var(--muted);margin:0 0 10px}
.sheet p{margin:8px 0}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700}
.chip.done{background:#F1E3C4;color:#6A4D16}
.chip.progress{background:#DCEAF7;color:#174A7A}
.chip.waiting{background:#F4DCE4;color:var(--burg)}
.chip.todo{background:#ECE8DF;color:#4B5563}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;margin:10px 0;padding:10px 12px;background:#fff;border-radius:12px;border:1px solid #E7E0D0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500}
.plist{list-style:none;margin:10px 0 0;padding:0}
.plist li{margin:0 0 6px}
.plist button{width:100%;display:flex;align-items:center;gap:10px;text-align:start;background:#fff;border:1px solid #E7E0D0;border-radius:12px;padding:10px 12px;font-size:14.5px;color:var(--ink);cursor:pointer;min-height:44px}
.plist .dot{flex:0 0 14px;border-color:#9CA3AF}
.plist .dot.done{border-color:var(--gold)}
.plist .dot.waiting{border-color:var(--burg)}
.plist .dot.progress{border-color:#3E86C6}
.plist .who{margin-inline-start:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.progressbar{height:8px;border-radius:4px;background:#E5DDCB;overflow:hidden;margin:6px 0 2px}
.progressbar span{display:block;height:100%;background:var(--gold)}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:12px 0}
.seg button{border:1.5px solid #D6CDB9;background:#fff;border-radius:12px;padding:9px 6px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;min-height:44px}
.seg button[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:var(--cream)}
.editbox{margin-top:14px;padding:12px;border:1.5px dashed var(--gold);border-radius:14px;background:#FFFBF2}
.editbox h3{margin:0 0 8px;font-size:15px;color:var(--burg)}
.editbox label{display:block;font-size:13px;color:var(--muted);margin:6px 0 3px}
.editbox input,.editbox select,.editbox textarea{width:100%;font:inherit;font-size:16px;padding:9px 10px;border:1.5px solid #D6CDB9;border-radius:10px;background:#fff;color:var(--ink)}
.editbox textarea{min-height:70px;resize:vertical}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.note{font-size:12.5px;color:var(--muted)}
.tag{display:inline-block;background:var(--navy);color:var(--gold2);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:var(--navy);color:var(--cream);border:1px solid var(--gold);padding:8px 14px;border-radius:999px;font-size:14px;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}