/* Agent B — styling for the trivia modal (#trivia-layer) and the ability bar (#ability-bar).
   Art direction per ARCHITECTURE.md §Style: deep space #0b0b2a/#141440, accents coral #ff5a5f,
   gold #ffc857, cyan #4cc9f0. Rounded (14px+), playful, glowing. */

/* Scope these to the trivia/ability overlays so they don't collide with the
   identically-named globals in screens.css (which set different values). */
#trivia-layer,
#ability-bar {
  --ssm-space-0: #080a24;
  --ssm-space-1: #101442;
  --ssm-space-2: #1b2368;
  --ssm-coral: #ff5d6c;
  --ssm-gold: #ffc857;
  --ssm-cyan: #43d9ff;
  --ssm-green: #7bd389;
  --ssm-ink: #eef0ff;
}

/* ============================ TRIVIA MODAL ============================ */

.trivia-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4%;
  background: radial-gradient(ellipse at center, rgba(11, 11, 42, 0.55), rgba(4, 4, 20, 0.82));
  pointer-events: auto; /* modal captures interaction */
  backdrop-filter: blur(2px);
}

.trivia-modal {
  --cat-accent: var(--ssm-cyan);
  /* Sci-fi panel frame art (640x456) as the modal background. The frame is
     drawn edge-to-edge; content is padded to sit inside the interior screen. */
  position: relative;
  width: min(92%, 620px);
  aspect-ratio: 640 / 456;
  background: url('../assets/sprites/premium/question-panel-v1.webp') no-repeat center;
  background-size: 100% 100%;
  /* Interior screen insets (frame ~6% sides, ~12% top/bottom, plus breathing room). */
  padding: 12% 9% 13%;
  color: #fff;
  text-align: center;
  transform-origin: center bottom;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55));
  animation: trivia-pop 340ms cubic-bezier(0.18, 1.3, 0.42, 1) both;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The game shell sets touch-action:none on all ancestors to kill page
     gestures; re-enable VERTICAL panning here so the modal's own scroll
     fallback (the ≤639px phone sheet) still works for long questions on touch. */
  touch-action: pan-y;
}

/* Answer buttons only ever receive taps — instant tap, no double-tap zoom. */
.trivia-answer,
.ability-btn { touch-action: manipulation; }

@keyframes trivia-pop {
  0% { transform: scale(0.6) translateY(24px); opacity: 0; }
  70% { transform: scale(1.04) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}

.trivia-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.trivia-chip {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #0b0b2a;
  background: var(--cat-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--cat-accent) 60%, transparent);
}

/* Difficulty indicator: 10 small pips, filled up to the question's level. */
.trivia-difficulty {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(11, 11, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.trivia-diff-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.trivia-diff-pip.filled {
  background: var(--cat-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--cat-accent) 70%, transparent);
}

/* Draining question timer: full -> empty over QUESTION_SECONDS. The fill's
   width + colour are set inline from js/trivia.js each frame; this styles the
   shell and the sub-5s urgency pulse. */
.trivia-timer {
  position: relative;
  height: 10px;
  margin: 12px 6px 4px;
  border-radius: 999px;
  background: rgba(11, 11, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.trivia-timer-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 999px;
  background-color: var(--ssm-cyan); /* overridden inline per-frame */
  /* Smooth the per-frame colour steps; width is updated every rAF so it needs
     no transition of its own. */
  transition: background-color 0.25s linear;
  box-shadow: 0 0 10px color-mix(in srgb, currentColor 40%, transparent);
}

/* Under URGENT_SECONDS the whole bar pulses to signal the clock running out. */
.trivia-timer.is-urgent {
  animation: trivia-timer-pulse 0.7s ease-in-out infinite;
}
.trivia-timer.is-urgent .trivia-timer-fill {
  box-shadow: 0 0 14px color-mix(in srgb, var(--ssm-coral) 70%, transparent);
}
@keyframes trivia-timer-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.72; transform: scaleY(1.35); }
}

.trivia-feedback.timeout { color: var(--ssm-gold); }

.trivia-question {
  margin: 10px 4px 14px;
  font-size: clamp(16px, 3.4vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.trivia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trivia-answer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0; /* stay inside the grid cell; without this the aspect-ratio +
                   min-height combo can expand the box past its column on narrow
                   phones and clip the right-hand answers off the modal edge. */
  min-height: 52px; /* touch target >= 48px */
  aspect-ratio: 408 / 144;
  padding: 8px clamp(30px, 12%, 44px);
  border: none;
  border-radius: 0;
  background: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  font-family: inherit;
  font-size: clamp(13px, 2.3vw, 16px);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease, opacity 0.15s ease;
}

.trivia-answer:hover:not(:disabled) {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
  transform: translateY(-2px);
}

.trivia-answer:active:not(:disabled) { transform: translateY(0) scale(0.98); }

.trivia-key {
  position: absolute;
  top: 50%;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(11, 11, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--ssm-ink);
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%);
  z-index: 2;
}

