@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&family=Roboto+Slab:wght@800;900&display=swap');

:root {
  --paper:#f3e4ba;
  --ink:#1f1009;
  --night:#0f2321;
  --wood:#365f57;
  --brass:#c6974a;
  --red:#d85540;
  --green:#4f9f86;
  --panel: #241a0f;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 50% -18%, #4e9f9f 0, transparent 38%),
    repeating-linear-gradient(90deg,#0f2625 0 3px,#102e2d 3px 7px);
  font-family:"Barlow Condensed",sans-serif;
}

.counter-room {
  width:100%;
  margin:0;
  padding:clamp(22px,3.5vw,48px) 20px 64px;
}

.counter-wrap {
  width:min(860px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  align-items:start;
}

.counter-board {
  padding:clamp(16px,2.3vw,24px);
  background:linear-gradient(105deg,#ddc78f,#f0dfac 48%,#c7ae6d);
  border:8px solid #2a180b;
  box-shadow:0 20px 65px #000b,inset 0 0 0 3px #9d702f,inset 0 0 45px #6c481a55;
}

.counter-board > header {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  border-bottom:3px solid var(--ink);
}

p { margin:.35rem 0; } 
h1, h2 { margin:0; font-family:"Roboto Slab",Georgia,serif; text-transform:uppercase; }
.counter-board h2 { font-size:clamp(27px,3.2vw,38px); line-height:.95; }

.counter-board > header p, .counter-board > header span, .machine-card header span { text-transform:uppercase; letter-spacing:.12em; font-weight:800; }

.live {
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:10px;
  white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
}

.live i, nav i { width:9px; height:9px; display:inline-block; border-radius:50%; background:var(--green); box-shadow:0 0 8px #3d7b4b; }

#machineNav { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; }

#machineNav a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  color:var(--paper);
  background:var(--ink);
  text-decoration:none;
  font:600 12px/1 "IBM Plex Mono",monospace;
  text-transform:uppercase;
}

.meters {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}

.meters article {
  min-width:0;
  padding:10px;
  color:var(--paper);
  background:var(--ink);
  border:2px solid #76552a;
}

.meters span {
  display:block;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}

.meters strong {
  display:block;
  margin:.25rem 0;
  color:#e7b94e;
  font:800 clamp(18px,2.4vw,27px)/1 "Barlow Condensed",sans-serif;
  font-variant-numeric:tabular-nums;
}

.meters small {
  color:#bda980;
  font-size:11px;
  line-height:1.15;
}

.machines {
  display:grid;
  gap:16px;
  margin-top:20px;
}

.machine-card {
  scroll-margin-top:18px;
  padding:clamp(13px,2vw,20px);
  border:3px solid #3c2815;
  background:#e8d7a5aa;
  box-shadow:inset 0 0 24px #68461333;
}

.machine-card > header {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  border-bottom:none;
}

.machine-card > header a {
  margin-bottom:4px;
  color:var(--ink);
  font:700 13px "IBM Plex Mono",monospace;
  text-transform:uppercase;
  text-decoration:none;
}

.machine-card.is-offline { opacity:.72; }

.rtp { margin:12px 0; }
.rtp > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.rtp span { font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.rtp strong { color:var(--red); font:900 clamp(32px,5vw,48px)/.9 "Roboto Slab",serif; font-variant-numeric:tabular-nums; }
.rtp p { font-size:14px; }

.track {
  height:10px;
  padding:2px;
  border:2px solid var(--ink);
  background:#b39a63;
}

.track i { display:block; height:100%; max-width:100%; background:linear-gradient(90deg,var(--red),#d8a739,var(--green)); transition: width .5s ease; }

.machine-card details {
  margin-top:12px;
  border-top:2px solid #5f4627;
}

.machine-card summary {
  padding:10px 0 7px;
  cursor:pointer;
  font:800 13px "IBM Plex Mono",monospace;
  text-transform:uppercase;
}

.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:6px 8px; border-bottom:1px solid #8e7444; text-align:right; white-space: nowrap; }
th { text-transform:uppercase; letter-spacing:.08em; }
th:first-child, td:first-child { text-align:left; }
th { color:#857959; font:650 9px/1 "IBM Plex Mono",sans-serif; }
tbody tr:hover { background: #d7a9360a; }
tbody td:nth-child(6) { color:var(--brass); }
tbody td:last-child { color:#ff8061; }

.counter-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:22px;
  padding-top:15px;
  border-top:3px solid var(--ink);
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
}

.counter-footer a { color:var(--ink); font-weight:700; }

.counter-note {
  order:-1;
  color:var(--paper);
  display:grid;
  grid-template-columns:minmax(180px,.7fr) minmax(280px,1.3fr);
  gap:10px 36px;
  align-items:end;
  padding:0 8px;
}
.counter-note .eyebrow { margin:0; color:#e0b956; font:600 9px/1.4 "IBM Plex Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
.counter-note h1 { grid-column:1; margin:8px 0 0; color:var(--paper); font:800 clamp(38px,5vw,58px)/.82 "Barlow Condensed",sans-serif; letter-spacing:-.02em; text-transform:uppercase; }
.counter-note > p:not(.eyebrow,.origin) { grid-column:2; grid-row:1 / 3; margin:0; color:#dfcfac; font-size:17px; line-height:1.35; }
.counter-note .summary { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); margin:14px 0 0; border-block:1px solid #d9b55d66; }
.counter-note .summary article { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 20px; padding:12px 0; border-bottom:1px solid #d9b55d33; }
.counter-note .summary article { padding-inline:12px; border-right:1px solid #d9b55d33; border-bottom:0; }
.counter-note .summary article:first-child { padding-left:0; }
.counter-note .summary article:last-child { padding-right:0; border:0; }
.counter-note .summary span { color:#ac9568; font:600 9px/1.3 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.counter-note .summary strong { grid-row:1 / 3; grid-column:2; color:#e7b94e; font:800 24px/1 "Barlow Condensed",sans-serif; font-variant-numeric:tabular-nums; text-align:right; }
.counter-note .summary small { color:#8f8067; font-size:12px; }
.node-card { grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:10px 12px; border:1px solid #d9b55d66; background:#07181788; }
.node-card > i { width:10px; height:10px; border-radius:50%; background:var(--node-color,var(--green)); box-shadow:0 0 9px var(--node-color,var(--green)); }
.node-card > i.off { background:#7d6d55; box-shadow:none; }
.node-card div { min-width:0; display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:4px 10px; }
.node-card span, .node-card small { color:#ac9568; font:600 9px/1.3 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.node-card strong { color:var(--paper); font-size:17px; }
.node-card code { overflow:hidden; color:#8fbea9; font:500 10px/1.2 "IBM Plex Mono",monospace; text-overflow:ellipsis; }
.node-card small { color:#d0bc91; white-space:nowrap; }
.counter-note dl, .counter-note .origin { display:none; }
.counter-note dl div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid #d9b55d33; }
.counter-note dl div:last-child { border:0; }
.counter-note dt { color:#ac9568; font:600 9px/1.3 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.counter-note dd { margin:0; color:var(--paper); font-weight:700; text-align:right; }
.counter-note .origin { margin:0; color:#a99879; font-size:14px; line-height:1.4; }

@media(max-width:780px){
  .counter-room { padding-inline:11px; }
  .counter-wrap { max-width:650px; }
  .counter-note { display:block; padding:20px 12px 0; }
  .counter-note h1 { font-size:52px; }
  .counter-note > p:not(.eyebrow,.origin) { margin-top:16px; font-size:17px; }
  .counter-note .summary { display:grid; grid-template-columns:repeat(2,1fr); }
  .counter-note .summary article:nth-child(2) { border-right:0; }
  .counter-note .summary article:nth-child(-n+2) { border-bottom:1px solid #d9b55d33; }
  .node-card { margin-top:10px; }
  .counter-board { border-width:4px; }
  .meters { grid-template-columns:repeat(2,1fr); }
  .rtp > div:first-child { align-items:start; flex-direction:column; }
  .rtp strong { font-size:54px; }
  .counter-footer { flex-direction:column; }
}

@media(max-width:440px){
  .node-card { grid-template-columns:auto 1fr; }
  .node-card small { grid-column:2; }
  .meters { grid-template-columns:1fr; }
  .counter-board > header { align-items:start; flex-direction:column; }
  .live { padding-bottom:8px; }
}