/* Jiblow — the harbour. Frosted glass on a slate-blue ground, one pale-aqua accent (the sail), no header:
   the name sits inside the instrument and the chrome is a dock above the thumb. Phone first; a wider measure
   at 720; two columns from 1000 with the rig held in place while the quay scrolls. */
:root{
  --sea:#3F5B7F; --deep:#2B4262; --ink:#F3F7FA; --sail:#A7F0E6; --keel:#F2A08C;
  --glass:rgba(255,255,255,.09); --glass2:rgba(255,255,255,.14); --edge:rgba(255,255,255,.22); --edge2:rgba(255,255,255,.38);
  --mute:rgba(243,247,250,.66); --faint:rgba(243,247,250,.42); --hair:rgba(243,247,250,.14);
  --sailglow:rgba(167,240,230,.35); --sailsoft:rgba(167,240,230,.16);
  --r:22px; --dockh:118px;
}
*{box-sizing:border-box}
html{background:var(--sea)}
body{
  margin:0; min-height:100vh; color:var(--ink);
  background:radial-gradient(1200px 700px at 12% -10%, rgba(167,240,230,.18), transparent 60%),
             radial-gradient(900px 600px at 100% 110%, rgba(43,66,98,.9), transparent 62%), var(--sea);
  background-color:var(--sea);
  font:400 15px/1.55 "Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding:0 0 calc(var(--dockh) + 18px + env(safe-area-inset-bottom,0px));
}
h1,h2,h3{font-family:"Urbanist",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;margin:0}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- glass ---------- */
.pane{
  position:relative; background:var(--glass); border:1px solid var(--edge); border-radius:var(--r);
  box-shadow:0 10px 36px rgba(12,24,44,.28), inset 0 1px 0 rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
}
.pane::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%)}

/* ---------- the deck ---------- */
#deck{width:100%;max-width:560px;margin:0 auto;padding:14px 14px 0;display:grid;grid-template-columns:1fr;gap:14px}

/* ---------- the rig: the instrument ---------- */
.rig{display:block}
.rigpane{padding:16px 16px 18px}
.rigtitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.rigtitle b{font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:17px;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.rigtitle b img{width:22px;height:22px;border-radius:6px;display:block}
.rigtitle small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.scene{display:block;width:100%;height:auto;margin:2px 0 4px}

.notches{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:6px 0 0}
.notch{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 6px;
  border:1px solid var(--hair);border-radius:12px;background:rgba(255,255,255,.05);
  font-family:"Urbanist",system-ui,sans-serif;font-weight:700;font-size:15px;line-height:1;transition:background .15s,border-color .15s,transform .15s
}
.notch small{font-family:"Nunito Sans",system-ui,sans-serif;font-weight:600;font-size:9px;color:var(--faint);letter-spacing:.02em}
.notch[aria-pressed="true"]{background:var(--sailsoft);border-color:var(--sail);color:var(--sail);box-shadow:0 0 0 3px var(--sailglow);transform:translateY(-1px)}
.notch[data-full="1"]::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink);opacity:.7;margin-top:2px}

.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
.dial{padding:9px 10px 8px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--hair)}
.dial i{display:block;font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 3px}
.dial b{display:block;font-family:"Urbanist",system-ui,sans-serif;font-weight:700;font-size:17px;line-height:1.1;font-variant-numeric:tabular-nums}
.dial b em{font-style:normal;font-size:11px;color:var(--mute);font-weight:600;margin-left:3px}

.hoist{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin:12px 0 0;
  border-radius:16px;background:var(--sail);color:#173A3A;font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:16px;letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(167,240,230,.28), inset 0 1px 0 rgba(255,255,255,.7);transition:transform .12s,box-shadow .12s
}
.hoist:active{transform:translateY(1px)}
.hoist:disabled{background:rgba(255,255,255,.12);color:var(--mute);box-shadow:none}
.hoist span{font-family:"Nunito Sans",system-ui,sans-serif;font-weight:600;font-size:12px;opacity:.75}
.rignote{margin:9px 0 0;font-size:12px;line-height:1.5;color:var(--mute);text-align:center}
.rignote b{color:var(--ink);font-weight:700}

