/* Nethermark — the flight. Brutalist slabs: a step is as wide as its mark, cut by a blue rule where the
   wallet beneath it sets the bill. Mobile first; recomposes into flight + column past 1000px. */
:root{
  --ground:#0B0C0E; --slab:#C9CED4; --slab-dim:#3A3F45; --ink:#ECEFF3; --ink-dim:#878E96;
  --bill:#4CC9FF; --line:#1C2026; --card:#121417;
  --crown-h:56px; --foot-h:68px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ground);color:var(--ink);overflow-x:hidden}
body{font-family:"Space Mono",ui-monospace,monospace;font-size:14px;line-height:1.45;
  padding-top:calc(var(--crown-h) + 44px);padding-bottom:calc(var(--foot-h) + 12px);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,b,.dsp{font-family:Chivo,"Helvetica Neue",Arial,sans-serif;font-weight:900;letter-spacing:-.02em}
a{color:inherit}
code{font-family:"Space Mono",monospace}

/* ---- crown: fixed at every width, and it carries the buy control ---- */
#crown{position:fixed;top:0;left:0;right:0;height:var(--crown-h);z-index:40;
  display:flex;align-items:center;gap:10px;padding:0 10px;
  background:#0B0C0E;border-bottom:3px solid var(--slab)}
.crown-id{display:flex;align-items:center;gap:8px;text-decoration:none;min-width:0}
.crown-id img{display:block;border:2px solid var(--slab)}
.crown-id b{font-size:16px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crown-bell{margin-left:auto;text-align:right;line-height:1.1;flex:0 0 auto}
.crown-bell span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim)}
.crown-bell b{font-size:15px;font-family:"Space Mono",monospace;font-weight:700}
.crown-buy{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;
  padding:6px 10px;text-decoration:none;background:var(--bill);color:#06212C;
  border:3px solid var(--bill);line-height:1.05;max-width:46vw}
.crown-buy i{font-style:normal;font-family:Chivo,sans-serif;font-weight:900;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.crown-buy span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.crown-buy.live{background:var(--bill)}
.crown-buy.live span{opacity:.9}

#ways{position:fixed;top:var(--crown-h);left:0;right:0;z-index:39;display:flex;gap:0;
  background:#0B0C0E;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
#ways::-webkit-scrollbar{display:none}
#ways a{flex:1 0 auto;text-align:center;padding:12px 14px;text-decoration:none;font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);white-space:nowrap;border-bottom:3px solid transparent}
#ways a.on{color:var(--ink);border-bottom-color:var(--bill)}

/* ---- layout ---- */
#wrap{max-width:1180px;margin:0 auto;padding:14px 10px 0;display:block}
#aside{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border:1px solid var(--line);padding:14px}
.card h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim)}
.card p{margin:0 0 8px}
.small{font-size:12px;color:var(--ink-dim);line-height:1.5}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 8px}
.facts div{border-left:3px solid var(--slab-dim);padding-left:8px}
.facts dt{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim)}
.facts dd{margin:0;font-size:17px;font-weight:700}
.purse{display:flex;align-items:baseline;gap:8px}
.purse b{font-size:30px;font-family:"Space Mono",monospace;font-weight:700;letter-spacing:-.02em}
.purse span{font-size:11px;color:var(--ink-dim)}
.tape{list-style:none;margin:0;padding:0;font-size:12px}
.tape li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:baseline}
.tape li:last-child{border-bottom:0}
.tape .who{color:var(--ink)}
.tape .n{margin-left:auto;color:var(--bill);white-space:nowrap}
.tape .quiet{color:var(--ink-dim)}

