/* Wharfmore — the wharf. Chalk ground, navy ink, teal ships, rust dockers. Grid of forty-eight berth cells. */
:root{
  --chalk:#EEF3F1; --chalk2:#E2EAE7; --line:#C9D5D1; --ink:#10233A; --mute:#5E6E72;
  --teal:#0F8B7E; --teal2:#0B6E64; --rust:#B8471F; --rust2:#93361A; --tie:#10233A; --white:#FFFFFF;
  --disp:'Alumni Sans',Impact,sans-serif; --body:'Encode Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:14px; --cell-gap:4px;
}
*{box-sizing:border-box}
html{background:var(--chalk);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chalk);color:var(--ink);font:400 15px/1.45 var(--body);padding:72px var(--pad) 40px;overflow-x:hidden;
  background-image:linear-gradient(var(--chalk2) 1px,transparent 1px),linear-gradient(90deg,var(--chalk2) 1px,transparent 1px);background-size:32px 32px}
a{color:var(--teal2)}
button{font:inherit;cursor:pointer}
code,.mono{font-family:var(--mono)}

/* ---- the quay: the fixed strip that carries the contract address ---- */
#quay{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--ink);color:var(--chalk);padding:7px var(--pad) 8px;
  display:flex;flex-direction:column;gap:3px;border-bottom:2px solid var(--teal)}
.quayHead{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9FB3BC}
.quayTag{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#quayCopy{background:var(--teal);color:var(--white);border:0;border-radius:3px;padding:3px 11px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
#quayCopy:disabled{background:#2C4258;color:#8FA3AE;cursor:default}
#quayCopy.did{background:#E9F5F2;color:var(--teal2)}
.quayBuy{color:#9FB3BC;text-decoration:none;font-size:11px;letter-spacing:.12em}
.quayBuy:hover{color:var(--white)}
.quayAddr{font-family:var(--mono);font-size:10.6px;line-height:1.3;color:var(--white);user-select:all;-webkit-user-select:all;word-break:break-all;letter-spacing:.01em}
.quayAddr.off{color:#9FB3BC;user-select:text;-webkit-user-select:text}

/* ---- the deck: phone = flat flow; desktop = two columns ---- */
.deck{display:contents}

/* ---- the call: display headline ---- */
.call{padding:6px 0 14px}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:700}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--teal)}
h1{font-family:var(--disp);font-weight:800;font-size:68px;line-height:.86;letter-spacing:-.005em;margin:6px 0 10px;color:var(--ink)}
.calling{margin:0;max-width:34ch;color:var(--mute);font-size:14px}

/* ---- the wharf: the grid of berths ---- */
.wharfWrap{padding-bottom:16px}
.wharfHead{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;font-weight:600}
.wharfHead b{color:var(--ink);font-family:var(--mono);font-weight:700;font-size:13px;margin-left:2px}
.sideKey{display:inline-flex;align-items:center;gap:6px}
.freeKey{margin-left:auto}
.wharf{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--cell-gap)}
.berth{position:relative;aspect-ratio:1;border:1px dashed var(--line);border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden;
  display:flex;align-items:center;justify-content:center;min-width:0}