/* ---------- the quay: race strip, fleet, log ---------- */
.quay{display:grid;grid-template-columns:1fr;gap:14px}
.strip{padding:14px 16px}
.striphead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px}
.striphead h2{font-size:15px;font-weight:800;letter-spacing:.01em}
.striphead span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.gauges{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px}
.gauge i{display:block;font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.gauge b{display:block;font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums}
.gauge b.sailtone{color:var(--sail)}
.clock{font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:24px;font-variant-numeric:tabular-nums}

.fleet{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-items:end;height:92px;margin:4px 0 0;padding:0 0 18px;position:relative}
.mast{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;border-radius:8px 8px 3px 3px;background:rgba(255,255,255,.06);overflow:visible}
.mast s{display:block;text-decoration:none;width:100%;min-height:3px;border-radius:8px 8px 3px 3px;background:rgba(243,247,250,.5);transition:height .3s}
.mast[data-s="stood"] s{background:var(--sail);box-shadow:0 0 14px var(--sailglow)}
.mast[data-s="capsized"] s{background:var(--keel);opacity:.85}
.mast[data-s="set"] s{background:rgba(243,247,250,.72)}
.mast u{position:absolute;left:0;right:0;bottom:-17px;text-decoration:none;text-align:center;font-size:10px;font-weight:700;color:var(--faint);font-family:"Urbanist",system-ui,sans-serif}
.mast[data-s="stood"] u,.mast[data-s="under"] u{color:var(--sail)}
.mast b{position:absolute;left:0;right:0;top:-15px;text-align:center;font-size:10px;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.windline{position:absolute;top:0;bottom:18px;width:2px;background:var(--sail);box-shadow:0 0 10px var(--sailglow);border-radius:2px;pointer-events:none}
.windline::after{content:attr(data-w);position:absolute;top:-2px;left:6px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sail);white-space:nowrap;font-family:"Urbanist",system-ui,sans-serif}
.fleetnote{margin:10px 0 0;font-size:12px;color:var(--mute);line-height:1.5}

.logrow{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--hair);font-size:12.5px}
.logrow:first-of-type{border-top:0}
.logrow b{font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:18px;color:var(--sail);text-align:center;font-variant-numeric:tabular-nums}
.logrow[data-empty="1"] b{color:var(--keel)}
.logrow em{font-style:normal;color:var(--mute)}
.logrow u{text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums}

.tapeline{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--hair);font-size:12px}
.tapeline:first-of-type{border-top:0}
.tapeline i{font-style:normal;font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:15px;text-align:center;color:var(--sail)}
.tapeline[data-k="bell"] i,.tapeline[data-k="moved"] i{color:var(--faint)}
.tapeline em{font-style:normal;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tapeline u{text-decoration:none;color:var(--faint);font-variant-numeric:tabular-nums}
.hush{margin:0;font-size:12.5px;color:var(--mute);line-height:1.55}

details.rules{padding:0}
details.rules summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:15px}
details.rules summary::-webkit-details-marker{display:none}
details.rules summary::after{content:"+";font-size:20px;color:var(--faint);font-weight:500}
details.rules[open] summary::after{content:"–"}
details.rules ol{margin:0;padding:0 16px 16px 34px;font-size:13px;line-height:1.6;color:var(--mute)}
details.rules li{margin:0 0 6px}
details.rules li b{color:var(--ink)}

/* ---------- leaves: rules / races / my sail / 404 ---------- */
.leaf{padding:18px 16px 20px}
.leaf h2{font-size:24px;font-weight:800;margin:0 0 10px;letter-spacing:-.01em}
.leaf p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--mute)}
.leaf p b{color:var(--ink)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ledger{width:100%;border-collapse:collapse;font-size:13px;min-width:420px}
.ledger th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:6px 8px;border-bottom:1px solid var(--edge)}
.ledger td{padding:8px;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}
.ledger td.sailtone{color:var(--sail);font-weight:700}
.ledger td.keeltone{color:var(--keel);font-weight:700}
.smallhoist{min-height:34px;font-size:13px;padding:0 14px;margin:0;border-radius:10px;width:auto}

/* ---------- the wake: footer ---------- */
.wake{padding:6px 4px 10px;font-size:11.5px;color:var(--faint);line-height:1.7}
.wake a{color:var(--mute)}
.wake code{font-size:10.5px;overflow-wrap:anywhere;color:var(--mute)}
.wakerow{display:block}