.trivia-answer-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Custom card background images */
.trivia-answer-a,
.trivia-answer-b,
.trivia-answer-c,
.trivia-answer-d {
  background-image: url('../assets/sprites/premium/answer-choice-plate-v1.webp');
}

/* Feedback states */
.trivia-answer.is-correct {
  filter: drop-shadow(0 0 10px var(--ssm-green));
  opacity: 1;
  animation: answer-good 0.4s ease;
}

.trivia-answer.is-wrong {
  filter: drop-shadow(0 0 10px var(--ssm-coral));
  opacity: 0.82;
}
.trivia-answer.is-correct::after,
.trivia-answer.is-wrong::after {
  position: absolute;
  top: 50%;
  right: 6%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  color: #041018;
  font-size: 17px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: none;
  transform: translateY(-50%);
  animation: trivia-answer-seal 0.42s cubic-bezier(0.2, 1.45, 0.35, 1) both;
}
.trivia-answer.is-correct::after {
  content: "✓";
  background: linear-gradient(180deg, #d9ffe0, var(--ssm-green));
  box-shadow: 0 0 15px rgba(123, 211, 137, 0.86);
}
.trivia-answer.is-wrong::after {
  content: "×";
  color: #fff4ed;
  background: linear-gradient(180deg, #ff785f, #a7141c);
  box-shadow: 0 0 15px rgba(255, 93, 108, 0.84);
}
@keyframes trivia-answer-seal {
  from { opacity: 0; transform: translateY(-50%) scale(0.3) rotate(-18deg); }
  to { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
}

/* 50/50 removed options (contract §4c): struck through, greyed, disabled, with a
   diagonal slash that sweeps across during the removal. */
.trivia-answer.is-removing,
.trivia-answer.is-removed {
  cursor: not-allowed;
  border-color: rgba(255, 93, 108, 0.5);
}
.trivia-answer.is-removing .trivia-answer-text,
.trivia-answer.is-removed .trivia-answer-text {
  text-decoration: line-through;
  text-decoration-color: var(--ssm-coral);
  text-decoration-thickness: 2px;
}
.trivia-answer.is-removing {
  animation: answer-remove 0.46s ease forwards;
}
.trivia-answer.is-removed {
  opacity: 0.32;
  filter: grayscale(1);
}
@keyframes answer-remove {
  0% { opacity: 1; transform: scale(1); background: rgba(255, 93, 108, 0.28); }
  40% { transform: scale(0.97); }
  100% { opacity: 0.32; filter: grayscale(1); transform: scale(1); }
}

/* The diagonal slash line that sweeps across a removed option. */
.trivia-slash {
  position: absolute;
  left: 6%;
  top: 50%;
  width: 0;
  height: 3px;
  background: var(--ssm-coral);
  box-shadow: 0 0 8px var(--ssm-coral);
  transform: translateY(-50%) rotate(-8deg);
  transform-origin: left center;
  border-radius: 2px;
  pointer-events: none;
  animation: slash-sweep 0.34s ease forwards;
}
@keyframes slash-sweep {
  from { width: 0; opacity: 0.4; }
  to { width: 88%; opacity: 1; }
}
.trivia-answer { position: relative; } /* anchor the slash overlay */

.trivia-answer:disabled { cursor: default; }

/* "50/50! Two wrong answers removed" banner inside the modal. */
.trivia-announce {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translate(-50%, 8px);
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ssm-coral), var(--ssm-gold));
  color: #0b0b2a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.trivia-announce.show {
  animation: announce-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
@keyframes announce-pop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.8); }
  60% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes answer-good {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.06); }
}

.trivia-modal.shake { animation: trivia-shake 0.4s ease; }
@keyframes trivia-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

