/* ==========================================================================
   DVONN replay widget — board, pieces, animations
   (Shared chrome: css/replay/common.css)
   ========================================================================== */

.retro-match-replay--dvonn .retro-match-replay__board-host {
  position: relative;
  overflow: visible;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding-block: 0.85rem 0.75rem;
  padding-inline: 1rem 0.4rem;
  aspect-ratio: 5 / 2;
  --dvonn-piece-size-flying: 2.5rem;
  --dvonn-stack-max-height-mult: 1.08;
  --dvonn-stack-overlap-mult: -0.9;
  --dvonn-board-digit-font-family: var(--retro-sans);
  --dvonn-board-digit-font-weight: 800;
  --dvonn-ring-hole: 30%;
  --dvonn-axis-label-font-family: var(--retro-sans);
  --dvonn-axis-label-font-size: clamp(0.5rem, 2vw, 1.2rem);
  --dvonn-axis-label-font-weight: 800;
  --dvonn-board-bg: #b62f2f;
  background: linear-gradient(180deg, #9e1f1f 0%, #c23434 52%, #b62f2f 100%);
}

.retro-match-replay--dvonn .retro-match-replay__board-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --dvonn-piece-size: 2.5rem;
  overflow: visible;
}

.retro-match-replay--dvonn .retro-match-replay__grid,
.retro-match-replay--dvonn .retro-match-replay__cells,
.retro-match-replay--dvonn .retro-match-replay__axis-labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.retro-match-replay--dvonn .retro-match-replay__axis-labels {
  pointer-events: none;
}

.retro-match-replay--dvonn .retro-match-replay__axis-label {
  position: absolute;
  font-family: var(--dvonn-axis-label-font-family);
  font-size: var(--dvonn-axis-label-font-size);
  font-weight: var(--dvonn-axis-label-font-weight);
  line-height: 1;
  color: var(--retro-ink);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.85);
}

.retro-match-replay--dvonn .retro-match-replay__row-label {
  transform: translate(-100%, -50%);
  margin-left: -0.15rem;
}

.retro-match-replay--dvonn .retro-match-replay__col-label {
  transform: translate(1rem, 0.8rem);
}

.retro-match-replay--dvonn .retro-match-replay__grid {
  pointer-events: none;
}

.retro-match-replay--dvonn .retro-match-replay__surface {
  stroke: none;
}

.retro-match-replay--dvonn .retro-match-replay__grid line {
  stroke: rgba(18, 16, 14, 0.58);
  stroke-width: 0.35;
  fill: none;
}

.retro-match-replay--dvonn .retro-match-replay__cells {
  pointer-events: none;
}

/* Controlled-piece score: white top-left, black bottom-right (YINSH-style corner discs). */
.retro-match-replay--dvonn .retro-match-replay__score {
  position: absolute;
  z-index: 6;
  width: 0;
  height: 0;
  pointer-events: none;
}

.retro-match-replay--dvonn .retro-match-replay__score--tl {
  top: calc(0.45rem + var(--dvonn-piece-size-flying, 2.5rem) / 2);
  left: calc(0.45rem + var(--dvonn-piece-size-flying, 2.5rem) / 2);
}

.retro-match-replay--dvonn .retro-match-replay__score--br {
  bottom: calc(0.45rem + var(--dvonn-piece-size-flying, 2.5rem) / 2);
  right: calc(0.45rem + var(--dvonn-piece-size-flying, 2.5rem) / 2);
}

.retro-match-replay--dvonn .retro-match-replay__score-disc {
  --dvonn-piece-size: var(--dvonn-piece-size-flying, 2.5rem);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dvonn-piece-size);
  height: var(--dvonn-piece-size);
  transform: translate(-50%, -50%);
}

.retro-match-replay--dvonn .retro-match-replay__score-disc .retro-match-replay__piece {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}

