/* Shoalry — the sounder. Deep water, one cyan light, an instrument you can read at arm's length. */
:root{
  --deep:#04070D; --deep2:#080D16; --panel:#0A111C; --edge:#152234; --edge2:#1E3048;
  --ink:#E8F2F5; --dim:#7D93A6; --dimmer:#4E6478;
  --cyan:#5EE9FF; --cyan-d:#2BB7CE; --warm:#FF6B57;
  --disp:'Archivo',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--deep); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:radial-gradient(120% 70% at 50% -10%, rgba(94,233,255,.09), transparent 62%);
  background-repeat:no-repeat;
}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

.rig{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:78px}
.stage{width:100%;max-width:560px;margin:0 auto;padding:16px 14px 6px;display:flex;flex-direction:column;gap:14px}

/* ---------- legend: the instrument's own label, no top bar ---------- */
.legend{display:flex;align-items:center;gap:10px}
.sigil{width:34px;height:34px;border-radius:9px;background:#060B12;flex:none}
.legendtext{display:flex;flex-direction:column;min-width:0;flex:1}
.legendtext b{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.01em}
.legendtext span{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bell{text-align:right;flex:none;display:flex;flex-direction:column;line-height:1.15}
.bell span{font-family:var(--mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.bell i{font-style:normal;font-size:10.5px;color:var(--dimmer);letter-spacing:.09em;text-transform:uppercase}
.bell.ringing span{color:var(--warm)}

/* ---------- the sounder: the one object ---------- */
.sounder{
  position:relative;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#060B13,#04070D);height:290px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.6);
}
.sounder svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#waterG{transition:transform .9s cubic-bezier(.2,.7,.25,1)}
#crest,#crestline{animation:drift 13s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-600px)}}
.fishmark{fill:var(--cyan)}
.swimmer{transform-box:view-box;transform-origin:0 0;animation:swim linear infinite}
@keyframes swim{from{transform:translateX(660px)}to{transform:translateX(-90px)}}
.readout{position:absolute;left:16px;top:14px;pointer-events:none}
.pct{font-family:var(--mono);font-weight:600;font-size:58px;line-height:.92;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
     text-shadow:0 0 34px rgba(94,233,255,.35)}
.pct i{font-style:normal;font-size:23px;color:var(--cyan);margin-left:3px}
.pctsub{font-size:11.5px;color:var(--dim);max-width:190px;margin-top:5px}
.tagline{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(94,233,255,.3);border-radius:999px;padding:4px 10px;background:rgba(4,7,13,.6)}
.tagline.thin{color:var(--warm);border-color:rgba(255,107,87,.45)}

/* ---------- the pot strip ---------- */
.bellstrip{border:1px solid var(--edge);border-radius:var(--r);background:var(--panel);padding:12px 14px}
.bsrow{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.bsl,.bsr{display:flex;flex-direction:column;min-width:0}
.bsr{text-align:right}
.bsrow i{font-style:normal;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dimmer)}
.bsrow b{font-family:var(--mono);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.bsr b{color:var(--cyan)}
.unlockbar{position:relative;height:7px;border-radius:99px;background:#0E1826;margin:10px 0 8px;overflow:hidden}
.unlockbar span{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--cyan-d),var(--cyan));border-radius:99px;transition:width .7s ease}
.unlockbar em{position:absolute;top:-3px;bottom:-3px;left:50%;width:1px;background:var(--dimmer)}
.bsfine{font-size:11.5px;color:var(--dim)}

/* ---------- the cast: the control IS the gauge ---------- */
.castbar{display:flex;flex-direction:column;gap:7px}
.cast{position:relative;overflow:hidden;width:100%;min-height:62px;border-radius:var(--r);border:1px solid var(--edge2);
  background:#0B1420;display:flex;align-items:center;justify-content:center;transition:border-color .2s,opacity .2s}
.cast:disabled{cursor:default;opacity:.72}
.cast:not(:disabled){border-color:rgba(94,233,255,.45)}
.cast:not(:disabled):active{transform:translateY(1px)}
.castfill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(94,233,255,.16),rgba(94,233,255,.34));
  border-right:1px solid rgba(94,233,255,.5);transition:width .5s linear}
.cast:disabled .castfill{background:linear-gradient(90deg,rgba(125,147,166,.10),rgba(125,147,166,.20));border-right-color:rgba(125,147,166,.35)}
.castlabel{position:relative;font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:.02em;text-align:center;padding:0 14px}
.castlabel small{display:block;font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.04em;color:var(--dim);margin-top:3px}
.cast:not(:disabled) .castlabel{color:var(--cyan)}
.castfine{font-size:11.5px;color:var(--dimmer);text-align:center}

/* ---------- the column beside ---------- */
.beside{display:flex;flex-direction:column;gap:14px}
.panel{border:1px solid var(--edge);border-radius:var(--r);background:var(--panel);padding:13px 14px}
.panel h3{margin:0 0 10px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cnt{font-family:var(--mono);font-size:11px;letter-spacing:0;text-transform:none;color:var(--dimmer)}
.primer .rules{margin:0;padding:0 0 0 17px;font-size:13px;color:var(--dim)}
.primer .rules li{margin-bottom:7px}
.primer .rules b{color:var(--ink);font-weight:600}
.morelink{display:inline-block;margin-top:4px;font-size:12.5px;color:var(--cyan);text-decoration:none}

.tape{display:flex;flex-direction:column;max-height:300px;overflow-y:auto;margin:0 -4px}
.tapeline{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:baseline;padding:7px 4px;border-bottom:1px solid #0E1724;font-size:12.5px}
.tapeline:last-child{border-bottom:0}
.tapeline .who{font-family:var(--mono);color:var(--dim);font-size:11.5px}
.tapeline .took{font-family:var(--mono);color:var(--cyan);font-weight:600;font-variant-numeric:tabular-nums}
.tapeline .left{font-family:var(--mono);color:var(--dimmer);font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.tapeline.fresh{animation:printin .5s ease}
@keyframes printin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.standings{display:flex;flex-direction:column;gap:7px}
.standing{display:grid;grid-template-columns:18px 1fr auto;gap:9px;align-items:center;font-size:12.5px}
.standing .rank{font-family:var(--mono);color:var(--dimmer);font-size:11px}
.standing .name{font-family:var(--mono);color:var(--dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.standing .cut{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.standing.mine .name{color:var(--cyan)}
.quiet{font-size:12.5px;color:var(--dimmer);padding:6px 4px}

/* ---------- other pages ---------- */
.pageother{width:100%;max-width:560px;margin:0 auto;padding:16px 14px 6px;display:flex;flex-direction:column;gap:14px}
.pagehead{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.01em;margin:2px 0 0}
.pagesub{font-size:13px;color:var(--dim);margin:0}
.logrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #0E1724;font-size:13px}
.logrow:last-child{border-bottom:0}
.logrow .rid{font-family:var(--mono);color:var(--dimmer);font-size:11.5px}
.logrow .rfill{font-family:var(--mono);color:var(--cyan);font-variant-numeric:tabular-nums}
.logrow .rpaid{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;font-size:12px;color:var(--dim)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #0E1724;font-size:13px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--dim)}
.kv b{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.prose p{font-size:13.5px;color:var(--dim);margin:0 0 10px}
.prose p b{color:var(--ink);font-weight:600}
.claimbtn{width:100%;margin-top:10px;padding:12px;border-radius:11px;border:1px solid rgba(94,233,255,.45);color:var(--cyan);
  font-family:var(--disp);font-weight:800;font-size:14px;background:rgba(94,233,255,.07)}
.claimbtn:disabled{border-color:var(--edge);color:var(--dimmer);background:none}

/* ---------- footer + dock ---------- */
.foot{width:100%;max-width:560px;margin:14px auto 0;padding:14px;border-top:1px solid var(--edge);display:flex;flex-direction:column;gap:9px}
.footrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footrow.small{font-size:11px;color:var(--dimmer);font-family:var(--mono)}
.footrow.small span{word-break:break-all}
.buy{flex:1;min-width:190px;text-align:center;padding:12px 16px;border-radius:11px;background:var(--cyan);color:#04121A;
  font-family:var(--disp);font-weight:800;font-size:14.5px;text-decoration:none}
.ca{font-family:var(--mono);font-size:11px;color:var(--dim);word-break:break-all;text-align:right}
.ca b{color:var(--ink);font-weight:500}
.tag{font-family:var(--body);color:var(--dimmer);white-space:nowrap}

.dockbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;
  display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;border:1px solid var(--edge2);
  background:rgba(8,13,22,.92);backdrop-filter:blur(14px);box-shadow:0 10px 34px rgba(0,0,0,.55)}
.dockbar a{padding:8px 13px;border-radius:999px;font-size:12.5px;color:var(--dim);text-decoration:none;white-space:nowrap}
.dockbar a.on{background:rgba(94,233,255,.13);color:var(--cyan)}
.wpill{margin-left:3px;padding:8px 13px;border-radius:999px;border:1px solid var(--edge2);font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap}
.wpill.on{border-color:rgba(94,233,255,.45);color:var(--cyan)}

/* ---------- the hatch: a centred card with a hauled-open bar, not a bottom sheet ---------- */
.hatch[hidden]{display:none!important}
.hatch{position:fixed;inset:0;z-index:60;background:rgba(2,5,9,.78);display:flex;align-items:center;justify-content:center;padding:18px;
  backdrop-filter:blur(3px);animation:hatchin .18s ease}
@keyframes hatchin{from{opacity:0}to{opacity:1}}
.hatchcard{width:100%;max-width:420px;border:1px solid var(--edge2);border-radius:var(--r);background:var(--deep2);overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.7)}
.hatchbar{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--edge);background:#0A1220}
.hatchgrip{width:22px;height:3px;border-radius:2px;background:var(--cyan);opacity:.65;flex:none}
.hatchbar b{flex:1;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.hatchbar button{font-family:var(--mono);font-size:11.5px;color:var(--dimmer);letter-spacing:.06em}
.hatchbody{padding:14px}
.wl{display:flex;flex-direction:column;gap:7px}
.wl button{display:flex;align-items:center;gap:10px;padding:11px;border-radius:11px;border:1px solid var(--edge);font-size:14px;text-align:left}
.wl img{width:22px;height:22px;border-radius:6px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:80;padding:10px 15px;border-radius:999px;
  background:#0C1724;border:1px solid var(--edge2);font-size:12.5px;max-width:88vw;text-align:center;box-shadow:0 8px 26px rgba(0,0,0,.5)}

/* ---------- a wider measure, still one column ---------- */
@media (min-width:720px){
  body{font-size:16px}
  .stage,.pageother,.foot{max-width:720px;padding-left:22px;padding-right:22px}
  .sounder{height:360px}
  .pct{font-size:78px}
  .pctsub{font-size:12.5px;max-width:240px}
  .readout{left:22px;top:20px}
  .legendtext b{font-size:22px}
  .bell span{font-size:23px}
  .cast{min-height:70px}
  .castlabel{font-size:18px}
  .pagehead{font-size:30px}
}

/* ---------- past 1000px the page recomposes: instrument left, the water's activity beside it ---------- */
@media (min-width:1000px){
  .rig{padding-bottom:96px}
  .stage{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:22px;padding:30px 28px 8px}
  .deck{display:flex;flex-direction:column;gap:16px;min-width:0}
  .beside{position:sticky;top:30px;max-height:calc(100dvh - 120px);overflow-y:auto;gap:16px}
  .sounder{height:430px}
  .pct{font-size:104px}
  .pctsub{font-size:13px;max-width:300px}
  .readout{left:28px;top:24px}
  .tagline{right:20px;bottom:18px;font-size:12px;padding:5px 13px}
  .legendtext b{font-size:26px}
  .legendtext span{font-size:13.5px}
  .sigil{width:44px;height:44px;border-radius:11px}
  .bell span{font-size:28px}
  .bsrow b{font-size:22px}
  .cast{min-height:84px}
  .castlabel{font-size:21px}
  .castlabel small{font-size:12.5px}
  .foot,.pageother{max-width:1180px;padding-left:28px;padding-right:28px}
  .tape{max-height:330px}
  .pageother{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:22px}
  .pageother>.wide{grid-column:1 / -1}
}
@media (min-width:1280px){
  .stage{grid-template-columns:minmax(0,1fr) 420px}
  .sounder{height:470px}
  .pct{font-size:118px}
}
@media (prefers-reduced-motion:reduce){
  #crest,#crestline,.swimmer,.tapeline.fresh{animation:none!important}
  #waterG,.unlockbar span,.castfill{transition:none!important}
}