/* max-game-block – Spieltisch-Design für die Drachenarena (Tiefenschiefer & Erz; Tokens in max-base.css).
   Lädt nach max-games.css. Momente: arena.js setzt .arena-just-won/.arena-just-lost – nur für die Runde,
   die gerade hier zu Ende lief. Kartentische (Casino War, Red Dog, Three Card Poker): max-game-cards.css. */

/* ================================================================ 0. Gemeinsam */
/* Pixel-Funken: ein Element, viele Schatten – skaliert aus der Mitte */
body.tc-redesign.tc-max #gameOverlay .arena-burst {
  --b1: var(--mx-gold); --b2: var(--mx-gold-hi); --b3: #ffffff;
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  z-index: 6;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: none;
  pointer-events: none;
  opacity: 0;
  box-shadow: 96px 0 0 0 var(--b1), 114px 49px 0 1px var(--b2), 57px 40px 0 0 var(--b3), 38px 75px 0 2px var(--b1), 22px 107px 0 0 var(--b2), -22px 60px 0 1px var(--b3), -48px 71px 0 0 var(--b1), -107px 59px 0 2px var(--b2), -70px 22px 0 0 var(--b3), -95px -10px 0 1px var(--b1), -120px -37px 0 0 var(--b2), -50px -46px 0 2px var(--b3), -48px -71px 0 0 var(--b1), -7px -109px 0 1px var(--b2), 13px -62px 0 0 var(--b3), 58px -65px 0 2px var(--b1), 98px -70px 0 0 var(--b2), 72px -14px 0 1px var(--b3);
}

