/* Naycall — the desk. Acid lime on near-black, hard pixel edges, nothing rounded that could be square. */
:root{
  --lime:#CCFF00; --lime-dim:#8aa81b; --ground:#0B0F06; --panel:#111708; --edge:#1e2a10;
  --ink:#E9F2D8; --mute:#8d9b78; --hot:#ff4d2e;
  --rail:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;image-rendering:pixelated}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
.px{font-family:"Silkscreen","Space Grotesk",monospace;letter-spacing:.02em}

/* ---------- the rail: a fixed bottom bar on a phone, a fixed left rail on a desk ---------- */
#rail{
  position:fixed; z-index:40; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:10px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:#0d1207; border-top:2px solid var(--edge);
}
#rail .mark{flex:0 0 auto}
#rail .mark img{width:30px;height:30px;border:2px solid var(--edge)}
.routes{display:flex;flex:1 1 auto;gap:2px;min-width:0}
.routes a{
  flex:1 1 0; min-width:0; text-align:center; padding:6px 2px; color:var(--mute);
  font-family:"Silkscreen",monospace; font-size:10px; text-transform:uppercase;
}
.routes a .ic{display:block;font-size:13px;line-height:1.1}
.routes a em{font-style:normal}
.routes a.on{color:var(--lime)}
.buy{
  flex:0 0 auto; display:flex; align-items:baseline; gap:6px;
  background:var(--lime); color:#0a0d05; padding:9px 11px;
  font-family:"Silkscreen",monospace; font-size:11px; letter-spacing:.04em;
  border:2px solid var(--lime); box-shadow:4px 4px 0 #4d6108;
}
.buy .bk{font-size:10px}
.buy.cold{background:transparent;color:var(--lime-dim);border-color:var(--edge);box-shadow:none}