/* ---------- the dock: fixed at every width ---------- */
#dock{
  position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;
  display:flex;flex-direction:column;gap:8px;padding:10px 12px 10px;
  background:rgba(43,66,98,.62);border:1px solid var(--edge2);border-radius:20px;
  box-shadow:0 14px 40px rgba(10,20,40,.42), inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
}
.dockrow{display:flex;align-items:center;gap:8px;min-width:0}
.dockcoin{font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--sail);white-space:nowrap;flex:0 0 auto}
.caline{flex:1 1 auto;min-width:0;font-size:10.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;word-break:break-all;user-select:all;-webkit-user-select:all}
.caline[data-live="0"]{color:var(--mute);font-family:"Nunito Sans",system-ui,sans-serif;font-size:11.5px;user-select:none;-webkit-user-select:none}
.cacopy{flex:0 0 auto;min-height:34px;padding:0 12px;border-radius:10px;background:var(--sail);color:#173A3A;font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:12px;letter-spacing:.04em}
.cacopy:disabled{background:rgba(255,255,255,.12);color:var(--faint)}
.cacopy[data-done="1"]{background:var(--ink)}
.routes{display:flex;gap:12px;flex:1 1 auto;min-width:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.routes a{color:var(--faint);text-decoration:none;padding:3px 0;border-bottom:1px solid transparent;white-space:nowrap}
.routes a[aria-current]{color:var(--ink);border-bottom-color:var(--sail)}
.gmgn{flex:0 0 auto;font-size:11px;letter-spacing:.06em;color:var(--mute);text-decoration:none;padding:4px 8px;border:1px solid var(--hair);border-radius:8px;white-space:nowrap}
.moor{flex:0 0 auto;min-height:32px;padding:0 12px;border:1px solid var(--edge);border-radius:10px;font-size:11.5px;letter-spacing:.06em;color:var(--ink);white-space:nowrap;background:rgba(255,255,255,.06)}
.moor[data-on="1"]{border-color:var(--sail);color:var(--sail)}

/* ---------- the hatch: modal ---------- */
#hatch{position:fixed;inset:0;z-index:60;background:rgba(20,34,56,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:12px}
#hatch[hidden]{display:none}
.hatchpane{width:100%;max-width:480px;background:rgba(63,91,127,.92);border:1px solid var(--edge2);border-radius:22px;box-shadow:0 20px 60px rgba(8,16,30,.5);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:hidden}
.hatchhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--hair);font-family:"Urbanist",system-ui,sans-serif;font-weight:800;font-size:15px}
.hatchshut{font-size:22px;line-height:1;color:var(--mute);padding:0 4px}
.hatchbody{padding:14px 16px 18px;font-size:14px;line-height:1.55}
.hatchbody p{margin:0 0 10px}
.hatchbody p.dim{color:var(--mute);font-size:12.5px}
.walletpick{display:grid;gap:8px}
.walletpick button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--edge);border-radius:12px;background:rgba(255,255,255,.06);text-align:left}
.walletpick img{width:24px;height:24px;border-radius:6px}
.ripple{position:fixed;left:50%;bottom:calc(var(--dockh) + 30px);transform:translateX(-50%);z-index:70;padding:10px 16px;border-radius:14px;background:rgba(23,58,58,.92);color:var(--sail);font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(8,16,30,.4);max-width:calc(100vw - 32px);text-align:center}

/* ---------- wider measure ---------- */
@media (min-width:720px){
  #deck{max-width:720px;padding:22px 22px 0;gap:18px}
  .rigpane{padding:22px 22px 24px}
  .rigtitle b{font-size:20px}
  .notch{font-size:17px;padding:10px 0 8px}
  .dial b{font-size:20px}
  .hoist{min-height:58px;font-size:18px}
  .gauge b{font-size:28px}
  .fleet{height:120px}
  .leaf h2{font-size:30px}
  #dock{left:50%;right:auto;transform:translateX(-50%);width:min(700px,calc(100% - 20px));flex-direction:row;align-items:center;gap:14px}
  #dock .dockca{flex:1 1 auto}
  #dock .dockway{flex:0 0 auto}
  .caline{font-size:11.5px}
}

/* ---------- the deck recomposes: rig held left, quay scrolling right ---------- */
@media (min-width:1000px){
  :root{--dockh:64px}
  #deck{max-width:1180px;padding:28px 28px 0;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"rig quay" "wake wake";gap:22px 24px;align-items:start}
  .rig{grid-area:rig;position:sticky;top:22px}
  .quay{grid-area:quay}
  .wake{grid-area:wake;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between}
  .rigpane{padding:26px 26px 28px}
  .rigtitle b{font-size:22px}
  .rigtitle small{font-size:12px}
  .notch{font-size:19px;padding:12px 0 9px}
  .notch small{font-size:10px}
  .dial b{font-size:24px}
  .hoist{min-height:62px;font-size:19px}
  .rignote{font-size:13px}
  .gauge b{font-size:32px}
  .clock{font-size:32px}
  .fleet{height:140px}
  #dock{width:min(1180px,calc(100% - 28px));padding:10px 16px}
  .caline{font-size:12.5px}
}