/* Sim 04 panels on top of the shared HUD: the "at the plate" diagram takes
   the bottom-left slot, the pitch picker and ball controls sit on the right,
   and the deck shows the three air forces against gravity (1 g). */
:root { --magnus: #5fe1ff; --ssw: #ffb547; --gravity: #e8f1ff; --total: #3ee6a0; }

#plate { left: 20px; bottom: 20px; width: 400px; padding: 10px 12px 10px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 6px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.panel-head small { letter-spacing: 0.06em; text-transform: none; font-size: 10px; }
#plate-canvas { width: 100%; height: auto; display: block; border-radius: 7px; background: #070d1a; }
#plate .calc dt small { text-transform: none; letter-spacing: 0; color: var(--dim); font-size: 10px; margin-left: 4px; }
#plate .calc { gap: 2px; }
#c-ssw { color: var(--ssw); }

.pitches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 6px; }
.pitches button {
  border: 1px solid var(--line); background: rgba(150, 190, 255, 0.05); border-radius: 7px; padding: 7px 3px;
  font: 600 10.5px/1.15 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: #c9d6e8;
}
.pitches button:hover { border-color: rgba(95, 225, 255, 0.55); color: var(--ink); }
.pitches button.on { background: var(--ink); color: #07101f; border-color: var(--ink); }
.pitches .legend { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; border-color: rgba(255, 181, 71, 0.4); }
.pitches .legend span { font: 600 9px/1 var(--mono); letter-spacing: 0.14em; color: #1c1300; background: var(--amber); border-radius: 4px; padding: 3px 5px; }
.pitches .legend.on span { background: #1c1300; color: var(--amber); }

.seg.tiny button { font-size: 9.5px; padding: 5px 3px; }
.seg.cams button { font-size: 9.5px; padding: 6px 2px; }
.cams[hidden], .show[hidden], .ghosts[hidden] { display: none; }
.toggles.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; }
.toggles.show { margin-bottom: 6px; }
.tog .dot { width: 10px; height: 10px; margin: 4px 0 1px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.magnus { background: var(--magnus); box-shadow: 0 0 8px var(--magnus); }
.dot.ssw { background: var(--ssw); box-shadow: 0 0 8px var(--ssw); }
.dot.gravity { background: var(--gravity); box-shadow: 0 0 8px var(--gravity); }
.dot.drag { background: var(--drag); box-shadow: 0 0 8px var(--drag); }
.tog:not(.on) .dot { background: transparent; box-shadow: none; border: 1.5px solid currentColor; }
.sw.ssw { background: var(--ssw); }
.note { font-size: 11.5px; color: var(--muted); margin: -2px 0 8px; }
.note b { color: var(--ssw); }
.note[hidden] { display: none; }

/* spin-direction clock */
.axis { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; margin: 4px 0 8px; }
#clock { width: 96px; height: 96px; touch-action: none; cursor: grab; }
#clock .face { fill: rgba(150, 190, 255, 0.05); stroke: rgba(150, 190, 255, 0.3); stroke-width: 1.5; }
#clock .tick { stroke: rgba(200, 220, 245, 0.5); stroke-width: 1.5; }
#clock .num { fill: #8ea3bf; font: 500 10px var(--mono); text-anchor: middle; dominant-baseline: central; }
#clock-hand { stroke: var(--magnus); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--magnus)); }
#clock .hub { fill: var(--magnus); }
.axis-side label { font-weight: 500; font-size: 13px; display: block; }
.axis-side label small { color: var(--dim); font-weight: 400; font-size: 11px; display: block; }
.axis-side output { font: 500 18px var(--mono); color: var(--cyan); display: block; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.axis-side .seg { margin-bottom: 0; }
.axis-side input { margin-top: 2px; }

/* deck meters */
.fill.magnus { background: var(--magnus); box-shadow: 0 0 10px var(--magnus); }
.fill.ssw { background: var(--ssw); box-shadow: 0 0 10px var(--ssw); }
.need.g1 { left: 83.3%; opacity: 0.8; }
.meter { width: 170px; }
.meter-head span { display: inline-flex; align-items: center; }

#fader { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
#fader.on { opacity: 1; transition: none; }
#speedtag {
  position: absolute; right: 330px; top: 20px; font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ssw);
  background: var(--glass); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; pointer-events: none;
}
#speedtag:empty { display: none; }
body.shot #speedtag, body.shot #plate { display: none; }

.tag3d.small { font-size: 9.5px; padding: 3px 6px; }
.tag3d.plain::before { display: none; }
.tag3d b { color: var(--c, #fff); font-weight: 600; }

@media (max-width: 1280px) {
  #plate { width: 340px; }
  .meter { width: 130px; }
  #speedtag { right: 320px; }
}
@media (min-width: 901px) and (max-height: 800px) {
  #plate .calc div:nth-child(n + 5) { display: none; }
}
@media (max-width: 900px) {
  #plate { order: 3; width: auto; }
  #controls { width: auto; }
  .meter { flex: 1 1 120px; width: auto; }
  #speedtag { right: 12px; top: 12px; }
}