.retro-match-replay--dvonn .retro-match-replay__score-count {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-family: var(--dvonn-board-digit-font-family);
  font-size: calc(var(--dvonn-piece-size) * 0.3);
  font-weight: var(--dvonn-board-digit-font-weight);
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 0.12em #000,
    0.04em 0.04em 0 #000,
    -0.04em -0.04em 0 #000,
    0.04em -0.04em 0 #000,
    -0.04em 0.04em 0 #000;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.retro-match-replay--dvonn .retro-match-replay__cell {
  position: absolute;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}

.retro-match-replay--dvonn .retro-match-replay__cell--from,
.retro-match-replay--dvonn .retro-match-replay__cell--to {
  filter: drop-shadow(0 0 0.35rem rgba(255, 240, 200, 0.9));
}

.retro-match-replay--dvonn .retro-match-replay__stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  /* Pin the bottom disc center to the cell anchor; stack grows upward only. */
  transform: translate(-50%, calc(-100% + var(--dvonn-piece-size) * 0.5));
  max-height: calc(var(--dvonn-piece-size) * var(--dvonn-stack-max-height-mult));
}

.retro-match-replay--dvonn .retro-match-replay__piece {
  --dvonn-ring-border: max(1px, calc(var(--dvonn-piece-size, 2.5rem) * 0.045));
  position: relative;
  width: var(--dvonn-piece-size);
  height: var(--dvonn-piece-size);
  margin-top: calc(var(--dvonn-piece-size) * var(--dvonn-stack-overlap-mult));
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  background: transparent;
  border-style: solid;
  border-width: var(--dvonn-ring-border);
  -webkit-mask: radial-gradient(
    circle at 50% 50%,
    transparent 0 var(--dvonn-ring-hole),
    #000 var(--dvonn-ring-hole) 100%
  );
  mask: radial-gradient(
    circle at 50% 50%,
    transparent 0 var(--dvonn-ring-hole),
    #000 var(--dvonn-ring-hole) 100%
  );
}

.retro-match-replay--dvonn .retro-match-replay__piece::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--dvonn-ring-hole) * 2);
  height: calc(var(--dvonn-ring-hole) * 2);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
  border-style: solid;
  border-width: var(--dvonn-ring-border);
}

.retro-match-replay--dvonn .retro-match-replay__piece--w {
  border-color: #c5c1b9;
  background: #f4f2ee;
}

.retro-match-replay--dvonn .retro-match-replay__piece--w::after {
  border-color: #c5c1b9;
}

.retro-match-replay--dvonn .retro-match-replay__piece--b {
  border-color: #080808;
  background: #2c2c2c;
}

.retro-match-replay--dvonn .retro-match-replay__piece--b::after {
  border-color: #080808;
}

.retro-match-replay--dvonn .retro-match-replay__piece--r {
  border-color: #8f251f;
  background:rgb(228, 79, 71);
}

.retro-match-replay--dvonn .retro-match-replay__piece--r::after {
  border-color: #8f251f;
}

.retro-match-replay--dvonn .retro-match-replay__piece .retro-match-replay__height {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: calc(var(--dvonn-piece-size) * 0.065);
  min-width: 1.35em;
  min-height: 1.35em;
  font-family: var(--dvonn-board-digit-font-family);
  font-size: max(0.45rem, calc(var(--dvonn-piece-size) * 0.25));
  font-weight: var(--dvonn-board-digit-font-weight);
  line-height: 1;
  text-align: right;
  color: var(--retro-ink);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.85);
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

.retro-match-replay--dvonn .retro-match-replay__piece--b .retro-match-replay__height,
.retro-match-replay--dvonn .retro-match-replay__piece--r .retro-match-replay__height {
  color: #fff;
  text-shadow: none;
}

.retro-match-replay--dvonn .retro-match-replay__stack--flying {
  --fly-ms: 420ms;
  --fly-arc: 22px;
  --fly-lift: 0px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  position: absolute;
  pointer-events: none;
  max-height: none;
  transition:
    left var(--fly-ms) ease-in-out,
    top var(--fly-ms) ease-in-out;
}