/* ---- the flight ---- */
.head{margin:0 0 14px}
.head h1{margin:0;font-size:28px;line-height:1.02;text-transform:uppercase}
.head p{margin:8px 0 0;color:var(--ink-dim);font-size:13px}
.state{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.chip{border:1px solid var(--line);padding:5px 8px;font-size:11px;color:var(--ink-dim)}
.chip b{color:var(--ink);font-family:"Space Mono",monospace}
.chip.hot{border-color:var(--bill);color:var(--bill)}

.flight{display:flex;flex-direction:column;gap:5px;margin:0 0 6px}
.step{position:relative;display:block;width:100%;text-align:left;background:transparent;border:0;padding:0;
  cursor:pointer;font:inherit;color:inherit}
.step .bar{position:relative;height:56px;background:var(--slab-dim);
  transition:width .5s cubic-bezier(.2,.8,.2,1);min-width:64px;display:flex;align-items:center;gap:8px;padding:0 8px;overflow:hidden}
.step.taken .bar{background:var(--slab);color:#0B0C0E}
.step .no{font-family:Chivo,sans-serif;font-weight:900;font-size:19px;line-height:1;flex:0 0 auto;opacity:.85}
.step .who{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.step .mark{margin-left:auto;font-weight:700;font-size:14px;white-space:nowrap;position:relative;z-index:3;
  padding:2px 0 2px 7px;background:inherit}
.step.taken .bar .mark{background:var(--slab)}
.step.empty .bar .mark{background:transparent}
.step .rule{position:absolute;top:0;bottom:0;width:3px;background:var(--bill);
  transition:left .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px rgba(76,201,255,.75)}
.step .under{position:relative;height:17px;margin-top:2px}
.step .billtag{position:absolute;top:0;font-size:11px;line-height:15px;color:var(--bill);white-space:nowrap;
  padding-left:6px;border-left:2px solid var(--bill);transition:left .5s cubic-bezier(.2,.8,.2,1)}
.step .billtag.flip{transform:translateX(-100%);padding-left:0;padding-right:6px;border-left:0;border-right:2px solid var(--bill)}
.step .cutpct{position:absolute;right:0;top:0;font-size:10px;line-height:15px;letter-spacing:.08em;color:var(--ink-dim)}
.step.mine .bar{outline:3px solid var(--bill);outline-offset:2px}
.step.empty .bar{background:repeating-linear-gradient(135deg,#15181C 0 7px,#101317 7px 14px);color:var(--ink-dim);
  border:1px solid #23272D}
.step.empty .no{opacity:.55}
.step.fresh .bar{animation:land .7s ease-out}
@keyframes land{0%{background:var(--bill)}100%{}}
.shadow{margin-top:8px;border:2px dashed var(--slab-dim);padding:10px 8px;display:flex;align-items:center;gap:8px}
.shadow .no{font-family:Chivo,sans-serif;font-weight:900;font-size:17px;color:var(--ink-dim)}
.shadow .who{font-size:11px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shadow .mark{margin-left:auto;font-weight:700;white-space:nowrap}
.shadow p{margin:0;flex-basis:100%;font-size:11px;color:var(--ink-dim)}
.scale{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-dim);
  border-top:1px solid var(--line);padding-top:6px;margin-top:2px}

/* ---- rows, tables, plates ---- */
.rows{display:flex;flex-direction:column;gap:8px}
.row{background:var(--card);border:1px solid var(--line);padding:12px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.row b{font-size:16px}
.row .k{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim)}
.row .v{font-weight:700}
.row .go{margin-left:auto;font-size:11px;color:var(--bill)}
.wait{color:var(--ink-dim);padding:30px 0;text-align:center}
.rule-list{counter-reset:r;list-style:none;padding:0;margin:0}
.rule-list li{counter-increment:r;position:relative;padding:12px 0 12px 42px;border-bottom:1px solid var(--line)}
.rule-list li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:10px;
  font-family:Chivo,sans-serif;font-weight:900;font-size:19px;color:var(--bill)}

#plate[hidden]{display:none!important}
#plate{position:fixed;inset:0;z-index:60;background:rgba(6,8,10,.86);display:flex;align-items:flex-end;justify-content:center}
.plate-box{background:var(--card);border:3px solid var(--slab);width:100%;max-width:520px;max-height:84vh;overflow:auto}
.plate-top{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.plate-top b{font-size:14px;text-transform:uppercase}
.plate-top button{margin-left:auto;background:transparent;border:1px solid var(--slab-dim);color:var(--ink);padding:5px 9px;font:inherit;font-size:11px;cursor:pointer}
#plateBody{padding:12px}
#plateBody .kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
#plateBody .kv span{color:var(--ink-dim)}
#plateBody button.big{width:100%;margin-top:12px;background:var(--bill);border:0;color:#06212C;padding:13px;
  font:inherit;font-family:Chivo,sans-serif;font-weight:900;text-transform:uppercase;cursor:pointer;font-size:14px}
.wl{display:flex;flex-direction:column;gap:8px}
.wl button{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--slab-dim);
  color:var(--ink);padding:10px;font:inherit;cursor:pointer}
.wl img{width:22px;height:22px}

/* ---- foot composer: fixed at every width ---- */
#foot{position:fixed;left:0;right:0;bottom:0;z-index:41;background:#0B0C0E;border-top:3px solid var(--slab);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.foot-mine{font-size:11px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot-mine b{color:var(--bill)}
.foot-act{display:flex;gap:8px}
#amt{flex:1 1 auto;min-width:0;background:#15181C;border:1px solid var(--slab-dim);color:var(--ink);
  padding:11px 10px;font:inherit;font-size:15px}
#postBtn{flex:0 0 auto;background:var(--slab);border:0;color:#0B0C0E;padding:11px 14px;font:inherit;
  font-family:Chivo,sans-serif;font-weight:900;text-transform:uppercase;cursor:pointer;font-size:13px}
#postBtn:disabled{opacity:.45;cursor:not-allowed}

#base{max-width:1180px;margin:18px auto 0;padding:16px 10px 26px;border-top:1px solid var(--line);color:var(--ink-dim);font-size:11px}
.base-row{display:flex;gap:8px;align-items:baseline;padding:3px 0}
.base-row span{flex:0 0 46px;text-transform:uppercase;letter-spacing:.1em;font-size:9px}
.base-row code{word-break:break-all;color:var(--ink)}
.base-links{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 6px}
.base-links a{color:var(--bill);text-decoration:none}
.base-note{margin:6px 0 0;line-height:1.5}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--foot-h) + 18px);z-index:70;
  background:var(--slab);color:#0B0C0E;padding:10px 14px;font-size:13px;max-width:92vw;text-align:center}

