.solar-page { width: min(100%, 1150px); display: grid; gap: 14px; align-content: start; padding-block: 12px 26px; }
.solar-hero { text-align: center; }
.solar-hero h2 { font-size: clamp(24px, 4vw, 36px); margin-bottom: 5px; }
.solar-hero p, .solar-note { color: var(--muted); line-height: 1.5; }
.solar-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.solar-controls label { font-size: 14px; }
.solar-panel {
  display: grid; justify-items: center; gap: 10px; min-width: 0; padding: clamp(12px, 2vw, 24px);
  border: 1px solid #46577c; border-radius: 20px;
  background: radial-gradient(ellipse at 16% 12%, #2c315d, transparent 48%), #11182c;
}
.solar-panel h3 { text-align: center; font-size: clamp(19px, 3vw, 28px); }
.solar-progress { color: #ffdc91; font-weight: 700; font-size: 14px; }
.solar-trail {
  display: grid; grid-template-columns: repeat(9, minmax(64px, 1fr)); gap: 6px;
  width: 100%; overflow: auto; list-style: none; padding: 4px 2px 10px; scroll-snap-type: x proximity;
}
.solar-trail li { min-width: 0; scroll-snap-align: start; }
.solar-stop {
  display: grid; justify-items: center; align-content: end; gap: 7px;
  min-height: 96px; width: 100%; height: 100%; padding: 6px 2px;
  border: 1px solid #536484; border-radius: 12px; background: #1c2840; color: #f2f6ff;
  font: inherit; font-size: clamp(11px, 1.45vw, 15px); font-weight: 700; cursor: pointer;
}
.solar-stop[aria-pressed="true"], .solar-stop.solar-target { outline: 2px solid #ffdc91; outline-offset: -2px; background: #343047; }
.solar-stop:disabled { cursor: default; }
.solar-stop:focus-visible { outline: 3px solid #acefff; outline-offset: -3px; }
.solar-board { display: grid; justify-items: center; gap: 7px; min-height: 100px; text-align: center; max-width: 510px; }
.solar-board strong { font-size: 20px; color: #ffdc91; }
.solar-board > span:last-child, .solar-feedback, .solar-note { text-align: center; }
.solar-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.solar-feedback { min-height: 22px; color: #d7e1f3; }
.solar-stop.solar-right, .solar-choice.solar-right:disabled { background: #204c3f; border-color: #84e2ba; opacity: 1; }
.solar-stop.solar-miss, .solar-choice.solar-miss:disabled { background: #532f49; border-color: #ffa2ad; opacity: 1; }
.solar-page [hidden] { display: none; }
.solar-note { font-size: 13px; }
.solar-note a { color: #bceeff; }
.solar-photo {
  display: block; width: min(100%, 82px); height: auto; aspect-ratio: 1;
  object-fit: contain; border-radius: 8px; background: #000;
}
.solar-board .solar-photo {
  width: clamp(148px, 26vw, 220px); border: 1px solid #536484; border-radius: 16px;
}
@media (max-width: 620px) {
  .solar-hero p { font-size: 14px; }
  .solar-trail { grid-template-columns: repeat(9, 70px); }
  .solar-stop { min-height: 86px; }
  .solar-choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; }
}