.retro-match-replay--dvonn .retro-match-replay__stack--flying[data-anchor="bottom"] {
  transform: translate(
    -50%,
    calc(-100% + 0.5 * var(--dvonn-piece-size-flying, var(--dvonn-piece-size)) + var(--fly-lift))
  );
}

.retro-match-replay--dvonn .retro-match-replay__stack--flying[data-anchor="center"] {
  transform: translate(-50%, calc(-50% + var(--fly-lift)));
}

.retro-match-replay--dvonn .retro-match-replay__stack--flying.is-flying {
  animation: retro-dvonn-fly var(--fly-ms) ease-in-out;
}

@keyframes retro-dvonn-fly {
  0%,
  100% {
    --fly-lift: 0px;
  }
  50% {
    --fly-lift: calc(-1 * var(--fly-arc));
  }
}

.retro-match-replay--dvonn .retro-match-replay__stack--flying .retro-match-replay__piece {
  width: var(--dvonn-piece-size-flying, var(--dvonn-piece-size));
  height: var(--dvonn-piece-size-flying, var(--dvonn-piece-size));
  margin-top: calc(var(--dvonn-piece-size-flying, var(--dvonn-piece-size)) * var(--dvonn-stack-overlap-mult));
}

.retro-match-replay--dvonn .retro-match-replay__stack--flying .retro-match-replay__piece:last-child {
  margin-top: 0;
}

.retro-match-replay--dvonn .retro-match-replay__stack--flying .retro-match-replay__piece .retro-match-replay__height {
  padding-right: calc(var(--dvonn-piece-size-flying, var(--dvonn-piece-size)) * 0.065);
  transform: none;
  translate: none;
  rotate: none;
}

.retro-match-replay--dvonn .retro-match-replay__cell--vanish .retro-match-replay__stack {
  animation: retro-dvonn-vanish 0.45s ease forwards;
}

@keyframes retro-dvonn-vanish {
  from {
    opacity: 1;
    filter: none;
  }
  to {
    opacity: 0;
    filter: blur(3px);
  }
}

.retro-match-replay--dvonn .retro-match-replay__cell--appear .retro-match-replay__stack {
  opacity: 0;
  filter: blur(3px);
}

.retro-match-replay--dvonn .retro-match-replay__cell--appear-run .retro-match-replay__stack {
  animation: retro-dvonn-appear 0.45s ease forwards;
}