/* ================================================================ 1. Drachenarena */
body.tc-redesign.tc-max #gameOverlay .arena-stage {
  position: relative;
  box-shadow: var(--frame-shadow), inset 0 0 0 1px rgba(181, 140, 255, .22) !important;
}
body.tc-redesign.tc-max #gameOverlay .arena-heading h3 { font-size: 28px !important; }
body.tc-redesign.tc-max #gameOverlay .arena-round { font-size: 34px; }
body.tc-redesign.tc-max #gameOverlay .arena-scene { box-shadow: inset 0 1px 0 rgba(181, 140, 255, .25), inset 0 -1px 0 rgba(181, 140, 255, .18); }
/* Szene: Endportal-Schein am Rand */
body.tc-redesign.tc-max #gameOverlay .arena-scene::after {
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(24, 8, 48, .55) 100%),
    linear-gradient(rgba(9, 13, 26, .45), transparent 32%, rgba(9, 13, 26, .1) 58%, rgba(9, 13, 26, .94));
}
body.tc-redesign.tc-max #gameOverlay .arena-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
/* Klinge: diagonaler Hieb über den Drachen */
body.tc-redesign.tc-max #gameOverlay .arena-scene.arena-hit::before {
  background: linear-gradient(118deg, transparent 44%, rgba(91, 231, 240, .55) 48.8%, #ffffff 50%, rgba(91, 231, 240, .55) 51.2%, transparent 56%);
}
/* Abgewehrt/verloren: roter Rand */
body.tc-redesign.tc-max #gameOverlay .arena-ended .arena-scene::before {
  background: radial-gradient(110% 85% at 50% 50%, transparent 45%, rgba(255, 77, 94, .5) 100%);
  opacity: .7;
}
body.tc-redesign.tc-max #gameOverlay .arena-ended .arena-scene > img { filter: saturate(.55) brightness(.72); }
body.tc-redesign.tc-max #gameOverlay .arena-victory .arena-scene > img { filter: saturate(1.15) brightness(1.06); }
body.tc-redesign.tc-max #gameOverlay .arena-strike { z-index: 3; }
body.tc-redesign.tc-max #gameOverlay .arena-scene.arena-hit .arena-strike { color: #dffcff; text-shadow: 0 0 18px var(--mx-diamond), 0 0 40px rgba(91, 231, 240, .7); }
body.tc-redesign.tc-max #gameOverlay .arena-scene.arena-blocked .arena-strike { color: #ffc3ca; text-shadow: 0 0 18px var(--mx-redstone), 0 0 40px rgba(255, 77, 94, .7); }
/* Lebensleiste: 6 Segmente, getroffene zerspringen */
body.tc-redesign.tc-max #gameOverlay .arena-life { gap: 5px; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
body.tc-redesign.tc-max #gameOverlay .arena-life i { position: relative; }
/* Zug-Hinweis kompakt */
body.tc-redesign.tc-max #gameOverlay .arena-scene-caption { gap: 3px; }
body.tc-redesign.tc-max #gameOverlay .arena-scene-caption span { font-size: 12px; }
body.tc-redesign.tc-max #gameOverlay .arena-scene-caption strong { font-size: 16px; line-height: 1.3; }
/* Waffen als Erz-Karten: Schild = Smaragd, Schwert = Diamant, Kristall = Redstone */
body.tc-redesign.tc-max #gameOverlay .arena-weapons button { --wc: var(--mx-emerald); position: relative; overflow: hidden; }
body.tc-redesign.tc-max #gameOverlay .arena-weapons [data-arena-weapon="sword"] { --wc: var(--mx-diamond); }
body.tc-redesign.tc-max #gameOverlay .arena-weapons [data-arena-weapon="crystal"] { --wc: #ff6f8e; }
body.tc-redesign.tc-max #gameOverlay .arena-weapons button::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--wc);
  box-shadow: 0 0 10px var(--wc);
}
body.tc-redesign.tc-max #gameOverlay .arena-weapon-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--wc) 30%, #1d2745), color-mix(in srgb, var(--wc) 8%, #0d1426));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px color-mix(in srgb, var(--wc) 40%, transparent);
  color: var(--wc);
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 0 12px var(--wc);
  transition: transform var(--mx-mid) var(--mx-ease-spring);
}
body.tc-redesign.tc-max #gameOverlay .arena-weapons button:not(:disabled):is(:hover, :focus-visible) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wc) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 0 #0a0f1c, 0 14px 24px -10px color-mix(in srgb, var(--wc) 45%, transparent);
}
body.tc-redesign.tc-max #gameOverlay .arena-weapons button:not(:disabled):is(:hover, :focus-visible) .arena-weapon-icon { transform: rotate(-8deg) scale(1.08); }
body.tc-redesign.tc-max #gameOverlay .arena-weapons button:disabled .arena-weapon-icon { filter: saturate(.5); }
/* Beute-Leiste */
body.tc-redesign.tc-max #gameOverlay .arena-loot { position: relative; overflow: hidden; }
body.tc-redesign.tc-max #gameOverlay .arena-loot > strong { font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max #gameOverlay .arena-loot .arena-burst { left: auto; right: 90px; }
body.tc-redesign.tc-max #gameOverlay .arena-ended .arena-loot > strong { color: var(--mx-text-2); }
@media (max-width: 600px) {
  body.tc-redesign.tc-max #gameOverlay .arena-heading h3 { font-size: 22px !important; }
  body.tc-redesign.tc-max #gameOverlay .arena-round { font-size: 28px; }
  /* Platz für die Ergebnis-Plakette über dem Dock */
  body.tc-redesign.tc-max #gameOverlay .arena-scene { height: 188px; }
  body.tc-redesign.tc-max #gameOverlay #gameBoard .arena-stage { margin-bottom: 44px; }
  body.tc-redesign.tc-max #gameOverlay .arena-scene-caption strong { font-size: 14px; }
  body.tc-redesign.tc-max #gameOverlay .arena-weapon-icon { width: 34px; height: 34px; font-size: 18px; border-radius: 8px; }
  body.tc-redesign.tc-max #gameOverlay .arena-weapons button::before { top: auto; bottom: 0; left: 18%; right: 18%; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  body.tc-redesign.tc-max #gameOverlay .arena-loot .arena-burst { right: 60px; }
  body.tc-redesign.tc-max #gameOverlay .arena-weapon-copy { min-width: 0; }
  body.tc-redesign.tc-max #gameOverlay .arena-weapon-copy small { font-size: 11px; }
  body.tc-redesign.tc-max #gameOverlay .arena-weapon-copy b { font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
  body.tc-redesign.tc-max #gameOverlay .arena-weapons button > strong { font-size: 20px; }
}

