/* Answer moments (#470): the layer web_shared/answer_moment.js draws over the
   player's reveal (phone #earned, Fire TV remote play). Sizes come from the
   host in JS (the card is min(86% wide, 95% tall), its font a 14th of that) and
   everything inside the card is in em. Only transform and opacity animate;
   nothing here uses filter or backdrop-filter, so it holds on body.lite-gpu. */
.am-layer { position: absolute !important; inset: 0 !important; overflow: hidden; pointer-events: none; }
.am-scrim { position: absolute; inset: 0; opacity: 0; background: var(--bg); }
.am-scrim.is-right {
  background: radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--brand) 50%, transparent), transparent 75%),
    color-mix(in srgb, var(--bg) 90%, transparent);
}
.am-scrim.is-wrong,
.am-scrim.is-none {
  background: radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--incorrect) 20%, transparent), transparent 72%),
    color-mix(in srgb, var(--bg) 92%, transparent);
}

.am-hero {
  position: absolute !important; margin: 0 !important; box-sizing: border-box;
  transform-origin: 50% 50%; backface-visibility: hidden;
  transition: none !important; animation: none !important; filter: none !important;
}
.am-rays { position: absolute; left: 50%; width: 0; height: 0; }
.am-rays > div {
  position: absolute; width: var(--r); height: var(--r); margin: calc(var(--r) / -2); border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--brand-bright) 28%, transparent) 0deg 7deg,
    transparent 7deg 20deg);
}
/* Flat: the vignette is the scrim's top layer, and the rays fade out under it
   by the same curve (see answer_moment.js). */
.am-scrim.is-right.has-vig {
  background: radial-gradient(circle at 50% 36%, transparent 18%, color-mix(in srgb, var(--bg) 95%, transparent) 62%),
    radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--brand) 50%, transparent), transparent 75%),
    color-mix(in srgb, var(--bg) 90%, transparent);
}
.am-rays > div.is-faded {
  -webkit-mask-image: radial-gradient(closest-side, #000 29%, rgba(0, 0, 0, 0.05) 100%);
  mask-image: radial-gradient(closest-side, #000 29%, rgba(0, 0, 0, 0.05) 100%);
}
.am-vig {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% 36%, transparent 18%, color-mix(in srgb, var(--bg) 95%, transparent) 62%);
}
.am-conf { position: absolute; left: 50%; width: 0; height: 0; }
.am-conf i { position: absolute; border-radius: 2px; opacity: 0; }

.am-back {
  position: absolute; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; overflow: hidden;
  border-radius: 1em; padding: 0.8em 0.9em 0.95em; text-align: center; opacity: 0;
  font-family: var(--font-display); color: var(--text);
  background: linear-gradient(160deg, var(--brand-ink), var(--surface) 70%);
  border: 0.11em solid var(--brand-bright);
}
.am-back.is-wrong { background: linear-gradient(160deg, var(--surface-3), var(--surface) 70%); border-color: var(--incorrect); }
.am-back.is-none { background: linear-gradient(160deg, var(--surface-3), var(--surface) 70%); border-color: var(--line-strong); }
.am-kicker { font-weight: 900; font-size: 0.72em; letter-spacing: 0.32em; padding-left: 0.32em; color: var(--brand-bright); }
.am-back.is-wrong .am-kicker { color: var(--incorrect); }
.am-back.is-none .am-kicker { color: var(--muted); }
.am-pts { font-weight: 900; font-size: 3.1em; line-height: 1.05; color: var(--gold); font-variant-numeric: tabular-nums; }
.am-pts.zero { color: var(--muted); }
.am-pts.neg { color: var(--incorrect); }
.am-note { font-weight: 800; font-size: 0.56em; letter-spacing: 0.08em; color: var(--muted); }
.am-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4em; margin-top: 0.35em; }
.am-chip {
  display: inline-block; padding: 0.28em 0.7em; border-radius: var(--r-pill); white-space: nowrap;
  font-weight: 900; font-size: 0.62em; letter-spacing: 0.06em; color: var(--text);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border: 0.12em solid color-mix(in srgb, var(--muted) 40%, transparent);
}
.am-chip.hot {
  color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}
.am-chip.up {
  color: var(--choice-b); background: color-mix(in srgb, var(--choice-b) 10%, transparent);
  border-color: color-mix(in srgb, var(--choice-b) 50%, transparent);
}
.am-glint {
  position: absolute; top: -20%; left: 0; width: 30%; height: 140%; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 30%, transparent), transparent);
}
.am-score {
  position: absolute; left: 50%; transform: translate(-50%, -50%); opacity: 0; white-space: nowrap;
  display: flex; align-items: baseline; gap: 0.5em; padding: 0.35em 0.9em; border-radius: var(--r-pill);
  font-family: var(--font-display); color: var(--text);
  background: var(--surface-2); border: 0.1em solid var(--line-strong);
}
.am-score-label { font-weight: 800; font-size: 0.62em; letter-spacing: 0.3em; color: var(--muted); }
.am-score b { font-weight: 900; font-size: 1.25em; font-variant-numeric: tabular-nums; }
.am-token {
  position: absolute; left: 50%; transform: translate(-50%, -50%); opacity: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums;
}
.am-out {
  position: absolute; transform: translate(-50%, -50%); opacity: 0; line-height: 1;
  font-family: var(--font-display); font-weight: 900; color: var(--incorrect);
}
.am-label {
  position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.32em; color: var(--muted);
}