/* Sign-in decoration only. Form geometry and authentication remain unchanged. */
html:root #inventory-app .auth-page--playful {
  isolation: isolate;
}

/* The game is opt-in, including before its controller has loaded. */
.auth-page:not([data-game-enabled]) .auth-pan-viewport,
.auth-page:not([data-game-enabled]) .auth-mascot,
.auth-page:not([data-game-enabled]) .auth-confetti {
  display: none;
}
.auth-game-stage { display: contents; }
.auth-page:not([data-game-enabled]) .auth-game-stage,
.auth-mobile-controls { display: none; }

html:root #inventory-app .auth-game-toggle {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 21;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  background: var(--signal-surface);
  color: var(--signal-text);
  box-shadow: 0 3px 12px #10182012;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  touch-action: manipulation;
}
html:root #inventory-app .auth-game-toggle:hover {
  border-color: var(--signal-focus);
  background: var(--signal-subtle);
}
html:root #inventory-app .auth-game-toggle:focus-visible {
  outline: 3px solid var(--signal-focus);
  outline-offset: 3px;
}
.auth-game-toggle-track {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 22px;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  background: var(--signal-subtle);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.auth-game-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--signal-muted);
  transition: transform 160ms ease, background-color 160ms ease;
}
.auth-game-toggle[aria-checked="true"] .auth-game-toggle-track {
  border-color: var(--signal-positive-hover);
  background: var(--signal-positive);
}
.auth-game-toggle[aria-checked="true"] .auth-game-toggle-track::after {
  transform: translateX(14px);
  background: var(--signal-on-positive);
}

.auth-pan-viewport {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-pan {
  --auth-pan-base-width: 240px;
  /* +500% means six times the previous responsive size, not a larger cap. */
  --auth-pan-width: calc(min(calc(var(--auth-pan-base-width) * 2), var(--auth-pan-space, 480px)) * 6);
  position: absolute;
  z-index: 0;
  top: calc(var(--auth-pan-width) * -.02);
  left: calc(var(--auth-pan-width) * -.23);
  width: var(--auth-pan-width);
  aspect-ratio: 2;
  /* Keep the bowl anchored beyond the top-left edge, handle at 1:30.
     The viewport clips the enlarged photograph without adding scrollbars. */
  transform-origin: 28.58% 49.61%;
  transform: rotate(-45deg);
  pointer-events: none;
  user-select: none;
}

.auth-pan [data-auth-pan-source],
.auth-pan [data-auth-pan-dirt] {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.auth-pan [data-auth-pan-source] { object-fit: contain; -webkit-user-drag: none; }
.auth-pan [data-auth-pan-clean] { display: none; }
.auth-pan:not([data-pan-ready]) [data-auth-pan-dirt] { opacity: 0; }
.auth-page:not([data-pan-active]) .auth-pan { display: none; }

/* Shine belongs to the bowl; it never sweeps across the page or login form. */
.auth-pan-polish {
  position: absolute;
  left: 4.9%;
  top: 2.82%;
  width: 47.35%;
  height: 93.58%;
  overflow: hidden;
  border-radius: 50%;
}
.auth-pan-polish::after {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0;
  background: linear-gradient(115deg, transparent 34%, #e8ffff55 43%, #ffffffee 50%, #e8ffff55 57%, transparent 66%);
}
.auth-pan-sparkle {
  position: absolute;
  color: #fff;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1;
  opacity: 0;
  text-shadow: 0 0 8px #d6fffc, 0 0 20px #66c9ba;
}
.auth-pan-sparkle--one { left: 13%; top: 14%; }
.auth-pan-sparkle--two { left: 43%; top: 43%; }
.auth-pan-sparkle--three { left: 25%; top: 77%; }
.auth-pan[data-pan-shine] .auth-pan-polish::after { animation: auth-pan-shine 2600ms ease-out both; }
.auth-pan[data-pan-shine] .auth-pan-sparkle { animation: auth-pan-sparkle 1800ms ease-out both; }
.auth-pan[data-pan-shine] .auth-pan-sparkle--two { animation-delay: 250ms; }
.auth-pan[data-pan-shine] .auth-pan-sparkle--three { animation-delay: 500ms; }
.auth-pan[data-pan-shine] :is([data-auth-pan-source], [data-auth-pan-dirt]) {
  animation: auth-pan-clean-flash 2200ms ease-out both;
}
@keyframes auth-pan-clean-flash {
  0%, 100% { filter: brightness(1); }
  25% { filter: brightness(1.22); }
}
@keyframes auth-pan-shine {
  0% { opacity: 0; transform: translateX(-75%); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: translateX(75%); }
}
@keyframes auth-pan-sparkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(-12deg); }
  40% { opacity: 1; transform: scale(1.15) rotate(6deg); }
}

/* A finite, non-interactive celebration above the whole sign-in page. */
.auth-confetti {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
.auth-confetti:not([data-active]) { display: none; }
.auth-confetti-piece {
  position: absolute;
  top: -32px;
  left: var(--confetti-x);
  width: var(--confetti-width);
  height: var(--confetti-height);
  border-radius: 1px;
  background: var(--confetti-color);
  opacity: 0;
  will-change: transform, opacity;
  animation: auth-confetti-fall var(--confetti-duration) linear var(--confetti-delay) both;
}
.auth-confetti-piece:nth-child(3n) { border-radius: 50%; }
@keyframes auth-confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--confetti-rotation)) rotateY(0deg);
  }
  8%, 85% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--confetti-drift), calc(100vh + 80px), 0)
      rotate(calc(var(--confetti-rotation) + 720deg)) rotateY(540deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-confetti { display: none; }
  .auth-pan[data-pan-shine] :is([data-auth-pan-source], [data-auth-pan-dirt]) { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-pan { display: none; }
  .auth-pan[data-pan-shine] .auth-pan-polish::after,
  .auth-pan[data-pan-shine] .auth-pan-sparkle { animation: none; }
}

html:root #inventory-app .auth-page--playful .auth-shell {
  box-shadow: var(--auth-shadow-x, 10px) var(--auth-shadow-y, 10px) 0 var(--signal-accent),
    0 24px 64px -36px transparent;
  transition: box-shadow 480ms cubic-bezier(.2, .75, .25, 1);
}