.trivia-feedback {
  min-height: 26px;
  margin-top: 14px;
  max-width: 42rem;
  margin-right: auto;
  margin-left: auto;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.28;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.trivia-feedback.show { opacity: 1; transform: translateY(0); }
.trivia-feedback.good { color: var(--ssm-green); }
.trivia-feedback.bad { color: var(--ssm-coral); }

.trivia-verdict {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  max-height: 0;
  margin: 0 auto;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 1000;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transition:
    max-height 180ms ease,
    margin 180ms ease,
    padding 180ms ease,
    opacity 150ms ease,
    transform 180ms ease;
}
.trivia-verdict.show {
  max-height: 38px;
  margin-top: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.trivia-verdict.good {
  color: #dfffe5;
  border-color: rgba(123, 211, 137, 0.78);
  background: linear-gradient(180deg, rgba(73, 173, 92, 0.42), rgba(5, 39, 27, 0.86));
  box-shadow: 0 0 18px rgba(123, 211, 137, 0.34), inset 0 1px 0 rgba(231, 255, 235, 0.22);
  text-shadow: 0 0 9px rgba(123, 211, 137, 0.72);
}
.trivia-verdict.bad {
  color: #fff0e9;
  border-color: rgba(255, 93, 108, 0.8);
  background: linear-gradient(180deg, rgba(167, 25, 38, 0.52), rgba(49, 4, 13, 0.88));
  box-shadow: 0 0 18px rgba(255, 93, 108, 0.36), inset 0 1px 0 rgba(255, 226, 219, 0.18);
  text-shadow: 0 0 9px rgba(255, 93, 108, 0.72);
}
.trivia-verdict.timeout,
.trivia-verdict.pending {
  color: #fff1bd;
  border-color: rgba(255, 200, 87, 0.72);
  background: linear-gradient(180deg, rgba(151, 99, 25, 0.42), rgba(42, 24, 4, 0.88));
  box-shadow: 0 0 16px rgba(255, 200, 87, 0.28);
  text-shadow: 0 0 8px rgba(255, 200, 87, 0.62);
}
.trivia-modal.result-good {
  border-color: rgba(123, 211, 137, 0.94);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.72),
    0 0 52px rgba(123, 211, 137, 0.34),
    inset 0 0 0 3px rgba(1, 16, 11, 0.86),
    inset 0 1px 0 rgba(231, 255, 235, 0.24);
}
.trivia-modal.result-bad {
  border-color: rgba(255, 93, 108, 0.94);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.72),
    0 0 48px rgba(255, 93, 108, 0.32),
    inset 0 0 0 3px rgba(24, 1, 7, 0.88),
    inset 0 1px 0 rgba(255, 226, 219, 0.2);
}
.trivia-modal.result-timeout,
.trivia-modal.result-pending {
  border-color: rgba(255, 200, 87, 0.88);
}

/* ---------------------------------------------------------------------- *
 * Correct-answer reveal: "tap to continue" affordance (user feedback 2026-07-17).
 * js/trivia.js holds a correct reveal long enough to read the explanation
 * caption and adds .is-revealing to the modal; any tap/click/key skips ahead, so
 * the hold never costs a fast reader time. Only the correct-with-caption path
 * gets this — a miss has nothing to read and closes on the short beat.
 * ---------------------------------------------------------------------- */
.trivia-continue-hint {
  position: relative;
  z-index: 1;
  margin: 8px auto 0;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(238, 240, 255, 0.66);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none; /* the backdrop below owns the dismiss press */
}

.trivia-continue-hint.show {
  opacity: 1;
  transform: translateY(0);
}

/* A disabled control swallows pointer events rather than bubbling them, which
   would leave dead patches over the answer grid where a tap-to-continue does
   nothing. During the reveal every button is already disabled and inert, so let
   presses fall straight through to the backdrop's dismiss listener. */
.trivia-modal.is-revealing .trivia-answer:disabled,
.trivia-modal.is-revealing .trivia-fifty-btn:disabled {
  pointer-events: none;
}

/* The 50/50 banner has done its job by the time an answer lands; retire it so it
   can't sit under (or fight) the continue hint (it is absolute at bottom:6%, the
   hint is in-flow at the modal's end — they overlap on a short card).
   `animation: none` is load-bearing: .trivia-announce.show fills forwards, and an
   animation's filled value beats a plain declaration in the cascade, so opacity:0
   alone would silently lose to it. */
