/* Nightshift — a guard post at 3am. The booth is lit and fixed on the left, the wall of monitors
   runs on the right, and the log crawls along the bottom edge all night. */

@font-face{
  font-family:"Pixelify";
  src:url("/fonts/PixelifySans-Medium.ttf") format("truetype");
  font-weight:500; font-display:block;
}

:root{
  --night:#060a07;
  --panel:#0c120e;
  --panel-2:#111a14;
  --line:#1e2b23;
  --phos:#39ff6a;
  --phos-dim:#1f8c3b;
  --amber:#ffb300;
  --concrete:#2a2f2c;
  --bone:#c9d6cd;
  --red:#ff4d4d;
  --pix:"Pixelify", ui-monospace, monospace;
  --mono:ui-monospace, "SF Mono", Consolas, monospace;
  --booth:clamp(230px, 24vw, 340px);
  --logbar:74px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--night); color:var(--bone);
  font-family:var(--mono); font-size:15px; line-height:1.55;
  padding-bottom:var(--logbar);
}
img{image-rendering:pixelated}
h1,h2{font-family:var(--pix); font-weight:500; margin:0; color:var(--phos)}
b{color:var(--phos)}
code{font-family:var(--mono); color:var(--phos); background:#39ff6a14; padding:3px 7px}
.dim{color:#7d8c84}
.fine{font-size:12px; color:#7d8c84}

.scan{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  background:repeating-linear-gradient(to bottom, #0000 0 2px, #00000059 2px 4px);
  mix-blend-mode:multiply;
}
@keyframes flicker{0%,96%{opacity:1} 97%{opacity:.86} 98%{opacity:1} 99%{opacity:.92} 100%{opacity:1}}
h1,h2,.no-signal{animation:flicker 7s linear infinite}

/* ---------- the booth ---------- */
.booth{
  position:fixed; left:0; top:0; bottom:var(--logbar); width:var(--booth); z-index:6;
  background:var(--panel); border-right:1px solid var(--line);
  background-image:radial-gradient(120% 60% at 50% 8%, #ffb30026 0%, #0000 60%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:16px 18px 20px; overflow:hidden;
}
.booth-clock{width:100%; display:flex; align-items:baseline; justify-content:space-between}
#clock{font-family:var(--pix); font-size:26px; color:var(--amber); font-variant-numeric:tabular-nums}
.booth-duty{font-family:var(--pix); font-size:14px; color:#54665c}
.guard{width:100%; max-width:260px; margin-top:auto}
.booth-plate{
  width:100%; display:flex; justify-content:space-between; gap:10px;
  border-top:1px solid var(--line); padding-top:10px; font-size:12px;
}
.plate-name{font-family:var(--pix); color:var(--amber)}
.plate-state{color:#7d8c84}
.booth .btn{width:100%}
.booth .fine{margin:0; text-align:center}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--pix); font-size:14px; letter-spacing:.5px;
  color:var(--night); background:var(--phos); border:0; padding:10px 16px; cursor:pointer;
}
.btn:hover{background:#7dffa3}
.btn[disabled]{background:var(--concrete); color:#6a776f; cursor:not-allowed}
.btn-small{font-size:12px; padding:6px 10px}
.btn-hire{background:var(--amber)}
.btn-hire:hover{background:#ffcb4d}

/* ---------- the post ---------- */
.post{margin-left:var(--booth); padding:26px clamp(18px,3vw,40px) 40px; max-width:1180px}
.post h1{font-size:clamp(38px,5vw,64px); line-height:1; text-shadow:0 0 20px #39ff6a30}
.lede{margin:14px 0 30px; max-width:64ch}

section{margin-bottom:34px}
.wall-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px}
h2{font-size:20px}

/* ---------- the explainer ---------- */
.reel-frame{position:relative; background:#000; line-height:0; border:1px solid var(--line)}
.reel-frame video{width:100%; height:auto; display:block}
/* a muted autoplay nobody unmutes is a guide nobody hears */
.reel-sound{position:absolute; left:12px; top:12px; z-index:2}
.reel-frame.loud .reel-sound{opacity:.5}
.reel-frame.loud .reel-sound:hover{opacity:1}

/* ---------- the wall of monitors ---------- */
.screens{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:10px}
.screen{
  position:relative; aspect-ratio:16/10;
  background:var(--panel); border:1px solid var(--line);
  padding:10px; overflow:hidden; display:flex; flex-direction:column; gap:4px;
}
.screen.hit{border-color:var(--red)}
.screen-sym{font-family:var(--pix); font-size:15px; color:var(--phos)}
.screen-sub{font-size:11px; color:#5d6f65; word-break:break-all}
.screen-val{margin-top:auto; font-size:18px; font-variant-numeric:tabular-nums}
.screen-note{font-size:11px; color:#7d8c84}
.screen-bar{height:5px; background:#1a241d; margin-top:6px}
.screen-bar i{display:block; height:100%; background:var(--phos-dim)}
.screen.hit .screen-bar i{background:var(--red)}
.noise{align-items:center; justify-content:center}
.noise::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(0deg, #12201a 0 1px, #0a110d 1px 2px);
}
.no-signal{position:relative; font-family:var(--pix); font-size:13px; color:#4c6657; letter-spacing:1px}

/* ---------- orders ---------- */
.orders .dim{margin:4px 0 8px}
.order-mark{
  flex:none; width:22px; font-size:11px; letter-spacing:.08em; color:var(--phos); opacity:.7;
}
.screen-act{
  position:absolute; right:8px; top:8px; font:inherit; font-size:10px; letter-spacing:.1em;
  padding:3px 7px; background:transparent; color:var(--phos); border:1px solid currentColor; cursor:pointer;
}
.screen-act[disabled]{opacity:.35; cursor:default}
.screen.on{box-shadow:inset 0 0 0 1px var(--phos)}
.order{display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line)}
#dropRange{width:min(340px,100%); accent-color:var(--amber); margin:0 0 6px 34px}
.hours{display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px}
.hours select{
  font-family:var(--pix); font-size:14px; background:var(--panel-2);
  color:var(--phos); border:1px solid var(--line); padding:6px 8px;
}

/* ---------- permits ---------- */
.permit-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-top:10px}
.permit-grid p{margin:0; font-size:13px; border-left:2px solid var(--phos-dim); padding:8px 0 8px 12px}

/* ---------- the log along the bottom ---------- */
.logbar{
  position:fixed; left:0; right:0; bottom:0; height:var(--logbar); z-index:7;
  background:#040705; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:16px; padding:0 16px;
}
.logbar-tag{font-family:var(--pix); font-size:13px; color:var(--amber); letter-spacing:2px; flex:none}
.log-list{
  list-style:none; margin:0; padding:0; flex:1; min-width:0;
  display:flex; gap:26px; overflow-x:auto; scrollbar-width:none; font-size:13px;
}
.log-list::-webkit-scrollbar{display:none}
.log-list li{display:flex; gap:10px; white-space:nowrap; align-items:center}
.log-time{color:var(--amber); font-variant-numeric:tabular-nums}
.log-tag{font-family:var(--pix); font-size:11px; color:var(--phos-dim)}
.logbar-ca{display:flex; align-items:center; gap:10px; flex:none}
.links{display:flex; gap:14px; font-family:var(--pix); font-size:13px}
.links a{color:var(--phos); text-decoration:none}
.links a:hover{color:var(--amber)}

@media (max-width:900px){
  :root{--booth:0px; --logbar:96px}
  .booth{
    position:static; width:auto; flex-direction:row; align-items:center; flex-wrap:wrap;
    border-right:0; border-bottom:1px solid var(--line); bottom:auto;
  }
  .guard{max-width:120px; margin:0}
  .booth .btn{width:auto}
  .booth-clock{width:auto}
  .post{margin-left:0}
  .logbar{flex-wrap:wrap; height:auto; padding:8px 14px}
}

/* links that exist but lead nowhere until the coin launches */
.links a.soon{opacity:.4; pointer-events:none; cursor:default}

/* a coin the index has not caught up with yet, added by hand */
.add-coin{
  display:inline-block; margin-top:10px; cursor:pointer;
  background:transparent; border:1px dashed currentColor; opacity:.7;
  font:inherit; font-size:12px; padding:6px 10px; color:inherit;
}
.add-coin:hover{opacity:1}