/* Drawhall — a neon draw hall at night. Ground near-black ink-blue, ONE accent: lime tube. Sealed tickets burn in a dim
   cold tube; the drawn ticket and the next open slot burn lime. The CA hangs in a vertical tube on the left edge. */
:root{
  --nh-ground:#060812; --nh-ground2:#0b0f1f; --nh-wall:#11172d; --nh-ink:#e6ecff; --nh-dim:#8d97bd; --nh-faint:#4a5379;
  --nh-paper:#4b5679; --nh-card:#3e4868; --nh-pen:#f3f1e8; --nh-pen2:#c9cee2; --nh-rule:rgba(243,241,232,.2);
  --nh-lime:#a8ff3e; --nh-lime-soft:rgba(168,255,62,.16); --nh-cold:#6f8dff; --nh-cold-soft:rgba(111,141,255,.22);
  --nh-sign:'Tilt Neon',system-ui,sans-serif; --nh-body:'Figtree',system-ui,sans-serif; --nh-mono:'Martian Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--nh-paper)}
body.nh{margin:0;min-height:100vh;background:var(--nh-paper);color:var(--nh-pen);font:400 15px/1.5 var(--nh-body);
  padding:16px 14px 128px;display:grid;grid-template-columns:minmax(0,1fr);row-gap:14px;
  grid-template-areas:"lede" "arch" "booth" "ticker" "book" "foot";overflow-x:hidden}
a{color:inherit}
code{font-family:var(--nh-mono)}

/* the CA dock — fixed above the thumb at every width; the full address, one tap to copy */
.nh-dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;
  padding:9px 10px 9px 9px;border-radius:18px;background:var(--nh-ground);color:var(--nh-ink);border:1.5px solid var(--nh-lime);
  box-shadow:0 0 0 4px rgba(75,86,121,.9),0 0 16px rgba(168,255,62,.35),0 14px 30px -10px rgba(21,24,43,.5);max-width:880px;margin:0 auto}
.nh-dock-mark{display:block;border-radius:50%}
.nh-dock-body{min-width:0;display:grid;gap:2px}
.nh-dock-k{font:600 8.5px var(--nh-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--nh-lime)}
.nh-dock-addr{font-size:10.5px;line-height:1.3;word-break:break-all;user-select:all;color:var(--nh-ink)}
.nh-dock-addr.is-blank{color:var(--nh-dim);user-select:none;letter-spacing:.08em}
.nh-dock-copy{height:38px;padding:0 14px;border-radius:12px;border:0;background:var(--nh-lime);color:#071003;font:700 12px var(--nh-body);cursor:pointer;box-shadow:0 0 12px rgba(168,255,62,.5)}
.nh-dock-copy[data-done="1"]{background:var(--nh-ink)}
.nh-dock-gm{font:400 10px var(--nh-mono);color:var(--nh-dim);text-decoration:none}
.nh-dock-gm:hover{color:var(--nh-lime)}

/* the lede — the rulebook, read live off the hall */
.nh-lede{grid-area:lede;margin:0;font:400 17px/1.55 var(--nh-body);color:var(--nh-pen);max-width:62ch}
.nh-lede-k{font:600 11px var(--nh-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--nh-pen2)}
.nh-lede b{font-weight:700;color:var(--nh-lime)}

/* the marquee — one live number, huge, in tube type */
.nh-marquee{margin:0 2px 12px;text-align:center}
.nh-marquee-k{margin:0 auto;font:600 11px/1.35 var(--nh-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--nh-dim);max-width:36ch}
.nh-marquee-k b{color:var(--nh-lime);font-weight:600}
.nh-figure{display:block;width:100%;font:400 74px/1 var(--nh-sign);letter-spacing:-.01em;color:var(--nh-lime);margin:6px 0 2px;
  text-shadow:0 0 6px rgba(168,255,62,.75),0 0 22px rgba(168,255,62,.45),0 0 48px rgba(168,255,62,.25)}
.nh-figure[data-mode="drawn"]{animation:nh-buzz 2.4s ease-in-out 1}
.nh-marquee-s{margin:0;font-size:13.5px;color:var(--nh-dim)}
.nh-marquee-s b{color:var(--nh-ink);font-weight:600}
@keyframes nh-buzz{0%,100%{opacity:1}8%{opacity:.35}10%{opacity:1}14%{opacity:.5}16%{opacity:1}}

/* the hall: a neon arch with this round's tickets hung under it */
.nh-arch{grid-area:arch;position:relative;margin:0;padding:58px 12px 14px;border-radius:999px 999px 18px 18px / 150px 150px 18px 18px;
  border:2px solid var(--nh-cold);background:linear-gradient(180deg,rgba(17,23,45,.85),rgba(6,8,18,.95));
  background-color:var(--nh-ground);box-shadow:0 18px 40px -18px rgba(6,8,18,.7),inset 0 0 0 7px var(--nh-ground),inset 0 0 0 8.5px rgba(111,141,255,.55),inset 0 0 30px rgba(111,141,255,.12)}
.nh-arch-sign{position:absolute;left:0;right:0;top:22px;text-align:center;font:400 19px/1 var(--nh-sign);letter-spacing:.22em;color:var(--nh-cold);
  text-shadow:0 0 8px rgba(111,141,255,.8)}
.nh-flicker{color:var(--nh-lime);text-shadow:0 0 8px rgba(168,255,62,.8);animation:nh-buzz 7s linear infinite}
.nh-arch-last{display:flex;align-items:center;gap:8px;margin:0 2px 6px;padding:7px 10px;border-radius:10px;border:1px dashed rgba(168,255,62,.35);
  font-size:12.5px;line-height:1.35;color:var(--nh-dim)}
.nh-arch-last-k{flex:none;font:600 9px var(--nh-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--nh-faint)}
.nh-arch-last[data-on="1"]{border:1.5px solid var(--nh-lime);background:var(--nh-lime-soft);color:var(--nh-ink);box-shadow:0 0 12px rgba(168,255,62,.25)}
.nh-arch-last[data-on="1"] .nh-arch-last-k{color:var(--nh-lime)}
.nh-arch-last b{color:var(--nh-lime);font-weight:700}
.nh-arch-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:6px 4px 10px;font:600 11px var(--nh-mono);
  text-transform:uppercase;letter-spacing:.08em;color:var(--nh-dim)}
