/* =========================================================================
   wheel.css — Act 1 wheel scene: orbiting boards, hamster crowd, CRT,
   floating props, office cage. All Act 1 only — dissolves on CTA click.
   ========================================================================= */

:root {
  --wheel-cx: 22%;
  --wheel-cy: 52%;
  --board-orbit-radius: clamp(80px, 14vw, 200px);
  --board-orbit-duration: 36s;
}

/* --- Orbiting HamSpam boards --- */

.board-ring {
  position: absolute;
  top: var(--wheel-cy);
  left: var(--wheel-cx);
  width: 0;
  height: 0;
  z-index: var(--z-scene);
  pointer-events: none;
}

.board-orbit {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  animation: orbit var(--board-orbit-duration) linear infinite;
  transform-origin: 0 0;
}

.hamspam-board {
  position: absolute;
  width: clamp(40px, 6vw, 80px);
  height: auto;
  transform: translate(-50%, -50%) translateY(calc(var(--board-orbit-radius) * -1));
  animation: counter-orbit var(--board-orbit-duration) linear infinite;
  filter: drop-shadow(0 0 6px rgba(230, 57, 70, 0.45));
  opacity: 0.85;
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes counter-orbit {
  from { transform: translate(-50%, -50%) translateY(calc(var(--board-orbit-radius) * -1)) rotate(0deg); }
  to   { transform: translate(-50%, -50%) translateY(calc(var(--board-orbit-radius) * -1)) rotate(-360deg); }
}

.board-orbit-1 { animation-delay: 0s; }
.board-orbit-2 { animation-delay: -6s; }
.board-orbit-3 { animation-delay: -12s; }
.board-orbit-4 { animation-delay: -18s; }
.board-orbit-5 { animation-delay: -24s; }
.board-orbit-6 { animation-delay: -30s; }
.board-orbit-7 { animation-delay: -33s; }

/* --- Hamster crowd on/around the wheel --- */

.wheel-crowd {
  position: absolute;
  top: var(--wheel-cy);
  left: var(--wheel-cx);
  width: 0;
  height: 0;
  z-index: var(--z-scene);
  pointer-events: none;
}

.wheel-hamster {
  position: absolute;
  width: clamp(24px, 4vw, 44px);
  height: auto;
  opacity: 0.7;
  animation: wheelSpin 20s linear infinite;
  transform-origin: 0 0;
}

.wheel-hamster-roxy    { animation-delay: 0s; --hamster-offset: -60px; }
.wheel-hamster-burnout { animation-delay: -5s; --hamster-offset: -55px; opacity: 0.6; }
.wheel-hamster-carl    { animation-delay: -10s; --hamster-offset: -65px; }
.wheel-hamster-fiona   { animation-delay: -15s; --hamster-offset: -50px; opacity: 0.65; }
.wheel-hamster-gabby   { animation-delay: -7s; --hamster-offset: -58px; opacity: 0.55; }

@keyframes wheelSpin {
  from { transform: rotate(0deg) translateY(var(--hamster-offset, -60px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateY(var(--hamster-offset, -60px)) rotate(-360deg); }
}

/* --- Office cage framing the wheel area (low-opacity background frame) --- */

.wheel-cage {
  position: absolute;
  top: calc(var(--wheel-cy) - 12%);
  left: calc(var(--wheel-cx) - 6%);
  width: clamp(100px, 18vw, 220px);
  height: auto;
  z-index: calc(var(--z-scene) - 1);
  opacity: 0.25;
  pointer-events: none;
  filter: brightness(0.7);
}

/* --- Manager Mole patrolling — foreground character, stands near the wheel
       so the player sees him "watching" the spinning hamsters. --- */

.wheel-mole {
  position: absolute;
  top: calc(var(--wheel-cy) + 4%);
  left: calc(var(--wheel-cx) + 14%);
  width: clamp(56px, 9vw, 110px);
  height: auto;
  z-index: var(--z-character);
  opacity: 0.65;
  pointer-events: none;
}

/* --- CRT monitor — bottom-left of wheel area --- */

.wheel-crt {
  position: absolute;
  top: calc(var(--wheel-cy) + 12%);
  left: calc(var(--wheel-cx) - 8%);
  width: clamp(48px, 8vw, 100px);
  height: auto;
  z-index: var(--z-scene);
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(86, 224, 142, 0.35));
  animation: crtFlicker 3s ease-in-out infinite;
}

@keyframes crtFlicker {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 12px rgba(86, 224, 142, 0.35)); }
  50%      { opacity: 0.85; filter: drop-shadow(0 0 20px rgba(86, 224, 142, 0.55)); }
  72%      { opacity: 0.5; }
}