@media (hover: hover) and (pointer: fine) {
  html:root #inventory-app .auth-page--playful .auth-shell:hover {
    box-shadow: var(--auth-shadow-x, 16px) var(--auth-shadow-y, 16px) 0 var(--signal-accent),
      0 24px 64px -28px color-mix(in srgb, var(--signal-accent) 42%, transparent);
  }
}

html:root #inventory-app .auth-page--playful .auth-shell:focus-within {
  box-shadow: var(--auth-shadow-x, 12px) var(--auth-shadow-y, 12px) 0 var(--signal-accent),
    0 24px 64px -28px color-mix(in srgb, var(--signal-accent) 30%, transparent);
}

.auth-mascot {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: clamp(89.6px, 9.8vw, 133px);
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
  transform: translate3d(var(--mascot-x, calc(50vw - 430px)), var(--mascot-y, calc(50vh + 30px)), 0);
  will-change: transform;
}

.auth-mascot-body {
  position: absolute;
  inset: 0 0 10px;
  transform-origin: 50% 85%;
  transform: rotate(var(--mascot-tilt, 0deg));
  animation: auth-mascot-float 3.6s ease-in-out infinite;
}

.auth-mascot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  -webkit-user-drag: none;
}

.auth-mascot .auth-mascot-private {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Cover only the eyes of the current pose. The body and its animations are
   untouched; native focus also closes the eyes before the JS event arrives. */
.auth-mascot[data-password-active] .auth-mascot-private,
.auth-page:has(:where(#login-form input[type="password"]:focus)) .auth-mascot-private {
  opacity: 1;
}

.auth-mascot-shadow {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 24%;
  width: 52%;
  height: 10px;
  border-radius: 50%;
  background: #171b2024;
  filter: blur(5px);
  animation: auth-mascot-shadow 3.6s ease-in-out infinite;
}

html[data-theme="dark"] .auth-mascot-shadow { background: #00000070; }
html[data-theme="dark"] .auth-mascot img {
  /* Keep the original dark limbs legible without recolouring the artwork. */
  filter: drop-shadow(0 0 1px #ffffff90);
}

@keyframes auth-mascot-float {
  0%, 100% { transform: translateY(0) rotate(var(--mascot-tilt, 0deg)); }
  50% { transform: translateY(-7px) rotate(var(--mascot-tilt, 0deg)); }
}

@keyframes auth-mascot-shadow {
  0%, 100% { transform: scaleX(1); opacity: .8; }
  50% { transform: scaleX(.8); opacity: .5; }
}

.auth-mascot[data-still] { will-change: auto; }
.auth-mascot[data-still] .auth-mascot-body,
.auth-mascot[data-still] .auth-mascot-shadow { animation: none; }

/* Touch play temporarily replaces the form without destroying its inputs.
   Desktop uses display: contents and keeps the full-viewport composition. */
html:root #inventory-app .auth-page[data-mobile-game] .auth-shell {
  display: none;
}
html:root #inventory-app .auth-page--playful[data-game-enabled][data-mascot-compact] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 16px;
  padding-top: max(76px, env(safe-area-inset-top));
  padding-inline: 16px;
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
.auth-page[data-game-enabled][data-mascot-compact] .auth-game-stage {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 440px);
  height: clamp(200px, calc(100vh - 284px), 400px);
  height: clamp(200px, calc(100dvh - 284px), 400px);
  border: 1px solid var(--signal-line-strong);
  border-radius: 16px;
  background: var(--signal-subtle);
  touch-action: none;
  user-select: none;
}
.auth-page[data-mascot-compact] .auth-pan-viewport {
  position: absolute;
}
.auth-page[data-mascot-compact] .auth-pan {
  --auth-pan-width: clamp(560px, 150vw, 700px);
  top: calc(var(--auth-pan-width) * -.09);
  left: calc(var(--auth-pan-width) * -.08);
}
.auth-page[data-mobile-game] .auth-pan {
  left: calc(50% - var(--auth-pan-width) * .2858);
  top: calc(50% - var(--auth-pan-width) * .24805);
}
.auth-page[data-mascot-compact] .auth-mascot {
  position: absolute;
  top: 0;
  left: 0;
  width: 72.8px;
  transform: translate3d(var(--mascot-x, 100px), var(--mascot-y, 100px), 0);
}
.auth-page[data-game-enabled][data-mascot-compact] .auth-mobile-controls {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(100%, 440px);
  color: var(--signal-muted);
  text-align: center;
}
html:root #inventory-app .auth-tilt-toggle {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--signal-line-strong);
  border-radius: 8px;
  color: var(--signal-text);
  background: var(--signal-surface);
  font-size: 14px;
  line-height: 20px;
  touch-action: manipulation;
}
html:root #inventory-app .auth-tilt-toggle[aria-pressed="true"] {
  border-color: var(--signal-positive-hover);
  background: var(--signal-positive);
  color: var(--signal-on-positive);
}
html:root #inventory-app .auth-tilt-toggle:focus-visible {
  outline: 3px solid var(--signal-focus);
  outline-offset: 3px;
}
.auth-mobile-controls [data-auth-tilt-status] {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Keep touch play and its controls usable in landscape and with browser bars.
   Very short screens may scroll; the fixed off switch is never clipped. */
@media (max-height: 560px) {
  html:root #inventory-app .auth-page--playful[data-game-enabled][data-mascot-compact] {
    padding-top: max(64px, env(safe-area-inset-top));
    gap: 12px;
  }
  .auth-page[data-game-enabled][data-mascot-compact] .auth-game-stage {
    height: clamp(140px, calc(100vh - 236px), 240px);
    height: clamp(140px, calc(100dvh - 236px), 240px);
  }
}

/* Leave a scrollable footer lane so the fixed switch cannot cover the form. */
@media (max-width: 800px), (max-height: 760px), (pointer: coarse) {
  html:root #inventory-app .auth-page--playful,
  html:root #inventory-app .auth-page--playful[data-game-enabled],
  html:root #inventory-app .auth-page--playful[data-game-enabled][data-mascot-compact] {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
  html:root #inventory-app .auth-game-toggle {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root #inventory-app .auth-page--playful .auth-shell { transition: none; }
  .auth-mascot { will-change: auto; }
  .auth-mascot-body, .auth-mascot-shadow { animation: none; }
  .auth-game-toggle-track, .auth-game-toggle-track::after { transition: none; }
}

/* Decorative animation also sleeps while the browser tab is hidden. */
.auth-page[data-motion-paused] .auth-mascot-body,
.auth-page[data-motion-paused] .auth-mascot-shadow { animation-play-state: paused; }