/* The circuit board and controller are decorative, so every control stays usable. */
.gamer-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 47%, #124c6766, transparent 56%),
    radial-gradient(ellipse at 4% 12%, #50265b24, transparent 39%),
    radial-gradient(ellipse at 95% 89%, #40233e20, transparent 36%),
    var(--ink, #07121b);
}

.circuit-layer,
.spark-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.circuit-layer { z-index: 0; }
.circuit-track {
  fill: none;
  stroke: var(--circuit-color);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.15;
}
.circuit-trace {
  fill: none;
  stroke: var(--circuit-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 95 905;
  animation: gamerCircuitFlow var(--circuit-duration) linear var(--circuit-delay) infinite;
  filter: url(#gamerCircuitGlow);
  opacity: 0.78;
}
.circuit-terminal {
  fill: var(--circuit-color);
  opacity: 0.26;
}

.gamer-scene__controller {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  display: block;
  width: min(76vw, 420px);
  height: auto;
  max-height: 42svh;
  object-fit: contain;
  transform: translate3d(-50%, -50%, 0) rotate(-3deg);
  transform-origin: 50% 55%;
  animation: gamerControllerFloat 9s ease-in-out -2s infinite;
  pointer-events: none;
  user-select: none;
}

.spark-layer { z-index: 2; }
.circuit-spark {
  position: absolute;
  left: var(--spark-x);
  top: var(--spark-y);
  width: var(--spark-size);
  height: var(--spark-size);
  border-radius: 1px;
  background: var(--spark-color);
  opacity: 0;
  animation: gamerCircuitSpark var(--spark-duration) ease-in-out var(--spark-delay) infinite;
}

@keyframes gamerCircuitFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1000; }
}

@keyframes gamerControllerFloat {
  0%, 100% { transform: translate3d(-50%, calc(-50% + 6px), 0) rotate(-3deg); }
  50% { transform: translate3d(-50%, calc(-50% - 7px), 0) rotate(3deg); }
}

@keyframes gamerCircuitSpark {
  0%, 100% { opacity: 0; transform: translate3d(0, 4px, 0) rotate(45deg); }
  25%, 65% { opacity: 0.32; }
  80% { opacity: 0; transform: translate3d(var(--spark-drift), -12px, 0) rotate(45deg); }
}

body:not(.has-entered) .gamer-scene { visibility: hidden; }
body:not(.has-entered) .circuit-trace,
body:not(.has-entered) .gamer-scene__controller,
body:not(.has-entered) .circuit-spark,
.ambience-paused .circuit-trace,
.ambience-paused .gamer-scene__controller,
.ambience-paused .circuit-spark {
  animation-play-state: paused;
}

.circuit-layer[hidden],
.spark-layer[hidden],
.gamer-scene__controller[hidden] { display: none; }

.ambience-control {
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid var(--line, #70e5f24d);
  border-radius: 12px;
  background: #42c0da12;
  color: var(--paper, #e4fbff);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.ambience-control:hover { background: #42c0da25; }
.ambience-control:focus-visible { outline: 2px solid var(--gold, #72e4f0); outline-offset: 3px; }
.ambience-control:disabled { cursor: default; opacity: 0.65; }

@media (min-width: 800px) {
  .gamer-scene__controller { width: min(36vw, 450px); max-height: 48svh; }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-trace { animation: none; stroke-dashoffset: -300; opacity: 0.42; }
  .gamer-scene__controller { animation: none; transform: translate3d(-50%, -50%, 0); }
  .spark-layer { display: none; }
}