/* CROWNSHIFT – THE GREAT HALL: Kulisse und Kamera (Designkonzept §6, §33, §52, §60, §65).
   Alle Klassen mit Präfix scene-. Während Animationen nur transform / opacity. */

.scene-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  background: var(--slate-950, #0c0d0f);
  contain: strict;
  isolation: isolate;
}
.scene-root * {
  pointer-events: none;
}
.scene-world {
  position: absolute;
  inset: 0;
}
.scene-world-hidden .scene-world {
  visibility: hidden;
}
/* Quer-/Breitformat: Vordergrundsäulen würden das breitere Bild zerschneiden */
.scene-wide .scene-layer--fg {
  display: none;
}
.scene-layer {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0; /* Kamera: per JS (rAF) mit --ease-heavy geführt, keine CSS-Transition */
  backface-visibility: hidden;
}
.scene-moving .scene-layer {
  will-change: transform;
}
.scene-instant .scene-matchtop,
.scene-instant .scene-ov {
  transition: none !important;
}
.scene-svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.scene-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.scene-a {
  position: absolute;
}
.scene-a > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Licht-Hüllen: Stimmung dimmt/hebt Feuer, Kerzen, Fackeln ---------- */
.scene-lw {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transition: opacity 1.8s ease;
}
.scene-mood-battle .scene-lw {
  opacity: 0.92;
}
.scene-mood-laststand .scene-lw {
  opacity: 0.42;
}
.scene-mood-defeat .scene-lw {
  opacity: 0.5;
}

/* ---------- Flammen ---------- */
.scene-flame {
  position: absolute;
  transform-origin: 50% 100%;
  animation: scene-flick 1.6s ease-in-out infinite alternate;
}
.scene-flame--b {
  animation-name: scene-flick-b;
}
.scene-flame--c {
  animation-name: scene-flick-c;
}
.scene-cflame {
  position: absolute;
  transform-origin: 50% 100%;
  animation: scene-cflick 2.4s ease-in-out infinite alternate;
}
@keyframes scene-flick {
  0% { transform: scale(1, 1) skewX(0deg); opacity: 0.95; }
  22% { transform: scale(0.93, 1.09) skewX(-3deg); opacity: 1; }
  47% { transform: scale(1.05, 0.92) skewX(2deg); opacity: 0.88; }
  71% { transform: scale(0.96, 1.06) skewX(-1.5deg); opacity: 1; }
  100% { transform: scale(1.03, 0.96) skewX(3deg); opacity: 0.92; }
}
@keyframes scene-flick-b {
  0% { transform: scale(1, 0.94) skewX(2deg); opacity: 0.9; }
  30% { transform: scale(0.95, 1.1) skewX(-2deg); opacity: 1; }
  58% { transform: scale(1.04, 0.97) skewX(3deg); opacity: 0.86; }
  100% { transform: scale(0.97, 1.05) skewX(-3deg); opacity: 1; }
}
@keyframes scene-flick-c {
  0% { transform: translateX(0) scale(1, 1); opacity: 0.7; }
  35% { transform: translateX(-3%) scale(0.9, 1.14); opacity: 0.95; }
  65% { transform: translateX(4%) scale(1.06, 0.9); opacity: 0.6; }
  100% { transform: translateX(-2%) scale(0.96, 1.08); opacity: 0.85; }
}
@keyframes scene-cflick {
  0% { transform: scale(1, 1) skewX(0deg); }
  18% { transform: scale(0.96, 1.05) skewX(-2deg); }
  40% { transform: scale(1.02, 0.97) skewX(1deg); }
  63% { transform: scale(0.98, 1.03) skewX(-1deg); }
  100% { transform: scale(1, 0.98) skewX(2deg); }
}