.trivia-modal.is-revealing .trivia-announce {
  animation: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* The hint is information, not decoration — reduced motion drops the fade, never
   the hint itself. Both the media query and experience.js's applySettings class
   (html.prefers-reduced-motion) are honored. */
@media (prefers-reduced-motion: reduce) {
  .trivia-continue-hint { transition: none; }
}
html.prefers-reduced-motion .trivia-continue-hint { transition: none; }

/* In-modal 50/50 button (js/trivia.js renders it when the director passes a
   `fifty` option). Sits under the answer grid, styled as a gold utility chip so
   it never reads as a fifth answer. */
.trivia-fifty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px auto 0;
  padding: 8px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 2px solid var(--ssm-gold);
  background: linear-gradient(180deg, rgba(255, 200, 87, 0.22), rgba(8, 10, 36, 0.9));
  color: var(--ssm-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 0 14px rgba(255, 200, 87, 0.35);
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.trivia-fifty-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(255, 200, 87, 0.6);
}
.trivia-fifty-btn:active:not(:disabled) { transform: scale(0.97); }
.trivia-fifty-btn:disabled { cursor: default; }
.trivia-fifty-btn.is-used,
.trivia-fifty-btn.is-out {
  opacity: 0.45;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(8, 10, 36, 0.7);
  box-shadow: none;
  filter: grayscale(0.6);
}
.trivia-fifty-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.trivia-fifty-key {
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 900;
}
@media (max-height: 520px) {
  /* Keep the 44px touch floor here too: the card is height-capped but scrolls
     internally (.trivia-modal is overflow-y:auto), so holding the floor costs
     reachable scroll height, not a reachable control. */
  .trivia-fifty-btn { margin-top: 8px; min-height: 44px; padding: 5px 12px; font-size: 12px; }
  /* Landscape phones / split-screen: the card is already height-capped and
     scrolls internally, so keep the hint from stealing a line of the caption. */
  .trivia-continue-hint { margin-top: 4px; font-size: 11px; }
}

/* ============================ ABILITY BAR ============================ */

#ability-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Position + height are owned by css/base.css: fixed to the viewport bottom,
     height = var(--bar-bottom). Here we only lay out the interior contents. */
  /* Safe-area insets: lift the buttons above the home indicator and clear notches. */
  padding: 0 calc(10px + env(safe-area-inset-right, 0px))
             calc(8px + env(safe-area-inset-bottom, 0px))
             calc(10px + env(safe-area-inset-left, 0px));
}

.ability-row {
  display: flex;
  gap: 8px;
  width: min(100%, 700px);
  padding: 12px 16px;
  background: url('../assets/ui/hud/hud-ability-rail-starblade-primary.svg') no-repeat center;
  background-size: 100% 100%;
  border: none;
  box-shadow: none;
  backdrop-filter: blur(4px);
}

.ability-btn {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px; /* >=48px touch target */
  padding: 6px 4px;
  border: none;
  border-radius: 0;
  background: url('../assets/ui/hud/hud-ability-slot-charged-starblade-primary.svg') no-repeat center;
  background-size: 100% 100%;
  color: var(--ssm-ink);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
}

.ability-btn:hover:not(:disabled) {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
  transform: translateY(-2px);
}
.ability-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }

.ability-hotkey {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.55;
}

.ability-icon {
  width: clamp(28px, 6vw, 40px);
  height: clamp(28px, 6vw, 40px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px rgba(76, 201, 240, 0.4));
}

.ability-name {
  font-size: clamp(10px, 2.2vw, 13px);
  font-weight: 700;
  white-space: nowrap;
}

.ability-pips {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.ability-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ssm-gold);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ssm-gold) 70%, transparent);
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.ability-pip.spent {
  /* Hollow "empty socket" — must read as one-fewer-charge at a glance, not a
     dimmed dot (user feedback: spent charges weren't visibly taken away). */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
  opacity: 0.55;
  transform: scale(0.85);
}

/* A pip being spent right now: pop bright, then shrink/fade away so the player
   literally sees one fewer charge at the moment of consumption (contract §4b). */
.ability-pip.pip-spending {
  animation: pip-spend 0.46s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  z-index: 1;
}
@keyframes pip-spend {
  0%   { transform: scale(1);   opacity: 1; box-shadow: 0 0 6px var(--ssm-gold); }
  30%  { transform: scale(2.1); opacity: 1; box-shadow: 0 0 14px 4px var(--ssm-gold); }
  100% { transform: scale(0.2); opacity: 0; box-shadow: 0 0 0 transparent; }
}

.ability-btn.is-empty {
  background-image: url('../assets/ui/hud/hud-ability-slot-empty-starblade-primary.svg');
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

/* 50/50 (and any contextual ability) while no question is open: looks disabled
   with a resting hint, but stays clickable so a press can surface the hint. */
.ability-btn.is-context-locked {
  opacity: 0.5;
  filter: grayscale(0.55);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.22);
}
.ability-btn.is-context-locked .ability-icon { filter: grayscale(0.6); }

/* While a question IS open, PowerUpManager.setContextOpen lifts the whole bar
   above the trivia backdrop (#trivia-layer is z-index 30) so the 50/50 button
   is actually clickable — without this the full-screen backdrop swallows every
   press aimed at the bar. */
#ability-bar.trivia-context { z-index: 31; }

