:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #07080c; color: #d7dbe4;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px;
}
h1 { font-size: 15px; margin: 0; letter-spacing: .06em; }
h1 span { color: #ff8a3d; }
.hyp {
  max-width: 900px; color: #8f98ab; border-left: 2px solid #ff8a3d;
  padding: 4px 10px; background: #0c0f16;
}
.hyp b { color: #ffb072; }
.wrap { display: flex; gap: 12px; align-items: flex-start; }
canvas { background: #0b0d12; border: 1px solid #232838; image-rendering: pixelated; cursor: crosshair; }
.panel { display: flex; flex-direction: column; gap: 8px; min-width: 250px; }
.card { background: #0c0f16; border: 1px solid #1c2130; padding: 8px 10px; }
.card h3 { margin: 0 0 6px; font-size: 11px; color: #6f7a90; letter-spacing: .12em; text-transform: uppercase; }
.sw { display: flex; flex-wrap: wrap; gap: 4px; }
.sw button {
  display: flex; align-items: center; gap: 4px; background: #121722; color: #cfd5e2;
  border: 1px solid #232a3a; padding: 3px 6px; cursor: pointer; font: inherit; font-size: 11px;
}
.sw button.on { border-color: #ff8a3d; background: #1d1409; color: #ffd9b8; }
.dot { width: 9px; height: 9px; display: inline-block; }
button.act {
  background: #121722; color: #cfd5e2; border: 1px solid #232a3a;
  padding: 4px 9px; cursor: pointer; font: inherit; font-size: 12px;
}
button.act:hover { border-color: #ff8a3d; }
.stat { display: flex; justify-content: space-between; gap: 10px; }
.stat b { color: #fff; font-weight: 600; }
.log { height: 150px; overflow: hidden; font-size: 11px; color: #7d8699; }
.log div { border-bottom: 1px dotted #171c28; padding: 1px 0; }
.log .boom { color: #ff9c3a; } .log .revive { color: #79f2a0; }
.log .phase { color: #7fe9ff; } .log .react { color: #b3a2ff; }
.keys { color: #6f7a90; font-size: 11px; }
.slot { display: flex; gap: 6px; }
.slot .box {
  flex: 1; border: 1px dashed #2a3244; padding: 5px; min-height: 46px; font-size: 11px;
}
.slot .box.on { border-style: solid; border-color: #ff8a3d; }
.pred { font-size: 15px; color: #ffd08a; }
.bar { height: 6px; background: #171c28; margin-top: 3px; }
.bar i { display: block; height: 100%; background: #ff8a3d; }
a { color: #7fe9ff; }