.berth .n{position:absolute;top:2px;left:4px;font-family:var(--mono);font-size:8px;line-height:1;color:var(--mute);opacity:.8}
.berth .stk{position:absolute;bottom:2px;right:4px;font-family:var(--mono);font-size:8px;line-height:1;color:var(--white);opacity:.9;display:none}
.berth.ship{background:var(--teal);border:1px solid var(--teal2)}
.berth.docker{background:var(--rust);border:1px solid var(--rust2)}
.berth.ship .n,.berth.docker .n{color:rgba(255,255,255,.75)}
.berth.is-loose{opacity:.55;background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.35) 5px 7px)}
.berth.is-tied::after{content:"";position:absolute;inset:2px;border:2px solid var(--white);border-radius:2px;pointer-events:none}
.berth.is-mine{box-shadow:0 0 0 2px var(--chalk),0 0 0 4px var(--ink)}
.berth.is-new{animation:drop .5s ease-out}
@keyframes drop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
/* glyphs, drawn in css: a hull (bow to the right) and a bollard (a post with a cap) */
.hull{display:inline-block;width:20px;height:11px;background:currentColor;clip-path:polygon(0 15%,70% 15%,100% 50%,70% 85%,0 85%)}
.bollard{display:inline-block;width:12px;height:13px;position:relative}
.bollard::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:50%;background:currentColor}
.bollard::after{content:"";position:absolute;left:3px;right:3px;top:5px;bottom:0;background:currentColor}
.berth .hull,.berth .bollard{color:var(--white);width:46%;height:26%}
.berth .bollard{width:28%;height:44%}
.sideKey.ship .hull{color:var(--teal)}
.sideKey.docker .bollard{color:var(--rust)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11px;color:var(--mute);margin:8px 0 14px;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .tie{width:12px;height:12px;border:2px solid var(--ink);border-radius:2px;display:inline-block}
.legend .loose{width:12px;height:12px;display:inline-block;border-radius:2px;background:var(--mute);opacity:.5;background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(255,255,255,.5) 3px 5px)}
.legendLink{margin-left:auto}

/* ---- the moor control ---- */
.moor{border:1px solid var(--line);background:var(--white);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:10px}
.sidePick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sideBtn{display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--line);background:var(--chalk);border-radius:5px;padding:11px 8px;
  font-weight:700;font-size:13px;color:var(--mute);letter-spacing:.02em}
.sideBtn .hull,.sideBtn .bollard{color:currentColor}
.sideBtn.ship.is-on{border-color:var(--teal);background:var(--teal);color:var(--white)}
.sideBtn.docker.is-on{border-color:var(--rust);background:var(--rust);color:var(--white)}
.stakeLine{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stakeLbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.stakeIn{flex:1;min-width:110px;border:1px solid var(--line);border-radius:4px;padding:9px 10px;font:700 18px var(--mono);color:var(--ink);background:var(--chalk);outline:none}
.stakeIn:focus{border-color:var(--teal)}
.stakeUnit{font-size:11px;color:var(--mute);font-family:var(--mono)}
.stakePresets{display:flex;gap:4px;margin-left:auto}
.stakePresets button{border:1px solid var(--line);background:var(--white);border-radius:4px;padding:6px 9px;font-size:12px;font-weight:700;color:var(--mute)}
.stakePresets button.is-on{border-color:var(--ink);color:var(--ink)}
.moorFine{font-size:12px;color:var(--mute);min-height:16px}
.moorFine.warn{color:var(--rust2)}
.moorBtn{border:0;border-radius:5px;padding:14px;font-family:var(--disp);font-weight:800;font-size:26px;line-height:1;letter-spacing:.02em;background:var(--ink);color:var(--white)}
.moorBtn.ship{background:var(--teal)} .moorBtn.docker{background:var(--rust)}
.moorBtn:disabled{background:var(--chalk2);color:var(--mute);cursor:default}
.pickWallet{display:flex;flex-direction:column;gap:6px}
.pickWallet button{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--chalk);border-radius:5px;padding:10px;font-weight:600}
.pickWallet img{width:22px;height:22px;border-radius:4px}

