/* Decorative only. Match the existing 1672×941 centered cover backgrounds.
   Small gradient patches animate opacity/transform, never the background image. */
.ambient-scene {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.683315vh);
  height: max(100vh, 56.279904vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0; /* Above body art, below the existing app-shell (z-index 1). */
}
.ambient-scene > i {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
}
.ambient-glass {
  left: 1.5%; top: 51%; width: 5%; height: 10%;
  background: radial-gradient(ellipse at 32% 28%, rgba(198, 169, 255, .65), transparent 48%);
  animation: ambient-glint 17s ease-in-out -9s infinite;
}
@keyframes ambient-breathe {
  0%, 100% { opacity: .12; }
  46% { opacity: .36; }
  72% { opacity: .2; }
}
@keyframes ambient-flicker {
  0%, 100% { opacity: .18; }
  21% { opacity: .3; }
  43% { opacity: .21; }
  61% { opacity: .34; }
  79% { opacity: .25; }
}
@keyframes ambient-glint {
  0%, 75%, 100% { opacity: 0; transform: translateX(-2px); }
  84% { opacity: .32; transform: translateX(2px); }
  93% { opacity: 0; transform: translateX(5px); }
}
/* No decorative motion during startup, layout editing, or reduced-motion use. */
html.app-initializing .ambient-scene,
body:has(.is-layout-editing) .ambient-scene { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ambient-scene { display: none !important; }
  .ambient-scene > i { animation: none !important; }
}

/* Battle: shelf light behind the field, never on combat text. */
body.is-play .ambient-battle { display: block; }
.ambient-battle-lantern {
  left: 79%; top: 1%; width: 5%; height: 13%;
  background: radial-gradient(ellipse, rgba(72, 211, 227, .4), transparent 70%);
  animation: ambient-breathe 13s ease-in-out -5s infinite;
}
/* The sibling overlay receives the existing hand-background layout rectangle.
   Its inner 3:1 canvas matches object-fit:contain, including transparent padding. */
.ambient-hand {
  display: none;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  container-type: size;
}
body.is-play .ambient-hand { display: block; }
.ambient-hand-art {
  position: absolute;
  left: 50%; top: 50%;
  width: min(100cqw, 300cqh);
  height: min(100cqh, 33.333333cqw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ambient-hand-art > i { position: absolute; display: block; opacity: 0; pointer-events: none; }
.ambient-hand-candle-left {
  left: 4%; top: 27%; width: 3%; height: 12%;
  background: radial-gradient(ellipse, rgba(255, 174, 66, .55), transparent 70%);
  animation: ambient-flicker 6.7s ease-in-out -2s infinite;
}
.ambient-hand-candle-right {
  left: 93.5%; top: 36%; width: 3%; height: 12%;
  background: radial-gradient(ellipse, rgba(255, 174, 66, .55), transparent 70%);
  animation: ambient-flicker 8.3s ease-in-out -4s infinite;
}
.ambient-hand-orb {
  left: 90.5%; top: 28%; width: 5%; height: 12%;
  background: radial-gradient(ellipse at 35% 30%, rgba(153, 207, 255, .65), transparent 65%);
  animation: ambient-glint 14s ease-in-out -7s infinite;
}
.ambient-hand-potion {
  left: 6.5%; top: 34%; width: 3.5%; height: 11%;
  background: radial-gradient(ellipse, rgba(106, 237, 80, .4), transparent 70%);
  animation: ambient-breathe 12s ease-in-out -3s infinite;
}
html.app-initializing .ambient-hand,
html.app-initializing .ambient-battle,
body.is-battle-layout-editing .ambient-hand,
body.is-battle-layout-editing .ambient-battle { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ambient-hand { display: none !important; }
  .ambient-hand-art > i { animation: none !important; }
}

/* Visible accents on the hand props: tight light cores, not broad fog. */
.ambient-hand-candle-left,
.ambient-hand-candle-right {
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 244, 183, .95) 0 9%, rgba(255, 178, 56, .78) 22%, rgba(255, 112, 22, .2) 45%, transparent 65%);
  transform-origin: 50% 75%;
  animation-name: ambient-hand-flame;
}
.ambient-hand-potion {
  background: radial-gradient(ellipse, rgba(188, 255, 142, .8) 0 12%, rgba(88, 235, 43, .55) 30%, transparent 64%);
  animation: ambient-hand-potion-light 5.5s ease-in-out -2s infinite;
}
.ambient-hand-orb {
  background: radial-gradient(ellipse at 34% 26%, rgba(236, 245, 255, .9) 0 4%, rgba(139, 183, 255, .55) 12%, transparent 32%);
  animation: ambient-hand-orb-glint 8s ease-in-out -3s infinite;
}
.ambient-battle-lantern {
  background: radial-gradient(ellipse, rgba(141, 249, 255, .65) 0 12%, rgba(51, 206, 232, .4) 30%, transparent 65%);
  animation: ambient-hand-potion-light 7s ease-in-out -4s infinite;
}
@keyframes ambient-hand-flame {
  0%, 100% { opacity: .38; transform: scale(.92, .94); }
  22% { opacity: .76; transform: scale(1, 1.07); }
  41% { opacity: .48; transform: scale(.96, .98); }
  65% { opacity: .86; transform: scale(1.04, 1.1); }
  82% { opacity: .56; transform: scale(.95, 1.02); }
}
@keyframes ambient-hand-potion-light {
  0%, 100% { opacity: .2; }
  48% { opacity: .72; }
  76% { opacity: .4; }
}
@keyframes ambient-hand-orb-glint {
  0%, 60%, 100% { opacity: 0; transform: translateX(-2px); }
  73% { opacity: .85; transform: translateX(1px); }
  88% { opacity: .15; transform: translateX(3px); }
}