/* ---------- stage ---------- */
#stage{padding:16px 14px 104px}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* ---------- the instrument ---------- */
.callplate{
  background:var(--panel); border:2px solid var(--edge); padding:18px 16px 14px; text-align:center;
  position:relative; overflow:hidden;
}
.callplate:before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--edge) 1px,transparent 1px),linear-gradient(90deg,var(--edge) 1px,transparent 1px);
  background-size:18px 18px; opacity:.35; pointer-events:none;
}
.plab{position:relative;font-family:"Silkscreen",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.figline{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:4px 0 2px}
.fig{
  font-family:"Silkscreen",monospace; font-weight:700; color:var(--lime);
  font-size:96px; line-height:.95; text-shadow:0 0 22px rgba(204,255,0,.28);
}
.fig.tick{animation:pop .22s steps(2,end)}
@keyframes pop{0%{transform:translateY(-6px);opacity:.35}100%{transform:none;opacity:1}}
.figside{text-align:left;padding-bottom:12px}
.figside span{display:block;font-family:"Silkscreen",monospace;font-size:10px;color:var(--mute);line-height:1.6}
.roomline{position:relative;font-size:15px;color:var(--ink)}
.roomline b{color:var(--lime)}
.roomline .gap{color:var(--hot)}
.plot{position:relative;display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:12px}
.pip{width:12px;height:12px;background:var(--edge)}
.pip.in{background:var(--lime)}
.pip.gap{background:transparent;border:2px solid var(--hot)}

/* ---------- the nay window ---------- */
.naybar{border:2px solid var(--hot);background:#180a06;padding:12px 14px}
.naybar .nhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.naybar .nhead span{font-family:"Silkscreen",monospace;font-size:11px;color:var(--hot);letter-spacing:.08em}
.naybar .ncount{font-family:"Silkscreen",monospace;font-size:26px;color:var(--hot)}
.naybar p{margin:6px 0 8px;font-size:14px;color:#f3d9d0}
.drain{height:10px;background:#2a1109;border:2px solid #47210f}
.drain i{display:block;height:100%;background:var(--hot);transition:width 1s linear}

/* ---------- the commit panel ---------- */
.commit{background:var(--panel);border:2px solid var(--edge);padding:14px}
.chead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.chead .px{font-size:11px;color:var(--mute);letter-spacing:.14em;text-transform:uppercase}
.stepgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stepbtn{
  background:#0d1207;border:2px solid var(--edge);color:var(--ink);padding:10px 4px;cursor:pointer;
  font-family:"Silkscreen",monospace;text-align:center;
}
.stepbtn u{display:block;text-decoration:none;font-size:9px;color:var(--mute);letter-spacing:.06em}
.stepbtn strong{display:block;font-size:22px;color:var(--ink);margin-top:3px}
.stepbtn.on{border-color:var(--lime);background:#16200a}
.stepbtn.on strong{color:var(--lime)}
.stepbtn:disabled{opacity:.3;cursor:not-allowed}
.acts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
button.go{
  font-family:"Silkscreen",monospace;font-size:14px;letter-spacing:.04em;cursor:pointer;
  padding:14px 12px;border:2px solid var(--lime);background:var(--lime);color:#0a0d05;box-shadow:4px 4px 0 #4d6108;
}
button.go:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #4d6108}
button.go[disabled]{background:#1a2210;color:var(--mute);border-color:var(--edge);box-shadow:none;cursor:not-allowed}
button.nay{
  font-family:"Silkscreen",monospace;font-size:13px;cursor:pointer;padding:12px;
  border:2px solid var(--hot);background:transparent;color:var(--hot);
}
button.nay[disabled]{opacity:.35;cursor:not-allowed}
.hint{margin:10px 0 0;font-size:13px;color:var(--mute)}
.hint b{color:var(--ink)}
.owed{margin-top:10px;border:2px dashed var(--lime-dim);padding:10px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.owed button{font-family:"Silkscreen",monospace;font-size:11px;padding:8px 10px;border:2px solid var(--lime);background:transparent;color:var(--lime);cursor:pointer}

/* ---------- side cards ---------- */
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.deskcard{background:var(--panel);border:2px solid var(--edge)}
.deskcard h3{
  margin:0;padding:10px 12px;border-bottom:2px solid var(--edge);
  font-family:"Silkscreen",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  display:flex;justify-content:space-between;gap:8px;
}
.deskcard h3 i{font-style:normal;color:var(--lime)}
.deskcard .body{padding:10px 12px}
.quiet{color:var(--mute);font-size:14px;margin:0;padding:14px 12px}
.rungrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--edge);font-size:14px}
.rungrow:last-child{border-bottom:0}
.rungrow .num{font-family:"Silkscreen",monospace;font-size:19px;width:44px;color:var(--ink)}
.rungrow.cov .num{color:var(--lime)}
.rungrow.shortc .num{color:var(--hot)}
.rungrow .who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute);font-size:12px}
.rungrow .rch{font-family:"Silkscreen",monospace;font-size:11px;color:var(--mute)}
.rungrow .tag{font-family:"Silkscreen",monospace;font-size:9px;padding:2px 5px;border:1px solid var(--edge);color:var(--mute)}
.rungrow.cov .tag{color:var(--lime);border-color:var(--lime-dim)}
.rungrow.shortc .tag{color:var(--hot);border-color:var(--hot)}
.tapelog{list-style:none;margin:0;padding:0;font-size:13px}
.tapelog li{display:flex;gap:8px;padding:7px 12px;border-bottom:1px solid var(--edge)}
.tapelog li:last-child{border-bottom:0}
.tapelog .k{font-family:"Silkscreen",monospace;font-size:9px;padding:2px 4px;border:1px solid var(--edge);color:var(--mute);height:fit-content}
.tapelog .k.nay{color:var(--hot);border-color:var(--hot)}
.tapelog .k.call{color:var(--lime);border-color:var(--lime-dim)}
.tapelog .t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.primer p{margin:0 0 9px;font-size:14px;color:var(--ink)}
.primer p:last-child{margin-bottom:0}
.primer .k{color:var(--lime);font-family:"Silkscreen",monospace;font-size:12px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--edge)}
.stats div{background:var(--panel);padding:10px 12px}
.stats span{display:block;font-family:"Silkscreen",monospace;font-size:9px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase}
.stats b{font-family:"Silkscreen",monospace;font-size:19px;color:var(--lime);font-weight:400}

/* ---------- book / rules / hand ---------- */
.sheet{background:var(--panel);border:2px solid var(--edge);padding:16px}
.sheet h1{font-family:"Silkscreen",monospace;font-size:20px;color:var(--lime);margin:0 0 4px;line-height:1.3}
.sheet h2{font-family:"Silkscreen",monospace;font-size:13px;color:var(--ink);margin:18px 0 6px;letter-spacing:.04em}
.sheet p{margin:0 0 10px;font-size:15px;color:var(--ink)}
.sheet p.small{color:var(--mute);font-size:13px}
.sheet ol{margin:0 0 10px;padding-left:20px;font-size:15px}
.sheet li{margin-bottom:6px}
.bookrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--edge);font-size:14px}
.bookrow:last-child{border-bottom:0}
.bookrow .rid{font-family:"Silkscreen",monospace;font-size:12px;color:var(--mute);width:38px}
.bookrow .fin{font-family:"Silkscreen",monospace;font-size:18px;color:var(--lime);width:62px}
.bookrow .fin.bust{color:var(--hot)}
.bookrow .det{flex:1 1 auto;min-width:0;color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bookrow .eth{font-family:"Silkscreen",monospace;font-size:12px;color:var(--ink)}
.hero{border:2px solid var(--edge);background:var(--panel);padding:0;overflow:hidden}
.hero img{width:100%}

/* ---------- footer ---------- */
.foot{border-top:2px solid var(--edge);margin:26px 0 0;padding:16px 14px 110px;background:#0a0e05}
.fwrap{max-width:560px;margin:0 auto;display:flex;gap:12px;align-items:flex-start}
.fmark{width:34px;height:34px;border:2px solid var(--edge);flex:0 0 auto}
.fcol{flex:1 1 auto;min-width:0}
.fline{margin:0 0 6px;font-size:13px;color:var(--ink)}
.faddr{margin:0 0 3px;font-size:11px;color:var(--mute);font-family:"Silkscreen",monospace;word-break:break-all;line-height:1.7}
.faddr span{color:var(--lime-dim)}
.flinks{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.flinks a{font-family:"Silkscreen",monospace;font-size:10px;color:var(--mute);border:1px solid var(--edge);padding:5px 7px;text-align:center}

/* ---------- ~720px: a wider measure, a bigger instrument ---------- */
@media (min-width:720px){
  body{font-size:17px}
  #stage{padding:26px 22px 110px}
  .wrap{max-width:720px;gap:20px}
  .fig{font-size:132px}
  .callplate{padding:26px 22px 20px}
  .acts{grid-template-columns:2fr 1fr}
  .fwrap{max-width:720px}
  .stepbtn strong{font-size:26px}
}

/* ---------- ~900px: the rail stands up on the left ---------- */
@media (min-width:900px){
  #rail{
    top:0;bottom:0;right:auto;width:var(--rail);
    flex-direction:column;justify-content:flex-start;gap:16px;
    padding:14px 8px;border-top:0;border-right:2px solid var(--edge);
  }
  #rail .mark img{width:40px;height:40px}
  .routes{flex-direction:column;flex:0 0 auto;gap:8px;width:100%}
  .routes a{padding:8px 2px}
  .buy{
    margin-top:auto;flex-direction:column;align-items:center;gap:2px;
    padding:12px 6px;text-align:center;line-height:1.2;
  }
  .buy .bk{font-size:9px;word-break:break-all}
  #stage{padding:30px 26px 40px;margin-left:var(--rail)}
  .foot{margin-left:var(--rail);padding-bottom:30px}
}

/* ---------- ≥1000px: the desk recomposes into instrument + room ---------- */
@media (min-width:1000px){
  .wrap{
    max-width:1180px;display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(320px,.85fr);
    gap:24px;align-items:start;
  }
  .wrap.single{display:flex;max-width:840px}
  .col{display:flex;flex-direction:column;gap:20px;min-width:0}
  .fig{font-size:172px}
  .figside span{font-size:11px}
  .fwrap{max-width:1180px}
  .sheet{padding:26px}
  .sheet h1{font-size:26px}
}