.modes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.stage:has(.pinball-view:not([hidden])), .stage:has(.spotlight-view:not([hidden])) { display: block; }
.pinball-view { width:100%; }
.pinball-topline { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; font-size:13px; color:var(--muted); }
.pinball-label { font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--primary-strong); }
.pinball-machine { position:relative; width:100%; }
#pinball-board { display:block; width:100%; height:auto; aspect-ratio:960/620; }
.pinball-lever { position:absolute; right:1.8%; bottom:17%; width:clamp(40px,7%,64px); height:26%; min-height:90px; border:0; padding:4px; border-radius:14px; color:var(--primary-strong); background:transparent; touch-action:none; user-select:none; -webkit-user-select:none; }
.pinball-lever:hover:not(:disabled) { background:#dbeafe80; }
.lever-slot { display:block; height:72%; position:relative; width:12px; margin:0 auto 8px; border-radius:9px; background:#172b4d; box-shadow:inset 0 2px 4px #0003; }
.lever-handle { position:absolute; width:34px; height:34px; top:var(--pull,0px); left:50%; transform:translateX(-50%); border:3px solid #ffffff; border-radius:50%; background:var(--primary); box-shadow:0 3px 8px #172b4d26; }
.lever-caption { font-size:12px; font-weight:750; }
.pinball-lever:disabled { opacity:.6; }
.spotlight-view { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(115px,1fr)); gap:12px; width:100%; }
.spot-card { display:flex; position:relative; flex-direction:column; align-items:center; justify-content:center; min-height:94px; gap:6px; padding:16px 10px; border:2px solid var(--line); border-radius:14px; background:#f8fbff; text-align:center; overflow-wrap:anywhere; transition:background .1s,border-color .1s,box-shadow .1s; }
.spot-name { font-weight:750; font-size:17px; }
.spot-weight { font-size:12px; color:var(--muted); }
.spot-card.active { border-color:var(--primary); background:var(--primary); color:white; box-shadow:0 0 0 4px #2563eb20; }
.spot-card.active .spot-weight { color:#ffffff; }
.spot-card.used { opacity:.48; }
.spot-card.picked { opacity:1; }
.spot-rank { font-size:12px; font-weight:750; color:var(--primary-strong); }
.spot-card.active .spot-rank { color:white; }
.result-names > span { display:inline-flex; align-items:center; gap:8px; }
.result-rank { font-size:13px; font-weight:650; color:var(--primary-strong); border:1px solid #bfd3f7; border-radius:8px; padding:4px 7px; white-space:nowrap; }
@media(max-width:700px) {
  .modes { gap:3px; padding:4px; }
  .modes button { font-size:13px; padding:9px 2px; }
  .pinball-topline { font-size:12px; }
  .spotlight-view { grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px; }
  .spot-card { min-height:84px; padding:12px 6px; }
  .spot-name { font-size:15px; }
  .lever-handle { width:26px; height:26px; }
  .pinball-lever { bottom:19%; min-height:76px; }
  .lever-slot { width:8px; }
  .pinball-label { display:none; }
  .result-rank { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .spot-card { transition:none; } }