/* ================================================================ 2. Bewegung */
@media all {
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-stage.arena-just-won .arena-burst {
    animation-name: mxbBurst; animation-duration: 1.1s; animation-timing-function: cubic-bezier(.12, .8, .3, 1); animation-delay: .1s; animation-iteration-count: 1; animation-fill-mode: both;
  }

  /* --- Drachenarena: Hieb, Aufblitzen, Segment zerspringt; Abwehr rot; Sieg funkelt */
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-scene.arena-hit::before {
    animation-name: mxbSlash; animation-duration: .38s; animation-timing-function: var(--mx-ease); animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: both;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-scene.arena-hit > img {
    animation-name: mxbImpact; animation-duration: .5s; animation-timing-function: ease-out; animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: none;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-scene.arena-blocked > img {
    animation-name: mxbBlocked; animation-duration: .5s; animation-timing-function: ease-out; animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: none;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-scene.arena-blocked::before {
    animation-name: mxbRedPulse; animation-duration: .6s; animation-timing-function: ease-out; animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: backwards;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-scene:is(.arena-hit, .arena-blocked) .arena-strike {
    animation-name: mxbStrike; animation-duration: .5s; animation-timing-function: var(--mx-ease); animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: none;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-scene.arena-hit .arena-life i.broken:not(:has(+ i.broken)) {
    animation-name: mxbShatter; animation-duration: .5s; animation-timing-function: ease-out; animation-delay: .08s; animation-iteration-count: 1; animation-fill-mode: backwards;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-weapons button:not(:disabled):active .arena-weapon-icon { transform: scale(.92); transition-duration: 80ms; }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-stage.arena-just-won .arena-loot > strong {
    animation-name: mxbPop; animation-duration: .5s; animation-timing-function: var(--mx-ease-spring); animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: both;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-stage.arena-just-won .arena-loot::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
    pointer-events: none;
    animation-name: mxbShine; animation-duration: .9s; animation-timing-function: var(--mx-ease); animation-delay: .2s; animation-iteration-count: 1; animation-fill-mode: both;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #gameOverlay .arena-stage.arena-just-lost .arena-loot {
    animation-name: mxbNudge; animation-duration: .34s; animation-timing-function: ease-out; animation-delay: .2s; animation-iteration-count: 1; animation-fill-mode: none;
  }
}

@keyframes mxbShine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(360%) skewX(-18deg); } }
@keyframes mxbNudge { 0%, 100% { transform: none; } 30% { transform: translateX(-5px); } 65% { transform: translateX(4px); } }
@keyframes mxbBurst { 0% { opacity: 0; transform: scale(.15) rotate(-8deg); } 14% { opacity: 1; } 62% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05) translateY(16px) rotate(6deg); } }
@keyframes mxbSlash { 0% { opacity: 0; transform: translateX(-45%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(45%); } }
@keyframes mxbImpact { 0% { transform: scale(1.06) translateX(-6px); filter: brightness(1.8) saturate(1.3); } 35% { transform: scale(1.03) translateX(5px); } 100% { transform: none; filter: none; } }
@keyframes mxbBlocked { 0% { filter: brightness(.55) saturate(.3); } 30% { transform: translateX(-5px); } 60% { transform: translateX(4px); } 100% { transform: none; } }
@keyframes mxbRedPulse { 0% { opacity: 1; } 100% { opacity: .7; } }
@keyframes mxbStrike { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); } 30% { opacity: 1; transform: scale(1.1) rotate(0deg); } 100% { opacity: 0; transform: scale(1.5) rotate(12deg); } }
@keyframes mxbShatter { 0% { background: #ffffff; transform: scale(1.3, 1.9); box-shadow: 0 0 16px #ffffff; } 100% { transform: none; } }
@keyframes mxbPop { 0% { opacity: .3; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }