/* ============================================================================
   Easter Egg Breakout Overlay Game — styles
   Self-contained. Loaded after site CSS so easter-egg rules win specificity
   ties without using !important.
   ============================================================================ */

.rc-ee-root {
  /* Overlay container. Sits above site content but never blocks input
     (pointer-events: none). Only the Start/Exit button re-enables input. */
  position: fixed;
  inset: 0;
  z-index: 2147483646; /* near max, but one below modal libraries that use max */
  pointer-events: none;
  overflow: hidden;
  /* No visible background — fully transparent overlay. */
  background: transparent;
}

.rc-ee-root *,
.rc-ee-root *::before,
.rc-ee-root *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Start / Exit button
   -------------------------------------------------------------------------- */
.rc-ee-btn {
  pointer-events: auto;
  position: fixed;
  right: 20px;
  bottom: 20px;
  min-width: 96px;
  padding: 10px 18px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #ffd84a;
  color: #111;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  /* Flash animation (FR1.2). Respects reduced-motion via media query below. */
  animation: rc-ee-flash 1100ms ease-in-out infinite;
  transition: transform 120ms ease, background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  outline: none;
}

.rc-ee-btn:hover {
  transform: translateY(-1px) scale(1.02);
}

.rc-ee-btn:focus-visible {
  outline: 3px solid #2962ff;
  outline-offset: 3px;
}

.rc-ee-btn:active {
  transform: translateY(0) scale(0.98);
}

/* When transformed into the exit / goal (FR4) */
.rc-ee-btn--exit {
  background: #ff5b5b;
  color: #fff;
  border-color: #b80000;
  animation: rc-ee-pulse 700ms ease-in-out infinite;
}

.rc-ee-root[data-state="idle"] .rc-ee-btn {
  animation: rc-ee-flash 1100ms ease-in-out infinite;
}

/* Hide button entirely if disabled (game.enable() hasn't been called) */
.rc-ee-root:not(.rc-ee-enabled) .rc-ee-btn {
  display: none !important;
}

@keyframes rc-ee-flash {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(255, 216, 74, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 0 14px rgba(255, 216, 74, 0);
    transform: scale(1.04);
  }
}

@keyframes rc-ee-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* --------------------------------------------------------------------------
   Ledge (top-right platform)
   -------------------------------------------------------------------------- */
.rc-ee-ledge {
  position: absolute;
  top: 15vh;
  right: 0;
  height: 10px;
  width: 0;
  background: linear-gradient(180deg, #6b3f1d, #3a200c);
  border-radius: 6px 0 0 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  will-change: width;
}

/* --------------------------------------------------------------------------
   Ball
   -------------------------------------------------------------------------- */
.rc-ee-ball {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #ff5b5b 60%, #8a0000 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  will-change: transform;
  display: none; /* shown only during play */
}

/* --------------------------------------------------------------------------
   Paddle (cursor-driven visible horizontal bar)
   -------------------------------------------------------------------------- */
.rc-ee-paddle {
  position: absolute;
  left: 0;
  top: 0;
  width: 110px;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2962ff, #0d3fb3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  will-change: transform;
  display: none; /* shown only during play */
}

/* --------------------------------------------------------------------------
   Reduced motion — disable flash, minimize motion (FR7.2)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rc-ee-btn,
  .rc-ee-btn--exit {
    animation: none !important;
  }
  .rc-ee-btn,
  .rc-ee-paddle,
  .rc-ee-ball,
  .rc-ee-ledge {
    transition: none !important;
  }
}

/* JS also adds data-reduced-motion="true" on the root when it auto-detects;
   that mirrors the media query so forced overrides (opts.reducedMotion)
   work even when the OS preference is off. */
.rc-ee-root[data-reduced-motion="true"] .rc-ee-btn,
.rc-ee-root[data-reduced-motion="true"] .rc-ee-btn--exit {
  animation: none !important;
}
.rc-ee-root[data-reduced-motion="true"] .rc-ee-btn,
.rc-ee-root[data-reduced-motion="true"] .rc-ee-paddle,
.rc-ee-root[data-reduced-motion="true"] .rc-ee-ball,
.rc-ee-root[data-reduced-motion="true"] .rc-ee-ledge {
  transition: none !important;
}