/* World-Class Pass 2 / Phase 19 — Signature Art Direction.
   Establishes a recognizable three-lane / merge-energy / Core motif without
   changing gameplay geometry, simulation, interaction targets, or balance. */

:root {
  --md-conduit: color-mix(in srgb, var(--unit-pulse) 52%, transparent);
  --md-conduit-bright: color-mix(in srgb, var(--unit-pulse-bright) 78%, transparent);
  --md-reactor-gold: var(--state-reward);
  --md-siege-red: var(--threat-boss);
}

/* Brand signature: three defense channels converge into one diamond Core. */
.brand-block h1 {
  position: relative;
  width: max-content;
  padding-right: 30px;
}

.brand-block h1::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-48%);
  clip-path: polygon(
    46% 0, 54% 0, 54% 35%, 88% 16%, 92% 23%, 60% 42%,
    100% 46%, 100% 54%, 60% 58%, 92% 77%, 88% 84%, 54% 65%,
    54% 100%, 46% 100%, 46% 65%, 12% 84%, 8% 77%, 40% 58%,
    0 54%, 0 46%, 40% 42%, 8% 23%, 12% 16%, 46% 35%
  );
  background: linear-gradient(135deg, var(--unit-pulse-bright), var(--unit-pulse) 42%, var(--unit-cryo) 70%, var(--unit-nova));
  box-shadow: 0 0 14px color-mix(in srgb, var(--unit-pulse) 34%, transparent);
  opacity: 0.82;
}

/* The battlefield lanes become three powered conduits instead of generic columns. */
.combat-stage__grid span {
  overflow: hidden;
}

.combat-stage__grid span::after {
  content: "";
  left: 50%;
  top: 22%;
  width: 14px;
  height: 58%;
  transform: translateX(-50%);
  opacity: 0.38;
  border: 0;
  background:
    radial-gradient(circle at 50% 6%, var(--md-conduit-bright) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, var(--md-conduit-bright) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 94%, var(--md-conduit-bright) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 0 42%, var(--md-conduit) 43% 57%, transparent 58% 100%);
  clip-path: polygon(42% 0, 58% 0, 58% 45%, 100% 50%, 58% 55%, 58% 100%, 42% 100%, 42% 55%, 0 50%, 42% 45%);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--unit-pulse) 28%, transparent));
  pointer-events: none;
}

.combat-stage__grid span:nth-child(2)::after {
  opacity: 0.5;
}

/* Board columns inherit the same neutral conduit rhythm so board ↔ lane linkage
   reads as one machine without implying defender-type ownership of a lane. */
.board-preview {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--md-conduit-bright) 4%, transparent) 0 32.8%,
      color-mix(in srgb, var(--md-conduit-bright) 13%, transparent) 33% 33.333%,
      color-mix(in srgb, var(--md-conduit-bright) 4%, transparent) 33.5% 66.1%,
      color-mix(in srgb, var(--md-conduit-bright) 13%, transparent) 66.333% 66.666%,
      color-mix(in srgb, var(--md-conduit-bright) 4%, transparent) 66.8% 100%),
    rgba(4, 13, 20, 0.78);
}

.board-preview__slot {
  isolation: isolate;
}

.board-preview__slot::before {
  z-index: 0;
}

.board-preview__slot:nth-child(-n + 3) {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--md-conduit-bright) 10%, transparent);
}

.board-preview__slot:not(.board-preview__slot--drop-invalid) {
  background:
    radial-gradient(circle at 50% 43%, color-mix(in srgb, var(--md-conduit-bright) 7%, transparent), transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--md-conduit-bright) 2.5%, transparent), transparent 54%),
    rgba(10, 26, 36, 0.82);
}

/* Core signature: three prongs protecting a central reactor diamond. */
.core-visual__emblem {
  z-index: 8;
  width: 19px;
  height: 19px;
  transform: translate(-50%, -50%);
  clip-path: polygon(
    45% 0, 55% 0, 55% 36%, 88% 17%, 94% 27%, 61% 46%,
    96% 46%, 96% 56%, 61% 56%, 84% 88%, 73% 94%, 50% 63%,
    27% 94%, 16% 88%, 39% 56%, 4% 56%, 4% 46%, 39% 46%,
    6% 27%, 12% 17%, 45% 36%
  );
  background: var(--core-accent-bright);
  box-shadow: 0 0 10px var(--core-accent);
  opacity: 0.9;
}

.core-visual[data-core-state="damaged"] .core-visual__emblem,
.core-visual[data-core-state="critical"] .core-visual__emblem {
  background: var(--core-accent-bright);
}

.core-visual[data-core-state="destroyed"] .core-visual__emblem {
  opacity: 0.28;
}

