:root {
  --ink: #2a2622;
  --wood-ink: rgba(58, 28, 6, 0.9);
  --ok: #2f9e4f;
  --high: #e09a16;
  --off: #c83a2c;
  --font: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  color: var(--ink);
  /* light plaster wall */
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at 50% 120%, rgba(120,100,80,.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #f3eee6 0%, #e9e2d6 100%);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body::before { /* faint plaster speckle */
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    radial-gradient(rgba(90,70,50,.10) 1px, transparent 1.4px),
    radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}
/* ceiling beam */
body::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 10px; pointer-events: none;
  background: linear-gradient(180deg, #5b4a3a, #3a2e24);
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}

#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#ropes { position: absolute; left: 0; top: 0; pointer-events: none; }

.plank {
  position: absolute; left: 0; top: 0;
  border-radius: 14px / 18px;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab;
  will-change: transform;
  box-shadow:
    0 14px 22px -6px rgba(40, 25, 10, .35),
    0 4px 8px rgba(40, 25, 10, .22);
}
.plank.dragging { cursor: grabbing; }
.plank > canvas.wood {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: inherit; display: block;
}
/* bevel / edge shading on top of the wood texture */
.plank-shadow-edge {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow:
    inset 0 2px 0 rgba(255, 230, 180, .45),
    inset 0 -5px 7px rgba(70, 30, 0, .45),
    inset 6px 0 10px rgba(70, 30, 0, .28),
    inset -6px 0 10px rgba(70, 30, 0, .28),
    inset 0 0 0 1px rgba(80, 40, 10, .55);
}
.eye { /* iron eye-bolt where a rope is tied */
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 3; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 3.5px, #2b2b2e 4px, #6d7076 5.2px, #2b2b2e 7px, transparent 7.6px);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
  pointer-events: none;
}
.engrave {
  position: absolute; inset: 0; z-index: 2; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--wood-ink); letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(255, 220, 160, .55), 0 -1px 0 rgba(30, 10, 0, .35);
  pointer-events: none; white-space: nowrap;
}
.title-text { font-size: var(--title-size, 34px); }
.mid-text { font-size: var(--mid-size, 22px); gap: .45em; }
.live-dot {
  width: .42em; height: .42em; border-radius: 50%; background: #d23b2a;
  box-shadow: 0 0 0 2px rgba(60,20,0,.35), 0 0 8px rgba(255,60,30,.8);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; box-shadow: 0 0 0 2px rgba(60,20,0,.35); } }

/* ───────── iron plates ───────── */
.plates { position: absolute; inset: 0; z-index: 2; }
.plate {
  position: absolute; border-radius: 7px; overflow: hidden;
  color: #1f2326;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.035) 1px 2px, rgba(255,255,255,0) 2px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 7px, rgba(255,255,255,.03) 7px 13px),
    linear-gradient(100deg, rgba(255,255,255,.0) 20%, rgba(255,255,255,.35) 42%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #c3c8cc 0%, #a9afb4 55%, #959ba1 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -2px 3px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(60,66,72,.55),
    0 3px 5px rgba(40, 20, 0, .45),
    0 1px 1px rgba(40, 20, 0, .4);
}
.rivet {
  position: absolute; width: 11px; height: 11px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 30%, #8a8f95 0, #3d4146 45%, #16181a 100%);
  box-shadow: 0 1px 1px rgba(255,255,255,.55), 0 -1px 1px rgba(0,0,0,.35);
}
.rivet.tl { left: 7px; top: 7px; } .rivet.tr { right: 7px; top: 7px; }
.rivet.bl { left: 7px; bottom: 7px; } .rivet.br { right: 7px; bottom: 7px; }
.plate.empty .empty-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: rgba(40,46,52,.13);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.plate-body {
  position: absolute; inset: 0; padding: 18px 22px 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 13px; line-height: 1.25;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.row, .line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row2 { display: flex; flex-direction: column; gap: 4px; }
.k { flex: none; font-weight: 700; color: #2b3035; width: 3.2em; }
.v {
  flex: 1 1 auto; min-width: 0; text-align: right; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #15181b; font-weight: 600;
}
.f-host { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11.5px; letter-spacing: -.02em; }
.bar {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(30,34,38,.28);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.5);
}
.bar b {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(180deg, #5fd07c, var(--ok));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  transition: width .6s ease, background .3s;
}
.bar b.warn { background: linear-gradient(180deg, #f4c04e, var(--high)); }
.bar b.crit { background: linear-gradient(180deg, #ef7262, var(--off)); }
.chart-btn {
  flex: none; font: inherit; font-size: 12px; font-weight: 700; color: #f2f2f2;
  padding: 3px 10px; border-radius: 5px; cursor: pointer;
  border: 1px solid #2c3136;
  background: linear-gradient(180deg, #5d646b, #3a4046);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.4);
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  touch-action: manipulation;
}
.chart-btn:active { transform: translateY(1px); }
.status { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 7px; font-weight: 800; font-size: 14px; }
.led {
  width: 11px; height: 11px; border-radius: 50%; background: #888;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.4), 0 0 0 2px rgba(0,0,0,.18);
}
.plate[data-state="ok"] .led { background: radial-gradient(circle at 40% 35%, #b8ffc9, #26b14d 60%); box-shadow: 0 0 8px #34d15f, 0 0 0 2px rgba(0,0,0,.2); }
.plate[data-state="ok"] .f-status { color: #1b7a37; }
.plate[data-state="high"] .led { background: radial-gradient(circle at 40% 35%, #ffe7a8, #e69a12 60%); box-shadow: 0 0 8px #ffb52e, 0 0 0 2px rgba(0,0,0,.2); }
.plate[data-state="high"] .f-status { color: #9a5d00; }
.plate[data-state="offline"] .led { background: radial-gradient(circle at 40% 35%, #ffb3a8, #c8301f 60%); box-shadow: 0 0 8px #ff4b36, 0 0 0 2px rgba(0,0,0,.2); }
.plate[data-state="offline"] .f-status { color: #a3241a; }
.plate[data-state="offline"] .plate-body .v:not(.f-host) { color: rgba(20,24,27,.45); }
.sub { font-size: 11px; color: #3c4349; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }

/* latency chart popover — lives on the plate, moves with the plank */
.chart-pop {
  position: absolute; inset: 8px; z-index: 5; border-radius: 6px;
  background: linear-gradient(180deg, #23282d, #1a1e22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.4);
  color: #dfe5ea; display: flex; flex-direction: column; padding: 8px 10px;
}
.chart-pop[hidden] { display: none; }
.chart-hd { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; }
.chart-close {
  font: inherit; font-size: 18px; line-height: 1; width: 26px; height: 26px; border-radius: 5px; cursor: pointer;
  color: #dfe5ea; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  touch-action: manipulation;
}
.chart-cv { flex: 1; width: 100%; min-height: 0; display: block; margin: 6px 0 4px; }
.chart-ft { font-size: 11px; color: #9fb0bd; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#foot {
  position: fixed; right: 12px; bottom: 10px; font-size: 11.5px; color: rgba(60,50,40,.7);
  pointer-events: none; text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
@media (max-width: 640px) {
  .eye { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: radial-gradient(circle at 50% 50%, transparent 3px, #2b2b2e 3.5px, #6d7076 4.6px, #2b2b2e 6px, transparent 6.6px); }
  .title-text { padding-bottom: 6px; }
  #foot { left: 0; right: 0; text-align: center; bottom: 8px; }
  .plate-body { padding: 16px 18px 12px; }
}