/* ---------- Leuchten (vorgeblurrte Radialverläufe, keine Filter) ---------- */
.scene-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 178, 92, 0.42), rgba(255, 140, 60, 0.15) 48%, rgba(255, 120, 40, 0) 100%);
  animation: scene-glow 3.1s linear infinite;
}
.scene-glow--fire {
  background: radial-gradient(closest-side, rgba(255, 170, 80, 0.36), rgba(255, 130, 50, 0.14) 45%, rgba(255, 110, 30, 0.04) 75%, rgba(255, 110, 30, 0) 100%);
  animation-name: scene-glow-fire;
  animation-duration: 2.7s;
}
.scene-glow--coal {
  background: radial-gradient(closest-side, rgba(255, 150, 60, 0.75), rgba(230, 80, 20, 0.35) 55%, rgba(200, 60, 10, 0) 100%);
  animation-duration: 1.9s;
}
.scene-glow--candle {
  background: radial-gradient(closest-side, rgba(255, 200, 120, 0.38), rgba(255, 170, 90, 0.12) 50%, rgba(255, 160, 80, 0) 100%);
  animation-name: scene-glow-soft;
  animation-duration: 3.7s;
}
.scene-glow--torch {
  background: radial-gradient(closest-side, rgba(255, 168, 80, 0.4), rgba(255, 130, 50, 0.13) 50%, rgba(255, 120, 40, 0) 100%);
  animation-duration: 2.3s;
}
.scene-glow--forge {
  background: radial-gradient(closest-side, rgba(255, 120, 40, 0.4), rgba(220, 80, 20, 0.14) 50%, rgba(200, 60, 10, 0) 100%);
  animation-name: scene-glow-soft;
  animation-duration: 4.3s;
}
.scene-glow--hot {
  background: radial-gradient(closest-side, rgba(255, 210, 120, 0.9), rgba(255, 110, 30, 0.5) 45%, rgba(220, 60, 10, 0) 100%);
  animation-name: scene-glow-soft;
  animation-duration: 5.1s;
}
@keyframes scene-glow {
  0% { opacity: 0.84; }
  13% { opacity: 0.97; }
  27% { opacity: 0.8; }
  42% { opacity: 1; }
  58% { opacity: 0.87; }
  74% { opacity: 0.96; }
  88% { opacity: 0.79; }
  100% { opacity: 0.84; }
}
@keyframes scene-glow-fire {
  0% { opacity: 0.86; transform: scale(1); }
  17% { opacity: 1; transform: scale(1.02); }
  31% { opacity: 0.8; transform: scale(0.99); }
  49% { opacity: 0.95; transform: scale(1.01); }
  66% { opacity: 0.83; transform: scale(1); }
  83% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.86; transform: scale(1); }
}
@keyframes scene-glow-soft {
  0%, 100% { opacity: 0.9; }
  35% { opacity: 1; }
  60% { opacity: 0.82; }
}

/* ---------- Banner und Wimpel ---------- */
.scene-banner {
  position: absolute;
  transform-origin: 50% 0;
  animation: scene-sway 7.5s ease-in-out infinite;
}
.scene-mood-laststand .scene-banner {
  animation-name: scene-sway-storm;
  animation-duration: 3.6s;
}
@keyframes scene-sway {
  0%, 100% { transform: rotate(-0.45deg) skewX(0deg); }
  50% { transform: rotate(0.55deg) skewX(-0.6deg); }
}
@keyframes scene-sway-storm {
  0%, 100% { transform: rotate(-1.6deg) skewX(1deg); }
  30% { transform: rotate(1.2deg) skewX(-2deg); }
  55% { transform: rotate(2.3deg) skewX(-1deg); }
  80% { transform: rotate(-0.6deg) skewX(1.5deg); }
}
.scene-pennant {
  position: absolute;
  transform-origin: 0 50%;
  animation: scene-flutter 3.2s ease-in-out infinite;
}
.scene-mood-laststand .scene-pennant {
  animation-duration: 1.3s;
}
@keyframes scene-flutter {
  0%, 100% { transform: scaleX(1) skewY(0deg); }
  25% { transform: scaleX(0.93) skewY(-4deg); }
  50% { transform: scaleX(0.98) skewY(2deg); }
  75% { transform: scaleX(0.9) skewY(-2deg); }
}

/* ---------- Fenster: Regen und Blitz (nur Last Stand) ---------- */
.scene-winfx {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.scene-mood-laststand .scene-winfx {
  opacity: 1;
}
.scene-storm {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.25));
}
.scene-rainwrap {
  position: absolute;
  inset: 0;
  transform: skewX(-9deg);
}
.scene-rain {
  position: absolute;
  left: -30%;
  width: 160%;
  top: -180px;
  bottom: 0;
  background-image:
    radial-gradient(1.6px 16px at 50% 50%, rgba(206, 220, 244, 0.8), rgba(206, 220, 244, 0)),
    radial-gradient(1.2px 11px at 50% 50%, rgba(190, 206, 232, 0.6), rgba(190, 206, 232, 0));
  background-size: 17px 90px, 11px 60px;
  background-position: 0 0, 6px 23px;
}
.scene-mood-laststand .scene-rain {
  animation: scene-rain 0.5s linear infinite;
}
.scene-rain--slow {
  background-size: 23px 90px, 13px 60px;
  opacity: 0.7;
}
.scene-mood-laststand .scene-rain--slow {
  animation-duration: 0.8s;
}
@keyframes scene-rain {
  from { transform: translateY(0); }
  to { transform: translateY(180px); }
}
.scene-wflash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 25%, rgba(225, 235, 255, 0.95), rgba(165, 190, 235, 0.45) 55%, rgba(140, 165, 215, 0.15));
}
.scene-flashing .scene-wflash {
  animation: scene-flash 1.15s ease-out;
}
@keyframes scene-flash {
  0% { opacity: 0; }
  5% { opacity: 0.95; }
  12% { opacity: 0.15; }
  20% { opacity: 0.75; }
  45% { opacity: 0.1; }
  100% { opacity: 0; }
}

