/* g:available — the funny availability question with corner escape hatches (module: g-available).
   Pills are core .choice flip faces; this file owns the gold kicker accent, the stacked corner rows and the mercy slot. */
.avail .kicker b { font-weight: inherit; color: var(--gold); }

/* the other three pills turn over after the score lands (every answer was right): translucent gold backs, no glow.
   The pill itself stays at opacity 1 (opacity < 1 flattens preserve-3d and the back face would never show); the faces carry the dim. */
.avail .choice.echo { box-shadow: none; border-color: transparent; }
.avail .choice.echo .face.front { opacity: 0.25; }
.avail .choice.echo .face.back.gold { background: rgba(201, 164, 92, 0.7); }

/* no-3D fallback (reduced motion / no GSAP): core parks the back face statically inside the picked (cream) pill;
   make the pill itself the gold back so it reads as one control, not a pill inside a pill */
.no-gsap .avail .choice.flipped { padding: 0; background: var(--gold); border-color: var(--gold); box-shadow: none; }
.no-gsap .avail .choice.flipped .face.back { min-height: calc(var(--control) - 2px); }
.no-gsap .avail .choice.echo.flipped { background: rgba(201, 164, 92, 0.7); border-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .avail .choice.flipped { padding: 0; background: var(--gold); border-color: var(--gold); box-shadow: none; }
  .avail .choice.flipped .face.back { min-height: calc(var(--control) - 2px); }
  .avail .choice.echo.flipped { background: rgba(201, 164, 92, 0.7); border-color: transparent; }
}

/* corners: a column of 44px rows under the pills, a clay ↳ leading each line */
.corners { display: flex; flex-direction: column; margin-top: 16px; }
.corners.off { pointer-events: none; }
.corner {
  position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: var(--tap);
  padding: 10px 6px 10px 0; background: none; border: 0; border-radius: var(--r-xs); text-align: left; cursor: pointer;
  color: var(--cream); opacity: 0.7; font-size: var(--t-xs); line-height: 1.35; transform-origin: 0% 50%;
  transition: color 0.35s ease;
}
.corner .arrow { flex: none; width: 14px; font-family: var(--display); font-style: normal; font-size: 15px; line-height: 1.1; color: var(--clay); }
.corner .txt { text-decoration: underline dotted; text-decoration-color: var(--cream-30); text-underline-offset: 3px; transition: text-decoration-color 0.35s ease; }
.corner.prev .txt { text-decoration-color: rgba(210, 104, 74, 0.7); }
.corner.picked { color: var(--clay); opacity: 1; }
.corner.picked .txt { text-decoration-color: rgba(210, 104, 74, 0.55); }
.corner.dim { opacity: 0.25; pointer-events: none; }

/* the narrator's "Mercy granted." floats just above the corners, over the dimmed pills (bottom is set at tap time) */
.mercy { position: absolute; left: var(--pad); right: var(--pad); bottom: 160px; z-index: 3; pointer-events: none; }
.mercy .aside { margin-top: 0; }

.avail .attendance-note { margin: 12px 0 0; color: var(--cream-60); font-size: 14px; line-height: 1.5; text-wrap: pretty; }