/* ===========================================================================
   main-14 — SPIELGEFUEHL-LAYER
   Ziel: das Brett auf einen Blick verstehen, ohne zu lesen, und jeder Zug
   fuehlt sich nach etwas an. Laedt als letztes Stylesheet; alles ist ueber
   #board/#boardWrap verankert, damit es die aelteren Regeln sicher schlaegt.
   JS-Gegenstuecke: board-juice.js (Schlag-Wucht, Rand-Leuchten) und board-turn-cues.js
   (Zug-Leuchten, Schach-Banner).
   =========================================================================== */

/* ── 1. Ruhigeres Brett ───────────────────────────────────────────────────
   Das Fadenkreuz mit Ring in der Brettmitte sah aus wie eine Markierung auf
   d4/e5 und lenkte von echten Hinweisen ab. */
#board::after { display: none; }

/* ── 2. Schlagziele sofort sehen ──────────────────────────────────────────
   Bisher lag ein kleiner roter Punkt HINTER der gegnerischen Figur und war
   praktisch unsichtbar. Jetzt: rotes Fadenkreuz aus vier Ecken + roter
   Schein ueber der Figur. */
#board .sq.capture::after,
#board .sq.dragCaptureTarget::after,
#board .sq.actionCaptureTarget::after {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: 3;
  pointer-events: none;
  border: 0;
  border-radius: 6px;
  --mp-ret: rgba(255, 96, 96, .95);
  background:
    linear-gradient(var(--mp-ret), var(--mp-ret)) left top / 26% 3px no-repeat,
    linear-gradient(var(--mp-ret), var(--mp-ret)) left top / 3px 26% no-repeat,
    linear-gradient(var(--mp-ret), var(--mp-ret)) right top / 26% 3px no-repeat,
    linear-gradient(var(--mp-ret), var(--mp-ret)) right top / 3px 26% no-repeat,
    linear-gradient(var(--mp-ret), var(--mp-ret)) left bottom / 26% 3px no-repeat,
    linear-gradient(var(--mp-ret), var(--mp-ret)) left bottom / 3px 26% no-repeat,
    linear-gradient(var(--mp-ret), var(--mp-ret)) right bottom / 26% 3px no-repeat,
    linear-gradient(var(--mp-ret), var(--mp-ret)) right bottom / 3px 26% no-repeat,
    radial-gradient(circle, transparent 42%, rgba(226, 70, 70, .30) 100%);
  box-shadow: inset 0 0 18px rgba(226, 70, 70, .35);
  filter: drop-shadow(0 0 4px rgba(255, 90, 90, .7));
  animation: mpReticle 1.1s ease-in-out infinite;
}

@keyframes mpReticle {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(.93); opacity: 1; }
}

/* ── 3. Zugziele: etwas groesser, ploppen beim Auswaehlen auf ─────────── */
#board .sq.move::after,
#board .sq.dragMoveTarget::after {
  background:
    radial-gradient(circle, rgba(236, 200, 110, .95) 0 11%, rgba(216, 177, 90, .35) 12% 17%, transparent 18%);
  animation:
    mpDotIn .22s cubic-bezier(.3, 1.6, .5, 1) both,
    boardTargetPulse 1.6s ease-in-out .22s infinite;
}

@keyframes mpDotIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── 4. Ausgewaehlte Figur hebt sich an ───────────────────────────────── */
#board .sq .chip {
  transition: translate .16s ease-out, scale .16s ease-out;
}
#board .sq.selected .chip:not(.dragging) {
  translate: 0 -7%;
  scale: 1.08;
}
/* Das Brett haengt die Chips bei jedem Render neu ein, die Transition laeuft dort
   nie. Anheben, Leuchten und Absetzen haengen darum an der Auswahl-Uhr (--mp-t aus
   render/anim-clock.js, gesetzt in square.js): Hover-Neuaufbauten starten nichts
   neu. Ohne #board, damit die Unterdrueckung beim Hover ueber die Effektleiste
   (main-02) weiter gewinnt; der statische Stand oben bleibt der Endzustand. */