/* Successful activation: an obvious bright pulse ring + squash (contract §4a). */
.ability-btn.ability-activate {
  animation: ability-activate 0.46s cubic-bezier(0.2, 1.3, 0.4, 1);
  border-color: var(--ssm-cyan);
  z-index: 2;
}
@keyframes ability-activate {
  0%   { box-shadow: 0 0 0 0 rgba(67, 217, 255, 0.9); transform: scale(0.9); }
  35%  { box-shadow: 0 0 22px 8px rgba(67, 217, 255, 0.65); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

/* Rejected press: a red shake, clearly different from success (contract §4a/4d). */
.ability-btn.ability-reject {
  animation: ability-reject 0.42s ease;
  border-color: var(--ssm-coral);
}
@keyframes ability-reject {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* Hint bubble that pops above a button on a rejected press. */
.ability-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 6px);
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(8, 10, 36, 0.96);
  border: 1px solid var(--ssm-coral);
  color: var(--ssm-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 5;
}
.ability-tip.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.ability-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ssm-coral);
}

@media (prefers-reduced-motion: reduce) {
  .trivia-modal,
  .trivia-answer.is-correct,
  .trivia-answer.is-correct::after,
  .trivia-answer.is-wrong::after,
  .trivia-answer.is-removing,
  .trivia-slash,
  .trivia-announce.show,
  .trivia-modal.shake,
  .trivia-timer.is-urgent,
  .ability-pip.pip-spending,
  .ability-btn.ability-activate,
  .ability-btn.ability-reject {
    animation: none;
  }
  .trivia-verdict { transition: none; }
}
html.prefers-reduced-motion .trivia-verdict { transition: none; }
html.prefers-reduced-motion .trivia-answer.is-correct::after,
html.prefers-reduced-motion .trivia-answer.is-wrong::after { animation: none; }

/* ------------------------------------------------------------------ *
 * Pass 3 trivia and ability chrome integration.
 * ------------------------------------------------------------------ */
.trivia-backdrop {
  background:
    radial-gradient(circle at 50% 30%, rgba(51, 229, 255, 0.18), transparent 27%),
    radial-gradient(circle at 18% 18%, rgba(179, 75, 255, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(0, 2, 9, 0.68), rgba(0, 2, 10, 0.9));
  padding-bottom: calc(4% + 84px);
  backdrop-filter: blur(4px) saturate(1.18);
}

.trivia-modal {
  background:
    linear-gradient(135deg, rgba(255, 213, 90, 0.1), transparent 28%, rgba(51, 229, 255, 0.08)),
    linear-gradient(180deg, rgba(9, 17, 37, 0.98), rgba(1, 5, 15, 0.98));
  border: 3px solid rgba(213, 154, 47, 0.9);
  border-radius: 8px;
  /* Fixed px, NOT % — percentage padding resolves against the PARENT's width
     (the full-viewport backdrop), so on a wide desktop window "8.8%" exploded
     to ~140px bands and the card ballooned with empty space. These values are
     8.8%/8%/10% of the card's own 620px cap. */
  padding: 55px 50px 62px;
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.72),
    0 0 46px rgba(51, 229, 255, 0.25),
    inset 0 0 0 3px rgba(1, 4, 12, 0.86),
    inset 0 1px 0 rgba(255, 241, 185, 0.22);
}

.trivia-modal::before,
.trivia-modal::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.trivia-modal::before {
  inset: 10px;
  border: 1px solid rgba(51, 229, 255, 0.28);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 0, rgba(51, 229, 255, 0.15), transparent 24%),
    linear-gradient(90deg, rgba(255, 73, 50, 0.16), transparent 16%, transparent 84%, rgba(255, 73, 50, 0.16));
}

.trivia-modal::after {
  top: -20px;
  left: 50%;
  width: 88px;
  height: 44px;
  transform: translateX(-50%);
  border-radius: 0 0 44px 44px;
  background:
    radial-gradient(circle at 50% 38%, rgba(229, 253, 255, 0.92) 0 10px, rgba(44, 220, 255, 0.5) 11px 18px, rgba(5, 14, 29, 0.96) 19px),
    #081425;
  border: 3px solid rgba(213, 154, 47, 0.9);
  box-shadow: 0 0 18px rgba(51, 229, 255, 0.44);
}

.trivia-chip {
  position: relative;
  border-radius: 5px;
  color: #eafdff;
  background:
    linear-gradient(180deg, rgba(30, 220, 255, 0.3), rgba(6, 20, 38, 0.92));
  border: 1px solid rgba(51, 229, 255, 0.72);
  text-shadow: 0 0 8px rgba(51, 229, 255, 0.54);
}

