/* ==========================================================================
   ARCHI GROUP - Exam Mode Stylesheet (Inverted Maroon/Paper Theme)
   Scoped strictly under body.theme-exam. Zero effect on normal pages.
   ========================================================================== */

/* --- 1.1 Inverted Palette & Background --- */
body.theme-exam {
  --exam-light-1: #F3F1EA;
  --exam-light-2: #E6B84A;
  --exam-light-3: #8FCDB5;
  --exam-light-4: #FFFFFF;
  --exam-notice-bg: #6F2C37;
  --fx-slow: 1;

  background-color: var(--maroon, #8E3B46) !important;
  color: var(--paper, #F3F1EA) !important;
  scroll-padding-top: 96px;

  /* Irregular aperiodic scatter: Layer 1 (1440x1000, 18 blocks) + Layer 2 (1600x1200, 7 blocks) */
  background-image:
    url("data:image/svg+xml,%3Csvg width='1440' height='1000' viewBox='0 0 1440 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='64' y='82' width='48' height='48' fill='%23F3F1EA' opacity='0.08'/%3E%3Crect x='180' y='320' width='32' height='32' fill='%23C8962E' opacity='0.07'/%3E%3Crect x='310' y='140' width='64' height='64' fill='%233E6B5E' opacity='0.06'/%3E%3Crect x='420' y='490' width='24' height='24' fill='%23F3F1EA' opacity='0.08'/%3E%3Crect x='560' y='70' width='56' height='56' fill='%23C8962E' opacity='0.09'/%3E%3Crect x='690' y='280' width='40' height='40' fill='%23F3F1EA' opacity='0.07'/%3E%3Crect x='820' y='610' width='72' height='72' fill='%233E6B5E' opacity='0.06'/%3E%3Crect x='940' y='190' width='36' height='36' fill='%23F3F1EA' opacity='0.08'/%3E%3Crect x='1080' y='420' width='52' height='52' fill='%23C8962E' opacity='0.07'/%3E%3Crect x='1220' y='110' width='28' height='28' fill='%23F3F1EA' opacity='0.08'/%3E%3Crect x='1330' y='540' width='60' height='60' fill='%233E6B5E' opacity='0.06'/%3E%3Crect x='120' y='780' width='68' height='68' fill='%23C8962E' opacity='0.08'/%3E%3Crect x='290' y='860' width='36' height='36' fill='%23F3F1EA' opacity='0.07'/%3E%3Crect x='480' y='740' width='48' height='48' fill='%233E6B5E' opacity='0.06'/%3E%3Crect x='670' y='880' width='32' height='32' fill='%23C8962E' opacity='0.08'/%3E%3Crect x='890' y='820' width='56' height='56' fill='%23F3F1EA' opacity='0.08'/%3E%3Crect x='1050' y='710' width='44' height='44' fill='%23C8962E' opacity='0.07'/%3E%3Crect x='1260' y='890' width='64' height='64' fill='%23F3F1EA' opacity='0.08'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='1600' height='1200' viewBox='0 0 1600 1200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='150' y='210' width='54' height='54' fill='%23F3F1EA' opacity='0.06'/%3E%3Crect x='460' y='580' width='68' height='68' fill='%23C8962E' opacity='0.06'/%3E%3Crect x='790' y='160' width='38' height='38' fill='%233E6B5E' opacity='0.05'/%3E%3Crect x='1120' y='390' width='60' height='60' fill='%23F3F1EA' opacity='0.06'/%3E%3Crect x='1380' y='720' width='46' height='46' fill='%23C8962E' opacity='0.05'/%3E%3Crect x='320' y='980' width='72' height='72' fill='%233E6B5E' opacity='0.05'/%3E%3Crect x='890' y='1050' width='50' height='50' fill='%23F3F1EA' opacity='0.06'/%3E%3C/svg%3E") !important;
  background-position: 0 0, 480px 320px !important;
  background-repeat: repeat, repeat !important;
}

/* --- 1.2 Header (A1 Fix: Solid Maroon Sticky Header) --- */
.theme-exam .site-header {
  background-color: var(--maroon, #8E3B46) !important;
  border-bottom: 1px solid rgba(243, 241, 234, 0.2) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.theme-exam .site-logo-link {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
}

.theme-exam .site-logo {
  filter: brightness(0) invert(1) !important;
}

.theme-exam .header-wordmark {
  color: var(--paper, #F3F1EA) !important;
}

/* 3-Segment header line: green, mustard, paper */
.theme-exam .brand-divider-line .segment-maroon {
  background-color: var(--green, #3E6B5E);
}
.theme-exam .brand-divider-line .segment-green {
  background-color: var(--mustard, #C8962E);
}
.theme-exam .brand-divider-line .segment-mustard {
  background-color: var(--paper, #F3F1EA);
}

/* --- 1.3 Layout: Single Centered Column --- */
.theme-exam .view-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  width: 100%;
}

.theme-exam .assignment-form-header {
  display: contents !important;
}

.theme-exam .form-view-layout {
  display: contents !important;
}

/* Order 1: Back Link */
.theme-exam .back-link {
  order: 1;
  align-self: flex-start;
  color: var(--paper, #F3F1EA);
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}
.theme-exam .back-link:hover {
  color: var(--mustard, #C8962E);
}

/* Order 2: Centered Rocket Stage at Top */
.theme-exam .rocket-column {
  order: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.theme-exam .rocket-card {
  width: 100%;
  max-width: 640px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  position: relative;
}

.theme-exam .rocket-stage {
  height: min(46vh, 440px) !important;
  min-height: min(46vh, 440px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative;
  overflow: visible;
}

@media (max-width: 899px) {
  .theme-exam .rocket-stage {
    height: min(34vh, 280px) !important;
    min-height: min(34vh, 280px) !important;
    max-height: 280px !important;
  }
}

/* Rocket Stage Internal Alignment */
.theme-exam .rocket-assembly {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 4px;
}

.theme-exam .launch-pad-scaffold {
  display: flex;
  justify-content: center;
  position: relative;
}

/* A4 Vertical Altitude Scale Ruler */
.theme-exam .rocket-track {
  position: absolute !important;
  top: 16px !important;
  bottom: 84px !important;
  left: calc(50% + 90px) !important;
  right: auto !important;
  width: 48px !important;
  pointer-events: none;
  display: flex !important;
  justify-content: space-between !important;
}

@media (max-width: 899px) {
  .theme-exam .rocket-track {
    left: calc(50% + 66px) !important;
    right: auto !important;
  }
}

.theme-exam .track-line {
  width: 2px !important;
  background-color: rgba(243, 241, 234, 0.4) !important;
  height: 100% !important;
}

.theme-exam .track-markers {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--paper, #F3F1EA) !important;
  opacity: 0.95 !important;
  font-family: var(--font-body);
}

.theme-exam .track-markers span {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.theme-exam .track-markers span::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 1.5px;
  background-color: rgba(243, 241, 234, 0.7);
}

/* A6 Status Line (>= 16px, dir=rtl, text-align: center) */
.theme-exam .rocket-status-text {
  color: var(--paper, #F3F1EA) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  margin-top: 8px;
  text-align: center !important;
  direction: rtl !important;
}

/* A2 Status Lights (Contrast tokens, 2px paper ring when lit, 60% outline unlit) */
.theme-exam .rocket-lights-panel {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin-top: 8px;
}

.theme-exam .indicator-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(243, 241, 234, 0.6) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.theme-exam .indicator-dot.active {
  box-shadow: 0 0 0 2px var(--paper, #F3F1EA), 0 0 10px rgba(243, 241, 234, 0.5) !important;
}

.theme-exam .indicator-dot.light-maroon.active {
  background-color: var(--exam-light-1) !important;
  border-color: var(--exam-light-1) !important;
}
.theme-exam .indicator-dot.light-green.active {
  background-color: var(--exam-light-2) !important;
  border-color: var(--exam-light-2) !important;
}
.theme-exam .indicator-dot.light-mustard.active {
  background-color: var(--exam-light-3) !important;
  border-color: var(--exam-light-3) !important;
}
.theme-exam .indicator-dot.light-charcoal.active {
  background-color: var(--exam-light-4) !important;
  border-color: var(--exam-light-4) !important;
}

.theme-exam .indicator-label {
  color: var(--paper, #F3F1EA) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: 0.95 !important;
}

/* A3 Progress Bar (Track paper@25%, fill paper/mustard) */
.theme-exam .rocket-progress-container {
  background-color: rgba(243, 241, 234, 0.25) !important;
  border-radius: 4px;
}

.theme-exam .rocket-progress-bar {
  background-color: var(--paper, #F3F1EA) !important;
}

.theme-exam .rocket-progress-bar.warning {
  background-color: var(--mustard, #C8962E) !important;
}

/* 48px Mute Button visible on maroon */
.theme-exam .rocket-sound-toggle {
  color: var(--paper, #F3F1EA);
  border: 1.5px solid rgba(243, 241, 234, 0.45);
  background: rgba(243, 241, 234, 0.12);
}
.theme-exam .rocket-sound-toggle:hover {
  background: rgba(243, 241, 234, 0.25);
  border-color: var(--paper, #F3F1EA);
}

/* --- 1.4 Rocket Colors on SVG via CSS Variables --- */
.theme-exam {
  --rocket-body-fill: var(--paper, #F3F1EA);
  --rocket-body-stroke: #333333;
  --rocket-window-outer: var(--paper-2, #E9E6DC);
  --rocket-window-inner: var(--maroon, #8E3B46);
  --rocket-fin-fill: var(--mustard, #C8962E);
  --rocket-fin-stroke: var(--mustard-dark, #A87B1F);
  --rocket-fin-center: var(--mustard, #C8962E);
  --rocket-flame-outer: var(--mustard, #C8962E);
  --rocket-flame-core: var(--paper, #F3F1EA);
  --rocket-pad-beam: var(--paper, #F3F1EA);
  --rocket-pad-strut: var(--mustard, #C8962E);
}

.theme-exam .launch-pad-scaffold svg line[x1="10"],
.theme-exam .launch-pad-scaffold svg line[x1="40"] {
  stroke: var(--paper, #F3F1EA);
}
.theme-exam .launch-pad-scaffold svg line[x1="25"],
.theme-exam .launch-pad-scaffold svg line[x1="115"] {
  stroke: var(--mustard, #C8962E);
}

/* Order 3: Exam Badge (Paper pill, maroon text, icon + text) */
.theme-exam .form-exam-badge {
  order: 3;
  background: var(--paper, #F3F1EA) !important;
  color: var(--maroon, #8E3B46) !important;
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.4rem;
}

/* Order 4: Workshop Subtitle */
.theme-exam .form-workshop-sub {
  order: 4;
  color: var(--paper-2, #E9E6DC) !important;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
  text-align: center;
}

/* Order 5: Exam Title (decorative font ~1.5x, paper) + 4px mustard underline */
.theme-exam .form-assignment-main-title {
  order: 5;
  font-family: var(--font-display, 'Ara Hamah 1964', sans-serif);
  font-size: 2.6rem !important;
  color: var(--paper, #F3F1EA) !important;
  text-align: center;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.theme-exam .form-assignment-main-title::after {
  content: '';
  display: block;
  width: 84px;
  height: 4px;
  background-color: var(--mustard, #C8962E);
  margin: 10px auto 0;
  border-radius: 2px;
  transform-origin: right center;
}

@media (max-width: 899px) {
  .theme-exam .form-assignment-main-title {
    font-size: 1.95rem !important;
  }
}

/* Order 6: Exam Description */
.theme-exam .form-assignment-desc {
  order: 6;
  color: var(--paper, #F3F1EA);
  opacity: 0.95;
  text-align: center;
  max-width: 620px;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* Order 7: Deadline Line */
.theme-exam .form-deadline-bar {
  order: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.theme-exam .form-concrete-deadline {
  color: var(--paper-2, #E9E6DC) !important;
}
.theme-exam #form-countdown-badge {
  background: var(--paper, #F3F1EA);
  color: var(--ink, #333333);
  border: 1px solid var(--paper-2, #E9E6DC);
}
.theme-exam #form-countdown-badge.warning {
  background: var(--mustard, #C8962E);
  color: var(--ink, #333333);
  border: none;
  font-weight: 700;
}

/* Order 8: A5 Exam Notice Box (Deep maroon #6F2C37, 4px mustard edge, 16px paper text) */
.theme-exam .exam-notice-box {
  order: 8;
  background: var(--exam-notice-bg, #6F2C37) !important;
  color: var(--paper, #F3F1EA) !important;
  border: none !important;
  border-inline-start: 4px solid var(--mustard, #C8962E) !important;
  border-radius: var(--radius-sm, 6px);
  padding: 14px 18px;
  max-width: 640px;
  width: 100%;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: start;
  font-size: 16px !important;
  line-height: 1.5;
}
.theme-exam .exam-notice-icon {
  color: var(--mustard, #C8962E) !important;
  flex-shrink: 0;
}

/* Order 9: Form Card (max-width 640px, paper bg, ink text, white inputs) */
.theme-exam .form-column {
  order: 9;
  max-width: 640px;
  width: 100%;
}

.theme-exam .form-card {
  background: var(--paper, #F3F1EA) !important;
  color: var(--ink, #333333) !important;
  border-radius: var(--radius-md, 10px);
  padding: 2rem 1.75rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 899px) {
  .theme-exam .form-card {
    padding: 1.25rem 1rem;
  }
}

.theme-exam .field-label {
  color: var(--ink, #333333) !important;
  font-weight: 600;
}

.theme-exam .field-hint {
  color: var(--ink-muted, #555855) !important;
}

.theme-exam .field-input,
.theme-exam .field-textarea {
  background-color: #FFFFFF !important;
  color: #333333 !important;
  border: 1.5px solid var(--border-color, #D4CFC2) !important;
}

.theme-exam .field-input:focus,
.theme-exam .field-textarea:focus {
  border-color: var(--maroon, #8E3B46) !important;
  box-shadow: 0 0 0 3px rgba(142, 59, 70, 0.15) !important;
}

.theme-exam .file-dropzone {
  background: #FFFFFF !important;
  border: 2px dashed var(--border-color, #D4CFC2) !important;
}

.theme-exam .file-dropzone.dragover {
  border-color: var(--maroon, #8E3B46) !important;
  background: rgba(142, 59, 70, 0.05) !important;
}

.theme-exam .btn-choice {
  background: #FFFFFF !important;
  color: var(--ink, #333333) !important;
  border: 1.5px solid var(--border-color, #D4CFC2) !important;
}

.theme-exam .btn-choice.active {
  background: var(--maroon, #8E3B46) !important;
  color: var(--paper, #F3F1EA) !important;
  border-color: var(--maroon, #8E3B46) !important;
}

.theme-exam .btn-submit-action {
  background: var(--maroon, #8E3B46) !important;
  color: var(--paper, #F3F1EA) !important;
  border: none !important;
}
.theme-exam .btn-submit-action:hover:not(:disabled) {
  background: var(--maroon-dark, #742D37) !important;
}

/* --- 1.5 Exam SUCCESS Screen --- */
.theme-exam .state-feedback-card {
  background: var(--paper, #F3F1EA);
  color: var(--ink, #333333);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-exam .success-title {
  color: var(--paper, #F3F1EA) !important;
  font-family: var(--font-display, 'Ara Hamah 1964', sans-serif);
  font-size: 2.6rem !important;
}

.theme-exam .success-confirmation-line {
  color: var(--paper-2, #E9E6DC) !important;
}

.theme-exam .success-actions .btn-primary {
  background: var(--paper, #F3F1EA) !important;
  color: var(--maroon, #8E3B46) !important;
  border: none !important;
  font-weight: 700 !important;
}
.theme-exam .success-actions .btn-primary:hover {
  background: #FFFFFF !important;
}

.theme-exam .success-actions .btn-secondary {
  border: 2px solid var(--paper, #F3F1EA) !important;
  color: var(--paper, #F3F1EA) !important;
  background: transparent !important;
}
.theme-exam .success-actions .btn-secondary:hover {
  background: rgba(243, 241, 234, 0.15) !important;
}

/* Support Footer in Exam Theme */
.theme-exam .support-info-text {
  color: var(--paper, #F3F1EA);
  opacity: 0.9;
}
.theme-exam .support-link {
  color: var(--mustard, #C8962E);
}

/* ==========================================================================
   B1 ENTRANCE CHOREOGRAPHY (Scoped under .fx-entrance-active)
   Fixed durations, fill-mode both: guaranteed visible by 2.4s even if JS halts.
   ========================================================================== */
.fx-entrance-active .form-exam-badge {
  animation: fxBadgeStamp calc(350ms * var(--fx-slow, 1)) cubic-bezier(0.2, 0.9, 0.2, 1.2) calc(20ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-workshop-sub {
  animation: fxFadeIn calc(380ms * var(--fx-slow, 1)) ease calc(120ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-assignment-main-title {
  overflow: hidden;
}
.fx-entrance-active .form-assignment-main-title bdi {
  display: inline-block;
  animation: fxTitleReveal calc(520ms * var(--fx-slow, 1)) cubic-bezier(0.2, 0.8, 0.2, 1) calc(180ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-assignment-main-title::after {
  animation: fxUnderlineDraw calc(420ms * var(--fx-slow, 1)) ease-out calc(500ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-deadline-bar {
  animation: fxSlideUp calc(350ms * var(--fx-slow, 1)) ease-out calc(450ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .exam-notice-box {
  animation: fxNoticeSlide calc(380ms * var(--fx-slow, 1)) ease-out calc(600ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .pad-support-dot:nth-child(1) {
  animation: fxDotPop calc(180ms * var(--fx-slow, 1)) ease-out calc(700ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .pad-support-dot:nth-child(2) {
  animation: fxDotPop calc(180ms * var(--fx-slow, 1)) ease-out calc(820ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .pad-support-dot:nth-child(3) {
  animation: fxDotPop calc(180ms * var(--fx-slow, 1)) ease-out calc(940ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active #rocket-flame {
  animation: fxFlameIgnite calc(260ms * var(--fx-slow, 1)) ease-out calc(940ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-card {
  animation: fxCardRise calc(420ms * var(--fx-slow, 1)) cubic-bezier(0.2, 0.8, 0.2, 1) calc(900ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-card .form-group:nth-child(1) {
  animation: fxFieldRise calc(280ms * var(--fx-slow, 1)) ease-out calc(950ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-card .form-group:nth-child(2) {
  animation: fxFieldRise calc(280ms * var(--fx-slow, 1)) ease-out calc(1000ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-card .form-group:nth-child(3) {
  animation: fxFieldRise calc(280ms * var(--fx-slow, 1)) ease-out calc(1050ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-card .form-group:nth-child(4) {
  animation: fxFieldRise calc(280ms * var(--fx-slow, 1)) ease-out calc(1100ms * var(--fx-slow, 1)) both;
}
.fx-entrance-active .form-card .form-group:nth-child(5) {
  animation: fxFieldRise calc(280ms * var(--fx-slow, 1)) ease-out calc(1150ms * var(--fx-slow, 1)) both;
}

@keyframes fxBadgeStamp {
  0% { opacity: 0; transform: scale(1.35) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes fxFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fxTitleReveal {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fxUnderlineDraw {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes fxSlideUp {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fxNoticeSlide {
  0% { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fxDotPop {
  0% { opacity: 0; transform: scale(0.3); }
  70% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0.35; transform: scale(1); }
}
@keyframes fxFlameIgnite {
  0% { opacity: 0.5; transform: translate(50px, 126px) scale(0.2); }
  100% { opacity: 1; transform: translate(50px, 126px) scale(1); }
}
@keyframes fxCardRise {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fxFieldRise {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   B2 AMBIENT IDLE ANIMATIONS
   Updraft Canvas, Pad Rings, Flame Flicker, Pad Chase
   ========================================================================== */
.exam-updraft-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Concentric square outlines expanding from pad */
.pad-ring-wrap {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  width: 44px;
  height: 44px;
}
.pad-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(243, 241, 234, 0.25);
  box-sizing: border-box;
  animation: padRingExpand 4s infinite linear;
}
.pad-ring.ring-2 { animation-delay: 1.33s; }
.pad-ring.ring-3 { animation-delay: 2.66s; }
@keyframes padRingExpand {
  0% { transform: scale(1); opacity: 0.35; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Flame Flicker: irregular 5 keyframe loop on flame group only */
.flame-exam-idle {
  animation: flameExamFlicker 1.3s infinite ease-in-out;
  transform-origin: 50px 126px;
}
@keyframes flameExamFlicker {
  0% { transform: translate(50px, 126px) scale(1, 1); }
  22% { transform: translate(50px, 126px) scale(0.96, 1.08); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  45% { transform: translate(50px, 126px) scale(1.04, 0.92); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  68% { transform: translate(50px, 126px) scale(0.97, 1.05); animation-timing-function: cubic-bezier(0.5, 0.1, 0.2, 1); }
  85% { transform: translate(50px, 126px) scale(1.02, 0.96); animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
  100% { transform: translate(50px, 126px) scale(1, 1); }
}

/* Pad Support Lights: slow chase */
.pad-lights-wrap {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  pointer-events: none;
  z-index: 2;
}
.pad-support-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--paper, #F3F1EA);
  opacity: 0.35;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pad-chase-active .pad-support-dot:nth-child(1) { animation: padChase 1.8s infinite 0s; }
.pad-chase-active .pad-support-dot:nth-child(2) { animation: padChase 1.8s infinite 0.6s; }
.pad-chase-active .pad-support-dot:nth-child(3) { animation: padChase 1.8s infinite 1.2s; }
@keyframes padChase {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  33% { opacity: 1; transform: scale(1.3); box-shadow: 0 0 6px var(--paper); }
  66% { opacity: 0.3; transform: scale(1); }
}
.pad-ready-steady .pad-support-dot {
  opacity: 1 !important;
  transform: scale(1.15) !important;
  box-shadow: 0 0 8px var(--paper, #F3F1EA) !important;
  animation: none !important;
}

/* ==========================================================================
   B3 FEEDBACK ANIMATIONS
   Pixel Burst on lit lights, Ready button pulse
   ========================================================================== */
.exam-light-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
}
.burst-pixel {
  position: absolute;
  width: 3.5px;
  height: 3.5px;
  background-color: var(--paper, #F3F1EA);
  border-radius: 0.5px;
  animation: burstAnim 320ms ease-out forwards;
}
.burst-pixel.bp-0 { --bx: 0px; --by: -14px; }
.burst-pixel.bp-1 { --bx: 10px; --by: -10px; }
.burst-pixel.bp-2 { --bx: 14px; --by: 0px; }
.burst-pixel.bp-3 { --bx: 10px; --by: 10px; }
.burst-pixel.bp-4 { --bx: 0px; --by: 14px; }
.burst-pixel.bp-5 { --bx: -10px; --by: 10px; }
.burst-pixel.bp-6 { --bx: -14px; --by: 0px; }
.burst-pixel.bp-7 { --bx: -10px; --by: -10px; }

@keyframes burstAnim {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(0.4); opacity: 0; }
}

.theme-exam #btn-submit.exam-btn-ready-pulse {
  animation: examBtnPulse 2.2s infinite ease-in-out;
}
@keyframes examBtnPulse {
  0% { box-shadow: 0 0 0 0 rgba(243, 241, 234, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(243, 241, 234, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 241, 234, 0); }
}

/* ==========================================================================
   B5 REDUCED MOTION SAFETY
   Prefers-reduced-motion: reduce => zero entrance, zero idle, zero pulse.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .theme-exam * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .theme-exam .flame-exam-idle,
  .theme-exam .pad-ring,
  .theme-exam .pad-chase-active .pad-support-dot,
  .theme-exam #btn-submit.exam-btn-ready-pulse,
  .theme-exam .burst-pixel,
  .fx-entrance-active * {
    animation: none !important;
    box-shadow: none !important;
  }
}