/* Playable V2: real viewport canvas; typography is never scaled to fit a frame. */
.v2-game,
.v2-prototype {
  --v2-bg: #002664;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  color: #fff;
  background: var(--v2-bg);
  font-family: 'Helvetica Neue', 'PingFang TC', sans-serif;
}
.v2-game-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 667px;
  font-family: 'Helvetica Neue', 'PingFang TC', sans-serif;
  overflow: visible;
}
.v2-game-svg text { font-family: 'Helvetica Neue', 'PingFang TC', sans-serif; }
.v2-game-svg [data-v2-action] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
}
.v2-game-svg [data-v2-action][aria-disabled='true'] { cursor: default; }
.v2-game-svg [data-v2-action]:focus-visible > rect,
.v2-game-svg [data-v2-action]:focus-visible > circle {
  stroke: #00a1d1;
  stroke-width: 3px;
}
.v2-game-svg [data-v2-action]:focus-visible > text { text-decoration: underline; }
.v2-game-svg [data-v2-action]:active:not([aria-disabled='true']) { opacity: .82; }
/* Whole-canvas stage changes stay perceivable away from the timer. Only the
   background paint pulses slowly; controls and text never flicker or fade. */
.v2-game-svg[data-time-phase='amber'] { background: #654017; }
.v2-game-svg[data-time-phase='critical'] { background: #6b1631; }
.v2-game-svg [data-v2-warning-surface='amber'] { animation: v2-amber-pulse 2.4s ease-in-out infinite; }
.v2-game-svg [data-v2-warning-surface='critical'] { animation: v2-critical-pulse 2s ease-in-out infinite; }
@keyframes v2-amber-pulse { 0%, 100% { fill: #654017; } 50% { fill: #704c21; } }
@keyframes v2-critical-pulse { 0%, 100% { fill: #6b1631; } 50% { fill: #7c1b35; } }
.v2-game-error {
  position: absolute;
  z-index: 8;
  left: 20px;
  right: 20px;
  bottom: max(14px, env(safe-area-inset-bottom));
  padding: 12px 16px;
  border: 1px solid #d7e2ed;
  border-radius: 14px;
  background: #fff;
  color: #002664;
  font-size: 15px;
  line-height: 1.5;
}
.v2-game-error button { min-height: 44px; color: inherit; font: inherit; font-weight: 650; }
@media (prefers-reduced-motion: reduce) {
  .v2-game *, .v2-prototype * { animation: none !important; transition: none !important; }
}
/* One motion vocabulary: short state changes, quiet achievement accents. */
.v2-game-svg [data-v2-action='answer'] > rect { transition:fill 100ms ease-out, stroke 100ms ease-out; }
.v2-game-svg [data-v2-action='voice'] > rect { transition:fill 120ms ease-out, stroke 120ms ease-out; }
.v2-game-svg [data-v2-feedback], .v2-game-svg [data-q4-score], .v2-game [data-pass-number] { transform-box:fill-box; transform-origin:center; }
.v2-game-svg [data-v2-feedback='correct'] { fill:#96e4d3; font-weight:650; }
.v2-game .woa-pass-cta:active { opacity:.88; }
.v2-card-preview { margin-top:20px; border-top:1px solid #d7e2ed; padding-top:12px; }
.v2-card-preview summary { cursor:pointer; min-height:44px; display:list-item; padding-top:12px; font-weight:650; }
.v2-card-preview img { display:block; width:100%; margin-block:12px; border-radius:14px; }
.v2-card-preview button, .v2-share-again { min-height:44px; border:1px solid #b7cad9; background:#eaf6fb; color:#002664; border-radius:10px; padding:10px 14px; margin:4px; font:inherit; }
.v2-card-status { font-size:14px; line-height:1.6; margin-top:16px; }
@media (prefers-reduced-motion: reduce) {
  .v2-game-svg [data-v2-action] > rect { transition:none; }
}