/* SAM's angular light rails frame the menus. The quiet centre keeps type and
   pairing codes readable; the animation has no canvas, video or frame loop. */
body.tv-page .world, body.controller-page .world {
  --ambient-display: none;
  --ambient-motion: paused;
}
body.tv-page:is([data-phase="lobby"],[data-phase="result"],[data-phase="error"]) .world,
body.controller-page:not(.play-mode) .world {
  --ambient-display: block;
  --ambient-motion: running;
  overflow: hidden;
  opacity: 1;
  filter: none;
  background: radial-gradient(ellipse at 48% 42%, #111e21, #091216 66%, #060e11);
}
body.tv-page .lobby-atmosphere { display: none; }

body.tv-page .world::before, body.controller-page .world::before {
  content: "";
  display: var(--ambient-display);
  position: absolute;
  inset: -8%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 28% 60% at 6% 66%, #76c7352d, transparent 75%),
    radial-gradient(ellipse 25% 54% at 96% 25%, #3ec6b526, transparent 78%),
    radial-gradient(ellipse 48% 18% at 52% 100%, #78b93618, transparent 80%);
  animation: sam-light-breathe 10s ease-in-out -3s infinite alternate;
  animation-play-state: var(--ambient-motion);
}
body.tv-page .world::after, body.controller-page .world::after {
  content: "";
  display: var(--ambient-display);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 58% at 49% 45%, #0a151ae6 5%, #0a151a99 48%, transparent 100%);
}
.ambient-scene {
  display: var(--ambient-display);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ambient-rail { color: #90d54c; }
.ambient-rail.cool { color: #53bead; }
.ambient-base { stroke: currentColor; stroke-width: 1; opacity: .18; }
.rail-0 { --travel: 8s; --delay: -3s; }
.rail-1 { --travel: 10s; --delay: -6s; }
.rail-2 { --travel: 7s; --delay: -1.3s; }
.rail-3 { --travel: 9s; --delay: -5s; }
.rail-4 { --travel: 11s; --delay: -2s; }
.rail-5 { --travel: 8s; --delay: -6s; }
.rail-6 { --travel: 12s; --delay: -5s; }
.rail-7 { --travel: 13s; --delay: -10s; }
.ambient-current {
  stroke: currentColor;
  stroke-dasharray: 210 790;
  animation: sam-light-travel var(--travel, 10s) linear var(--delay, 0s) infinite;
  animation-play-state: var(--ambient-motion);
}
.ambient-halo { stroke-width: 22; opacity: .04; }
.ambient-bloom { stroke-width: 9; opacity: .13; }
.ambient-light { stroke-width: 2; opacity: .85; }
.ambient-tip { stroke: #d5ffa6; stroke-width: 2.5; stroke-dasharray: 2 998; opacity: .85; }
.cool .ambient-tip { stroke: #b5fff0; }
.ambient-far { opacity: .48; }
.ambient-ticks { stroke: #8ccf71; stroke-width: 1; opacity: .10; }
.ambient-points {
  fill: #a3e566;
  stroke: none;
  animation: sam-light-points 5s ease-in-out -2s infinite alternate;
  animation-play-state: var(--ambient-motion);
}
@keyframes sam-light-travel { to { stroke-dashoffset: -1000; } }
@keyframes sam-light-breathe {
  from { transform: translate3d(-1%, 2%, 0) scale(1); opacity: .65; }
  to { transform: translate3d(2%, -2%, 0) scale(1.07); opacity: 1; }
}
@keyframes sam-light-points { from { opacity: .16; } to { opacity: .6; } }

/* Mobile uses the same rails, with a portrait composition and fewer layers. */
body.controller-page .ambient-scene { opacity: .8; }
body.controller-page .world::after {
  background: radial-gradient(ellipse 42% 55% at 50% 40%, #0a151ace, #0a151a66 60%, transparent 100%);
}
@media (orientation: portrait) {
  .ambient-scene { width: 200%; left: -50%; }
  .ambient-rail.side-left { transform: translateX(225px); }
  .ambient-rail.side-right { transform: translateX(-225px); }
  .ambient-far { opacity: .3; }
  body.controller-page .ambient-halo { display: none; }
}
body.tv-page[data-ambient-paused] .world,
body.controller-page[data-ambient-paused] .world { --ambient-motion: paused; }
@media (prefers-reduced-motion: reduce) {
  .ambient-current, .ambient-points,
  body.tv-page .world::before, body.controller-page .world::before { animation: none; }
  .ambient-current { stroke-dashoffset: -250; opacity: .6; }
  .ambient-points { opacity: .25; }
}