/* ==========================================================================
   Motion-Schicht
   Liegt additiv ueber allen Komponenten-Styles (als letztes geladen) und
   aendert keine Layouts. Alles Bewegte steht unter prefers-reduced-motion:
   no-preference, damit Nutzer mit reduzierter Bewegung die alte, ruhige
   Oberflaeche behalten. Die Logik dazu sitzt in /app/motion.js.
   ========================================================================== */

@property --mx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --mx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mx-gold: #e9c77b;
  --mx-gold-soft: rgba(233, 199, 123, 0.35);
  --mx-crit: #ffd56a;
  --mx-fumble: #ff4d4f;
}

/* Elemente, die motion.js erzeugt, existieren immer, auch ohne Animation. */
.mx-embers {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}

.realm-title .mx-line {
  display: block;
  /* So breit wie das Wort, nicht wie die Spalte: lange Woerter ragen wie
     vorher ueber die Spalte hinaus, statt von der Maske gekappt zu werden. */
  width: max-content;
  overflow: hidden;
  /* Platz fuer die Kursive, sonst schneidet overflow die Schraege ab. */
  padding: 0 0.2em 0.04em 0;
  margin-right: -0.2em;
}
.realm-title .mx-line > span {
  display: inline-block;
}

.mx-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    circle at var(--mx-gx, 50%) var(--mx-gy, 50%),
    rgba(255, 236, 200, 0.22),
    rgba(255, 236, 200, 0.06) 28%,
    transparent 55%
  );
  transition: opacity 0.35s;
}
.mx-tilt:hover .mx-glare { opacity: 1; }

/* ---------- Wuerfel-Buehne ---------- */
.mx-dice-stage {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9000;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  translate: -50% 0;
  pointer-events: none;
}

.mx-roll {
  --mx-roll-color: var(--mx-gold);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 250px;
  padding: 12px 20px 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--mx-roll-color), transparent 80%), transparent 60%),
    rgba(14, 15, 19, 0.82);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-body);
}
.mx-roll.is-crit { --mx-roll-color: var(--mx-crit); border-color: rgba(255, 213, 106, 0.55); }
.mx-roll.is-fumble { --mx-roll-color: var(--mx-fumble); border-color: rgba(255, 77, 79, 0.5); }

.mx-die {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.mx-die svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mx-die svg .mx-die-face {
  fill: color-mix(in srgb, var(--mx-roll-color), #0b0c10 78%);
  stroke: var(--mx-roll-color);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.mx-die svg .mx-die-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--mx-roll-color), transparent 55%);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.mx-die-num {
  position: relative;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 12px var(--mx-roll-color);
  font-variant-numeric: tabular-nums;
}

.mx-roll-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-roll-who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.mx-roll-total {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.mx-roll-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.mx-roll-tag {
  position: absolute;
  top: -11px;
  right: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--mx-roll-color);
  color: #120d05;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mx-burst {
  position: absolute;
  left: 46px;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mx-burst i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mx-roll-color);
  box-shadow: 0 0 10px var(--mx-roll-color);
  opacity: 0;
}

/* ---------- Zugwechsel-Banner ---------- */
.mx-turn-banner {
  position: absolute;
  top: 18%;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 28px 10px 10px;
  translate: -50% 0;
  pointer-events: none;
  border-top: 1px solid rgba(233, 199, 123, 0.55);
  border-bottom: 1px solid rgba(233, 199, 123, 0.55);
  background: linear-gradient(90deg, transparent, rgba(12, 10, 8, 0.88) 18%, rgba(12, 10, 8, 0.88) 82%, transparent);
  color: #fff;
  white-space: nowrap;
}
.mx-turn-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--mx-gold);
  background: #1b1712;
  box-shadow: 0 0 22px rgba(233, 199, 123, 0.45);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--mx-gold);
}
.mx-turn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mx-turn-text { display: flex; flex-direction: column; }
.mx-turn-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mx-gold);
}
.mx-turn-name {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  font-style: italic;
  line-height: 1.05;
  text-transform: uppercase;
}