.sq.selected .chip:not(.dragging) {
  animation:
    mpChipLift .2s cubic-bezier(.25, .9, .35, 1.15) both,
    pieceFocusPulse 1.8s ease-in-out infinite;
  animation-delay: var(--mp-t, 0ms);
}
/* Abgewaehlt, die Figur bleibt stehen: weich absetzen (wie das Aufsetzen nach dem Ziehen). */
.sq.chipSettle .chip:not(.dragging) {
  animation: mpChipSettle .16s cubic-bezier(.3, 0, .45, 1) both;
  animation-delay: var(--mp-t, 0ms);
}
@keyframes mpChipLift {
  from { translate: 0 0; scale: 1; }
  to   { translate: 0 -7%; scale: 1.08; }
}
@keyframes mpChipSettle {
  from { translate: 0 -7%; scale: 1.08; }
  to   { translate: 0 0; scale: 1; }
}

/* ── 5. Letzter Zug: zwei leuchtende Eckwinkel pro Feld ─────────────────
   Keine eingefaerbten Kacheln: Start- und Zielfeld bekommen je zwei Eckwinkel
   (gegenueberliegend, wie in main-02) in der Farbsprache des Bretts: Gold =
   Zug, Rot = Schlag, Blau = Faehigkeit. Das Zielfeld traegt kraeftige,
   leuchtende Winkel, das Startfeld kleinere, leisere. Bei einem neuen Zug
   rasten die Winkel kurz ein (nur waehrend .lastActionPulse, das last-move.js
   einmal pro Zug setzt), danach stehen sie still. */
#board .sq .lastMoveMark {
  --mk: rgba(226, 190, 110, .95);
  --mk-len: 28%;
  --mk-w: 2px;
  inset: 6%;
  opacity: 1;
  filter: drop-shadow(0 0 3px var(--mk));
}
#board .sq .lastMoveMark::before,
#board .sq .lastMoveMark::after { display: none; }
#board .sq .lastMoveMark-capture { --mk: rgba(240, 108, 108, .95); }
#board .sq .lastMoveMark-effect  { --mk: rgba(77, 208, 196, .95); }   /* Effekt-Blau des Bretts */
/* Zielfeld: oben rechts + unten links. */
#board .sq .lastMoveMark-to {
  background:
    linear-gradient(var(--mk), var(--mk)) right top / var(--mk-len) var(--mk-w) no-repeat,
    linear-gradient(var(--mk), var(--mk)) right top / var(--mk-w) var(--mk-len) no-repeat,
    linear-gradient(var(--mk), var(--mk)) left bottom / var(--mk-len) var(--mk-w) no-repeat,
    linear-gradient(var(--mk), var(--mk)) left bottom / var(--mk-w) var(--mk-len) no-repeat;
}
/* Startfeld: oben links + unten rechts, kleiner und leiser. */
#board .sq .lastMoveMark-from {
  --mk-len: 20%;
  inset: 14%;
  opacity: .55;
  filter: none;
  background:
    linear-gradient(var(--mk), var(--mk)) left top / var(--mk-len) var(--mk-w) no-repeat,
    linear-gradient(var(--mk), var(--mk)) left top / var(--mk-w) var(--mk-len) no-repeat,
    linear-gradient(var(--mk), var(--mk)) right bottom / var(--mk-len) var(--mk-w) no-repeat,
    linear-gradient(var(--mk), var(--mk)) right bottom / var(--mk-w) var(--mk-len) no-repeat;
}
/* Einrasten: Winkel kommen leicht vergroessert von aussen und setzen sich. */
#board .sq.lastActionPulse .lastMoveMark-to {
  animation: mpMarkSnap .42s cubic-bezier(.2, 1.5, .4, 1) both;
}
#board .sq.lastActionPulse .lastMoveMark-from {
  animation: mpMarkFade .5s ease-out both;
}
/* Der alte Puls-Rahmen (atmende Kachel-Umrandung) wuerde mit den Winkeln
   doppeln — aus. */
#board .sq.lastActionPulse::before { animation: none !important; }
/* Ebenso die flaechigen Innen-Glows auf Start-/Zielfeld (main-02). Auswahl,
   Schach und Gefahr behalten ihren Rahmen. */
#board .sq.lastMoveFrom:not(.selected):not(.kingInCheck):not(.dangerTarget),
#board .sq.lastMoveTo:not(.selected):not(.kingInCheck):not(.dangerTarget) {
  box-shadow: none;
}

@keyframes mpMarkSnap {
  0%   { opacity: 0; transform: scale(1.3); }
  60%  { opacity: 1; transform: scale(.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes mpMarkFade {
  0%   { opacity: 0; transform: scale(.8); }
  100% { opacity: .55; transform: scale(1); }
}

/* ── 6. Rahmen in der Farbe des letzten Zugs ─────────────────────────────
   Der Brettrahmen traegt ruhig die Farbe der letzten Aktion (Gold = Zug,
   Rot = Schlag, Blau = Faehigkeit) und blendet beim naechsten Zug weich in die
   neue Farbe ueber. Das Rand-Leuchten (Abschnitt 7) klingt in genau diese
   Farbe aus, es springt also nie auf eine andere Farbe zurueck. Wer am Zug
   ist, zeigen die Spielerkarten; waehrend der Gegner zieht, ist das Brett
   leicht gedaempft.
   Jede Aktion blendet auf ihre eigene Art um (es gilt die Transition des
   NEUEN Zustands):
   - Zug: Gold gleitet weich herein, zeitgleich mit der ankommenden Figur.
   - Schlag: Rot schnappt im Moment des Einschlags um (mit dem Ruck), der
     Schein setzt sich danach.
   - Faehigkeit: Blau zieht zuerst in die Kante und bluet dann langsam auf. */
#boardWrap {
  transition: box-shadow .7s ease, border-color .7s ease, filter .45s ease;
}
#boardWrap.mp-last-move {
  --mp-edge: 226, 190, 110;
  transition: border-color .8s ease-in-out .12s, box-shadow 1s ease-in-out .12s, filter .45s ease;
}
#boardWrap.mp-last-capture {
  --mp-edge: 236, 98, 98;
  transition: border-color .14s ease-out .24s, box-shadow .55s cubic-bezier(.2, .8, .3, 1) .24s, filter .45s ease;
}
#boardWrap.mp-last-effect {
  --mp-edge: 77, 208, 196;   /* Effekt-Blau des Bretts */
  transition: border-color .5s ease .08s, box-shadow 1.3s cubic-bezier(.16, .84, .3, 1) .2s, filter .45s ease;
}
#boardWrap.mp-last-move,
#boardWrap.mp-last-capture,
#boardWrap.mp-last-effect {
  border-color: rgba(var(--mp-edge), .8);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .72),
    0 0 30px rgba(var(--mp-edge), .32),
    inset 0 0 0 2px rgba(var(--mp-edge), .3),
    inset 0 0 24px rgba(0, 0, 0, .86);
}
#boardWrap.mp-turn-enemy {
  filter: saturate(.88) brightness(.94);
}

/* ── 7. Schlag-Wucht und Rand-Leuchten ─────────────────────────────── */
/* Die Effekt-Ebenen (#boardFxLayer, #boardRingLayer) ruckeln mit dem Brett,
   sonst rutschte das Feld unter Schlag-Ring und Funken weg (board-juice.js). */
#boardWrap.mp-impact,
#boardFxLayer.mp-impact,
#boardRingLayer.mp-impact       { animation: mpImpact .3s cubic-bezier(.2, .8, .3, 1); }
#boardWrap.mp-impact-heavy,
#boardFxLayer.mp-impact-heavy,
#boardRingLayer.mp-impact-heavy { animation: mpImpact .42s cubic-bezier(.2, .8, .3, 1); }

@keyframes mpImpact {
  0%   { translate: 0 0; }
  18%  { translate: var(--mp-impact-x, 0) var(--mp-impact-y, 3px); }
  45%  { translate: calc(var(--mp-impact-x, 0) * -.45) calc(var(--mp-impact-y, 3px) * -.45); }
  72%  { translate: calc(var(--mp-impact-x, 0) * .18) calc(var(--mp-impact-y, 3px) * .18); }
  100% { translate: 0 0; }
}

/* Rand-Leuchten nach jeder Aktion, aussen am Rahmen: Gold = Zug, Rot = Schlag
   (zusammen mit dem Ruck), Blau = Faehigkeit. Schwillt weich an und klingt in
   die ruhige Rahmenfarbe derselben Aktion aus (Abschnitt 6). Eigene Variable
   --mp-flash, damit es nie mit der Rahmenfarbe kollidiert. */
#boardWrap.mp-flash-move    { --mp-flash: 226, 190, 110; }
#boardWrap.mp-flash-capture { --mp-flash: 240, 72, 78; }
#boardWrap.mp-flash-effect  { --mp-flash: 77, 208, 196; }   /* Effekt-Blau des Bretts */
#boardWrap.mp-edgeFlash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  box-shadow:
    0 0 0 2px rgba(var(--mp-flash), calc(var(--mp-glow-alpha, .45) * 1.8)),
    0 0 42px 4px rgba(var(--mp-flash), var(--mp-glow-alpha, .45)),
    inset 0 0 24px rgba(var(--mp-flash), calc(var(--mp-glow-alpha, .45) * .5));
  animation: mpEdgeFlash .9s ease-in-out forwards;
}