/* ---- the tally ---- */
.tally{border-top:2px solid var(--ink);padding-top:12px;margin-top:6px}
.bellBox{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bellLbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:700}
.bellNum{font-family:var(--mono);font-weight:700;font-size:38px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.bellSub{font-size:12px;color:var(--mute)}
.tallyGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tallyGrid>div{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tLbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.tVal{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tVal.ship{color:var(--teal2)} .tVal.docker{color:var(--rust2)}
.mine{margin-top:8px;padding:8px 10px;border-left:3px solid var(--teal);background:rgba(255,255,255,.6);display:flex;flex-direction:column;gap:2px;font-size:13px}
.mine .collectBtn{align-self:flex-start;margin-top:4px;border:0;background:var(--ink);color:var(--white);border-radius:4px;padding:6px 12px;font-weight:700;font-size:12px}
.tapeHead{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:700;margin:14px 0 6px}
.tape{display:flex;flex-direction:column;gap:3px}
.tapeRow{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 8px;background:rgba(255,255,255,.6);border-radius:4px;border:1px solid var(--chalk2)}
.tapeRow .who{font-family:var(--mono);color:var(--ink)}
.tapeRow .who a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line)}
.tapeRow .amt{margin-left:auto;font-family:var(--mono);font-weight:700}
.tapeRow .when{color:var(--mute);font-size:11px}
.tapeRow .pill{white-space:nowrap;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:2px 6px;border-radius:3px;color:var(--white)}
.tapeRow .pill.ship{background:var(--teal)} .tapeRow .pill.docker{background:var(--rust)} .tapeRow .pill.even{background:var(--mute)}
.tapeEmpty{font-size:12px;color:var(--mute);padding:6px 0}

/* ---- notes ---- */
.notes{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.rules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute)}
.rules b{color:var(--ink)}
.links{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.links a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--teal)}
.fine{font-size:11px;color:var(--mute);word-break:break-all}
.fine code{font-size:10.5px}

/* ---- the other leaves (log, how, berth) ---- */
.leaf{max-width:720px}
.leaf h2{font-family:var(--disp);font-weight:800;font-size:44px;line-height:.9;margin:6px 0 12px}
.leaf h3{font-family:var(--disp);font-weight:700;font-size:26px;margin:18px 0 4px;line-height:1}
.leaf p{color:var(--mute);margin:0 0 8px;font-size:14px}
.leaf .back{display:inline-block;margin-bottom:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--teal)}
.slip{border:1px solid var(--line);background:var(--white);border-radius:6px;padding:12px;margin-bottom:10px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.slip .kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px}
.slip .kv span{color:var(--mute);letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:700}
.slip .kv code{font-weight:700}

/* ---- the hail (toast) ---- */
.hail{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:var(--white);padding:9px 16px;border-radius:4px;font-size:13px;z-index:60;max-width:90vw;box-shadow:0 6px 24px rgba(16,35,58,.25)}

/* ---- ≥ 720: wider measure, twelve columns ---- */
@media (min-width:720px){
  :root{--pad:28px}
  body{padding-top:66px}
  #quay{flex-direction:row;align-items:center;gap:16px;padding:9px var(--pad)}
  .quayHead{gap:12px;order:2;flex:0 0 auto}
  .quayTag{flex:0 0 auto}
  .quayAddr{order:1;flex:1;font-size:13px}
  h1{font-size:96px}
  .calling{font-size:16px}
  .wharf{grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
  .berth .n{font-size:9px;top:3px;left:5px}
  .berth .stk{display:block;font-size:9px}
  .berth.is-loose .stk,.berth.is-tied .stk{display:block}
  .tallyGrid{grid-template-columns:repeat(4,1fr)}
  .moorBtn{font-size:30px}
}
/* ---- ≥ 1000: the page recomposes — wharf left, tally as a rail on the right ---- */
@media (min-width:1000px){
  body{padding-top:70px}
  .deck{display:grid;grid-template-columns:minmax(0,1fr) 336px;grid-template-areas:"call tally" "wharf tally" "notes notes";grid-template-rows:max-content 1fr max-content;column-gap:36px;row-gap:0;max-width:1180px;margin:0 auto;align-items:start}
  .call{grid-area:call;padding-top:14px}
  .wharfWrap{grid-area:wharf}
  .tally{grid-area:tally;position:sticky;top:70px;border-top:0;border-left:2px solid var(--ink);padding:14px 0 0 22px;margin-top:14px}
  .tallyGrid{grid-template-columns:1fr 1fr}
  .notes{grid-area:notes}
  h1{font-size:112px}
  .wharf{gap:7px}
  .berth .n{font-size:10px}
  .berth .stk{font-size:10px}
  .bellNum{font-size:46px}
  .moor{flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px}
  .sidePick{flex:1 1 300px}
  .stakeLine{flex:1 1 260px}
  .moorFine{flex:1 1 100%}
  .moorBtn{flex:1 1 100%}
  .quayAddr{font-size:14px}
}