/* The sensor strip (lobby-sensors.js, issue #393): pair once, watch the numbers move. The lobby
   mounts it as step 1; the FTP and equipment tests mount the same strip in their card (PT5).
   Linked by index.html and every game shell; the token fallbacks cover the shells, which don't
   load base.css. Wraps naturally, so it needs no mobile-only override. */
.lobby-sensor-strip {
  border: 2px solid var(--ink, #1d1a14);
  border-radius: var(--r-md, 10px);
  background: var(--paper-warm, #f3ecd6);
  box-shadow: 3px 3px 0 var(--ink, #1d1a14);
  padding: 10px 14px;
}
.lobby-sensor-strip[hidden] {
  display: none;
}
.lss-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.lss-head strong {
  font-family: var(--marker, 'Permanent Marker', 'Architects Daughter', cursive);
  font-size: 1.15rem;
}
.lss-sub {
  color: var(--ink-soft, #4a463d);
  font-family: var(--hand, 'Caveat', 'Patrick Hand', cursive);
  font-size: 1rem;
}
.lss-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.lss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 320px;
  min-width: 0;
}
.lss-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  border: 2px dashed var(--ink-mute, #8a8678);
  border-radius: 999px;
  background: var(--paper, #fbf7ec);
  font-size: 0.95rem;
}
.lss-chip--on {
  border-style: solid;
  border-color: var(--accent-lime, #6fa13f);
}
.lss-chip-icon {
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
}
.lss-chip-value {
  font-family: var(--mono, 'VT323', monospace);
  font-size: 1.2rem;
  min-width: 3.5em;
  text-align: right;
  padding-right: 6px;
}
.lss-connect-btn {
  font-family: var(--hand, 'Caveat', 'Patrick Hand', cursive);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid var(--ink, #1d1a14);
  border-radius: 999px;
  padding: 1px 10px;
  background: var(--accent-blue, #6fb4db);
  color: var(--ink, #1d1a14);
}
.lss-connect-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.lss-watts {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono, 'VT323', monospace);
  color: var(--ink-mute, #8a8678);
}
.lss-watts-num {
  display: inline-block;
  font-size: 2.4rem;
  line-height: 1;
  min-width: 2.2ch;
  text-align: right;
}
.lss-watts-unit {
  font-size: 1.2rem;
}
.lss-watts-est {
  font-family: var(--hand, 'Caveat', 'Patrick Hand', cursive);
  font-size: 0.9rem;
  color: var(--ink-soft, #4a463d);
}
.lss-watts--live {
  color: var(--ink, #1d1a14);
}
.lss-watts--live .lss-watts-num {
  color: var(--accent-red, #d93a25);
  animation: lssPulse 1.1s ease-in-out infinite;
}
@keyframes lssPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}
.lss-ready {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.lss-ready-hint {
  font-family: var(--hand, 'Caveat', 'Patrick Hand', cursive);
  font-size: 0.9rem;
  color: var(--ink-soft, #4a463d);
  max-width: 16em;
}
.lss-nometer-link {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--hand, 'Caveat', 'Patrick Hand', cursive);
  font-size: 0.95rem;
  color: var(--ink-soft, #4a463d);
  text-decoration: underline dotted;
  cursor: pointer;
}
/* Readiness, shown as a status on every tandem. */
.lobby-ready-chip {
  flex: none;
  font-family: var(--hand, 'Caveat', 'Patrick Hand', cursive);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0 8px;
  border-radius: 999px;
  border: 2px solid var(--ink, #1d1a14);
  white-space: nowrap;
}
.lobby-ready-chip--ready {
  background: var(--accent-lime, #6fa13f);
  color: #fff;
}
.lobby-ready-chip--waiting {
  background: var(--paper, #fbf7ec);
  color: var(--ink-mute, #8a8678);
  border-style: dashed;
  border-color: var(--ink-mute, #8a8678);
}
@media (prefers-reduced-motion: reduce) {
  .lss-watts--live .lss-watts-num {
    animation: none;
  }
}