/* Stopwell — an LED departure board for a stopping game. */
:root{
  --ground:#05080B;
  --panel:#080D11;
  --etch:#101820;
  --dot:#16211F;          /* an unlit lamp */
  --lit:#00E0A4;          /* the one accent */
  --ink:#E6F2EE;
  --mute:#7E918C;
  --faint:#455351;
  --display:'Doto', 'Roboto Mono', ui-monospace, monospace;
  --body:'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
  --railh:48px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--railh);
  overflow-x:hidden;
}
a{color:inherit}
code{font-family:var(--body);font-size:12px;word-break:break-all}
button{font-family:var(--body);cursor:pointer}

/* ---------- the fixed buy rail: the ticker is never more than a glance away ---------- */
.railbuy{
  position:fixed;top:0;left:0;right:0;z-index:40;height:var(--railh);
  display:flex;align-items:center;gap:10px;
  padding:0 12px;
  background:rgba(5,8,11,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--etch);
}
.railbuy-id{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
.railbuy-id img{border-radius:6px;display:block}
.railbuy-id span{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:.06em}
.railbuy-now{
  flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;text-align:center;
}
@media (max-width:560px){ .railbuy-now{display:none} }
.railbuy-go{
  flex:0 0 auto;text-decoration:none;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;border-radius:999px;
  background:var(--lit);color:#02150F;
  box-shadow:0 0 22px rgba(0,224,164,.28);
}
.railbuy-go.cold{background:transparent;color:var(--faint);border:1px solid var(--etch);box-shadow:none;cursor:default}

/* ---------- ways ---------- */
.ways{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:14px 14px 0;max-width:1180px;margin:0 auto;
}
.ways a,.ways button{
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--mute);
  padding:7px 10px;border-radius:7px;border:1px solid transparent;background:none;
}
.ways a.on{color:var(--lit);border-color:var(--etch);background:var(--panel)}
.ways button{margin-left:auto;border:1px solid var(--etch);color:var(--ink)}
.ways button.on{color:var(--lit)}

/* ---------- slab ---------- */
.slab{max-width:1180px;margin:0 auto;padding:14px 14px 40px;display:grid;gap:14px}
.lede{padding:6px 2px 0}
.lede h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(30px,8.4vw,46px);line-height:1.02;letter-spacing:-.01em;margin:0 0 8px;
}
.lede p{margin:0;color:var(--mute);font-size:13px;max-width:46ch}

/* ---------- the lamp: the one object ---------- */
.lamp{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,224,164,.07), transparent 60%),
    var(--panel);
  border:1px solid var(--etch);border-radius:16px;
  padding:18px 16px 16px;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:9px 9px;
  background-position:center top;
  overflow:hidden;
}
.lamp-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.lamp-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.lamp-tag b{color:var(--lit);font-weight:500}
.numeral{
  font-family:var(--display);font-weight:900;
  font-size:clamp(96px,32vw,176px);line-height:.86;
  letter-spacing:-.02em;color:var(--lit);
  text-shadow:0 0 36px rgba(0,224,164,.35);
  display:block;text-align:center;margin:6px 0 2px;
  font-variant-numeric:tabular-nums;
}
.numeral.off{color:var(--faint);text-shadow:none}
.numeral.pop{animation:land .5s ease-out}
@keyframes land{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}100%{transform:none}}
.worth{text-align:center;font-size:13px;color:var(--ink);min-height:20px}
.worth b{color:var(--lit)}
.worth .gone{color:var(--mute)}
.tick{height:4px;border-radius:4px;background:var(--etch);overflow:hidden;margin:14px 0 12px}
.tick i{display:block;height:100%;background:var(--lit);width:0;transition:width .9s linear}
.key{
  display:block;width:100%;border:0;border-radius:12px;
  font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.12em;text-transform:uppercase;
  padding:17px 12px;background:var(--lit);color:#02150F;
  box-shadow:0 0 28px rgba(0,224,164,.22);
}
.key[disabled]{background:var(--etch);color:var(--faint);box-shadow:none;cursor:not-allowed}
.key.ghost{background:transparent;color:var(--lit);border:1px solid var(--lit);box-shadow:none}
.keynote{text-align:center;font-size:11px;color:var(--mute);margin-top:9px;min-height:16px}