/* ==========================================================================
   Ab hier nur mit erlaubter Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Bildschirmwechsel ---------- */
  .realm-screen,
  #app {
    animation: mx-screen-in 0.7s var(--mx-ease-out) both;
  }
  @keyframes mx-screen-in {
    from { opacity: 0; filter: blur(6px); }
    to { opacity: 1; filter: none; }
  }

  /* ---------- Hero: Ken-Burns-Drift + Maus-Parallaxe ---------- */
  .realm-hero-art {
    transform-origin: 72% 42%;
    translate: var(--mx-px, 0px) var(--mx-py, 0px);
    animation: mx-kenburns 32s ease-in-out infinite alternate;
    transition: translate 0.9s var(--mx-ease-out);
    will-change: scale, translate;
  }
  @keyframes mx-kenburns {
    from { scale: 1.03; }
    to { scale: 1.09; }
  }
  .realm-hero-scrim {
    animation: mx-scrim-breathe 9s ease-in-out infinite alternate;
  }
  @keyframes mx-scrim-breathe {
    from { opacity: 1; }
    to { opacity: 0.86; }
  }

  /* ---------- Titel: Zeilen steigen aus der Maske ---------- */
  .mx-ready .realm-title .mx-line > span {
    translate: 0 105%;
    rotate: 4deg;
    animation: mx-line-up 1.05s var(--mx-ease-out) both;
    animation-delay: calc(0.15s + var(--mx-i, 0) * 0.11s);
  }
  @keyframes mx-line-up {
    to { translate: 0 0; rotate: 0deg; }
  }

  /* Goldener Schimmer laeuft einmal durch den Titel (nicht im hellen Theme). */
  html:not([data-theme="light"]) .mx-ready .realm-title .mx-line > span {
    background: linear-gradient(100deg, #fff 0%, #fff 40%, var(--mx-gold) 50%, #fff 60%, #fff 100%);
    background-size: 280% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:
      mx-line-up 1.05s var(--mx-ease-out) both calc(0.15s + var(--mx-i, 0) * 0.11s),
      mx-title-sheen 2.6s ease-in-out 1.4s 1 both;
  }
  @keyframes mx-title-sheen {
    from { background-position: 100% 0; }
    to { background-position: 0% 0; }
  }

  .mx-ready .realm-eyebrow {
    animation: mx-type 1.1s steps(28, end) 0.05s both;
  }
  @keyframes mx-type {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }

  .mx-ready .realm-lead {
    animation: mx-rise 0.9s var(--mx-ease-out) 0.55s both;
  }
  .mx-ready .realm-copy + .realm-panel,
  .mx-ready .realm-login-panel {
    animation: mx-panel-in 1s var(--mx-ease-out) 0.35s both;
  }
  @keyframes mx-rise {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes mx-panel-in {
    from { opacity: 0; translate: 0 28px; scale: 0.97; filter: blur(8px); }
    to { opacity: 1; translate: 0 0; scale: 1; filter: none; }
  }

  .realm-hud span {
    animation: mx-hud-blink 3.2s steps(1, end) infinite;
  }
  .realm-hud span:nth-child(2) { animation-delay: 0.4s; }
  .realm-hud span:nth-child(3) { animation-delay: 0.8s; }
  @keyframes mx-hud-blink {
    0%, 92% { opacity: 1; }
    94% { opacity: 0.2; }
    96% { opacity: 1; }
    98% { opacity: 0.35; }
  }

  /* ---------- Glas-Panel: umlaufende Licht-Kante ---------- */
  .realm-panel::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
      from var(--mx-angle),
      transparent 0deg,
      transparent 250deg,
      var(--mx-gold-soft) 300deg,
      rgba(255, 244, 214, 0.85) 330deg,
      transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: mx-spin 7s linear infinite;
  }
  @keyframes mx-spin {
    to { --mx-angle: 360deg; }
  }

  .realm-panel input,
  .realm-panel select {
    transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
  }
  .realm-panel input:focus,
  .realm-panel select:focus {
    box-shadow: 0 0 0 3px rgba(233, 199, 123, 0.16), 0 0 24px rgba(233, 199, 123, 0.12);
  }

  /* ---------- Primaer-Knoepfe: Lichtstreif + federnder Klick ---------- */
  #account-login-btn,
  #new-campaign-form button,
  #join-btn,
  .realm-compact-action {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s var(--mx-ease-spring), box-shadow 0.25s, background-color 0.2s;
  }
  #account-login-btn::after,
  #new-campaign-form button::after,
  #join-btn::after,
  .realm-compact-action::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
    translate: -120% 0;
    transition: translate 0.7s var(--mx-ease-out);
  }
  #account-login-btn:hover::after,
  #new-campaign-form button:hover::after,
  #join-btn:hover::after,
  .realm-compact-action:hover::after {
    translate: 120% 0;
  }
  #account-login-btn:hover,
  #new-campaign-form button:hover,
  #join-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(233, 199, 123, 0.18);
  }
  #account-login-btn:active,
  #new-campaign-form button:active,
  #join-btn:active,
  .realm-compact-action:active {
    transform: translateY(1px) scale(0.98);
    transition-duration: 0.08s;
  }
  .mx-shake {
    animation: mx-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }
  @keyframes mx-shake {
    10%, 90% { translate: -1px 0; }
    20%, 80% { translate: 3px 0; }
    30%, 50%, 70% { translate: -6px 0; }
    40%, 60% { translate: 6px 0; }
  }

  /* ---------- Scroll-Reveals ---------- */
  .mx-reveal {
    opacity: 0;
    translate: 0 36px;
    filter: blur(6px);
    transition:
      opacity 0.9s var(--mx-ease-out),
      translate 0.9s var(--mx-ease-out),
      filter 0.9s var(--mx-ease-out);
    transition-delay: calc(var(--mx-i, 0) * 0.08s);
  }
  .mx-reveal.mx-in {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }
  .realm-section-head.mx-reveal h2 span {
    display: inline-block;
    transition: translate 1s var(--mx-ease-out) 0.15s, opacity 1s 0.15s;
    translate: -14px 0;
    opacity: 0;
  }
  .realm-section-head.mx-reveal.mx-in h2 span {
    translate: 0 0;
    opacity: 1;
  }

  /* ---------- 3D-Kippen der Karten ---------- */
  .mx-tilt {
    transform: perspective(1000px) rotateX(var(--mx-rx, 0deg)) rotateY(var(--mx-ry, 0deg)) translateY(var(--mx-lift, 0px));
    /* Reveal-Uebergaenge hier mitfuehren, sonst ueberschreibt diese Regel sie. */
    transition:
      transform 0.6s var(--mx-ease-out),
      box-shadow 0.4s,
      border-color 0.3s,
      opacity 0.9s var(--mx-ease-out) calc(var(--mx-i, 0) * 0.08s),
      translate 0.9s var(--mx-ease-out) calc(var(--mx-i, 0) * 0.08s),
      filter 0.9s var(--mx-ease-out) calc(var(--mx-i, 0) * 0.08s);
  }
  .mx-tilt.mx-tilting {
    transition:
      transform 0.12s linear,
      box-shadow 0.4s,
      border-color 0.3s,
      opacity 0.9s var(--mx-ease-out),
      translate 0.9s var(--mx-ease-out),
      filter 0.9s var(--mx-ease-out);
  }
  .mx-tilt:hover {
    --mx-lift: -4px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(233, 199, 123, 0.18);
  }

  /* ---------- Spieltisch ---------- */
  #chat-log .msg {
    animation: mx-msg-in 0.4s var(--mx-ease-out) both;
  }
  @keyframes mx-msg-in {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
  }
  #chat-log .msg.roll:last-child {
    animation: mx-msg-in 0.4s var(--mx-ease-out) both, mx-msg-flash 1.6s ease-out 0.2s both;
  }
  @keyframes mx-msg-flash {
    from { background-color: rgba(233, 199, 123, 0.18); }
    to { background-color: transparent; }
  }

  #dice-buttons button {
    transition: transform 0.25s var(--mx-ease-spring), background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.25s;
  }
  #dice-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(233, 199, 123, 0.35);
  }
  #dice-buttons button:active {
    transform: translateY(0) scale(0.94);
    transition-duration: 0.06s;
  }
  #dice-buttons button.mx-rolled {
    animation: mx-die-wiggle 0.5s var(--mx-ease-out);
  }
  @keyframes mx-die-wiggle {
    20% { rotate: -9deg; scale: 1.08; }
    45% { rotate: 7deg; }
    70% { rotate: -3deg; }
    100% { rotate: 0deg; scale: 1; }
  }

  .to-row {
    transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s, translate 0.35s var(--mx-ease-out);
  }
  .to-row.active {
    translate: 3px 0;
    box-shadow: inset 0 0 0 1px rgba(143, 127, 212, 0.35), 0 0 22px rgba(143, 127, 212, 0.22);
    animation: mx-turn-glow 2.4s ease-in-out infinite alternate;
  }
  @keyframes mx-turn-glow {
    from { box-shadow: inset 0 0 0 1px rgba(143, 127, 212, 0.3), 0 0 14px rgba(143, 127, 212, 0.14); }
    to { box-shadow: inset 0 0 0 1px rgba(143, 127, 212, 0.55), 0 0 26px rgba(143, 127, 212, 0.3); }
  }

  /* ---------- Wuerfel-Buehne ---------- */
  .mx-roll {
    animation: mx-roll-in 0.55s var(--mx-ease-spring) both;
  }
  .mx-roll.mx-out {
    animation: mx-roll-out 0.45s var(--mx-ease-out) both;
  }
  @keyframes mx-roll-in {
    from { opacity: 0; translate: 0 40px; scale: 0.85; filter: blur(6px); }
    to { opacity: 1; translate: 0 0; scale: 1; filter: none; }
  }
  @keyframes mx-roll-out {
    to { opacity: 0; translate: 0 -16px; scale: 0.96; filter: blur(4px); }
  }

  .mx-roll.is-rolling .mx-die {
    animation: mx-tumble 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  @keyframes mx-tumble {
    0% { rotate: -540deg; scale: 0.4; translate: -40px -30px; }
    55% { rotate: 20deg; scale: 1.12; translate: 0 0; }
    75% { rotate: -8deg; scale: 0.96; }
    100% { rotate: 0deg; scale: 1; }
  }
  .mx-roll.is-landed .mx-die-num {
    animation: mx-num-pop 0.5s var(--mx-ease-spring);
  }
  .mx-roll.is-landed .mx-roll-total {
    animation: mx-num-pop 0.5s var(--mx-ease-spring) 0.05s;
  }
  @keyframes mx-num-pop {
    0% { scale: 1.6; }
    100% { scale: 1; }
  }

  .mx-roll.is-crit.is-landed {
    animation: mx-crit-glow 1.6s ease-out both;
  }
  @keyframes mx-crit-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 213, 106, 0.8), 0 18px 50px rgba(0, 0, 0, 0.55); }
    100% { box-shadow: 0 0 0 26px rgba(255, 213, 106, 0), 0 18px 50px rgba(0, 0, 0, 0.55); }
  }
  .mx-roll.is-crit.is-landed .mx-die svg {
    animation: mx-crit-spin 1.2s var(--mx-ease-out);
  }
  @keyframes mx-crit-spin {
    0% { filter: drop-shadow(0 0 0 var(--mx-crit)); }
    30% { filter: drop-shadow(0 0 16px var(--mx-crit)); }
    100% { filter: drop-shadow(0 0 4px var(--mx-crit)); }
  }
  .mx-roll.is-crit.is-landed .mx-burst i {
    animation: mx-spark 0.9s var(--mx-ease-out) both;
    animation-delay: calc(var(--d, 0) * 1ms);
  }
  @keyframes mx-spark {
    0% { opacity: 1; translate: 0 0; scale: 1; }
    100% { opacity: 0; translate: var(--x) var(--y); scale: 0.2; }
  }
  .mx-roll.is-fumble.is-landed {
    animation: mx-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }
  .mx-roll.is-fumble.is-landed .mx-die {
    animation: mx-fumble-drop 0.7s var(--mx-ease-out) both;
  }
  @keyframes mx-fumble-drop {
    0% { rotate: 0deg; }
    40% { rotate: 18deg; translate: 0 4px; }
    100% { rotate: 12deg; translate: 0 3px; filter: saturate(0.6); }
  }
  .mx-roll-tag {
    animation: mx-tag-in 0.5s var(--mx-ease-spring) 0.1s both;
  }
  @keyframes mx-tag-in {
    from { opacity: 0; scale: 0.4; rotate: -12deg; }
    to { opacity: 1; scale: 1; rotate: 0deg; }
  }

  .mx-turn-banner {
    animation: mx-banner-in 0.6s var(--mx-ease-out) both;
  }
  .mx-turn-banner .mx-turn-avatar {
    animation: mx-tag-in 0.6s var(--mx-ease-spring) 0.15s both;
  }
  .mx-turn-banner .mx-turn-name {
    animation: mx-banner-name 0.7s var(--mx-ease-out) 0.12s both;
  }
  .mx-turn-banner.mx-out {
    animation: mx-banner-out 0.5s var(--mx-ease-out) both;
  }
  @keyframes mx-banner-in {
    from { opacity: 0; clip-path: inset(0 50% 0 50%); }
    to { opacity: 1; clip-path: inset(0 0 0 0); }
  }
  @keyframes mx-banner-name {
    from { opacity: 0; translate: -24px 0; letter-spacing: 0.2em; }
    to { opacity: 1; translate: 0 0; letter-spacing: normal; }
  }
  @keyframes mx-banner-out {
    to { opacity: 0; translate: -50% -12px; filter: blur(4px); }
  }

  .mx-screen-shake {
    animation: mx-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
}

@media (max-width: 640px) {
  .mx-dice-stage { bottom: 14px; }
  .mx-roll { min-width: 0; width: calc(100vw - 32px); }
}