/* M4-P3 first reaction slice: static approved knight poses in reserved, fixed-size stages.
   A pose change crossfades (300 ms); while motion is allowed the current pose scales very
   slowly between 1.00 and 1.025 from its feet (7 s each way). Nothing here moves layout:
   every stage has a fixed size, and the poses are absolutely positioned inside it. */
.mascotStage { position: relative; display: inline-block; flex-shrink: 0; pointer-events: none; }
/* Soft ground shadow under the feet, shared by every pose. */
.mascotStage::after {
  content: ''; position: absolute; left: 24%; right: 24%; bottom: 1.5%; height: 5%; z-index: 0;
  border-radius: 50%; background: radial-gradient(closest-side, #07182d59, #07182d00);
}
.mascotStage .mascotPose {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  width: 100% !important; height: 97.5% !important;
  object-fit: contain; object-position: 50% 100%;
  transform-origin: 50% 100%;
  translate: 0 var(--mascot-drop, 0%);
  transition: opacity .3s ease;
}
/* Same foot baseline for every pose: each render places the feet a little differently, so
   the image (never the art) is lowered to the welcome render's baseline (96.3% down). */
.mascotStage .mascotPose[src="landing-knight-waiting.webp"] { --mascot-drop: 2.8%; }
.mascotStage .mascotPose[src="landing-knight-ready.webp"] { --mascot-drop: 3.3%; }
.mascotStage .mascotPose[src="landing-knight-listen.webp"] { --mascot-drop: 1.1%; }
.mascotStage .mascotPose[src="landing-knight-celebrate.webp"] { --mascot-drop: 2.81%; }
.mascotStage .mascotPose[src="landing-knight-reconnect.webp"] { --mascot-drop: 1.9%; }
.mascotStage .mascotPose[src="landing-knight-welcome.webp"] { --mascot-drop: 3.5%; }   /* M4-P4: boot 93.0% → 96.4% */
.mascotStage .mascotPose[src="landing-knight-thinking.webp"] { --mascot-drop: 0.4%; }  /* M4-P4: boot 96.1% → 96.4% */
.mascotStage .mascotPose[src="landing-knight-announce.webp"] { --mascot-drop: 3%; }    /* M4-P4: boot 93.5% → 96.4% */
/* Fade roles: "entering" starts hidden, "leaving" starts visible; "fading" (added on the next
   frame) runs both transitions. Cleanup always leaves exactly one "current". */
.mascotStage .mascotPose.entering { opacity: 0; }
.mascotStage .mascotPose.leaving { opacity: 1; }
.mascotStage .mascotPose.entering.fading { opacity: 1; }
.mascotStage .mascotPose.leaving.fading { opacity: 0; }
.mascotStage .mascotPose[hidden] { display: none; }
.mascotStage.mascotMoving .mascotPose.current { animation: mascotBreathe 7s ease-in-out infinite alternate; }
@keyframes mascotBreathe { from { scale: 1; } to { scale: 1.025; } }
/* Paused character, reduced motion or a hidden tab: static pose, immediate changes. Still
   stages (phone waiting/winner, TV) keep the one-off crossfade but never the slow scale. */
.mascotStage:not(.mascotMotionOn) .mascotPose { transition: none; animation: none; }
.mascotStage:not(.mascotMoving) .mascotPose { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .mascotStage .mascotPose { transition: none !important; animation: none !important; }
}
/* If the knight image cannot load, the screen's original icon shows instead. */
.mascotStage .mascotFallbackIcon { display: none; }
.mascotStage:has(> .mascotPose[hidden]) .mascotFallbackIcon { display: block; position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; }

/* ----- Mount sizes (the stage takes the size the static image used to have) ----- */
#screenHostLobby.knightLobby .knightWelcome .mascotStage { width: 140px; height: 210px; }
@media (max-width: 600px) { #screenHostLobby.knightLobby .knightWelcome .mascotStage { width: 95px; height: 145px; } }
.arenaPlayerBrand .mascotStage.arenaPlayerKnight { width: 54px; height: 80px; }
#screenTVDisplay .mascotStage.arenaTVKnight { display: block; }
#screenTVDisplay .mascotStage.arenaTVKnight[hidden] { display: none; }
@media (max-width: 980px) { #screenTVDisplay .mascotStage.arenaTVKnight { display: none; } }
#playerContainer .playerWaiting .waitingKnight { width: 72px; height: 108px; margin: 0 auto 18px; }
#playerContainer .playerWinnerScreen .winnerKnight { width: 96px; height: 144px; margin: 0 auto 20px; }
/* Host game: a reserved spot beside the title in the header (never over the board, cards or
   controls). The negative block margins let the knight use the header's 10 px inner padding (not
   its gold rim), so the header keeps its height. Below 900 px there is no spare width: the title
   would wrap sooner, so this decorative knight is hidden there (documented breakpoint), and so is
   the header's Pause-character control, which would have nothing to pause on this screen. */
#screenHostGame header .brand { align-items: center; }
#screenHostGame .mascotStage.hostGameKnight { width: 44px; height: 66px; margin: -8px 0 -8px 4px; }
@media (max-width: 899px) { #screenHostGame .mascotStage.hostGameKnight, #screenHostGame header .mascotMotionToggle { display: none; } }

/* Pause/resume character motion, beside the knight's surface controls: the same round navy/gold
   kit button as the sound toggles. Shared state per page with the landing/gate control. */
.mascotMotionToggle {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; flex: 0 0 44px;
  border: 3px solid transparent !important; border-radius: 50% !important;
  background: url('ui-kit-round-button.webp') center / 100% 100% no-repeat border-box,
              radial-gradient(circle at 35% 30%, #4f86d8, #17418f 60%, #0b2a6b) padding-box,
              linear-gradient(145deg, #fff2bb, #eac262 27%, #9c631b 58%, #f9d875 79%, #b17b2f) border-box !important;
  box-shadow: 0 3px 0 #6b4712, 0 6px 10px #07182d4d !important;
  color: #fff7e5 !important; font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center;
}
.mascotMotionToggle[aria-pressed="true"] { filter: saturate(.8); }
.mascotMotionToggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#screenHostGame header .mascotMotionToggle { vertical-align: middle; margin-right: 8px; }
/* Host lobby: appended after Back, so Logout and Back keep their places; at the few widths where the
   header has no spare room it wraps onto the next row on its own. */
#screenHostLobby .headerRight .mascotMotionToggle { vertical-align: middle; }
/* Host game: pause and Back to Lobby wrap as one unit, so on tablets the header keeps its two
   lines (meta text / buttons) instead of growing a taller first line. */
#screenHostGame .hostGameControls { display: inline-flex; align-items: center; white-space: nowrap; vertical-align: middle; }
/* Phone game header: Leave | pause | sound on one row, so the header keeps its height. */
#playerContainer .playerHeader:has(> .mascotMotionToggle) { grid-template-columns: minmax(0, 1fr) 44px 44px; }

.mascotStage .mascotPose[src="landing-knight-encourage.webp"] { --mascot-drop: 2.16%; }

.mascotStage .mascotPose[src="landing-knight-bow.webp"] { --mascot-drop: 2.29%; }

.mascotStage .mascotPose[src="landing-knight-cheer.webp"] { --mascot-drop: 2.42%; }