@keyframes retro-dvonn-appear {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

@media (max-width: 720px) {
  .retro-match-replay--dvonn .retro-match-replay__board-host {
    aspect-ratio: 2 / 4.7;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    padding-inline: 0;
    --dvonn-axis-label-font-size: clamp(0.5rem, 2vw, 1.2rem);
    /* scale = aspect height / 2 — keeps rotated board flush with host height */
    --dvonn-mobile-board-scale: 2.4;
  }

  .retro-match-replay--dvonn .retro-match-replay__board-stage {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    transform: rotate(90deg) scale(var(--dvonn-mobile-board-scale));
    transform-origin: center center;
    overflow: visible;
  }

  .retro-match-replay--dvonn .retro-match-replay__row-label {
    transform: none;
    translate: -100% -50%;
    rotate: 270deg;
  }

  .retro-match-replay--dvonn .retro-match-replay__col-label {
    transform: none;
    translate: calc(-50% + 0.65rem) 0.25rem;
    rotate: 270deg;
  }

  .retro-match-replay--dvonn
    .retro-match-replay__stack:not(.retro-match-replay__stack--flying)
    .retro-match-replay__piece
    .retro-match-replay__height {
    transform: none;
    translate: 0 0;
    rotate: 270deg;
  }

  /* Board is rotated 90deg: local horizontal offsets → upward overlap on screen. */
  .retro-match-replay--dvonn .retro-match-replay__stack:not(.retro-match-replay__stack--flying) {
    display: block;
    transform: none;
    translate: calc(-100% + var(--dvonn-piece-size) * 0.5) -50%;
    max-height: none;
    height: var(--dvonn-piece-size);
    width: calc(
      var(--dvonn-piece-size) *
        (1 + (var(--dvonn-stack-piece-count, 1) - 1) * (1 + var(--dvonn-stack-overlap-mult)))
    );
  }

  .retro-match-replay--dvonn
    .retro-match-replay__stack:not(.retro-match-replay__stack--flying)
    .retro-match-replay__piece {
    position: absolute;
    top: 0;
    right: calc(
      var(--dvonn-piece-index, 0) * var(--dvonn-piece-size) * (1 + var(--dvonn-stack-overlap-mult))
    );
    margin: 0;
  }

  /* Flying stack is in screen space (mounted on board-host): grow upward like desktop. */
  .retro-match-replay--dvonn .retro-match-replay__stack--flying {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    transform: none;
    translate: -50%
      calc(
        -100% + var(--dvonn-piece-size-flying, var(--dvonn-piece-size)) * 0.5 + var(--fly-lift, 0px)
      );
    z-index: 50;
    max-height: calc(
      var(--dvonn-piece-size-flying, var(--dvonn-piece-size)) *
        (1 + (var(--dvonn-stack-piece-count, 1) - 1) * (1 + var(--dvonn-stack-overlap-mult)))
    );
    max-width: none;
    width: auto;
    height: auto;
  }

  .retro-match-replay--dvonn .retro-match-replay__stack--flying .retro-match-replay__piece {
    position: relative;
    margin-top: calc(
      var(--dvonn-piece-size-flying, var(--dvonn-piece-size)) * var(--dvonn-stack-overlap-mult)
    );
    margin-left: 0;
  }

  .retro-match-replay--dvonn .retro-match-replay__stack--flying .retro-match-replay__piece:last-child {
    margin-top: 0;
  }

  .retro-match-replay--dvonn .retro-match-replay__stack--flying .retro-match-replay__piece .retro-match-replay__height {
    padding-right: calc(var(--dvonn-piece-size-flying, var(--dvonn-piece-size)) * 0.065);
    transform: none;
    translate: none;
    rotate: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .retro-match-replay--dvonn .retro-match-replay__cell--vanish .retro-match-replay__stack {
    animation: none;
    opacity: 0;
    filter: none;
  }

  .retro-match-replay--dvonn .retro-match-replay__cell--appear .retro-match-replay__stack {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .retro-match-replay--dvonn .retro-match-replay__stack--flying {
    transition: none;
    animation: none;
  }

  .retro-match-replay--dvonn .retro-match-replay__stack--flying.is-flying {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Print — preserve piece fills and ring holes; host frame gradient omitted.
   -------------------------------------------------------------------------- */
@media print {
  .retro-match-replay--dvonn .retro-match-replay__board-host {
    break-inside: avoid;
    page-break-inside: avoid;
    max-width: min(100%, 640px);
    margin-inline: auto;
    background: transparent !important;
    background-image: none !important;
  }

  .retro-match-replay--dvonn .retro-match-replay__piece,
  .retro-match-replay--dvonn .retro-match-replay__piece::before,
  .retro-match-replay--dvonn .retro-match-replay__piece::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .retro-match-replay--dvonn .retro-match-replay__piece {
    box-shadow: none;
    filter: none;
  }

  .retro-match-replay--dvonn .retro-match-replay__piece--w {
    background: #f4f2ee !important;
    border-color: #6a665e !important;
  }

  .retro-match-replay--dvonn .retro-match-replay__piece--w::after {
    border-color: #6a665e !important;
  }

  .retro-match-replay--dvonn .retro-match-replay__piece--b {
    background: #2c2c2c !important;
    border-color: #080808 !important;
  }

  .retro-match-replay--dvonn .retro-match-replay__piece--b::after {
    border-color: #080808 !important;
  }

  .retro-match-replay--dvonn .retro-match-replay__piece--r {
    background: #c83830 !important;
    border-color: #6b1814 !important;
  }

  .retro-match-replay--dvonn .retro-match-replay__piece--r::after {
    border-color: #6b1814 !important;
  }

  .retro-match-replay--dvonn .retro-match-replay__piece .retro-match-replay__height {
    text-shadow: none;
  }
}