/* Shared board polish and special-space landing effects. */
:root {
  --ddr-board-rail: rgba(255, 178, 74, 0.42);
  --ddr-board-shadow: rgba(0, 0, 0, 0.62);
  --ddr-tile-edge: rgba(221, 62, 34, 0.85);
  --ddr-tile-core: rgba(73, 8, 8, 0.96);
  --ddr-effect-portal: #55ddff;
  --ddr-effect-boost: #ffd166;
  --ddr-effect-pit: #71f0a3;
  --ddr-effect-curse: #c590ff;
  --ddr-effect-bonus: #ff91d6;
  --ddr-effect-finish: #fff1a6;
}

body .board {
  position: relative;
  isolation: isolate;
  padding: clamp(8px, 1.4vw, 16px);
  border: 1px solid var(--ddr-board-rail);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 174, 62, 0.14), transparent 28%, rgba(96, 11, 11, 0.28) 70%, rgba(0, 0, 0, 0.5)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 11px),
    rgba(20, 0, 0, 0.7);
  box-shadow:
    0 24px 48px var(--ddr-board-shadow),
    inset 0 0 0 1px rgba(255, 219, 149, 0.08),
    inset 0 0 35px rgba(255, 68, 0, 0.12);
}

body .board::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 230, 154, 0.14), transparent 25%),
    radial-gradient(circle at 85% 88%, rgba(85, 221, 255, 0.1), transparent 28%);
  pointer-events: none;
}

body .tile {
  --tile-accent: var(--ddr-tile-edge);
  --tile-glow: rgba(255, 70, 20, 0.22);
  isolation: isolate;
  overflow: hidden;
  border-color: var(--tile-accent);
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 238, 190, 0.12), transparent 22%),
    linear-gradient(145deg, rgba(96, 9, 9, 0.98), var(--ddr-tile-core) 55%, rgba(19, 0, 0, 0.98));
  transform: translateZ(0);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

body .tile::before,
body .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body .tile::before {
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px);
  mix-blend-mode: screen;
  opacity: 0.62;
}

body .tile::after {
  z-index: 1;
  border-radius: 8px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.42);
}

body .tile:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 0 16px var(--tile-glow),
    inset 0 0 14px rgba(0, 0, 0, 0.42);
}

body .tile-number,
body .tile-effect {
  z-index: 3;
}

body .tile-number {
  min-width: 1.75em;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.42);
  color: #ffe4a8;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}

body .tile-effect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85em;
  height: 1.85em;
  border: 1px solid rgba(255, 230, 180, 0.45);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 12px var(--tile-glow);
  text-shadow: 0 1px 0 #000, 0 0 10px var(--tile-accent);
}

body .token {
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 10px rgba(255, 180, 80, 0.35));
}

body .tile[data-effect] {
  box-shadow:
    0 0 14px var(--tile-glow),
    inset 0 0 18px rgba(0, 0, 0, 0.42);
}

body .tile[data-effect]::after {
  background: radial-gradient(circle at 50% 18%, var(--tile-glow), transparent 60%);
}

body .tile[data-effect="portal"] {
  --tile-accent: var(--ddr-effect-portal);
  --tile-glow: rgba(85, 221, 255, 0.36);
  background:
    conic-gradient(from 120deg, rgba(85, 221, 255, 0.18), rgba(111, 72, 255, 0.22), rgba(85, 221, 255, 0.18)),
    linear-gradient(145deg, rgba(6, 42, 58, 0.98), rgba(38, 9, 73, 0.96));
}

body .tile[data-effect="boost"] {
  --tile-accent: var(--ddr-effect-boost);
  --tile-glow: rgba(255, 209, 102, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 230, 128, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(87, 42, 0, 0.98), rgba(110, 14, 0, 0.95));
}

body .tile[data-effect="pit"] {
  --tile-accent: var(--ddr-effect-pit);
  --tile-glow: rgba(113, 240, 163, 0.34);
  background:
    radial-gradient(circle at 50% 62%, rgba(1, 8, 5, 0.98), rgba(4, 52, 32, 0.92) 48%, rgba(45, 0, 0, 0.95)),
    linear-gradient(145deg, rgba(28, 45, 22, 0.96), rgba(20, 0, 0, 0.96));
}

body .tile[data-effect="curse"] {
  --tile-accent: var(--ddr-effect-curse);
  --tile-glow: rgba(197, 144, 255, 0.36);
  background:
    linear-gradient(135deg, rgba(197, 144, 255, 0.18), transparent 45%),
    linear-gradient(145deg, rgba(44, 11, 71, 0.96), rgba(28, 0, 32, 0.96));
}

body .tile[data-effect="bonus"] {
  --tile-accent: var(--ddr-effect-bonus);
  --tile-glow: rgba(255, 145, 214, 0.36);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 236, 171, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(86, 12, 60, 0.96), rgba(80, 20, 13, 0.96));
}

