/* =========================================================================
   World draughts map (hero)
   Scoped under .rdf-world-map
   ========================================================================= */

.rdf-world-map {
  width: 100%;
}

.rdf-world-map__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 30 / 18;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
}

.rdf-world-map__board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rdf-world-map__tile {
  position: absolute;
  width: calc(100% / 30);
  height: calc(100% / 18);
}

.rdf-world-map__tile--light {
  background-color: #eee9dc;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.05);
}

.rdf-world-map__tile--dark {
  background-color: #cfc1ad;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.07);
}

.rdf-world-map__piece {
  position: absolute;
  width: calc(100% / 30 * 0.74);
  height: calc(100% / 18 * 0.74);
  border-radius: 50%;
  z-index: 20;
  transition: left 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s ease,
              opacity 0.45s ease,
              box-shadow 0.3s ease;
  will-change: left, top, transform, opacity;
}

.rdf-world-map__piece--white {
  background: radial-gradient(circle at 35% 30%, #fcfaf5 0%, #f3ede2 40%, #ded5c0 80%, #c2b49c 100%);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid #bbaea0;
}

.rdf-world-map__piece--white::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(165, 148, 122, 0.75);
  background: transparent;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.rdf-world-map__piece--white::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px solid rgba(165, 148, 122, 0.75);
  background: transparent;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.rdf-world-map__piece--black {
  background: radial-gradient(circle at 35% 30%, #3a3a3a 0%, #202020 45%, #111111 80%, #050505 100%);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.9);
  border: 1px solid #2a2a2a;
}

.rdf-world-map__piece--black::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.rdf-world-map__piece--black::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.rdf-world-map__piece--jumping {
  transform: scale(1.18) translateZ(15px);
  z-index: 40 !important;
}

.rdf-world-map__piece--captured {
  transform: scale(0.2) rotate(45deg);
  opacity: 0 !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rdf-world-map__piece {
    transition: none;
  }
}