/* Minimal ambient motion: a handful of tiny dots, each with a soft glow,
   fading in and out on its own random schedule - like distant stars quietly
   lighting up. Confined to the body area only (JS narrows top/bottom to sit
   below the header and above the footer). Sits behind all real content
   (negative z-index on a fixed layer), never intercepts clicks, and is
   inert under prefers-reduced-motion. */

/* Not starfield-specific, but this is the one stylesheet every real page on
   the site already links, so it's the simplest place for a true global rule.
   Without it, Android Chrome paints its default blue tap-highlight as a
   sharp rectangle on tap - ignoring any border-radius the button/chip/card
   actually has - for the brief moment before the tap navigates or fires its
   handler. iOS Safari doesn't have this default, which is why it only shows
   up on Android. */
* {
  -webkit-tap-highlight-color: transparent;
}

.kd-starfield {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.kd-star {
  position: absolute;
  border-radius: 50%;
  background: #cdcdcd;
  box-shadow: 0 0 var(--kd-star-glow, 4px) 0 rgba(205, 205, 205, 0.55);
  opacity: 0;
  animation-name: kd-star-twinkle;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  animation-iteration-count: infinite;
}

/* A minority of stars render crisp and bright instead of soft, for variety. */
.kd-star-sharp {
  background: #ffffff;
  box-shadow: 0 0 var(--kd-star-glow, 6px) 0 rgba(255, 255, 255, 0.9);
}

@keyframes kd-star-twinkle {
  0%, 100% { opacity: 0; }
  50% { opacity: var(--kd-star-opacity, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .kd-star {
    animation: none;
    opacity: 0.25;
  }
}

/* ===== COMETS (win celebration burst) =====
   Spawned by Starfield.js's window.KDShootingStars.burst() - see its own
   comment for when this fires. This is ff.io's comet, taken from its own
   stylesheet and mirrored left-to-right: the drawing below (glowing orange
   head with a white core at the bottom, a thin white tail fading out towards
   the top) is ff.io's, shown here flipped with scaleX(-1), so the head leads
   toward the lower RIGHT where ff.io's leads toward the lower left.

   The motion is ff.io's too: one straight line at constant speed (the three
   keyframes are equally spaced, so nothing eases), 2.4 s, opacity 0 -> 1 on
   the first half and 1 -> 0 on the second. The translate percentages are
   relative to the comet's own box, so a big comet travels further than a
   small one, exactly like there. Width and padding-bottom (which sets the
   height) are % of the layer's width and come from Starfield.js, one set per
   comet. */
.kd-comet {
  position: absolute;
  opacity: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='201' height='171' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Ccircle cx='17.989' cy='152.505' r='4.989' fill='%23e89d67'/%3E%3C/g%3E%3Ccircle cx='17.989' cy='152.505' r='2.993' fill='%23fff'/%3E%3Cpath stroke='url(%23b)' stroke-linecap='round' stroke-width='.5' d='M189.368 7 16.991 153.503'/%3E%3Cdefs%3E%3ClinearGradient id='b' x1='17.334' x2='181.538' y1='155.208' y2='16.953' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='a' width='35.977' height='35.977' x='0' y='134.516' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform, opacity;
  animation: kd-comet-fly 2.4s linear forwards;
}

/* Desktop comets: the same comet, drawn finer - a small head with a tight glow and a
   hair-thin tail (the phone keeps the bolder drawing above, it is a small screen). */
.kd-comet-fine {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='201' height='171' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Ccircle cx='17.989' cy='152.505' r='2.5' fill='%23e89d67'/%3E%3C/g%3E%3Ccircle cx='17.989' cy='152.505' r='1.4' fill='%23fff'/%3E%3Cpath stroke='url(%23b)' stroke-linecap='round' stroke-width='.35' d='M189.368 7 16.991 153.503'/%3E%3Cdefs%3E%3ClinearGradient id='b' x1='17.334' x2='181.538' y1='155.208' y2='16.953' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='a' width='35.977' height='35.977' x='0' y='134.516' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}

@keyframes kd-comet-fly {
  0%   { opacity: 0; transform: translate3d(-200%, -194%, 0) scaleX(-1); }
  50%  { opacity: 1; transform: translate3d(-40%, -36%, 0) scaleX(-1); }
  100% { opacity: 0; transform: translate3d(120%, 122%, 0) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
  .kd-comet { display: none; }
}

/* Front layer for burst({ front: true }) - used by the race track pages,
   whose big opaque board would otherwise hide most of the burst. Same body
   area as the background layer (Starfield.js copies its top/bottom), above
   the page content, never intercepts clicks. The comets themselves are the
   same as everywhere else - only the layer they fly in is different. */
.kd-starfield-front {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

/* ===== BLOCKED-USER MODAL (Admin Panel Section 6 "Block this user") =====
   Built by HeaderC-D.js right after login, on any page - a blocked visitor
   can sign in and browse, but sees this every time until they're unblocked. */
.kd-blocked-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
}

.kd-blocked-overlay.is-open {
  display: flex;
}

.kd-blocked-box {
  border: 2px solid #5c2b2b;
  background: #0a0a0a;
  max-width: 420px;
  width: 100%;
  padding: 28px 24px;
  text-align: center;
}

.kd-blocked-title {
  color: #ff4d4d;
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 14px;
}

.kd-blocked-line {
  color: #cdcdcd;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.kd-blocked-warn {
  color: #ff4d4d;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 18px;
}

.kd-blocked-close {
  border: 2px solid #00ff92;
  background: transparent;
  color: #00ff92;
  font-weight: 800;
  font-size: 14px;
  padding: 8px 24px;
  cursor: pointer;
}