body .tile[data-effect="finish"] {
  --tile-accent: var(--ddr-effect-finish);
  --tile-glow: rgba(255, 241, 166, 0.42);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0 18%, rgba(20, 0, 0, 0.22) 18% 36%, rgba(255, 255, 255, 0.2) 36% 54%, rgba(20, 0, 0, 0.22) 54% 72%, rgba(255, 255, 255, 0.2) 72%),
    linear-gradient(145deg, rgba(83, 50, 0, 0.98), rgba(70, 8, 8, 0.96));
}

body .tile[data-effect="portal"] .tile-effect {
  animation: ddrIconSpin 4.8s linear infinite;
}

body .tile[data-effect="boost"] .tile-effect,
body .tile[data-effect="bonus"] .tile-effect {
  animation: ddrIconFloat 1.6s ease-in-out infinite;
}

body .tile[data-effect="curse"] .tile-effect {
  animation: ddrIconPulse 1.7s ease-in-out infinite;
}

body .tile.tile-fx-active {
  z-index: 12;
}

body .tile.tile-fx-active.tile-fx-portal {
  animation: ddrPortalBurst 0.95s ease-out;
}

body .tile.tile-fx-active.tile-fx-boost {
  animation: ddrBoostBurst 0.78s cubic-bezier(0.2, 1.25, 0.35, 1);
}

body .tile.tile-fx-active.tile-fx-pit {
  animation: ddrPitBurst 0.82s ease-out;
}

body .tile.tile-fx-active.tile-fx-curse {
  animation: ddrCurseBurst 0.92s ease-out;
}

body .tile.tile-fx-active.tile-fx-bonus,
body .tile.tile-fx-active.tile-fx-finish {
  animation: ddrBonusBurst 0.92s ease-out;
}

body .tile.tile-fx-arrive {
  animation: ddrArrivePulse 0.62s ease-out;
}

.special-space-toast {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  max-width: min(86%, 420px);
  padding: 9px 13px;
  border: 1px solid var(--toast-accent, #ffd166);
  border-radius: 8px;
  background: rgba(7, 0, 0, 0.84);
  color: #fff3cf;
  font: 700 clamp(0.8rem, 2.8vw, 1rem) / 1.2 "Courier New", monospace;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  box-shadow: 0 0 20px color-mix(in srgb, var(--toast-accent, #ffd166) 48%, transparent);
  animation: ddrToastRise 1.55s ease-out forwards;
}

.fx-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 24;
  width: var(--fx-size, 7px);
  height: var(--fx-size, 7px);
  border-radius: 50%;
  background: var(--fx-color, #ffd166);
  pointer-events: none;
  box-shadow: 0 0 10px var(--fx-color, #ffd166);
  transform: translate(-50%, -50%) scale(1);
  animation: ddrParticleFly 760ms ease-out forwards;
}

@keyframes ddrIconSpin {
  to { transform: rotate(360deg); }
}

@keyframes ddrIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes ddrIconPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.3); }
}

@keyframes ddrPortalBurst {
  0% { transform: scale(1) rotate(0); filter: brightness(1); }
  45% { transform: scale(1.13) rotate(2deg); filter: brightness(1.55) saturate(1.3); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

@keyframes ddrBoostBurst {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  35% { transform: translateY(-9px) scale(1.12); filter: brightness(1.65); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes ddrPitBurst {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  38% { transform: translateY(7px) scale(0.92); filter: brightness(0.72) saturate(1.4); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes ddrCurseBurst {
  0% { transform: scale(1); filter: hue-rotate(0) brightness(1); }
  38% { transform: scale(1.1); filter: hue-rotate(42deg) brightness(1.45); }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); filter: hue-rotate(0) brightness(1); }
}

@keyframes ddrBonusBurst {
  0% { transform: scale(1); filter: brightness(1); }
  42% { transform: scale(1.16); filter: brightness(1.75); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes ddrArrivePulse {
  0% { filter: brightness(1); box-shadow: 0 0 0 rgba(255, 241, 166, 0); }
  45% { filter: brightness(1.45); box-shadow: 0 0 22px rgba(255, 241, 166, 0.55); }
  100% { filter: brightness(1); }
}

@keyframes ddrToastRise {
  0% { opacity: 0; transform: translate(-50%, -28%) scale(0.92); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -92%) scale(0.96); }
}

@keyframes ddrParticleFly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--fx-dx, 0px)), calc(-50% + var(--fx-dy, 0px))) scale(0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  body .tile,
  body .tile-effect,
  body .tile.tile-fx-active,
  body .tile.tile-fx-arrive,
  .special-space-toast,
  .fx-particle {
    animation: none !important;
    transition: none !important;
  }

  .fx-particle {
    display: none;
  }
}


html.ddr-lite-fx .special-space-toast {
  animation-duration: 0.75s !important;
  box-shadow: none !important;
}
html.ddr-lite-fx .tile-fx-active,
html.ddr-lite-fx .tile-fx-arrive {
  animation-duration: 0.35s !important;
  filter: none !important;
}
html.ddr-lite-fx .board-tile,
html.ddr-lite-fx .special-tile {
  transition: border-color 0.12s ease, transform 0.12s ease !important;
  box-shadow: none !important;
}