/* 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 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{display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line); cursor:pointer}
.order input{width:16px; height:16px; margin-top:3px; accent-color:var(--phos)}
#dropRange{width:min(340px,100%); accent-color:var(--amber); margin:0 0 6px 28px}
.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}