/* Beim Schlag zusaetzlich eine rote Vignette im Brett (nutzt das frei gewordene
   #board::after): Rand kraeftig, Mitte klar, damit die Figuren lesbar bleiben. */
#boardWrap.mp-edgeFlash.mp-flash-capture #board::after {
  display: block;
  z-index: 4;
  opacity: 0;
  border-radius: 4px;
  mix-blend-mode: normal;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 48%,
    rgba(var(--mp-flash), calc(var(--mp-glow-alpha, .45) * .45)) 78%,
    rgba(var(--mp-flash), calc(var(--mp-glow-alpha, .45) * .9)) 100%);
  animation: mpEdgeFlash .75s ease-in-out forwards;
}

@keyframes mpEdgeFlash {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Name der gefallenen Figur (Champion, Elite): steigt kurz auf und verblasst. */
.mp-captureName {
  position: fixed;
  translate: -50% -50%;
  pointer-events: none;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mp-serif, 'Cinzel', serif);
  font-size: clamp(11px, 1.3vw, 15px);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff3d6;
  background: rgba(12, 10, 14, .82);
  border: 1px solid rgba(216, 177, 90, .75);
  box-shadow: 0 0 14px rgba(216, 177, 90, .45);
  animation: mpCaptureName 1.35s cubic-bezier(.2, .8, .3, 1) forwards;
}
.mp-captureName.is-enemy {
  color: #ffd9d9;
  border-color: rgba(226, 106, 106, .8);
  box-shadow: 0 0 14px rgba(226, 106, 106, .45);
}

@keyframes mpCaptureName {
  0%   { opacity: 0; transform: translateY(8px) scale(.8); }
  15%  { opacity: 1; transform: translateY(0) scale(1.06); }
  25%  { transform: translateY(-2px) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

/* ── 8. Schach-Banner ─────────────────────────────────────────────────── */
.mp-checkBanner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  translate: -50% -50%;
  pointer-events: none;
  padding: .18em .9em;
  border-radius: 10px;
  font-family: var(--mp-serif, 'Cinzel', serif);
  font-size: clamp(28px, calc(var(--board-size, 560px) / 9), 64px);
  font-weight: 800;
  letter-spacing: .06em;
  color: #ffe9e4;
  background: linear-gradient(90deg, transparent, rgba(60, 8, 14, .78) 18% 82%, transparent);
  text-shadow: 0 0 18px rgba(255, 70, 70, .85), 0 2px 4px rgba(0, 0, 0, .8);
  animation: mpCheckBanner 1.45s cubic-bezier(.2, .8, .3, 1) forwards;
}
.mp-checkBanner.is-enemy {
  color: #fff4d6;
  background: linear-gradient(90deg, transparent, rgba(40, 28, 6, .78) 18% 82%, transparent);
  text-shadow: 0 0 18px rgba(255, 200, 90, .85), 0 2px 4px rgba(0, 0, 0, .8);
}

@keyframes mpCheckBanner {
  0%   { opacity: 0; transform: scale(1.6); }
  14%  { opacity: 1; transform: scale(.94); }
  24%  { transform: scale(1); }
  78%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* ── Weniger Bewegung gewuenscht: Hinweise bleiben, Bewegung faellt weg ── */
@media (prefers-reduced-motion: reduce) {
  #board .sq.capture::after,
  #board .sq.dragCaptureTarget::after,
  #board .sq.actionCaptureTarget::after,
  #board .sq.move::after,
  #board .sq.dragMoveTarget::after { animation: none !important; }
  #board .sq .chip { transition: none; }
  .sq.selected .chip:not(.dragging) { animation-name: none, pieceFocusPulse; }
  .sq.chipSettle .chip:not(.dragging) { animation: none; }
  #board .sq.lastActionPulse .lastMoveMark-to,
  #board .sq.lastActionPulse .lastMoveMark-from { animation: none !important; }
  #boardWrap.mp-impact,
  #boardWrap.mp-impact-heavy,
  #boardFxLayer.mp-impact,
  #boardFxLayer.mp-impact-heavy,
  #boardRingLayer.mp-impact,
  #boardRingLayer.mp-impact-heavy { animation: none !important; }
  #boardWrap.mp-edgeFlash::after,
  #boardWrap.mp-edgeFlash #board::after { animation: none !important; opacity: 0; }
  .mp-captureName { display: none !important; }
  .mp-checkBanner { animation: none !important; opacity: 1; }
}