/* ==========================================================================
   Ludo Pro - Ultra-Modern 3D Board & Glossy Gem Pawn Disk System
   ========================================================================== */

:root {
  /* Ultra-Modern Neon Jewel Color Palette */
  --token-red: #ff2e63;
  --token-red-light: #ff7597;
  --token-red-dark: #b0003a;
  --token-red-glow: rgba(255, 46, 99, 0.65);

  --token-green: #00e676;
  --token-green-light: #69f0ae;
  --token-green-dark: #008e36;
  --token-green-glow: rgba(0, 230, 118, 0.65);

  --token-yellow: #ffb703;
  --token-yellow-light: #ffe082;
  --token-yellow-dark: #e67e00;
  --token-yellow-glow: rgba(255, 183, 3, 0.65);

  --token-blue: #00d2ff;
  --token-blue-light: #80e5ff;
  --token-blue-dark: #0066cc;
  --token-blue-glow: rgba(0, 210, 255, 0.65);
}

.board-wrapper {
  width: var(--board-max-size);
  height: var(--board-max-size);
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 24px;
  padding: 10px;
  background: linear-gradient(145deg, #182238, #0a0e17);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.75),
    inset 0 1px 3px rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  background: #0b1120;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   4 Corner Yards (Modern Glassmorphic Hubs)
   ========================================================================== */

.yard {
  padding: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.yard-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), #e2e8f0);
  border-radius: 20%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 12%;
  gap: 16%;
  box-shadow: 
    inset 0 3px 8px rgba(0, 0, 0, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.35);
  position: relative;
}

.yard-inner::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 18%;
  border: 1.5px dashed rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.yard-slot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    inset 0 3px 6px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Yard Themes */
.red-yard {
  background: linear-gradient(135deg, #ff2e63, #8a0026);
}
.red-yard .yard-slot {
  background: radial-gradient(circle, #ffe4eb 40%, #ff85a1 100%);
  border: 2px solid #ff2e63;
}

.green-yard {
  background: linear-gradient(135deg, #00e676, #005a22);
}
.green-yard .yard-slot {
  background: radial-gradient(circle, #e0fbf0 40%, #76f1b3 100%);
  border: 2px solid #00e676;
}

.yellow-yard {
  background: linear-gradient(135deg, #ffb703, #9e5b00);
}
.yellow-yard .yard-slot {
  background: radial-gradient(circle, #fff7d6 40%, #ffd066 100%);
  border: 2px solid #ffb703;
}

.blue-yard {
  background: linear-gradient(135deg, #00d2ff, #004085);
}
.blue-yard .yard-slot {
  background: radial-gradient(circle, #e0f8ff 40%, #78deff 100%);
  border: 2px solid #00b4d8;
}

/* ==========================================================================
   Outer Track & Home Columns
   ========================================================================== */

.tile {
  border: 0.5px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(19, 29, 49, 0.8);
  transition: all 0.2s;
}

.tile:hover {
  background: rgba(30, 45, 75, 0.9);
}

.start-tile {
  font-weight: 800;
  font-size: 0.55rem;
  letter-spacing: 0.5px;
}

.tile-indicator {
  font-size: 0.45rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.track-red {
  background: linear-gradient(135deg, #ff2e63, #c70039) !important;
  color: white;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.track-green {
  background: linear-gradient(135deg, #00e676, #00a843) !important;
  color: white;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.track-yellow {
  background: linear-gradient(135deg, #ffb703, #d47a00) !important;
  color: white;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.track-blue {
  background: linear-gradient(135deg, #00d2ff, #0072ff) !important;
  color: white;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Safe Star Tiles */
.safe-tile {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 0 8px rgba(255, 214, 0, 0.15);
}

.star-icon {
  width: 70%;
  height: 70%;
  filter: drop-shadow(0 0 6px rgba(255, 214, 0, 0.85));
  animation: starPulse 2.5s infinite ease-in-out;
}

@keyframes starPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 214, 0, 0.7)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(255, 230, 0, 1)); }
}

/* Home Stretch Tiles */
.home-tile {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.65rem;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.arrow-indicator {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

.red-home {
  background: linear-gradient(90deg, rgba(255, 46, 99, 0.35), #ff2e63);
}

.green-home {
  background: linear-gradient(180deg, rgba(0, 230, 118, 0.35), #00e676);
  transform: rotate(90deg);
}

.yellow-home {
  background: linear-gradient(270deg, rgba(255, 183, 3, 0.35), #ffb703);
  transform: rotate(180deg);
}

.blue-home {
  background: linear-gradient(0deg, rgba(0, 210, 255, 0.35), #00d2ff);
  transform: rotate(270deg);
}

/* Center Finish Triangles */
.center-triangle {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0b1120;
}

.center-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   Ultra-Modern 3D Glossy Gem Pawn (Disk) Design
   ========================================================================== */

.tokens-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.ludo-token {
  position: absolute;
  width: calc(100% / 15 * 0.84);
  height: calc(100% / 15 * 0.84);
  transform: translate(-50%, -50%);
  cursor: default;
  pointer-events: auto;
  transition: left 0.10s cubic-bezier(0.2, 0.9, 0.4, 1.1), top 0.10s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 3D Glossy Disk Structure */
.token-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer Metallic Bezel Ring */
.token-base {
  position: absolute;
  width: 95%;
  height: 95%;
  border-radius: 50%;
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.6),
    inset 0 2px 3px rgba(255, 255, 255, 0.75),
    inset 0 -3px 5px rgba(0, 0, 0, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  z-index: 1;
  transition: transform 0.2s;
}

/* Inner 3D Glass Dome / Gem */
.token-head {
  position: absolute;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 
    inset 0 3px 5px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Specular Lens Reflection Dot */
.token-head::before {
  content: '';
  position: absolute;
  top: 14%;
  left: 22%;
  width: 32%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transform: rotate(-25deg);
}

/* Center Token Core Emblem */
.token-head::after {
  content: '✦';
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* --- Color Variations --- */

/* RED Gem Token */
.token-red .token-base {
  background: radial-gradient(circle at 45% 45%, #ff4d79, var(--token-red), #70001f);
}
.token-red .token-head {
  background: radial-gradient(circle at 35% 35%, #ff9ebb, var(--token-red), var(--token-red-dark));
}

/* GREEN Gem Token */
.token-green .token-base {
  background: radial-gradient(circle at 45% 45%, #46f79c, var(--token-green), #004d1c);
}
.token-green .token-head {
  background: radial-gradient(circle at 35% 35%, #a6fcd0, var(--token-green), var(--token-green-dark));
}

/* YELLOW Gem Token */
.token-yellow .token-base {
  background: radial-gradient(circle at 45% 45%, #ffd454, var(--token-yellow), #804500);
}
.token-yellow .token-head {
  background: radial-gradient(circle at 35% 35%, #fff0a8, var(--token-yellow), var(--token-yellow-dark));
}

/* BLUE Gem Token */
.token-blue .token-base {
  background: radial-gradient(circle at 45% 45%, #5ce1ff, var(--token-blue), #003b80);
}
.token-blue .token-head {
  background: radial-gradient(circle at 35% 35%, #b8f2ff, var(--token-blue), var(--token-blue-dark));
}

/* ==========================================================================
   Active / Movable Token States (Hop & Glowing Ring)
   ========================================================================== */

.ludo-token.movable {
  cursor: pointer;
  z-index: 35;
  animation: tokenHoverHop 0.65s infinite alternate cubic-bezier(0.28, 0.84, 0.42, 1);
}

.ludo-token.movable .token-base {
  border-color: #ffffff;
}

.ludo-token.movable.token-red .token-base {
  box-shadow: 0 0 14px var(--token-red), 0 0 24px var(--token-red-glow), inset 0 2px 4px #ffffff;
}
.ludo-token.movable.token-green .token-base {
  box-shadow: 0 0 14px var(--token-green), 0 0 24px var(--token-green-glow), inset 0 2px 4px #ffffff;
}
.ludo-token.movable.token-yellow .token-base {
  box-shadow: 0 0 14px var(--token-yellow), 0 0 24px var(--token-yellow-glow), inset 0 2px 4px #ffffff;
}
.ludo-token.movable.token-blue .token-base {
  box-shadow: 0 0 14px var(--token-blue), 0 0 24px var(--token-blue-glow), inset 0 2px 4px #ffffff;
}

@keyframes tokenHoverHop {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -60%) scale(1.12);
  }
}

/* Stacking Counter Badge & Token Scaling */
.ludo-token.stacked {
  width: calc(100% / 15 * 0.72);
  height: calc(100% / 15 * 0.72);
}

.stack-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #facc15;
  border: 1.2px solid #facc15;
  font-size: 0.55rem;
  font-weight: 900;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 6px rgba(250, 204, 21, 0.5);
}

.ludo-token.finished {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(0.8);
}
.ludo-token.finished .token-head::after {
  content: '👑';
  font-size: 0.7rem;
}