/* Minimal raw CSS — everything else is Tailwind (see base.html).
   Only the things utilities can't express cleanly live here. */

/* We render our own controls; hide the browser's native video chrome. */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure { display: none !important; }
video::-moz-media-controls { display: none !important; }

/* Refined, unobtrusive scrollbars. */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* Grab cursors for the drag minigame. */
.cursor-grab { cursor: grab; }
.cursor-grabbing, .dragging { cursor: grabbing; }
.dragging { opacity: .55; transform: rotate(-2deg) scale(1.03); }

/* Tiny celebratory confetti (used sparingly on a correct answer). */
.confetti-piece {
  position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px;
  will-change: transform, opacity; animation: confetti-fall var(--dur,1.4s) cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0,0,0) rotate(0); opacity: 1; }
  100% { transform: translate3d(var(--dx,0), 320px, 0) rotate(var(--rot,540deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Fullscreen player — fill the screen, letterbox the video, keep controls + checkpoints usable. */
#playerShell:fullscreen, #playerShell:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; display: flex; flex-direction: column; }
#playerShell:fullscreen #stage, #playerShell:-webkit-full-screen #stage { flex: 1 1 auto; aspect-ratio: auto; height: auto; }
#playerShell:fullscreen video, #playerShell:-webkit-full-screen video { object-fit: contain; }

/* Friendly focus-return toast. */
.toast-card { animation: toast-in .3s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }