/**
 * Immersion v1.1 — atmosphere only (desktop + mobile).
 * Never targets flight-deck / rails / board transforms (gameplay-safe).
 * Animates opacity + transform on #tmj-immersion-root children only.
 *
 * Stack: lightning (5) → immersion (6) → stage/UI (10+)
 * Surfaces via data-surface: desktop | narrow | m-chess | m-battle | m-forge
 */

/* ── Root layer (injected by Immersion.js) ── */
#tmj-immersion-root {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none !important;
  overflow: hidden;
  contain: strict;
  transform: none;
  will-change: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
  /* Safe-area aware padding for rim elements */
  --imm-sat: env(safe-area-inset-top, 0px);
  --imm-sab: env(safe-area-inset-bottom, 0px);
  --imm-sal: env(safe-area-inset-left, 0px);
  --imm-sar: env(safe-area-inset-right, 0px);
}

#tmj-immersion-root.is-on {
  opacity: 1;
}

#tmj-immersion-root.is-paused .tmj-imm-orb,
#tmj-immersion-root.is-paused .tmj-imm-vignette,
#tmj-immersion-root.is-paused .tmj-imm-ember,
#tmj-immersion-root.is-paused .tmj-imm-rim,
#tmj-immersion-root.is-paused .tmj-imm-floor {
  animation-play-state: paused !important;
}

#tmj-immersion-root[data-level='0'] {
  display: none !important;
}

/* ── Desktop / shared atoms ── */
.tmj-imm-vignette {
  position: absolute;
  inset: -2%;
  background: radial-gradient(
    ellipse 72% 68% at 50% 48%,
    transparent 42%,
    rgba(0, 8, 4, 0.22) 78%,
    rgba(0, 0, 0, 0.45) 100%
  );
  opacity: 0.55;
  animation: tmj-imm-breathe 10s ease-in-out infinite;
}

.tmj-imm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.22;
  mix-blend-mode: screen;
  /* will-change only while animating desktop; mobile turns this off */
}

.tmj-imm-orb--a {
  width: min(42vw, 380px);
  height: min(42vw, 380px);
  left: 4%;
  top: 18%;
  background: radial-gradient(
    circle,
    rgba(0, 255, 136, 0.35) 0%,
    rgba(0, 120, 70, 0.08) 55%,
    transparent 70%
  );
  animation: tmj-imm-drift-a 18s ease-in-out infinite;
}

.tmj-imm-orb--b {
  width: min(36vw, 320px);
  height: min(36vw, 320px);
  right: 6%;
  bottom: 12%;
  background: radial-gradient(
    circle,
    rgba(80, 220, 160, 0.28) 0%,
    rgba(0, 80, 50, 0.06) 55%,
    transparent 70%
  );
  animation: tmj-imm-drift-b 22s ease-in-out infinite;
  animation-delay: -6s;
}

.tmj-imm-orb--c {
  display: none;
  width: min(28vw, 240px);
  height: min(28vw, 240px);
  left: 40%;
  top: 8%;
  background: radial-gradient(
    circle,
    rgba(255, 200, 80, 0.12) 0%,
    transparent 65%
  );
  animation: tmj-imm-drift-c 26s ease-in-out infinite;
  animation-delay: -11s;
}

/* Mobile-only rim / floor (hidden on desktop) */
.tmj-imm-rim,
.tmj-imm-floor {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.tmj-imm-rim {
  top: 0;
  height: calc(72px + var(--imm-sat));
  background: linear-gradient(
    180deg,
    rgba(0, 40, 24, 0.55) 0%,
    rgba(0, 20, 12, 0.2) 55%,
    transparent 100%
  );
  opacity: 0.7;
  animation: tmj-imm-rim-breathe 8s ease-in-out infinite;
}

.tmj-imm-floor {
  bottom: 0;
  height: calc(96px + var(--imm-sab));
  background: linear-gradient(
    0deg,
    rgba(0, 30, 18, 0.5) 0%,
    rgba(0, 12, 8, 0.15) 50%,
    transparent 100%
  );
  opacity: 0.65;
  animation: tmj-imm-floor-breathe 11s ease-in-out infinite;
}

#tmj-immersion-root[data-level='2'] .tmj-imm-orb--c {
  display: block;
}

#tmj-immersion-root[data-level='2'] .tmj-imm-orb {
  opacity: 0.3;
}

#tmj-immersion-root[data-level='1'] .tmj-imm-orb {
  opacity: 0.18;
  filter: blur(56px);
}

/* Move / hit pulse */
.tmj-imm-ember {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    ellipse 50% 45% at 50% 50%,
    rgba(0, 255, 136, 0.12) 0%,
    transparent 70%
  );
}

#tmj-immersion-root.is-pulse .tmj-imm-ember {
  animation: tmj-imm-pulse 0.7s ease-out forwards;
}

/* Static board depth — NO animation */
body.chess-page.tmj-immersion-on #board-wrapper,
body.m-body-chess.tmj-immersion-on #board-wrapper,
body.m-body-battle.tmj-immersion-on #board-wrapper {
  box-shadow:
    0 0 0 3px #1a2a18,
    0 12px 28px rgba(0, 0, 0, 0.48),
    0 0 22px rgba(0, 255, 136, 0.07) !important;
}

/* ═══════════════ KEYFRAMES ═══════════════ */
@keyframes tmj-imm-breathe {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes tmj-imm-drift-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18px, -14px, 0) scale(1.06);
  }
}

@keyframes tmj-imm-drift-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-16px, 12px, 0) scale(1.05);
  }
}

@keyframes tmj-imm-drift-c {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(10px, 20px, 0);
  }
}

@keyframes tmj-imm-pulse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes tmj-imm-rim-breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.85;
  }
}

@keyframes tmj-imm-floor-breathe {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.75;
  }
}

@keyframes tmj-imm-m-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(8px, -6px, 0) scale(1.03);
  }
}

@keyframes tmj-imm-m-pulse {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

/* ═══════════════ MOBILE SURFACES ═══════════════
   Triggered by data-surface from Immersion.js OR body class fallbacks.
   Goals: low blur cost, no layout transform fights, safe-area chrome,
   keep map/board readable.
*/

/* Generic narrow viewport (desktop responsive) */
#tmj-immersion-root[data-surface='narrow'] .tmj-imm-orb,
#tmj-immersion-root[data-surface='m-chess'] .tmj-imm-orb,
#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-orb,
#tmj-immersion-root[data-surface='m-forge'] .tmj-imm-orb {
  filter: blur(28px);
  will-change: auto;
  mix-blend-mode: normal; /* cheaper than screen on mobile GPUs */
  opacity: 0.16;
  animation-duration: 24s;
}

#tmj-immersion-root[data-surface='narrow'] .tmj-imm-orb--c,
#tmj-immersion-root[data-surface='m-chess'] .tmj-imm-orb--c,
#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-orb--c,
#tmj-immersion-root[data-surface='m-forge'] .tmj-imm-orb--c {
  display: none !important;
}

#tmj-immersion-root[data-surface='narrow'] .tmj-imm-rim,
#tmj-immersion-root[data-surface='narrow'] .tmj-imm-floor,
#tmj-immersion-root[data-surface='m-chess'] .tmj-imm-rim,
#tmj-immersion-root[data-surface='m-chess'] .tmj-imm-floor,
#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-rim,
#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-floor,
#tmj-immersion-root[data-surface='m-forge'] .tmj-imm-rim,
#tmj-immersion-root[data-surface='m-forge'] .tmj-imm-floor {
  display: block;
}

/* —— Mobile chess practice —— */
#tmj-immersion-root[data-surface='m-chess'] .tmj-imm-vignette {
  background: radial-gradient(
    ellipse 80% 70% at 50% 42%,
    transparent 48%,
    rgba(0, 10, 6, 0.28) 82%,
    rgba(0, 0, 0, 0.5) 100%
  );
  animation-duration: 12s;
}

#tmj-immersion-root[data-surface='m-chess'] .tmj-imm-orb--a {
  width: 55vw;
  height: 55vw;
  left: -8%;
  top: 22%;
  animation-name: tmj-imm-m-drift;
  animation-duration: 20s;
}

#tmj-immersion-root[data-surface='m-chess'] .tmj-imm-orb--b {
  width: 50vw;
  height: 50vw;
  right: -10%;
  bottom: 18%;
  animation-name: tmj-imm-m-drift;
  animation-duration: 26s;
  animation-delay: -8s;
}

#tmj-immersion-root[data-surface='m-chess'] .tmj-imm-ember {
  background: radial-gradient(
    ellipse 70% 40% at 50% 48%,
    rgba(0, 255, 136, 0.16) 0%,
    transparent 65%
  );
}

#tmj-immersion-root[data-surface='m-chess'].is-pulse .tmj-imm-ember {
  animation-name: tmj-imm-m-pulse;
  animation-duration: 0.55s;
}

/* —— Mobile battle (most gameplay-critical) —— */
#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-vignette {
  /* Keep board center clear — darker only at edges */
  background: radial-gradient(
    ellipse 88% 78% at 50% 46%,
    transparent 55%,
    rgba(0, 6, 4, 0.2) 85%,
    rgba(0, 0, 0, 0.42) 100%
  );
  animation-duration: 14s;
  opacity: 0.5;
}

#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-orb--a {
  /* single soft haze low-left — out of board */
  width: 60vw;
  height: 40vw;
  left: -15%;
  top: auto;
  bottom: 8%;
  opacity: 0.12;
  animation-name: tmj-imm-m-drift;
  animation-duration: 28s;
}

