/* Royal Ludo Custom Tactile Styling */

/* Procedural subtle wood grain */
.wood-grain {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(139, 69, 19, 0.04) 0px,
    rgba(139, 69, 19, 0.04) 2px,
    transparent 2px,
    transparent 8px
  );
}

/* Corner brass brackets */
.brass-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid #E1B12C;
  opacity: 0.85;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
  pointer-events: none;
}
.brass-corner.top-1.left-1 { border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.brass-corner.top-1.right-1 { border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.brass-corner.bottom-1.left-1 { border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.brass-corner.bottom-1.right-1 { border-left: none; border-top: none; border-bottom-right-radius: 6px; }

/* HUD Button Style */
.hud-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: rgba(45, 20, 6, 0.88);
  border: 1px solid rgba(225, 177, 44, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDCB6E;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: all 0.15s ease;
  user-select: none;
  touch-action: manipulation;
}
.hud-btn:hover {
  background-color: rgba(69, 31, 10, 0.95);
  border-color: rgba(225, 177, 44, 0.7);
  transform: translateY(-1px);
}
.hud-btn:active {
  transform: translateY(1px);
}

@media (min-width: 640px) {
  .hud-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
}

/* Tile styling */
.ludo-tile {
  stroke: #2D1406;
  stroke-width: 2.2;
}

/* Star icon inside safe squares */
.safe-star {
  fill: #E1B12C;
  stroke: #2D1406;
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* Pawn SVG Elements */
.pawn-group {
  cursor: pointer;
  transform-origin: center bottom;
  touch-action: manipulation;
}
.pawn-group.movable {
  animation: pawn-bounce 1s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
.pawn-group.movable .pawn-ring {
  opacity: 1;
  animation: ring-pulse 1.2s infinite ease-out;
}

@keyframes pawn-bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

@keyframes ring-pulse {
  0% {
    r: 32;
    opacity: 0.9;
    stroke-width: 4;
  }
  100% {
    r: 46;
    opacity: 0;
    stroke-width: 1;
  }
}

/* Dot styling on 3D die face */
.dice-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2D1406 0%, #110702 100%);
  margin: auto;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.4);
}
.dice-dot.red-dot {
  background: radial-gradient(circle at 35% 35%, #FF5252 0%, #D63031 70%, #9C1C1D 100%);
  width: 13px;
  height: 13px;
}

/* Die Rolling 3D Animation */
.rolling-dice {
  animation: dice-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes dice-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0) rotate(-15deg); }
  20%, 80% { transform: translate3d(3px, 0, 0) rotate(20deg); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0) rotate(-25deg); }
  40%, 60% { transform: translate3d(5px, 0, 0) rotate(25deg); }
}

/* Dynamic Floating Score Popup Pill */
.score-floater {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(20, 8, 3, 0.92);
  border: 1.5px solid #FDCB6E;
  padding: 4px 10px;
  border-radius: 9999px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.025em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 40;
  animation: score-float-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes score-float-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.75);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.1);
  }
  40% {
    transform: translate(-50%, -18px) scale(1);
  }
  80% {
    opacity: 0.95;
    transform: translate(-50%, -30px) scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -46px) scale(0.9);
  }
}