.nh-arch-clock i{font-style:normal}
.nh-arch-clock{white-space:nowrap}
.nh-arch-clock b{font:400 16px var(--nh-sign);color:var(--nh-ink);letter-spacing:.04em}
.nh-arch-clock[data-hot="1"] b{color:var(--nh-lime);text-shadow:0 0 8px rgba(168,255,62,.6)}
.nh-rack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 8px;align-content:start}
.nh-floor{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:12px;padding-top:10px;border-top:1px dashed rgba(111,141,255,.35);
  font-size:12.5px;color:var(--nh-dim)}
.nh-floor b{color:var(--nh-ink);font-family:var(--nh-mono);font-size:12px;font-weight:600}

/* a ticket: a notched stub drawn in tube light */
.nh-tix{position:relative;height:50px;border-radius:7px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;
  border:1.5px solid rgba(111,141,255,.75);background:rgba(111,141,255,.06);color:var(--nh-ink);
  -webkit-mask:radial-gradient(circle 6px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 6px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
  box-shadow:0 0 8px rgba(111,141,255,.25);transition:transform .25s}
.nh-tix b{font:400 15px/1 var(--nh-sign);letter-spacing:.04em}
.nh-tix small{font:400 8.5px var(--nh-mono);color:var(--nh-dim);letter-spacing:.04em}
.nh-tix--mine{border-color:var(--nh-ink);background:rgba(230,236,255,.1)}
.nh-tix--mine small{color:var(--nh-ink)}
.nh-tix--next{border:1.5px dashed var(--nh-lime);background:var(--nh-lime-soft);color:var(--nh-lime);cursor:pointer;animation:nh-pulse 1.8s ease-in-out infinite}
.nh-tix--next small{color:var(--nh-lime)}
.nh-tix--ghost{border-color:rgba(111,141,255,.18);background:transparent;box-shadow:none;color:var(--nh-faint)}
.nh-tix--ghost small{color:var(--nh-faint)}
.nh-tix--more{border-style:dotted}
.nh-tix--drawn{border-color:var(--nh-lime);background:var(--nh-lime);color:#071003;box-shadow:0 0 18px rgba(168,255,62,.7)}
.nh-tix--drawn small{color:#1d3a05}
.nh-tix--sealed{opacity:.55}
.nh-tix--fresh{animation:nh-land .6s ease-out 1}
@keyframes nh-pulse{0%,100%{box-shadow:0 0 6px rgba(168,255,62,.25)}50%{box-shadow:0 0 18px rgba(168,255,62,.6)}}
@keyframes nh-land{0%{transform:translateY(-18px) scale(.9);opacity:0}100%{transform:none;opacity:1}}

/* the booth: live sentence + the slot */
.nh-booth{grid-area:booth;margin:0;padding:16px;border-radius:16px;background:var(--nh-card);border:1px solid var(--nh-rule)}
.nh-say{margin:0 0 14px;font-size:16px;line-height:1.5;color:var(--nh-pen)}
.nh-say b{font-weight:700;color:var(--nh-lime)}
.nh-slot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.nh-count{display:flex;align-items:center;gap:4px;border:1px solid var(--nh-rule);border-radius:12px;padding:4px}
.nh-count-b{width:38px;height:44px;border:0;border-radius:9px;background:var(--nh-paper);color:var(--nh-pen);font:500 20px var(--nh-body);cursor:pointer}
.nh-count-v{min-width:52px;text-align:center;line-height:1}
.nh-count-v b{display:block;font:400 26px var(--nh-sign);color:var(--nh-pen)}
.nh-count-v small{font:400 8.5px var(--nh-mono);color:var(--nh-pen2);text-transform:uppercase}
.nh-drop{height:54px;border:0;border-radius:12px;background:var(--nh-ground);color:var(--nh-lime);font:700 16px var(--nh-body);cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--nh-lime),0 0 14px rgba(168,255,62,.35)}
.nh-drop:disabled{opacity:.6;cursor:wait}
.nh-cost{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--nh-pen2)}
.nh-cost b{color:var(--nh-pen)}
.nh-purse{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.nh-plug,.nh-cash{border:1px solid var(--nh-pen2);background:transparent;color:var(--nh-pen);border-radius:999px;padding:7px 14px;font:600 12.5px var(--nh-body);cursor:pointer}
.nh-plug[data-on="1"]{border-color:var(--nh-lime);background:var(--nh-ground);color:var(--nh-lime)}
.nh-cash{border-color:var(--nh-lime);background:var(--nh-lime);color:#071003}
.nh-who{margin-top:14px;padding:12px;border-radius:12px;background:var(--nh-paper);font-size:13px;overflow-wrap:anywhere}
.nh-who code{display:block;font-size:11px;color:var(--nh-pen);margin:4px 0 8px}

/* the tape */
.nh-ticker{grid-area:ticker;margin:0;border-radius:16px;background:#03050c;border:1px solid rgba(168,255,62,.22);overflow:hidden}
.nh-ticker-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid rgba(168,255,62,.15);
  font:400 18px var(--nh-sign);color:var(--nh-ink)}
.nh-ticker-h small{font:400 11px var(--nh-body);color:var(--nh-dim)}
.nh-dot{width:9px;height:9px;border-radius:50%;background:var(--nh-faint)}
.nh-dot[data-on="1"]{background:var(--nh-lime);box-shadow:0 0 8px var(--nh-lime);animation:nh-pulse 1.4s infinite}
.nh-roll{list-style:none;margin:0;padding:6px 0;max-height:420px;overflow-y:auto;font:400 11.5px/1.55 var(--nh-mono)}
.nh-roll li{padding:7px 14px;border-bottom:1px solid rgba(111,141,255,.08);color:var(--nh-ink)}
.nh-roll li time{display:block;font-size:9.5px;color:var(--nh-faint);letter-spacing:.04em}
.nh-roll li.nh-roll-drawn{color:var(--nh-lime);background:rgba(168,255,62,.06)}
.nh-roll li.nh-roll-new{animation:nh-print .9s steps(24) 1}
.nh-roll li.nh-roll-quiet{color:var(--nh-dim);font-family:var(--nh-body);font-size:13px}
@keyframes nh-print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* the rulebook */
.nh-book{grid-area:book;margin:0;padding:18px 16px;border-radius:16px;border:1px solid var(--nh-rule);background:var(--nh-card)}
.nh-book-h{margin:0 0 10px;font:400 26px var(--nh-sign);color:var(--nh-pen)}
.nh-rulelist{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.nh-rulelist li{font-size:14.5px;line-height:1.55;color:var(--nh-pen2)}
.nh-rulelist li b{color:var(--nh-pen);font-weight:700}
.nh-rulelist li.nh-worked{padding:12px;border-radius:12px;border:1.5px solid var(--nh-lime);color:var(--nh-pen);background:rgba(6,8,18,.35)}
.nh-rulelist li.nh-worked b{color:var(--nh-lime)}
.nh-proof{margin-top:16px;padding-top:12px;border-top:1px dashed var(--nh-rule)}
.nh-proof h3{margin:0 0 6px;font:600 13px var(--nh-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--nh-pen2)}
.nh-proof p{margin:0;font-size:13px;color:var(--nh-pen2);overflow-wrap:anywhere}
.nh-proof code{font-size:11px;color:var(--nh-pen)}
.nh-ok{font-weight:700;color:var(--nh-lime)}
.nh-past{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:13px}
.nh-past small{display:block;font:400 10px var(--nh-mono);color:var(--nh-pen2);overflow-wrap:anywhere}

/* the foot */
.nh-foot{grid-area:foot;margin-top:8px;padding:14px 4px 0;border-top:1px solid var(--nh-rule);font-size:12px;color:var(--nh-pen2);display:grid;gap:8px}
.nh-foot div{display:grid;gap:2px}
.nh-foot span{font:600 9.5px var(--nh-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--nh-pen2)}
.nh-foot code{font-size:11px;color:var(--nh-pen);overflow-wrap:anywhere}
.nh-foot-links{display:flex;flex-wrap:wrap;gap:14px}
.nh-foot-links a{text-decoration:none;color:var(--nh-pen2)}
.nh-foot-links a:hover{color:var(--nh-lime)}
.nh-foot-links a.is-off{display:none}
.nh-foot p{margin:0}

.nh-toasts{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:50;display:grid;gap:6px;width:min(92vw,420px)}
.nh-toast{padding:10px 14px;border-radius:12px;background:var(--nh-wall);color:var(--nh-ink);border:1px solid var(--nh-lime);font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.6)}

/* ~720-1000: still one column, wider measure, bigger hall */
@media (min-width:640px){
  body.nh{padding:28px 28px 120px;row-gap:18px}
  .nh-dock{left:20px;right:20px;bottom:16px;padding:10px 12px}
  .nh-dock-addr{font-size:12.5px}
  .nh-lede{font-size:19px}
  .nh-figure{font-size:120px}
  .nh-marquee-k{font-size:12px;max-width:none}
  .nh-arch{padding:72px 24px 20px;border-radius:999px 999px 22px 22px / 220px 220px 22px 22px}
  .nh-arch-sign{font-size:24px;top:28px}
  .nh-rack{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 10px}
  .nh-tix{height:62px}
  .nh-tix b{font-size:18px}
  .nh-slot{grid-template-columns:auto minmax(0,1fr) auto}
  .nh-cost{grid-column:auto}
  .nh-say{font-size:17.5px}
}
/* >=1000: lede + hall + booth on the left, the tape as a tall column on the right */
@media (min-width:1000px){
  body.nh{max-width:1240px;margin:0 auto;padding:36px 36px 120px;column-gap:28px;
    grid-template-columns:minmax(0,1fr) 380px;
    grid-template-areas:"lede ticker" "arch ticker" "booth ticker" "book book" "foot foot";align-items:start}
  .nh-lede{font-size:20px}
  .nh-figure{font-size:136px}
  .nh-rack{grid-template-columns:repeat(8,minmax(0,1fr))}
  .nh-ticker{position:sticky;top:24px}
  .nh-roll{max-height:calc(100vh - 220px)}
  .nh-book{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px}
  .nh-book-h{grid-column:1/-1;margin:0}
  .nh-proof{margin-top:0;padding-top:0;border-top:0}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important} }