/* Kristallfront: Zeichnung und Bewegung unverändert aus dem Spiel Crystal Keep Klasse 5
   (tower-crystal.css, Abschnitt „crystal-front“ und „clash-…“). Bei einer neuen Spielfassung
   von dort neu übernehmen; Anpassungen für die Website stehen in turm.css. */
.crystal-front { isolation: isolate; }
.crystal-front svg { width: 100%; height: 100%; overflow: visible; }
.clash-field { transform: scaleX(var(--clash-to)); }
.clash-center { transform: translate(var(--clash-center-to),150px); }
.crystal-front svg path { stroke-linejoin: round; stroke-linecap: round; }
.clash-gold-glow { filter: blur(19px); opacity: .61; }
.clash-gold-body { opacity: .66; }
.clash-gold-base, .clash-gold-pulse, .clash-gold-tail, .clash-gold-filaments,
.clash-violet-loop, .clash-violet-tail, .clash-violet-tracer, .clash-violet-weave { fill: none; }
.clash-gold-base { stroke-width: 7; filter: drop-shadow(0 0 8px #fcae4c); }
.clash-gold-pulse { stroke-width: 3; stroke-dasharray: 39 88 12 110; opacity: .82; }
.clash-gold-tail { stroke-width: 2.5; opacity: .8; }
.clash-gold-filaments { stroke-width: 1.7; stroke-dasharray: 38 54 8 28; opacity: .54; }
.clash-contact-arc {
  fill: none; stroke-width: 1.85; stroke-dasharray: 25 15 12 48; opacity: .76;
}
.clash-contact-gold { stroke: #ffe0a5; filter: drop-shadow(0 0 6px #f5a54f); }
.clash-contact-violet { stroke: #e9caff; filter: drop-shadow(0 0 6px #a75eff); }
.clash-contact-echo { opacity: .24; stroke: #ffc581; }
.clash-violet-weave { stroke-width: 2.2; opacity: .84; }
.clash-ember { fill: #ffda8a; filter: drop-shadow(0 0 4px #ee8b39); opacity: .78; }
.clash-violet-fog { filter: blur(17px); opacity: .78; }
.clash-violet-veil { filter: blur(3px); opacity: .63; }
.clash-violet-loop { stroke-width: 4.5; filter: drop-shadow(0 0 7px #ae76f8); }
.clash-violet-tail { stroke-width: 4; opacity: .7; }
.clash-violet-tracer { stroke-width: 2.1; stroke-dasharray: 5 25 41 70; opacity: .74; }
.clash-mote { fill: #e8d3ff; filter: drop-shadow(0 0 6px #bd87ff); opacity: .77; }
.clash-contact-ring {
  fill: none; stroke: #f0cffd; stroke-width: 1.5; opacity: .28; transform-box: fill-box; transform-origin: center;
}
.clash-contact-core { fill: #f1c7e6; filter: drop-shadow(0 0 11px #ffbaf0); }
.clash-contact-facet { fill: #fff4d8; opacity: .94; }
.clash-contact-sparks { fill: none; stroke: #ffdbba; stroke-width: 1.35; opacity: .48; }
@media (prefers-reduced-motion: no-preference) {
  .clash-reveal-gold, .clash-reveal-violet { transform-origin: 0 0; }
  .clash-gold-drift, .clash-violet-drift {
    transform-origin: 0 150px; animation: clash-drift 5.8s ease-in-out infinite alternate;
  }
  .clash-violet-drift { animation-duration: 7.1s; animation-delay: -2s; }
  .clash-contact-drift { animation: clash-eddies 5.8s ease-in-out infinite alternate; }
  .crystal-front[data-shifting] .clash-field {
    animation: clash-surge 1.35s .55s cubic-bezier(.3,.12,.24,1) both;
  }
  .crystal-front[data-shifting] .clash-center {
    animation: clash-center-surge 1.35s .55s cubic-bezier(.3,.12,.24,1) both;
  }
  @keyframes clash-drift {
    0% { transform: skewY(-.75deg) scaleX(.97); }
    46% { transform: skewY(.95deg) scaleX(1.045); }
    100% { transform: skewY(.17deg) scaleX(1.015); }
  }
  @keyframes clash-eddies {
    0% { transform: translate(-15px,-8px) rotate(-7deg); }
    47% { transform: translate(18px,10px) rotate(6deg); }
    100% { transform: translate(-4px,-6px) rotate(-2deg); }
  }
  @keyframes clash-surge {
    from { transform: scaleX(var(--clash-from)); }
    to { transform: scaleX(var(--clash-to)); }
  }
  @keyframes clash-center-surge {
    from { transform: translate(var(--clash-center-from),150px); }
    to { transform: translate(var(--clash-center-to),150px); }
  }
  .clash-reveal-gold { animation: clash-stream 610ms cubic-bezier(.6,.1,.21,1) both; }
  .clash-reveal-violet { animation: clash-stream 760ms 70ms cubic-bezier(.39,.13,.2,1) both; }
  .clash-contact-awaken { animation: clash-awaken 1.05s 610ms ease-out both; }
  .clash-contact-arc { animation: clash-arc 3.3s 740ms linear infinite; }
  .clash-contact-violet { animation-direction: reverse; animation-duration: 4.1s; }
  .clash-contact-sparks { animation: clash-sparks .88s 720ms ease-out both; }
  .clash-violet-weave { animation: clash-violet-rise 5.6s -1.1s ease-in-out infinite alternate; transform-origin: 1000px 150px; }
  .clash-gold-filaments { animation: clash-gold-drive 1.25s linear infinite; }
  .clash-gold-body { animation: clash-gold-breath 2.4s ease-in-out infinite alternate; transform-origin: 1000px 150px; }
  .clash-gold-pulse { animation: clash-gold-drive 1.75s linear infinite; }
  .clash-ember { animation: clash-ember-travel 2.8s var(--delay) ease-out infinite; }
  .clash-violet-veil { animation: clash-violet-rise 6.2s ease-in-out infinite alternate; transform-origin: 1000px 150px; }
  .clash-violet-loop, .clash-violet-tail { animation: clash-violet-rise 4.8s ease-in-out infinite alternate; transform-origin: 1000px 150px; }
  .clash-violet-tail { animation-delay: -1.8s; }
  .clash-violet-tracer { animation: clash-violet-drive 4.4s linear infinite; }
  .clash-mote { animation: clash-mote-float 5.2s var(--delay) ease-in-out infinite; }
  .clash-contact-ring { animation: clash-impact 3.2s 750ms ease-out infinite; }
  .clash-contact-echo { animation-delay: 1.2s; }
  @keyframes clash-stream { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  @keyframes clash-awaken { 0% { opacity:0; transform:scale(.35); } 36% { opacity:1; transform:scale(1.06); } 100% { opacity:1; transform:scale(1); } }
  @keyframes clash-arc { to { stroke-dashoffset:-100; } }
  @keyframes clash-sparks {
    from { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: .9; }
    to { stroke-dasharray: 37 63; stroke-dashoffset: -59; opacity: .15; }
  }
  .clash-contact-core { animation: clash-core 2.4s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
  @keyframes clash-gold-drive { to { stroke-dashoffset: -249; } }
  @keyframes clash-gold-breath { from { transform: scaleY(.85); } to { transform: scaleY(1.13); } }
  @keyframes clash-ember-travel { from { transform:translate(-62px,13px);opacity:.14; } 40% { opacity:.9; } to { transform:translate(58px,-13px);opacity:0; } }
  @keyframes clash-violet-drive { to { stroke-dashoffset: -282; } }
  @keyframes clash-violet-rise { from { transform: skewY(-3deg) scaleY(.89); } to { transform: skewY(3deg) scaleY(1.09); } }
  @keyframes clash-mote-float { from { transform:translate(-34px,16px);opacity:.1; } 50% { opacity:.88; } to { transform:translate(38px,-18px);opacity:.1; } }
  @keyframes clash-impact { from { transform:scale(.65);opacity:.3; } to { transform:scale(1.8);opacity:0; } }
  @keyframes clash-core { from { transform:scale(.83); } to { transform:scale(1.08); } }