.trivia-difficulty,
.trivia-timer {
  border-radius: 4px;
  background: rgba(2, 6, 16, 0.86);
  border-color: rgba(213, 154, 47, 0.52);
}

.trivia-question {
  color: #f8fdff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72), 0 0 11px rgba(51, 229, 255, 0.25);
}

/* Overrides removed to allow premium PNG card backgrounds to display cleanly. */

.trivia-slash {
  height: 5px;
  background: linear-gradient(90deg, transparent, #ff573d 18%, #ffd765 52%, #33e5ff 100%);
}

.trivia-feedback {
  text-shadow: 0 0 10px currentColor;
}

#ability-bar {
  background: transparent;
}

.ability-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: min(100%, 720px);
  height: 112px;
  padding: 0 44px;
  box-sizing: border-box;
  background: url('../assets/ui/hud/hud-ability-rail-starblade-primary.svg') no-repeat center;
  background-size: 100% 100%;
  border: none;
  box-shadow: none;
}

.ability-btn {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 3px solid #ffc857;
  background: radial-gradient(circle, #151a4f 0%, #040614 100%);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.6),
    inset 0 0 10px rgba(51, 229, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.15s ease, filter 0.15s ease;
}

.ability-btn:hover:not(:disabled) {
  filter: drop-shadow(0 0 8px rgba(51, 229, 255, 0.55));
  transform: scale(1.05);
}

.ability-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.ability-btn.is-empty {
  border-color: #4b4e63 !important;
  background: radial-gradient(circle, #1b1c29 0%, #07080f 100%) !important;
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.85);
  box-shadow: none;
}

.ability-btn.is-context-locked {
  border-color: #646a8f !important;
  background: radial-gradient(circle, #141b36 0%, #060812 100%) !important;
  opacity: 0.66;
}

.ability-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(51, 229, 255, 0.35));
}

.ability-name {
  display: none; /* hidden to match mockup layout */
}

.ability-hotkey {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffc857;
  color: #050716;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.ability-pips {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  z-index: 10;
}

.ability-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #33e5ff;
  box-shadow: 0 0 6px rgba(51, 229, 255, 0.8);
  margin: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.ability-pip.spent {
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------ *
 * Pass 3 final polish: answer gates, timer glass, ability rail states.
 * ------------------------------------------------------------------ */
.trivia-modal {
  aspect-ratio: 640 / 456;
  border: 0;
  border-radius: 0;
  background: url('../assets/sprites/premium/question-panel-v1.webp') no-repeat center;
  background-size: 100% 100%;
  box-shadow: none;
}

.trivia-modal::before,
.trivia-modal::after {
  display: none;
}

.trivia-header {
  position: relative;
  z-index: 1;
}

.trivia-chip {
  padding-inline: 18px;
  box-shadow:
    inset 0 0 0 2px rgba(1, 5, 14, 0.58),
    0 0 18px color-mix(in srgb, var(--cat-accent) 35%, transparent);
}

.trivia-diff-pip {
  width: 10px;
  height: 5px;
  border-radius: 1px;
  background: rgba(127, 148, 166, 0.32);
}

.trivia-diff-pip.filled {
  background: linear-gradient(180deg, #eaffff, var(--cat-accent));
}

.trivia-timer {
  height: 14px;
  padding: 3px;
  overflow: visible;
  box-shadow:
    inset 0 0 0 2px rgba(0, 2, 8, 0.72),
    0 0 16px rgba(51, 229, 255, 0.16);
}

.trivia-timer-fill {
  top: 3px;
  bottom: 3px;
  left: 3px;
  max-width: calc(100% - 6px);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 48%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.38) 0 1px, transparent 1px 18px);
}

.trivia-question {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 2px 6px;
}

.trivia-grid {
  position: relative;
  z-index: 1;
}

/* Overrides removed to allow premium PNG card backgrounds to display cleanly. */

.trivia-announce {
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 228, 129, 0.98), rgba(236, 75, 45, 0.98));
  border: 2px solid rgba(255, 237, 172, 0.82);
  color: #240707;
}

.trivia-feedback {
  position: relative;
  z-index: 1;
}

/* Overrides removed to allow circular ability buttons to display cleanly */

