/* Nodlock — the ring. One instrument, one floating capsule of chrome, nothing else. */
:root{
  --ground:#08070B; --ink:#F2EEF5; --accent:#FF3D9A; --accent-dim:#8E1E56;
  --dust:#8B849B; --line:#1C1A24; --panel:#0E0D14; --panel2:#14121C; --grey-arc:#3A3646;
  --disp:'Syne',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pill-h:52px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{background:var(--ground);color:var(--ink);font-family:var(--mono);font-weight:300;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 620px at 50% -12%,rgba(255,61,154,.10),transparent 68%);
  background-attachment:fixed}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.02}

/* ---------- the floating capsule (chrome + the buy control) ---------- */
.postpill{position:fixed;z-index:60;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;
  height:var(--pill-h);display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 8px 0 10px;border-radius:999px;border:1px solid var(--line);
  background:rgba(10,9,14,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 34px rgba(0,0,0,.6)}
.pmark{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.pmark img{width:28px;height:28px;border-radius:50%;flex:none}
.pmark b{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.01em;white-space:nowrap}
.pbuy{display:flex;align-items:center;flex:none}
.pbuy a{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:999px;
  background:var(--accent);color:#14030B;text-decoration:none;font-weight:500;letter-spacing:.01em;
  box-shadow:0 0 22px rgba(255,61,154,.42);white-space:nowrap}
.pbuy a:active{transform:translateY(1px)}
.pbuy .soon{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;
  border:1px dashed var(--accent-dim);color:var(--accent);white-space:nowrap;font-size:12.5px}

/* ---------- stage ---------- */
#stage{padding:calc(var(--pill-h) + 30px + env(safe-area-inset-top)) 14px calc(140px + env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto}
.routestrip{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 14px}
.routelink{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  color:var(--dust);text-decoration:none;font-size:12.5px}
.routelink[aria-current="page"]{border-color:var(--accent-dim);color:var(--accent);background:rgba(255,61,154,.07)}

.lede h1{font-size:clamp(30px,8.6vw,42px)}
.lede p{color:var(--dust);margin:10px 0 0;max-width:46ch}
.lede .say{color:var(--ink)}

/* ---------- the ring ---------- */
.ringwrap{margin:14px 0 0;position:relative}
.ringsvg{width:100%;height:auto;display:block;touch-action:manipulation}
.node{cursor:pointer}
.nodecap{fill:url(#postGrad);stroke:#2A2733;stroke-width:1}
.node.ghost .nodecap{fill:#0D0C12;stroke:#1B1923;stroke-dasharray:3 4}
.node.sel .nodecap{stroke:#FFFFFF;stroke-width:3}
.node.mine .nodecap{stroke:#E9E3F0;stroke-width:2}
.node.locked .nodecap{fill:url(#lockGrad);stroke:var(--accent);stroke-width:1.6}
.nodenum{font-family:var(--mono);font-size:11px;fill:var(--dust);text-anchor:middle;pointer-events:none}
.node.locked .nodenum{fill:var(--accent)}
.node.sel .nodenum{fill:#fff}
.node.mine .nodenum{fill:#fff}
.inb{font-family:var(--disp);font-weight:700;font-size:11px;fill:#0B0710;text-anchor:middle;pointer-events:none}
.inbdot{fill:var(--dust)}
.node.locked .inbdot{fill:var(--accent)}
.arc{fill:none;stroke:var(--grey-arc);stroke-width:1.2;stroke-linecap:round}
.arc.lock{stroke:var(--accent);stroke-width:3;filter:url(#glow)}
.arc.mine{stroke:#CFC7DA;stroke-width:2}
.arc.pick{stroke:var(--accent);stroke-width:2;stroke-dasharray:5 6;animation:crawl 1.1s linear infinite}
@keyframes crawl{to{stroke-dashoffset:-22}}
.ringmid{text-anchor:middle;pointer-events:none}
.ringmid .big{font-family:var(--disp);font-weight:800;font-size:40px;fill:var(--ink)}
.ringmid .cap{font-family:var(--mono);font-size:11px;fill:var(--dust);letter-spacing:.14em}
.ringmid .big.hot{fill:var(--accent)}

.bell{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px}
.bell .phase{font-size:12px;color:var(--dust);letter-spacing:.12em;text-transform:uppercase}
.bell .clock{font-family:var(--disp);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.bell .clock.warn{color:var(--accent)}

.hint{color:var(--dust);font-size:12.5px;margin:12px 0 0;min-height:1.5em}
.hint b{color:var(--ink);font-weight:400}

/* ---------- panels in the second column (and stacked on phones) ---------- */
.roomcol{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.card{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:14px 15px}
.card h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);font-weight:700;margin-bottom:10px}
.potrow{display:flex;align-items:baseline;gap:9px}
.potrow .n{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.02em}
.potrow .u{color:var(--dust);font-size:12px}
.carryline{color:var(--dust);font-size:12.5px;margin-top:6px}
.carryline b{color:var(--accent);font-weight:400}

.seatlist{display:flex;flex-direction:column;gap:1px}
.seatrow{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.seatrow:last-child{border-bottom:0}
.seatrow .sn{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--dust)}
.seatrow.lk .sn{color:var(--accent)}
.seatrow .sw{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatrow .sw a{text-decoration:none;color:var(--ink)}
.seatrow .sw em{font-style:normal;color:var(--dust)}
.seatrow .sr{font-size:11.5px;color:var(--dust);text-align:right;white-space:nowrap}
.lockchip{display:inline-block;padding:1px 7px;border-radius:999px;background:rgba(255,61,154,.14);color:var(--accent);font-size:11px}
.quiet{color:var(--dust);font-size:12.5px}

.primer dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.5px}
.primer dt{color:var(--accent)}
.primer dd{margin:0;color:var(--dust)}

.tape{display:flex;flex-direction:column;gap:6px;font-size:12px}
.tapeline{display:flex;gap:8px;color:var(--dust)}
.tapeline b{color:var(--ink);font-weight:400}
.tapeline .t{color:#5C5670;flex:none;font-variant-numeric:tabular-nums}

.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.statcell{border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:var(--panel2)}
.statcell .n{font-family:var(--disp);font-weight:800;font-size:19px}
.statcell .k{font-size:11px;color:var(--dust);letter-spacing:.08em;text-transform:uppercase}

/* ---------- prose ---------- */
.prose h2{font-size:20px;margin:24px 0 8px}
.prose p{color:var(--dust);margin:0 0 10px;max-width:62ch}
.prose p b,.prose p strong{color:var(--ink);font-weight:400}
.prose ol{color:var(--dust);padding-left:20px;max-width:62ch}
.prose ol li{margin-bottom:6px}

.rlist{display:flex;flex-direction:column;gap:10px}
.rcard{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:12px 14px;text-decoration:none;display:block}
.rcard .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rcard .id{font-family:var(--disp);font-weight:800;font-size:16px}
.rcard .sum{color:var(--dust);font-size:12.5px;margin-top:5px}
.rcard .sum b{color:var(--accent);font-weight:400}

/* ---------- commit bar ---------- */
.commit{position:fixed;z-index:70;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;padding:9px 9px 9px 14px;border-radius:18px;
  border:1px solid var(--accent-dim);background:rgba(16,8,16,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.7)}
.ctext{flex:1;min-width:0;font-size:13px;line-height:1.35}
.ctext b{color:var(--accent);font-weight:400}
.cgo{height:42px;padding:0 17px;border-radius:12px;background:var(--accent);color:#14030B;font-weight:500;white-space:nowrap}
.cgo[disabled]{opacity:.45}
.cx{width:36px;height:42px;color:var(--dust);flex:none}

/* ---------- the wallet picker + toast ---------- */
.pickveil{position:fixed;inset:0;z-index:90;background:rgba(3,2,6,.72);display:flex;align-items:flex-end;justify-content:center}
.pickveil[hidden],.commit[hidden]{display:none}
.pickcard{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom))}
.pickhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
  font-family:var(--disp);font-weight:700;font-size:15px}
.pickhead button{color:var(--dust);font-size:16px}
.wl{display:flex;flex-direction:column;gap:8px}
.wl button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel2);text-align:left}
.wl img{width:22px;height:22px;border-radius:6px}
.toast{position:fixed;z-index:120;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));
  background:#171320;border:1px solid var(--accent-dim);color:var(--ink);padding:10px 15px;border-radius:12px;
  font-size:13px;max-width:88vw;box-shadow:0 10px 30px rgba(0,0,0,.6)}

/* ---------- footer ---------- */
.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);color:#5C5670;font-size:11.5px}
.foot .fr{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:7px}
.foot a{color:var(--dust)}
.foot .addr{word-break:break-all;font-size:11px;line-height:1.7}
.foot .addr span{color:#4B4658}

/* ---------- ≥720: a wider measure, a bigger instrument, the pill floats right ---------- */
@media (min-width:720px){
  :root{--pill-h:56px}
  .postpill{left:auto;right:18px;top:18px;padding:0 10px 0 14px;gap:16px}
  #stage{max-width:660px;padding-left:24px;padding-right:24px}
  .lede h1{font-size:50px}
  body{font-size:15px}
  .statgrid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- ≥1000: the page recomposes — instrument left, the room beside it ---------- */
@media (min-width:1000px){
  #stage{max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) 384px;
    grid-template-areas:"head head" "ring room" "foot foot";
    column-gap:40px;row-gap:0;align-items:start;padding-top:36px;padding-bottom:60px}
  .headarea{grid-area:head}
  .ringarea{grid-area:ring;position:sticky;top:26px}
  .roomcol{grid-area:room;margin-top:22px;padding-bottom:96px}
  .ringsvg{max-width:640px;margin:0 auto}
  .footarea{grid-area:foot}
  .lede h1{font-size:62px;max-width:660px}
  .lede p{font-size:16px}
  .ringmid .big{font-size:52px}
  .potrow .n{font-size:36px}
  .commit{left:auto;right:24px;bottom:24px;width:480px}
  #stage.solo{display:block;max-width:820px}
  #stage.solo .roomcol{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
}
@media (min-width:1280px){ #stage{max-width:1200px;grid-template-columns:minmax(0,1fr) 400px} }