/* Send a picture through a storm: the panel's figures and the small damage curve. */
.storm-readout {
  border: 1px solid #3a4658;
  background: #121a25;
  padding: 14px 16px;
  border-radius: 9px;
}
.storm-figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  font-variant-numeric: tabular-nums;
}
.storm-value {
  font-weight: 600;
  text-align: right;
}
.storm-curve-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #2a3544;
}
.storm-curve {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: 6px;
}

/* The presets' badges say what the percentage counts: "+75%", and under it, "extra bits". */
body[data-room='storm'] .scene-presets .number {
  text-align: right;
  line-height: 1;
}
body[data-room='storm'] .scene-presets .number small {
  display: block;
  margin-top: 4px;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
}