/* ---------- the strip: the tape of twelve ---------- */
.strip{background:var(--panel);border:1px solid var(--etch);border-radius:16px;overflow:hidden}
.cap{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--etch);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.cap a{color:var(--lit);text-decoration:none;letter-spacing:.08em}
.cell{
  display:grid;grid-template-columns:34px 62px 1fr auto;align-items:center;gap:10px;
  padding:9px 14px;border-bottom:1px solid rgba(16,24,32,.7);
}
.cell:last-child{border-bottom:0}
.cell-n{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.cell-f{
  font-family:var(--display);font-weight:700;font-size:26px;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.cell-t{font-size:11px;color:var(--mute)}
.cell-s{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.cell.live{background:rgba(0,224,164,.055)}
.cell.live .cell-f{color:var(--lit)}
.cell.dark .cell-f{color:var(--dot)}
.cell.dark .cell-t{color:var(--faint)}
.cell.new{animation:print .45s ease-out}
@keyframes print{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.place{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--lit);color:var(--lit);border-radius:4px;padding:2px 5px;
}
.place.p2{opacity:.62}.place.p3{opacity:.38}

/* ---------- the room + the wire ---------- */
.room{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--etch);border:1px solid var(--etch);border-radius:16px;overflow:hidden}
.room div{background:var(--panel);padding:13px 14px}
.room dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 4px}
.room dd{margin:0;font-family:var(--body);font-weight:700;font-size:21px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wire{background:var(--panel);border:1px solid var(--etch);border-radius:16px;overflow:hidden}
.wire ol{list-style:none;margin:0;padding:0}
.wire li{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid rgba(16,24,32,.7);font-size:12px}
.wire li:last-child{border-bottom:0}
.wire .who{color:var(--mute);font-size:11px}
.wire .what{color:var(--ink)}
.wire .what b{color:var(--lit)}
.wire .when{margin-left:auto;color:var(--faint);font-size:11px}
.hollow{padding:22px 14px;text-align:center;color:var(--faint);font-size:12px}

/* ---------- the primer (stands in the aside before anything is live) ---------- */
.primer{background:var(--panel);border:1px solid var(--etch);border-radius:16px;padding:14px}
.primer h4{margin:0 0 8px;font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:.04em}
.primer dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0 0 10px;font-size:12px}
.primer dt{color:var(--mute)}
.primer dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.primer p{margin:0;color:var(--mute);font-size:12px}
.primer a{color:var(--lit)}

/* ---------- prose ---------- */
.rules{display:grid;gap:10px}
.rules section{background:var(--panel);border:1px solid var(--etch);border-radius:14px;padding:14px}
.rules h3{margin:0 0 6px;font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:.04em}
.rules p{margin:0;color:var(--mute);font-size:13px}
.worked{background:var(--panel);border:1px dashed var(--etch);border-radius:14px;padding:14px;font-size:13px;color:var(--mute)}
.worked b{color:var(--lit)}
.worked table{width:100%;border-collapse:collapse;margin-top:9px;font-size:12px}
.worked th,.worked td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--etch);color:var(--ink)}
.worked th{color:var(--mute);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.scrollx{overflow-x:auto}

/* ---------- the service plate bolted under the board ---------- */
.plate{
  max-width:1180px;margin:0 auto 46px;padding:16px 14px;
  border-top:1px solid var(--etch);
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:9px 9px;
}
.plate-h{margin:0 0 10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:400}
.plate-grid{display:grid;grid-template-columns:58px 1fr;gap:7px 12px;margin:0;font-size:11px;align-items:baseline}
.plate-grid dt{letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.plate-grid dd{margin:0;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.plate-grid a{color:var(--lit);text-decoration:none}
.plate-sig{margin:14px 0 0;font-size:11px;color:var(--faint)}

/* ---------- sheet + toast ---------- */
#hatch{position:fixed;inset:0;z-index:60;background:rgba(2,5,7,.78);display:flex;align-items:flex-end;justify-content:center}
#hatch[hidden]{display:none}
.sheet{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--etch);border-radius:16px 16px 0 0;padding:16px}
.sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sheet-top h3{margin:0;font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:.04em}
.sheet-top button{background:none;border:0;color:var(--mute);font-size:24px;line-height:1}
.fine{color:var(--mute);font-size:12px;margin-bottom:12px}
.fine b{color:var(--lit)}
.warn{color:#FF8A6B;font-size:12px;margin-bottom:10px}
.wl{display:grid;gap:8px}
.wl button{display:flex;align-items:center;gap:9px;padding:11px;border-radius:10px;border:1px solid var(--etch);background:var(--ground);color:var(--ink);font-size:13px}
.wl img{width:20px;height:20px;border-radius:5px}
.blip{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:70;background:var(--panel);border:1px solid var(--lit);color:var(--ink);padding:10px 14px;border-radius:999px;font-size:12px;max-width:90vw}

/* ---------- a wider measure, then a real recomposition ---------- */
@media (min-width:720px){
  body{font-size:15px}
  .slab{padding:18px 22px 54px;gap:18px}
  .ways{padding:18px 22px 0}
  .lamp{padding:26px 24px 22px}
  .numeral{font-size:clamp(150px,20vw,210px)}
  .worth{font-size:15px}
  .key{font-size:26px;padding:20px}
  .room{grid-template-columns:repeat(4,1fr)}
  .rules{grid-template-columns:repeat(2,1fr)}
  .plate{padding:20px 22px}
  .sheet{border-radius:16px;margin-bottom:6vh}
  #hatch{align-items:center}
}
@media (min-width:1000px){
  /* the page recomposes: the board and its key on the left, the tape and the room's traffic beside it */
  .slab{
    grid-template-columns:minmax(0,1fr) 384px;
    column-gap:18px;
    align-items:start;
    grid-template-areas:
      "lede   strip"
      "lamp   strip"
      "room   wire"
      "rules  primer"
      "worked primer";
  }
  .lede{grid-area:lede}
  .lamp{grid-area:lamp}
  .room{grid-area:room}
  .rules{grid-area:rules}
  .worked{grid-area:worked}
  .strip{grid-area:strip}
  .wire{grid-area:wire}
  .primer{grid-area:primer}
  .strip,.wire,.primer{align-self:start}
  .lede h1{font-size:52px}
  .numeral{font-size:190px}
  .railbuy{padding:0 22px}
  .railbuy-now{font-size:12px}
}