/* --- Floating props — ambient detritus of corporate hamster life --- */

.wheel-props {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
  pointer-events: none;
}

.wheel-prop {
  position: absolute;
  width: clamp(16px, 2.5vw, 32px);
  height: auto;
  opacity: 0.5;
  animation: propFloat 6s ease-in-out infinite;
}

.wheel-prop-speaker {
  top: 36%; left: 8%;
  animation-delay: 0s;
  width: clamp(20px, 3vw, 40px);
}

.wheel-prop-mug {
  top: 68%; left: 14%;
  animation-delay: -2s;
}

.wheel-prop-bean {
  top: 44%; left: 30%;
  animation-delay: -3.5s;
  width: clamp(10px, 1.5vw, 20px);
  opacity: 0.4;
}

.wheel-prop-rubber {
  top: 72%; left: 6%;
  animation-delay: -4.5s;
  width: clamp(12px, 2vw, 24px);
  opacity: 0.35;
}

@keyframes propFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

/* --- Easter eggs: rebellion items and extras --- */

.easter-roxy {
  bottom: 28%; left: 4%;
  width: min(2vw, 20px);
  opacity: 0.2;
  filter: saturate(0.3) brightness(0.5);
}

.easter-roxy:hover {
  opacity: 0.9;
  filter: saturate(1) brightness(1) drop-shadow(0 0 8px rgba(230, 57, 70, 0.5));
}

.easter-radio {
  top: 78%; left: calc(var(--wheel-cx) - 6%);
  width: min(2vw, 18px);
  opacity: 0.15;
  filter: saturate(0.2) brightness(0.4);
}

.easter-radio:hover {
  opacity: 0.8;
  filter: saturate(1) brightness(1) drop-shadow(0 0 8px rgba(46, 196, 182, 0.5));
}

.easter-seed {
  bottom: 18%; left: 52%;
  width: min(1.5vw, 14px);
  opacity: 0.25;
  filter: saturate(0.4) brightness(0.6);
}

.easter-seed:hover {
  opacity: 0.9;
  filter: saturate(1) brightness(1);
}

/* --- Mobile: hide the crowd, simplify --- */

@media (max-width: 600px) {
  .board-ring, .wheel-crowd, .wheel-cage, .wheel-mole, .wheel-props { display: none; }
  .wheel-crt { width: clamp(32px, 10vw, 60px); }
  .easter-roxy, .easter-radio, .easter-seed { display: none; }
}

/* Phone landscape (jury Pass 14, refined): will-change:transform tells
   Chrome to plan a compositor layer for each animated child explicitly,
   avoiding the JIT layer-promotion race that hid them in the
   nested-transform context. The fixed-px width override was tried and
   reverted — it produced degenerate rendering boxes on both Chromium
   engines when combined with the position:absolute inside a 0×0
   parent inside a transformed grandparent. The original clamp-based
   widths are restored; will-change alone is the hint. Desktop is
   unaffected (gate doesn't match). */
@media (orientation: landscape) and (max-height: 500px) {
  .wheel-hamster,
  .hamspam-board {
    will-change: transform;
  }
}