/* ---- wider ---- */
@media (min-width:720px){
  body{font-size:15px;padding-top:calc(var(--crown-h) + 48px)}
  #wrap{padding:22px 20px 0}
  .head h1{font-size:40px}
  .head p{font-size:15px;max-width:52ch}
  .step .bar{height:66px;padding:0 12px;gap:12px}
  .step .no{font-size:23px}
  .step .who{font-size:12px}
  .step .mark{font-size:17px}
  .step .billtag{font-size:12px}
  .purse b{font-size:38px}
  #foot{flex-direction:row;align-items:center;gap:14px;padding:10px 20px calc(10px + env(safe-area-inset-bottom))}
  .foot-mine{flex:1 1 auto;font-size:12px}
  .foot-act{flex:0 0 auto;width:340px}
  #base{padding:20px}
}
@media (min-width:1000px){
  :root{--crown-h:64px}
  body{padding-top:var(--crown-h)}
  #ways{position:static;border-bottom:0;background:transparent;justify-content:flex-start;
    max-width:1180px;margin:0 auto;padding:14px 20px 0}
  #ways a{flex:0 0 auto;text-align:left;padding:8px 16px 8px 0}
  #wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start;padding:10px 20px 0}
  #aside{margin-top:0;position:sticky;top:calc(var(--crown-h) + 14px)}
  .head h1{font-size:52px;max-width:16ch}
  .step .bar{height:74px}
  .step .no{font-size:27px}
  .step .mark{font-size:19px}
  .step .billtag{font-size:12px}
  .crown-buy{max-width:none;padding:8px 14px}
  .crown-buy i{font-size:15px}
}