/* Hof: Regenvorhang und Himmel */
.scene-courtrain {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.scene-mood-laststand .scene-courtrain {
  opacity: 0.85;
}
.scene-skyflash {
  position: absolute;
  opacity: 0;
  background: linear-gradient(180deg, rgba(200, 215, 245, 0.55), rgba(150, 170, 215, 0.12));
}
.scene-flashing .scene-skyflash {
  animation: scene-flash 1.15s ease-out;
}

/* ---------- Bildschirm-Überlagerungen ---------- */
.scene-matchtop {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  background:
    radial-gradient(ellipse 120% 55% at 50% -8%, rgba(255, 170, 90, 0.22), rgba(255, 150, 70, 0) 70%),
    radial-gradient(ellipse 45% 35% at 0% 55%, rgba(255, 180, 100, 0.1), rgba(255, 180, 100, 0) 100%),
    radial-gradient(ellipse 45% 35% at 100% 55%, rgba(255, 180, 100, 0.1), rgba(255, 180, 100, 0) 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0 2px, rgba(0, 0, 0, 0) 2px 86px),
    repeating-linear-gradient(90deg, rgba(255, 220, 170, 0.035) 0 1px, rgba(0, 0, 0, 0) 1px 9px, rgba(0, 0, 0, 0.06) 9px 11px, rgba(0, 0, 0, 0) 11px 23px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 31px, rgba(0, 0, 0, 0.09) 31px 33px, rgba(0, 0, 0, 0) 33px 57px),
    linear-gradient(90deg, #22160c, #2c1c10 18%, #26180d 31%, #2f1e11 52%, #24170c 69%, #2b1b0f 84%, #20150b);
}
.scene-matchtop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 62% at 50% 52%, rgba(0, 0, 0, 0) 40%, rgba(5, 3, 2, 0.82) 100%);
}
.scene-root[data-place="match"] .scene-matchtop {
  opacity: 1;
  transition: opacity 0.75s ease 0.5s;
}
.scene-mtglow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 175, 95, 0.16), rgba(255, 150, 70, 0) 100%);
  animation: scene-glow-soft 4.1s ease-in-out infinite;
}
.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-ov {
  position: absolute;
  inset: 0;
  transition: opacity 1.4s ease;
}
.scene-vig {
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(3, 3, 4, 0.6) 100%);
}
.scene-vig2 {
  opacity: 0;
  background: radial-gradient(ellipse 72% 62% at 50% 50%, rgba(0, 0, 0, 0) 34%, rgba(3, 3, 4, 0.78) 100%);
}
.scene-mood-battle .scene-vig2 {
  opacity: 0.65;
}
.scene-mood-laststand .scene-vig2,
.scene-mood-defeat .scene-vig2 {
  opacity: 0.85;
}
.scene-root[data-place="match"] .scene-vig2 {
  opacity: 0.55;
}
.scene-warm {
  opacity: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(255, 214, 140, 0.26), rgba(255, 214, 140, 0) 100%),
    radial-gradient(ellipse 95% 70% at 50% 40%, rgba(255, 200, 110, 0.24), rgba(255, 186, 96, 0.1) 55%, rgba(255, 186, 96, 0.04));
}
.scene-mood-battle .scene-warm {
  opacity: 0.35;
}
.scene-mood-victory .scene-warm {
  opacity: 1;
}
.scene-mood-victory .scene-vig {
  opacity: 0.6;
}
.scene-cold {
  opacity: 0;
  background: linear-gradient(180deg, rgba(28, 48, 84, 0.4), rgba(12, 22, 40, 0.42));
}
.scene-mood-laststand .scene-cold {
  opacity: 0.85;
}
.scene-mood-defeat .scene-cold {
  opacity: 0.7;
}
.scene-dark {
  opacity: 0;
  background: rgba(4, 5, 7, 0.42);
}
.scene-mood-laststand .scene-dark {
  opacity: 0.45;
}
.scene-mood-defeat .scene-dark {
  opacity: 1;
}
.scene-tint {
  opacity: 0;
  transition: opacity 1.3s ease;
  background: radial-gradient(ellipse 90% 62% at 50% 34%, var(--scene-tc, transparent), rgba(0, 0, 0, 0) 78%);
}
.scene-tint.scene-on {
  opacity: 0.13;
}
.scene-gflash {
  opacity: 0;
  background: linear-gradient(180deg, rgba(190, 210, 245, 0.16), rgba(160, 185, 230, 0.05));
}
.scene-flashing .scene-gflash {
  animation: scene-flash 1.15s ease-out;
}
.scene-dimmer {
  position: absolute;
  inset: 0;
  background: var(--slate-950, #0c0d0f);
  opacity: var(--scene-dim, 0);
  transition: opacity 0.5s ease;
}
/* Die App kann die Kulisse abdunkeln: .scene-dim am Container (oder --scene-dim: 0…1 setzen). */
.scene-dim {
  --scene-dim: 0.55;
}

/* ---------- Pause / Sichtbarkeit / Barrierefreiheit ---------- */
/* Außerhalb des Bildes: Animation ganz abschalten (keine Style-/Paint-Arbeit) */
.scene-root .scene-off,
.scene-root .scene-off * {
  animation-name: none !important;
}
.scene-paused *,
.scene-paused *::before,
.scene-paused *::after {
  animation-play-state: paused !important;
}
html.reduce-motion .scene-root *,
html.reduce-motion .scene-root *::before,
html.reduce-motion .scene-root *::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .scene-root *,
  html:not(.force-motion) .scene-root *::before,
  html:not(.force-motion) .scene-root *::after {
    animation: none !important;
  }
}