/* ===================================================================
   LUDO PLAY & WIN - LUXURY DARK & GOLD ARCADE DESIGN SYSTEM
   Exact 1-to-1 Match with 10-Screen Mobile Reference Design
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg-main: #0b0f19;
  --bg-card: #131b2e;
  --bg-card-elevated: #1a243d;
  --gold-primary: #eab308;
  --gold-light: #fef08a;
  --gold-dark: #a16207;
  --gold-grad: linear-gradient(180deg, #fef08a 0%, #eab308 50%, #ca8a04 100%);
  --ludo-red: #ef4444;
  --ludo-green: #22c55e;
  --ludo-yellow: #eab308;
  --ludo-blue: #3b82f6;
}

* {
  box-sizing: border-box;
}

/* Hide ugly default browser scrollbars */
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg-main);
  background-image: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0b0f19 75%);
  color: #ffffff;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow-x: hidden;
}

.font-game {
  font-family: 'Fredoka One', cursive;
  letter-spacing: 0.5px;
}

/* Background Casino Backdrop on Desktop */
.game-table-backdrop {
  background: radial-gradient(ellipse at center, rgba(30, 27, 75, 0.8) 0%, rgba(11, 15, 25, 0.98) 100%),
              #070a12;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

@media (min-width: 768px) {
  .game-table-backdrop {
    padding: 16px 0;
  }
}

/* Mobile Screen Wrapper Frame */
.mobile-device-shell {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  max-height: 920px;
  background: #0b0f19;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 35px rgba(234, 179, 8, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

@media (min-width: 768px) {
  .mobile-device-shell {
    height: 94vh;
    border-radius: 36px;
    border: 5px solid #1e293b;
    box-shadow: 0 0 0 2px #0b0f19, 0 30px 70px rgba(0, 0, 0, 0.95), 0 0 45px rgba(234, 179, 8, 0.18);
  }
}

/* ===================================================================
   LUXURY GOLD BUTTONS & INPUTS
   =================================================================== */

.btn-gold {
  background: linear-gradient(180deg, #fef08a 0%, #eab308 45%, #ca8a04 100%);
  color: #451a03;
  font-weight: 800;
  border-radius: 0.85rem;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  border: 1px solid #fef08a;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-gold:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(234, 179, 8, 0.3);
}

.btn-green-pill {
  background: linear-gradient(180deg, #86efac 0%, #22c55e 50%, #15803d 100%);
  color: #ffffff;
  font-weight: 800;
  border-radius: 0.6rem;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
  border: 1px solid #86efac;
}

.input-dark {
  background: #131b2e;
  border: 1.5px solid #222f4c;
  border-radius: 0.75rem;
  color: #ffffff;
  padding: 0.75rem 1rem;
  width: 100%;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.input-dark:focus {
  border-color: #eab308;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.2);
}

/* Card Containers */
.ludo-card {
  background: #131b2e;
  border: 1px solid #1f2c4a;
  border-radius: 1.1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ludo-card-elevated {
  background: linear-gradient(180deg, #18233c 0%, #11192b 100%);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: 1.1rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

/* ===================================================================
   LOBBY FEATURE CARDS (Screen 4)
   =================================================================== */

.card-play-now {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #1e40af 100%);
  border: 1.5px solid #60a5fa;
  border-radius: 1.25rem;
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
}

.card-create-room {
  background: linear-gradient(135deg, #052e16 0%, #14532d 50%, #166534 100%);
  border: 1.5px solid #22c55e;
  border-radius: 1.25rem;
  box-shadow: 0 8px 25px rgba(22, 163, 74, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.card-join-room {
  background: linear-gradient(135deg, #2e1065 0%, #581c87 50%, #6b21a8 100%);
  border: 1.5px solid #a855f7;
  border-radius: 1.25rem;
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.card-bonus-banner {
  background: linear-gradient(135deg, #701a75 0%, #4a044e 100%);
  border: 1.5px solid #e879f9;
  border-radius: 1.25rem;
  box-shadow: 0 8px 25px rgba(192, 38, 211, 0.3);
}

/* ===================================================================
   GAMEPLAY 3D BOARD & CENTRAL BIG 3D DICE (Screen 7)
   =================================================================== */

.ludo-board-outer-frame {
  width: 100%;
  max-width: 375px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 6px;
  background: linear-gradient(135deg, #b45309 0%, #78350f 50%, #451a03 100%);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.6);
  border: 2.5px solid #fde047;
  position: relative;
  flex-shrink: 0;
}

.board-corner-stud {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbeb, #fbbf24 60%, #b45309 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border: 1px solid #78350f;
  z-index: 15;
}

.ludo-svg-board {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  display: block;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

/* 3D PAWN STYLING (100% DEAD CENTER ANCHORED) */
.ludo-pawn-3d {
  position: absolute;
  width: 7.2%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -88%);
  cursor: pointer;
  z-index: 25;
  transition: top 0.18s ease-in-out, left 0.18s ease-in-out, transform 0.15s ease;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.6));
  pointer-events: auto;
}

.ludo-pawn-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Movable Token Pulsing Hop */
@keyframes pawnMovableHop {
  0% {
    transform: translate(-50%, -88%) scale(1);
    filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px #facc15);
  }
  50% {
    transform: translate(-50%, -120%) scale(1.24);
    filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 16px #eab308) drop-shadow(0 0 22px #f59e0b);
  }
  100% {
    transform: translate(-50%, -88%) scale(1);
    filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px #facc15);
  }
}

.token-movable {
  animation: pawnMovableHop 0.75s ease-in-out infinite !important;
  cursor: pointer !important;
  z-index: 50 !important;
}

/* BIG 3D CIRCULAR DICE BUTTON */
.big-dice-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbeb 0%, #fef08a 25%, #eab308 60%, #854d0e 100%);
  padding: 3.5px;
  box-shadow: 0 0 22px rgba(234, 179, 8, 0.6), 0 6px 16px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.big-dice-ring:active {
  transform: scale(0.94);
}

.big-dice-inner-cube {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 60%, #e2e8f0 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0,0,0,0.5);
  border: 1.5px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  will-change: transform;
  flex-shrink: 0;
}

/* Mini Bot Dice Display (Strictly 36px) */
.bot-dice-mini {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  flex-shrink: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 60%, #e2e8f0 100%) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
  border: 1.5px solid #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Stable In-Place Spin Animation */
@keyframes diceSpinInPlace {
  0% { transform: rotate(0deg) scale(0.95); }
  25% { transform: rotate(90deg) scale(1.15); }
  50% { transform: rotate(180deg) scale(0.95); }
  75% { transform: rotate(270deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1.0); }
}

.dice-tumbling-active {
  animation: diceSpinInPlace 0.4s linear infinite !important;
}

@keyframes diceLandImpact {
  0% { transform: scale(1.25); filter: drop-shadow(0 0 12px #facc15); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.dice-landed {
  animation: diceLandImpact 0.25s ease-out !important;
}

/* Turn Timer Ring Pulse */
.turn-ring-active {
  animation: turnPulse 1.2s ease-in-out infinite;
}

@keyframes turnPulse {
  0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.8); }
  70% { box-shadow: 0 0 0 10px rgba(234, 179, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}

/* ===================================================================
   BOTTOM NAVIGATION BAR (Screen 4 / 6 / 9 / 10)
   =================================================================== */

.bottom-nav-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: #0d1322;
  border-top: 1.5px solid #1f2c4a;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  z-index: 50;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.6);
}

.nav-tab-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
}

.nav-tab-item i {
  font-size: 18px !important;
  margin-bottom: 2px !important;
  display: block !important;
}

.nav-tab-item.active {
  color: #eab308 !important;
}

.nav-tab-item.active i {
  color: #eab308 !important;
  filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.5));
}