@media (max-width: 520px) {
  .trivia-modal {
    width: min(96%, 620px);
    padding: 10.5% 6.5% 11%;
  }

  .trivia-grid {
    gap: 8px;
  }

  .trivia-answer {
    min-height: 48px;
    padding: 8px 24px;
  }

  .trivia-key {
    left: 6px;
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .ability-row {
    gap: 6px;
    padding-inline: 8px;
  }
}

/* ------------------------------------------------------------------ *
 * Phase 4 (Agent LAYOUT): phone trivia = near-full-width, bottom-anchored sheet.
 * Anchoring the card to the bottom keeps it in thumb reach for one-handed play,
 * and dropping the fixed aspect-ratio lets it size to its content (with an
 * internal scroll fallback) so a long question can never clip on a small phone.
 * NOTE (intentional deviation from the contract's "stacked answers"): the 2x2
 * grid is kept because the answer art is a horizontal pill that distorts and
 * overflows the viewport if forced into a full-width single column at its native
 * 408:144 aspect; 2-up reads cleanly and stays >=48px tall down to 320px.
 * ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .trivia-backdrop {
    align-items: flex-end;
    /* Clear the bonus rail: while a question is open the ability bar sits
       ABOVE the trivia backdrop (z 31, so 50/50 stays clickable), so the
       bottom-anchored sheet must stop above the rail band or its lower third
       (50/50 button, feedback) hides behind the rail art. --bar-bottom
       already includes the safe-area inset. */
    padding: 0 2% calc(var(--bar-bottom, 130px) + 8px);
  }
  .trivia-modal {
    width: min(100%, 560px) !important;
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: calc(100svh - var(--bar-bottom, 130px) - 20px) !important;
    max-height: calc(100dvh - var(--bar-bottom, 130px) - 20px) !important;
    overflow-y: auto !important;
    padding: 16px 5% 18px !important;
    border: 2px solid rgba(213, 154, 47, 0.9);
    border-radius: 8px;
    background:
      linear-gradient(90deg, rgba(105, 15, 18, 0.82), transparent 13%, transparent 87%, rgba(105, 15, 18, 0.82)),
      radial-gradient(circle at 50% 3%, rgba(51, 229, 255, 0.2), transparent 32%),
      linear-gradient(180deg, rgba(13, 25, 45, 0.99), rgba(1, 5, 14, 0.99));
  }
  .trivia-modal.result-good .trivia-timer,
  .trivia-modal.result-bad .trivia-timer,
  .trivia-modal.result-timeout .trivia-timer,
  .trivia-modal.result-pending .trivia-timer {
    opacity: 0;
  }
  .trivia-verdict,
  .trivia-verdict.show {
    position: absolute;
    top: 55px;
    left: 50%;
    max-height: 32px;
    margin: 0;
    padding: 4px 14px;
    white-space: nowrap;
    transform: translate(-50%, 0);
  }
  .trivia-verdict:not(.show) {
    padding-right: 0;
    padding-left: 0;
    opacity: 0;
  }
  .trivia-modal.is-revealing .trivia-continue-hint {
    position: absolute;
    right: auto;
    bottom: 4px;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 2px 10px;
    border-radius: 999px;
    color: #dffaff;
    background: rgba(1, 7, 17, 0.86);
    box-shadow: 0 0 10px rgba(53, 223, 255, 0.16);
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* Phase 4 QA: SHORT viewports (landscape phones, small landscape windows) get the
   centered card by WIDTH (>639px wide), but the card's 640:456 aspect makes it
   taller than a ~375px-tall viewport, so it overflowed the screen with no scroll —
   a long question's answers could clip off-screen unreachably. Cap the card height
   to the viewport and scroll internally so content is always fully reachable. */
@media (max-height: 520px) {
  .trivia-backdrop {
    align-items: flex-start;
    padding: 8px 2% calc(var(--bar-bottom, 92px) + 8px);
  }

  .trivia-modal {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: calc(100svh - var(--bar-bottom, 92px) - 16px) !important;
    max-height: calc(100dvh - var(--bar-bottom, 92px) - 16px) !important;
    overflow-y: auto !important;
    /* px sides, not % — % padding tracks the PARENT (viewport) width, which
       on a short-but-wide desktop window blew the card out with dead space. */
    padding: 12px 44px 14px !important;
    border: 2px solid rgba(213, 154, 47, 0.9);
    border-radius: 8px;
    background:
      linear-gradient(90deg, rgba(105, 15, 18, 0.82), transparent 13%, transparent 87%, rgba(105, 15, 18, 0.82)),
      radial-gradient(circle at 50% 3%, rgba(51, 229, 255, 0.2), transparent 32%),
      linear-gradient(180deg, rgba(13, 25, 45, 0.99), rgba(1, 5, 14, 0.99));
  }
}

/* ------------------------------------------------------------------ *
 * Raster v1 foreground staging: keep Kuriosi readable above the rail.
 * ------------------------------------------------------------------ */
/* Phase 4 (Agent LAYOUT): the rail height now tracks var(--ability-h) and its
   width is capped to ~6.6x that (near the art's 6.43:1 aspect) + centered, so it
   reads as a tidy centered console on desktop instead of stretching wide. Buttons
   (and their icons) scale off the bar height so they always sit inside the band
   with room for the hotkey badge (above) and charge pips (below) — no more
   translateY nudges that clipped the pips at the viewport edge. */
#ability-bar {
  align-items: center !important;
  padding: 0 calc(8px + env(safe-area-inset-right, 0px))
             env(safe-area-inset-bottom, 0px)
             calc(8px + env(safe-area-inset-left, 0px)) !important;
}