#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-orb--b {
  /* hide second orb in battle for max clarity */
  display: none !important;
}

#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-rim {
  /* battle top bar already dense — lighter rim */
  height: calc(56px + var(--imm-sat));
  opacity: 0.45;
  background: linear-gradient(
    180deg,
    rgba(0, 28, 16, 0.4) 0%,
    transparent 100%
  );
}

#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-floor {
  height: calc(64px + var(--imm-sab));
  opacity: 0.4;
}

#tmj-immersion-root[data-surface='m-battle'] .tmj-imm-ember {
  background: radial-gradient(
    ellipse 55% 35% at 50% 45%,
    rgba(0, 255, 140, 0.14) 0%,
    transparent 60%
  );
}

#tmj-immersion-root[data-surface='m-battle'].is-pulse .tmj-imm-ember {
  animation-name: tmj-imm-m-pulse;
  animation-duration: 0.45s;
}

/* —— Mobile forge map —— */
#tmj-immersion-root[data-surface='m-forge'] .tmj-imm-vignette {
  /* map is the star — very light vignette */
  background: radial-gradient(
    ellipse 95% 90% at 50% 50%,
    transparent 60%,
    rgba(0, 8, 4, 0.18) 100%
  );
  animation-duration: 16s;
  opacity: 0.4;
}

#tmj-immersion-root[data-surface='m-forge'] .tmj-imm-orb--a {
  width: 45vw;
  height: 45vw;
  left: -5%;
  top: 10%;
  opacity: 0.1;
  animation-name: tmj-imm-m-drift;
  animation-duration: 30s;
}

#tmj-immersion-root[data-surface='m-forge'] .tmj-imm-orb--b {
  width: 40vw;
  height: 40vw;
  right: -8%;
  bottom: 20%;
  opacity: 0.08;
  animation-name: tmj-imm-m-drift;
  animation-duration: 34s;
  animation-delay: -12s;
}

#tmj-immersion-root[data-surface='m-forge'] .tmj-imm-rim {
  height: calc(48px + var(--imm-sat));
  opacity: 0.35;
}

#tmj-immersion-root[data-surface='m-forge'] .tmj-imm-floor {
  /* leave room for joystick / tab chrome */
  height: calc(120px + var(--imm-sab));
  opacity: 0.35;
  background: linear-gradient(
    0deg,
    rgba(0, 20, 12, 0.45) 0%,
    transparent 70%
  );
}

/* Level 2 on mobile = slightly stronger rim, still no third orb */
#tmj-immersion-root[data-surface^='m-'][data-level='2'] .tmj-imm-vignette,
#tmj-immersion-root[data-surface='narrow'][data-level='2'] .tmj-imm-vignette {
  opacity: 0.65;
}

#tmj-immersion-root[data-surface^='m-'][data-level='2'] .tmj-imm-orb,
#tmj-immersion-root[data-surface='narrow'][data-level='2'] .tmj-imm-orb {
  opacity: 0.2;
}

/* Low-power attribute from JS (2g / save-data / low battery) */
#tmj-immersion-root[data-power='low'] .tmj-imm-orb {
  display: none !important;
}

#tmj-immersion-root[data-power='low'] .tmj-imm-vignette {
  animation: none !important;
  opacity: 0.4;
}

#tmj-immersion-root[data-power='low'] .tmj-imm-rim,
#tmj-immersion-root[data-power='low'] .tmj-imm-floor {
  animation: none !important;
  opacity: 0.35;
}

/* Body-class fallbacks if JS surface not set yet */
body.m-body-battle #tmj-immersion-root:not([data-surface]) .tmj-imm-orb--b,
body.m-body-battle #tmj-immersion-root:not([data-surface]) .tmj-imm-orb--c {
  display: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #tmj-immersion-root .tmj-imm-orb,
  #tmj-immersion-root .tmj-imm-vignette,
  #tmj-immersion-root .tmj-imm-rim,
  #tmj-immersion-root .tmj-imm-floor {
    animation: none !important;
  }
  #tmj-immersion-root .tmj-imm-orb {
    opacity: 0.1;
    transform: none !important;
  }
  #tmj-immersion-root .tmj-imm-vignette {
    opacity: 0.45;
  }
}

/* Coarse pointer phones (extra safety even on desktop class pages) */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  #tmj-immersion-root[data-surface='desktop'] .tmj-imm-orb {
    filter: blur(32px);
    will-change: auto;
  }
  #tmj-immersion-root[data-surface='desktop'] .tmj-imm-orb--c {
    display: none !important;
  }
  #tmj-immersion-root[data-surface='desktop'] .tmj-imm-rim,
  #tmj-immersion-root[data-surface='desktop'] .tmj-imm-floor {
    display: block;
  }
}