/* =====================================================================
   g:passport / g:vibe / g:ali / g:charlie — lightning rounds (module: g-lightning).
   button.pill > .face.front / .face.back: the chosen pill flips on rotateX to show the verdict on
   its back (gold wash + glow when right, clay + shake when wrong). Only transform / opacity animate:
   the gold glow, the clay hit and the scene glow are opacity layers; the Next ring, the kicker bolt
   and the check on a gold back are SVG strokes that draw themselves (stroke-dashoffset on ≤ 18px art).
   ===================================================================== */
.lightning .fg.bottom { padding-bottom: calc(var(--safe-bottom) + 64px + var(--kb)); }
.lightning .kicker { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lightning .kicker .stake { color: var(--gold); font-weight: 600; }
.lightning .sub { margin-top: 12px; }
.lightning .answers { perspective: 900px; perspective-origin: 50% 50%; }
.lightning .next-slot { height: var(--control); margin-top: 16px; }

/* the bolt: strikes into the kicker (stroke draws, fill pops), flickers on a correct answer */
.lightning .kicker .bolt { flex: none; align-self: center; width: 11px; height: 14px; margin: -2px 0 0; transform-origin: 50% 60%; will-change: transform; }
.lightning .kicker .bolt svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lightning .kicker .bolt path { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.lightning .kicker .bolt .fill { fill: var(--gold); stroke: none; opacity: 0; }

/* the pill: shares the glass base of .choice (shell.css) — faces are ours */
.lightning .pill { transition: border-color 0.35s ease; transform-style: preserve-3d; }
.lightning .pill .face { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lightning .pill .face.front { position: relative; overflow: hidden; border-radius: inherit; width: calc(100% + 40px); margin: -10px -20px; padding: 10px 20px; min-height: calc(var(--control) - 2px); }
.lightning .pill .face.front .lbl { flex: 1; }
.lightning .pill .face.front .ring { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--cream-30); }
.lightning .pill .face.front .shine { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, rgba(244, 238, 227, 0) 0%, rgba(244, 238, 227, 0.13) 50%, rgba(244, 238, 227, 0) 100%); }
.lightning .pill .face.back { position: absolute; inset: 0; padding: 10px 20px; border-radius: inherit; transform: rotateX(180deg); overflow: visible; }
.lightning .pill .face.back .fb { flex: 1; font: 500 15px/1.3 var(--sans); color: var(--cream); text-wrap: pretty; }
.lightning .pill .face.back .pts { flex: none; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1; color: var(--gold); font-variation-settings: var(--wonk); letter-spacing: -0.01em; }
.lightning .pill .face.back .pts.zero { color: var(--cream-60); }
.lightning .pill .face.back .pts.tag { display: inline-flex; align-items: center; gap: 7px; font: var(--caps-xs); letter-spacing: var(--caps-xs-track); text-transform: uppercase; font-style: normal; color: var(--gold); font-variation-settings: normal; }
.lightning .pill .face.back .chk { flex: none; width: 15px; height: 15px; }
.lightning .pill .face.back .chk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lightning .pill .face.back .chk path { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lightning .pill .face.back.gold { background: rgba(201, 164, 92, 0.18); }
.lightning .pill .face.back.clay { background: rgba(210, 104, 74, 0.22); }
.lightning .pill .face.back .glow, .lightning .pill .face.back .hit { position: absolute; inset: -1px; border-radius: inherit; opacity: 0; pointer-events: none; }
.lightning .pill .face.back .glow { box-shadow: 0 0 0 1px var(--gold), 0 0 36px -8px var(--gold); }
.lightning .pill .face.back .hit { background: rgba(240, 160, 138, 0.35); }
.lightning .pill.right { border-color: var(--gold); }
.lightning .pill.wrong { border-color: rgba(210, 104, 74, 0.7); }

/* scene glow at the chosen pill (--fx/--fy set by the scene); gold, or clay for a miss */
.lightning .lglow { --gc: 201, 164, 92; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(280px 190px at var(--fx, 50%) var(--fy, 70%), rgba(var(--gc), 0.55), rgba(var(--gc), 0) 70%); }
.lightning .lglow.clay { --gc: 210, 104, 74; }

/* Next with a progress ring (drains over the hold, auto-advances) */
.lightning .btn.next .ring { flex: none; width: 18px; height: 18px; transform: rotate(-90deg); margin-left: -4px; }
.lightning .btn.next .ring circle { fill: none; stroke-width: 2; }
.lightning .btn.next .ring .track { stroke: rgba(16, 24, 39, 0.16); }
.lightning .btn.next .ring .arc { stroke: var(--ink); stroke-linecap: round; }

/* summary card: a round that was already answered */
.lightning .summary { padding: 20px 20px 18px; border-radius: var(--r-l); background: rgba(16, 24, 39, 0.62); border: 1px solid var(--cream-12); box-shadow: inset 0 1px 0 rgba(244, 238, 227, 0.08); transform-origin: 50% 100%; }
.lightning .summary .you { color: var(--cream-60); }
.lightning .summary .ans { font-family: var(--display); font-weight: 300; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; font-variation-settings: "opsz" 48; margin-top: 10px; text-wrap: balance; }
.lightning .summary .got { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; color: var(--gold); }
.lightning .summary .got .n { font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1; font-variation-settings: var(--wonk); }
.lightning .summary .got.zero { color: var(--cream-60); }
.lightning .summary .was { margin-top: 8px; color: var(--cream-60); font-size: var(--t-s); }

@media (prefers-reduced-motion: reduce) {
  .lightning .pill .face.front .shine { display: none; }
  .lightning .lglow { display: none; }
  .lightning .kicker .bolt .fill { opacity: 1; }
}