/* Merge language: convergence diamonds + three-channel energy rather than generic circles. */
.merge-attractor {
  width: 17px;
  height: 17px;
  margin: -8.5px;
  border-radius: 3px;
  transform-origin: center;
  rotate: 45deg;
  background:
    linear-gradient(135deg, #fff 0 12%, var(--burst-color) 14% 64%, color-mix(in srgb, var(--burst-color) 42%, #061018) 66% 100%);
}

.merge-attractor::before,
.merge-attractor::after {
  border-radius: 3px;
  rotate: 0deg;
}

.merge-attractor::before {
  width: 29px;
  height: 29px;
}

.merge-attractor::after {
  width: 43px;
  height: 43px;
  border-style: dashed;
}

.merge-burst::before,
.merge-burst::after {
  border-radius: 0;
  clip-path: polygon(50% 0, 86% 14%, 100% 50%, 86% 86%, 50% 100%, 14% 86%, 0 50%, 14% 14%);
}

.merge-burst::after {
  transform: translate(-50%, -50%) rotate(22.5deg);
}

.merge-burst i {
  width: 4px;
  height: 15px;
  border-radius: 1px;
  clip-path: polygon(50% 0, 100% 78%, 50% 100%, 0 78%);
}

.board-preview__slot--merge-charge {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--state-reward) 20%, transparent), transparent 34%),
    conic-gradient(from 45deg,
      transparent 0 10%, color-mix(in srgb, var(--state-reward) 14%, transparent) 10% 13%,
      transparent 13% 35%, color-mix(in srgb, var(--state-reward) 14%, transparent) 35% 38%,
      transparent 38% 60%, color-mix(in srgb, var(--state-reward) 14%, transparent) 60% 63%,
      transparent 63% 85%, color-mix(in srgb, var(--state-reward) 14%, transparent) 85% 88%, transparent 88%),
    rgba(20, 23, 22, 0.9);
}

/* Siege Core silhouette: square siege frame, lateral armor, central hostile reactor. */
.combat-enemy--boss .enemy-visual--boss {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--md-siege-red) 46%, transparent) 0 5%, transparent 7%),
    radial-gradient(circle at 82% 50%, color-mix(in srgb, var(--md-siege-red) 46%, transparent) 0 5%, transparent 7%),
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--md-reactor-gold) 46%, transparent) 0 4%, transparent 6%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--md-siege-red) 18%, transparent), transparent 62%);
  box-shadow: none;
}

.combat-enemy--boss .enemy-visual--boss::before {
  width: 47px;
  height: 47px;
  clip-path: polygon(
    23% 0, 77% 0, 77% 12%, 100% 27%, 88% 50%, 100% 73%, 77% 88%, 77% 100%,
    23% 100%, 23% 88%, 0 73%, 12% 50%, 0 27%, 23% 12%
  );
  background:
    linear-gradient(90deg, transparent 0 43%, var(--md-reactor-gold) 44% 56%, transparent 57%),
    linear-gradient(0deg, transparent 0 43%, color-mix(in srgb, var(--md-reactor-gold) 74%, transparent) 44% 56%, transparent 57%),
    radial-gradient(circle, #fff6d3 0 7%, var(--md-reactor-gold) 8% 15%, var(--md-siege-red) 17% 34%, #6a1029 36% 57%, #21070f 59% 100%);
  border: 2px solid #ffd7a0;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--md-siege-red) 65%, transparent),
    inset 0 0 12px rgba(0, 0, 0, 0.66);
}

.combat-enemy--boss .enemy-visual--boss::after {
  width: 60px;
  height: 60px;
  border: 2px solid color-mix(in srgb, var(--md-reactor-gold) 72%, transparent);
  border-radius: 6px;
  clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
  box-shadow: 0 0 11px color-mix(in srgb, var(--md-siege-red) 38%, transparent);
  animation: md-siege-frame 4.8s linear infinite;
}

/* Replace the older phase animation that could drop the centering translate. */
.combat-stage[data-boss-phase="2"] .combat-enemy--boss .enemy-visual--boss {
  animation: md-siege-core-phase 0.72s ease-in-out infinite alternate;
}

.combat-stage[data-boss-phase="2"] .combat-enemy--boss .enemy-visual--boss::after {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--md-siege-red) 76%, #ffd36a);
  animation-duration: 2.5s;
}

@keyframes md-siege-frame {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(90deg); }
}

@keyframes md-siege-core-phase {
  from { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  to { transform: translate(-50%, -50%) scale(1.055); filter: brightness(1.32) saturate(1.08); }
}

/* Custom perk SVG icons share one mechanical glyph treatment across platforms. */
.perk-choice__icon svg {
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px currentColor);
}

.perk-choice__icon svg [data-fill="true"] {
  fill: currentColor;
  stroke: none;
  opacity: 0.86;
}

/* Keep the signature structural on small phones rather than scaling it into noise. */
@media (max-width: 720px) {
  .brand-block h1 {
    padding-right: 24px;
  }

  .brand-block h1::after {
    width: 17px;
    height: 17px;
  }

  .combat-stage__grid span::after {
    width: 10px;
    opacity: 0.28;
  }

  .core-visual__emblem {
    width: 15px;
    height: 15px;
  }

  .combat-enemy--boss .enemy-visual--boss::before {
    width: 43px;
    height: 43px;
  }

  .combat-enemy--boss .enemy-visual--boss::after {
    width: 54px;
    height: 54px;
  }

  .perk-choice__icon svg {
    width: 21px;
    height: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .combat-stage[data-boss-phase="2"] .combat-enemy--boss .enemy-visual--boss,
  .combat-enemy--boss .enemy-visual--boss::after {
    animation: none;
  }

  .merge-attractor {
    rotate: 0deg;
  }
}