.ability-row {
  position: relative !important;
  display: block !important;
  height: min(var(--ability-h), calc(100vw / 2.948)) !important;
  width: min(100%, calc(var(--ability-h) * 2.948), 720px) !important;
  max-width: 720px !important;
  padding: 0 !important;
  transform: none !important;
  background: url('../assets/ui/runtime/bonus-hud/bonus-hud-empty.webp') no-repeat center !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, 0.38));
}

.ability-btn {
  position: absolute !important;
  top: 0 !important;
  left: var(--ability-x) !important;
  translate: -50% 0 !important;
  width: 18% !important;
  height: 62% !important;
  min-width: 48px !important;
  min-height: 0 !important; /* base rule's 56px min would oval the button when small */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

.ability-btn[data-type="shuriken"] { --ability-x: 23.2%; }
.ability-btn[data-type="timeslow"] { --ability-x: 41.4%; }
.ability-btn[data-type="fifty"] { --ability-x: 59.1%; }
.ability-btn[data-type="water"] { --ability-x: 77.6%; }

.ability-btn::after {
  content: "";
  position: absolute;
  inset: 6% 12% 25%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 28px 8px rgba(51, 229, 255, 0.58);
  transition: opacity 0.15s ease;
}

.ability-btn:hover:not(:disabled) {
  transform: scale(1.03) !important;
}

.ability-btn:hover:not(:disabled)::after,
.ability-btn:focus-visible::after {
  opacity: 1;
}

.ability-btn:active:not(:disabled) {
  transform: scale(0.97) !important;
}

.ability-icon {
  display: none !important;
}

.ability-hotkey {
  display: none !important;
}

.ability-name {
  display: none !important;
}

.ability-pips {
  position: absolute !important;
  left: 50% !important;
  bottom: 4% !important;
  width: 94% !important;
  aspect-ratio: 4 / 1 !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.ability-pips[data-charges="0"] { background-image: url('../assets/ui/runtime/bonus-hud/slot-overlay-0.png') !important; }
.ability-pips[data-charges="1"] { background-image: url('../assets/ui/runtime/bonus-hud/slot-overlay-1.png') !important; }
.ability-pips[data-charges="2"] { background-image: url('../assets/ui/runtime/bonus-hud/slot-overlay-2.png') !important; }
.ability-pips[data-charges="3"] { background-image: url('../assets/ui/runtime/bonus-hud/slot-overlay-3.png') !important; }
.ability-pips[data-charges="4"] { background-image: url('../assets/ui/runtime/bonus-hud/slot-overlay-4.png') !important; }
.ability-pips[data-charges="5"] { background-image: url('../assets/ui/runtime/bonus-hud/slot-overlay-5.png') !important; }
.ability-pips[data-charges="6"] { background-image: url('../assets/ui/runtime/bonus-hud/slot-overlay-6.png') !important; }

.ability-pip {
  display: none !important;
}

.ability-btn.is-empty,
.ability-btn.is-context-locked {
  opacity: 1 !important;
  filter: none !important;
  background: transparent !important;
}

/* Question open + 50/50 charged: pulse the slot's hover glow so "usable right
   now" reads even though the raster skin hides the per-button chrome. Uses the
   ::after glow because the skin forces box-shadow:none on the button itself. */
.ability-btn.is-context-ready::after {
  opacity: 1;
  animation: ability-ready-pulse 1.2s ease-in-out infinite;
}
@keyframes ability-ready-pulse {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(51, 229, 255, 0.3); }
  50% { box-shadow: 0 0 28px 9px rgba(51, 229, 255, 0.66); }
}
@media (prefers-reduced-motion: reduce) {
  .ability-btn.is-context-ready::after { animation: none; opacity: 1; }
}

/* Phase 4 QA: on very short viewports (landscape phones / split-screen) the
   ability bar is intentionally compact (~51px), so keep the button floor at the
   contract's allowed ~44px there — the 48px portrait floor would crowd the bar
   and clip the charge pips that hang below each button. */
@media (max-height: 520px) {
  .ability-btn {
    min-width: 44px !important;
  }
}