/* ============================================================
   LUDO YODDHA ENTERPRISE - MASTER SLEEK STYLESHEET
   File: css/style.css
   Architecture: High-Readability Inter & Poppins Typography
   Security Level: AAA Grade (100dvh Lock, Stacking Engine, Anti-Ghost Shield)
   ============================================================ */

/* ============================================================
   1. UNIVERSAL RESET & BOX SIZING
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: #041233;
  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  position: fixed;
  color: #ffffff;
}

/* ============================================================
   2. SUPREME VISIBILITY RULES (PREVENTS INVISIBLE OVERLAPS)
   ============================================================ */
.hidden,
div.hidden,
div.screen-overlay.hidden,
div.modal-backdrop.hidden,
#lobby-screen.hidden,
#auth-overlay.hidden,
#play-arena.hidden,
#deposit-modal.hidden,
#withdraw-modal.hidden,
#inbox-modal.hidden,
#setup-modal.hidden,
#room-code-modal.hidden,
#settings-modal.hidden,
#win-modal.hidden,
#quit-confirm-modal.hidden,
#matchmaking-overlay.hidden,
#market-closed-overlay.hidden,
.market-curtain-overlay.hidden,
#view-create-room.hidden,
#view-join-room.hidden,
#view-waiting-room.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 600;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.icon-inline {
  font-size: 1.15em;
  margin-left: 2px;
  vertical-align: -2px;
}

/* ============================================================
   3. SCREEN OVERLAYS (ONLY ACTIVE WHEN NOT HIDDEN)
   ============================================================ */
.screen-overlay:not(.hidden) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 60px 16px 24px 16px !important;
  box-sizing: border-box !important;
}

#auth-overlay:not(.hidden) {
  background: rgba(3, 12, 35, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 2000 !important;
}

#lobby-screen:not(.hidden) {
  background: transparent !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* ============================================================
   4. BRAND LOGO & HERO TITLES
   ============================================================ */
.brand-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.crown-badge {
  font-size: 46px !important;
  color: #ffd700 !important;
  line-height: 1 !important;
  filter: drop-shadow(0 4px 10px rgba(255, 215, 0, 0.45));
}

.logo-title {
  font-size: 38px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  margin: 0 !important;
  display: flex !important;
  gap: 3px !important;
  line-height: 1.1 !important;
}

.char-l { color: #29b6f6 !important; }
.char-u { color: #f44336 !important; }
.char-d { color: #ffd700 !important; }
.char-o { color: #00e676 !important; }

.logo-sub {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffcc00 !important;
  letter-spacing: 5px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   5. SEAMLESS ROYAL BLUE BACKGROUND
   ============================================================ */
#game-container, 
#lobby-screen, 
.currency-bg-layer, 
.currency-bg-layer svg,
.currency-bg-layer svg rect {
  border: none !important;
  outline: none !important;
}

.currency-bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #041233;
}

.currency-bg-layer svg {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
  border: none !important;
}

.currency-bg-layer svg rect[stroke],
.currency-bg-layer svg path[stroke="#ffffff"],
.currency-bg-layer svg path[stroke="#fff"] {
  stroke: none !important;
}

/* ============================================================
   6. MASTER VIEWPORT CONTAINER
   ============================================================ */
#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden !important;
  background-color: #041233;
}

/* ============================================================
   7. HORIZONTAL SWIPEABLE TOP HEADER BAR
   ============================================================ */
#top-bar {
  position: fixed !important;
  top: 8px !important;
  left: 0 !important;
  transform: none !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  z-index: 1500 !important;
  pointer-events: auto !important;
  font-family: 'Poppins', 'Inter', sans-serif !important;
  box-sizing: border-box !important;
}

#top-bar::-webkit-scrollbar {
  display: none !important;
}

.user-pill, .coins-pill, .top-controls, .header-btn {
  flex-shrink: 0 !important;
}

.user-pill {
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #11387d 0%, #071c42 100%);
  border: 1.5px solid #ffcc00;
  border-radius: 20px;
  padding: 2px 10px 2px 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  max-width: 135px;
}

.avatar-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  margin-left: 6px;
  overflow: hidden;
}

.user-name {
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.user-handle-tag {
  color: #ffd700;
  font-size: 8.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coins-pill {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(8, 29, 69, 0.95) !important;
  border: 1.5px solid #ffd700 !important;
  border-radius: 24px !important;
  padding: 4px 8px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6) !important;
  flex-shrink: 0 !important;
}

.coin-icon {
  font-size: 15px;
  margin-right: 2px;
  color: #ffd700;
  display: flex;
  align-items: center;
}

.coin-count {
  color: #ffe600;
  font-weight: 800;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  margin: 0 4px 0 2px;
}

.more-coins-btn, .withdraw-coins-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  outline: none !important;
}

.more-coins-btn {
  background: linear-gradient(180deg, #00e676 0%, #00a152 100%) !important;
  border: 1px solid #b9f6ca !important;
  color: #031433 !important;
  box-shadow: 0 2px 6px rgba(0, 230, 118, 0.35) !important;
}

.withdraw-coins-btn {
  background: linear-gradient(180deg, #ffb300 0%, #e65100 100%) !important;
  border: 1px solid #ffe082 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(255, 179, 0, 0.35) !important;
  margin-left: 0 !important;
}

.more-coins-btn:active, .withdraw-coins-btn:active {
  transform: scale(0.94) !important;
}

.top-controls {
  display: flex;
  gap: 5px;
  flex-shrink: 0 !important;
}

.header-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd700, #ff8c00);
  border: 1.5px solid #fff;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #041233;
  transition: transform 0.1s ease;
  position: relative;
  flex-shrink: 0 !important;
}

.header-btn:active {
  transform: scale(0.92);
}

.logout-btn {
  background: linear-gradient(180deg, #ef5350, #b71c1c);
  color: #ffffff;
}

.notif-badge-pill {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  border-radius: 10px;
  padding: 1px 4px;
  border: 1.5px solid #041233;
  line-height: 1;
}

.floating-fs-btn {
  position: fixed !important;
  bottom: 12px !important;
  right: 12px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #1e5fc9 0%, #0b3780 100%) !important;
  border: 1.5px solid #ffd700 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2500 !important;
  pointer-events: auto !important;
  transition: transform 0.15s ease !important;
}

.floating-fs-btn:active {
  transform: scale(0.90) !important;
}

.fs-icon {
  width: 22px;
  height: 22px;
}

/* ============================================================
   8. 3D VIBRANT LUXURY LOBBY MENU CARDS
   ============================================================ */
.dashboard-menu-cards, .menu-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

#btn-mode-online, #btn-online-play, .card-btn.emerald-variant {
  width: 100%;
  height: 68px;
  background: linear-gradient(180deg, #008744 0%, #004d26 100%) !important;
  border: 2px solid #00e676 !important;
  border-radius: 16px;
  color: #ffffff;
  padding: 0 16px;
  box-shadow: 0 5px 0 #003618, 0 8px 18px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  outline: none;
  transition: transform 0.1s ease;
}

#btn-mode-bot, #btn-vs-bot, .card-btn.purple-variant {
  width: 100%;
  height: 68px;
  background: linear-gradient(180deg, #7b1fa2 0%, #4a148c 100%) !important;
  border: 2px solid #ea80fc !important;
  border-radius: 16px;
  color: #ffffff;
  padding: 0 16px;
  box-shadow: 0 5px 0 #310d5c, 0 8px 18px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  outline: none;
  transition: transform 0.1s ease;
}

#btn-mode-pass, #btn-pass-play, .card-btn.orange-variant {
  width: 100%;
  height: 68px;
  background: linear-gradient(180deg, #e65100 0%, #bf360c 100%) !important;
  border: 2px solid #ffab91 !important;
  border-radius: 16px;
  color: #ffffff;
  padding: 0 16px;
  box-shadow: 0 5px 0 #802408, 0 8px 18px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  outline: none;
  transition: transform 0.1s ease;
}

#btn-mode-code, #btn-play-code, .card-btn.crimson-variant {
  width: 100%;
  height: 68px;
  background: linear-gradient(180deg, #0d47a1 0%, #062659 100%) !important;
  border: 2px solid #ffd700 !important;
  border-radius: 16px;
  color: #ffffff;
  padding: 0 16px;
  box-shadow: 0 5px 0 #021430, 0 8px 20px rgba(0, 0, 0, 0.6) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  outline: none;
  transition: transform 0.1s ease;
}

#btn-dashboard-resume, #btn-resume-game, .card-btn.resume-variant {
  width: 100%;
  height: 68px;
  background: linear-gradient(135deg, #00e676 0%, #008744 100%) !important;
  border: 2px solid #b9f6ca !important;
  border-radius: 16px;
  color: #ffffff;
  padding: 0 16px;
  box-shadow: 0 5px 0 #00542a, 0 8px 20px rgba(0, 230, 118, 0.4) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  outline: none;
}

#btn-mode-online:active, #btn-mode-bot:active, #btn-mode-pass:active, #btn-mode-code:active, #btn-dashboard-resume:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.4) !important;
}

.btn-icon {
  font-size: 32px;
  margin-right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.btn-meta { display: flex; flex-direction: column; text-align: left; }
.btn-title { font-size: 14px; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; }
.btn-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #f1f5f9;
  opacity: 0.95;
}

/* ============================================================
   9. PLAY ARENA & TURN TIMER OVERLAP FIX (POINT 2 RESOLUTION)
   ============================================================ */
#play-arena {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: 56px 0 16px 0;
  box-sizing: border-box;
  overflow: visible !important;
  z-index: 10;
}

.arena-stage-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  position: relative;
  overflow: visible !important;
}

.pod-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: min(96vw, calc(100dvh - 220px), 480px) !important;
  box-sizing: border-box !important;
  z-index: 70 !important;
  padding: 0 4px !important;
  position: relative !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

.pod-row-top {
  margin-bottom: 14px !important;
}

.pod-row-bottom {
  margin-top: 14px !important;
}

.player-pod {
  position: relative !important;
  z-index: 80 !important;
  transition: transform 0.2s ease;
  flex-shrink: 0 !important;
  max-width: 130px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.pod-row-top #pod-0 { margin-right: auto; }
.pod-row-top #pod-1 { margin-left: auto; }
.pod-row-bottom #pod-3 { margin-right: auto; }
.pod-row-bottom #pod-2 { margin-left: auto !important; }

.pod-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(180deg, #1b53af 0%, #0c2b64 100%);
  border: 2px solid #ffcc00;
  border-radius: 16px;
  padding: 3px 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  position: relative !important;
  gap: 3px;
  max-width: 130px !important;
  width: auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  transition: all 0.25s ease;
}

.player-pod.active-turn .pod-inner {
  border-color: #ffd700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.95), 0 0 30px rgba(255, 179, 0, 0.65);
}

.player-pod.active-turn.local-user-turn .pod-inner {
  border-color: #00e676;
  box-shadow: 0 0 18px rgba(0, 230, 118, 1), 0 0 32px rgba(0, 230, 118, 0.7);
}

.pod-badge {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50%;
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
}

.red-badge { background-color: #d60000; }
.green-badge { background-color: #008e1a; }
.yellow-badge { background-color: #ffc700; }
.blue-badge { background-color: #006fc4; }

.pod-name {
  color: #fff;
  font-size: 9px !important;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 0 2px;
  max-width: 44px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 1 !important;
}

.dice-box {
  width: 42px !important;
  height: 42px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f6f3f0 60%, #dddbd8 100%);
  border: 1.5px solid #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 #9da5b3, 0 5px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.08s ease;
  padding: 2px;
  flex-shrink: 0 !important;
}

.dice-box:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #9da5b3;
}

.dice-box.rolling {
  animation: rollTumble 0.32s ease-in-out;
}

@keyframes rollTumble {
  0% { transform: rotate(0deg) scale(0.92); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ============================================================
   TURN TIMER ZERO-OVERLAP ENGINE (STRICT VISIBILITY)
   ============================================================ */
.pod-timer-pill {
  position: absolute !important;
  z-index: 250 !important; /* Higher than Board (50) and Pieces (90) */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #ffd700 !important;
  background: rgba(8, 29, 69, 0.96) !important;
  border: 1.5px solid #ffd700 !important;
  border-radius: 10px !important;
  padding: 2px 7px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  letter-spacing: 0.3px !important;
}

/* Top pods: Timer placed ABOVE the pod so board never overlaps */
.pod-row-top #pod-timer-0 {
  top: -24px !important;
  bottom: auto !important;
  left: 2px !important;
}

.pod-row-top #pod-timer-1 {
  top: -24px !important;
  bottom: auto !important;
  right: 2px !important;
}

/* Bottom pods: Timer placed BELOW the pod so board never overlaps */
.pod-row-bottom #pod-timer-3 {
  bottom: -24px !important;
  top: auto !important;
  left: 2px !important;
}

.pod-row-bottom #pod-timer-2 {
  bottom: -24px !important;
  top: auto !important;
  right: 2px !important;
}

/* ============================================================
   10. FLOATING TURN ARROW BADGE
   ============================================================ */
.turn-arrow-badge {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  pointer-events: none !important;
  z-index: 260 !important;
  white-space: nowrap !important;
  animation: arrowBounce 1s infinite alternate ease-in-out;
}

.pod-row-top .turn-arrow-badge {
  bottom: -24px !important;
  top: auto !important;
}

.pod-row-bottom .turn-arrow-badge {
  top: -24px !important;
  bottom: auto !important;
}

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

/* ============================================================
   11. 15x15 LUDO VECTOR BOARD (ELEVATED Z-INDEX)
   ============================================================ */
.ludo-board-wrapper {
  width: min(96vw, calc(100dvh - 220px), 480px) !important;
  height: min(96vw, calc(100dvh - 220px), 480px) !important;
  aspect-ratio: 1 / 1 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75) !important;
  background: #ffffff;
  position: relative;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 50 !important;
  flex-shrink: 0;
}

.ludo-board-canvas {
  width: 100%;
  height: 100%;
  position: relative;
}

#board-svg-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#board-pieces-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 90 !important;
}

/* ============================================================
   12. ULTRA-RESPONSIVE PAWN HIT-BOX & SMOOTH PHYSICS
   ============================================================ */
.player-piece {
  cursor: pointer;
  pointer-events: auto !important;
  will-change: transform, left, top;
  transition: left 0.18s linear, top 0.18s linear;
  touch-action: none !important;
  position: absolute;
  z-index: 90 !important;
}

.player-piece::after {
  content: '' !important;
  position: absolute !important;
  top: -16px !important;
  left: -16px !important;
  right: -16px !important;
  bottom: -12px !important;
  pointer-events: auto !important;
  z-index: 99 !important;
}

.player-piece.selectable {
  filter: drop-shadow(0 0 14px #ffd700) !important;
  transform: translate(-50%, -115%) scale(1.2) !important;
  cursor: pointer !important;
  z-index: 100 !important;
}

.player-piece.hopping {
  animation: pawnHop 0.20s ease-in-out both;
  z-index: 105 !important;
}

@keyframes pawnHop {
  0% { transform: translate(-50%, -90%) scale(1); }
  50% { transform: translate(-50%, -125%) scale(1.14); filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.3)); }
  100% { transform: translate(-50%, -90%) scale(1); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45)); }
}

.yard-label-text {
  font-family: 'Poppins', sans-serif;
  font-size: 0.58px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #ffffff;
  paint-order: stroke fill;
  stroke: #041233;
  stroke-width: 0.12px;
}

.yard-label-you {
  fill: #ffd700 !important;
  font-weight: 800 !important;
}

.active-turn-pulse {
  animation: youNeonPulse 1s infinite alternate;
}

@keyframes youNeonPulse {
  0% { opacity: 0.7; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 3px #ffd700); }
}

.triangle-glow-active {
  animation: triGlowPulse 0.6s infinite alternate;
}

@keyframes triGlowPulse {
  0% { filter: drop-shadow(0 0 2px #fff); opacity: 0.8; }
  100% { filter: drop-shadow(0 0 12px #ffd700); opacity: 1; }
}

#crown-yard-0 { position: absolute; left: 20%; top: 20%; transform: translate(-50%, -50%); }
#crown-yard-1 { position: absolute; left: 80%; top: 20%; transform: translate(-50%, -50%); }
#crown-yard-2 { position: absolute; left: 80%; top: 80%; transform: translate(-50%, -50%); }
#crown-yard-3 { position: absolute; left: 20%; top: 80%; transform: translate(-50%, -50%); }

.crown-svg-icon {
  width: 58px;
  height: 48px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.7));
}

.crown-rank-pill {
  margin-top: -6px;
  background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
  color: #1a0800;
  border: 2px solid #ffffff;
  border-radius: 12px;
  padding: 1px 10px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

/* ============================================================
   13. PRIVATE ROOM MODAL
   ============================================================ */
.room-modal-box {
  width: 92% !important;
  max-width: 360px !important;
  background: linear-gradient(180deg, #0e2246 0%, #061124 100%) !important;
  border: 2px solid #ffd700 !important;
  border-radius: 20px !important;
  padding: 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9) !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  z-index: 10002 !important;
  pointer-events: auto !important;
}

.room-tabs {
  width: 100% !important;
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.room-tab-btn {
  flex: 1 !important;
  padding: 8px 0 !important;
  background: rgba(14, 38, 77, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #b0c4de !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.room-tab-btn.active {
  background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%) !important;
  border-color: #ffffff !important;
  color: #041233 !important;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.5);
}

.room-view-pane,
#view-create-room,
#view-join-room,
#view-waiting-room {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#view-create-room:not(.hidden),
#view-join-room:not(.hidden),
#view-waiting-room:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.room-code-badge {
  background: #031433 !important;
  border: 2px dashed #ffd700 !important;
  border-radius: 14px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.code-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #ffe082 !important;
  letter-spacing: 1px !important;
}

.code-val-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 4px !important;
  width: 100% !important;
}

.code-text {
  font-size: clamp(22px, 6vw, 26px) !important;
  letter-spacing: 4px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6) !important;
}

.copy-btn {
  background: #ffd700 !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #031433 !important;
}

.room-timer-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(220, 53, 69, 0.25) !important;
  border: 1.5px solid #ff4d4d !important;
  color: #ff9999 !important;
  font-size: 11.5px !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.room-timer-badge strong {
  color: #ffffff !important;
  font-size: 13px !important;
  margin-left: 2px !important;
}

.waiting-slots-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 8px !important;
}

.waiting-slot-card {
  background: rgba(5, 25, 65, 0.85) !important;
  border: 1.5px solid #2d62b3 !important;
  border-radius: 12px !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.waiting-slot-card.occupied {
  border-color: #00e676 !important;
}

.waiting-slot-card.empty {
  border-style: dashed !important;
  opacity: 0.6 !important;
}

.slot-name {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ============================================================
   14. ADD CASH & WITHDRAWAL MODALS
   ============================================================ */
.deposit-modal-box, .withdraw-modal-box {
  width: 90% !important;
  max-width: 360px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, #0e2246 0%, #061124 100%) !important;
  border: 2px solid #ffd700 !important;
  border-radius: 20px !important;
  padding: 20px 16px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  z-index: 10002 !important;
  pointer-events: auto !important;
}

.deposit-modal-box::-webkit-scrollbar, .withdraw-modal-box::-webkit-scrollbar {
  width: 4px;
}
.deposit-modal-box::-webkit-scrollbar-thumb, .withdraw-modal-box::-webkit-scrollbar-thumb {
  background: #ffd700;
  border-radius: 4px;
}

.qr-display-container {
  background: #ffffff !important;
  padding: 8px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 4px 0 10px 0 !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}

.qr-image-large {
  width: 175px !important;
  height: 175px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 6px !important;
}

/* ============================================================
   15. INBOX MODAL, "WINNING MATCH" CARDS & AVATAR SYNC (POINT 1)
   ============================================================ */
.inbox-modal-box {
  width: 90% !important;
  max-width: 450px !important;
  max-height: 82vh !important;
  background: linear-gradient(180deg, #0e2246 0%, #061124 100%) !important;
  border: 2px solid #ffd700 !important;
  border-radius: 18px !important;
  padding: 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 215, 0, 0.35) !important;
  position: relative !important;
  z-index: 10002 !important;
  pointer-events: auto !important;
}

.inbox-header {
  flex-shrink: 0 !important;
  text-align: center !important;
  margin-bottom: 10px !important;
}

/* Inbox Filter Navigation Pill Bar */
.inbox-nav-filter {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}

.inbox-filter-btn {
  flex: 1 !important;
  padding: 6px 0 !important;
  background: rgba(14, 38, 77, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #b0c4de !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.inbox-filter-btn.active {
  background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%) !important;
  color: #041233 !important;
  border-color: #ffffff !important;
}

.inbox-messages-list {
  flex-grow: 1 !important;
  overflow-y: auto !important;
  max-height: 52vh !important;
  padding-right: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.inbox-messages-list::-webkit-scrollbar {
  width: 5px !important;
}
.inbox-messages-list::-webkit-scrollbar-track {
  background: rgba(4, 18, 48, 0.6) !important;
  border-radius: 3px !important;
}
.inbox-messages-list::-webkit-scrollbar-thumb {
  background: #ffd700 !important;
  border-radius: 3px !important;
}

/* Inbox Notification Cards */
.inbox-card {
  background: rgba(11, 38, 77, 0.85) !important;
  border: 1.5px solid rgba(255, 215, 0, 0.35) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-align: left !important;
  box-sizing: border-box !important;
  transition: transform 0.15s ease !important;
  position: relative !important;
}

.inbox-card:active {
  transform: scale(0.98) !important;
}

/* Winning Match Dedicated Card (Green Glow + Trophy) */
.inbox-card.win-match-card {
  border: 1.8px solid #00e676 !important;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.15) 0%, rgba(6, 26, 66, 0.95) 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 230, 118, 0.25) !important;
}

.inbox-card.win-match-card .inbox-card-title {
  color: #00e676 !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
}

/* Losing Match Dedicated Card (Red Accents) */
.inbox-card.loss-match-card {
  border: 1.8px solid #ef4444 !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(6, 26, 66, 0.95) 100%) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2) !important;
}

.inbox-card.loss-match-card .inbox-card-title {
  color: #ff6b6b !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
}

.inbox-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.inbox-avatar-tag-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.inbox-avatar-badge {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
  border: 1px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: #041233 !important;
  flex-shrink: 0 !important;
}

.inbox-card-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd700 !important;
  letter-spacing: 0.3px !important;
}

.inbox-card-msg {
  font-size: 11.5px !important;
  color: #f1f5f9 !important;
  line-height: 1.45 !important;
  word-break: break-word !important;
  white-space: normal !important;
  font-weight: 500 !important;
}

.inbox-card-time {
  font-size: 9.5px !important;
  color: #94a3b8 !important;
  align-self: flex-end !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}

.no-msg {
  background: rgba(4, 18, 48, 0.6) !important;
  border: 1px dashed rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 18px 12px !important;
  text-align: center !important;
  color: #b0c4de !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ============================================================
   16. SETTINGS PANEL & SLIDERS
   ============================================================ */
.settings-modal-box {
  width: 90%;
  max-width: 350px;
  border: 2px solid #ffd700;
  z-index: 10002 !important;
  pointer-events: auto !important;
}

.settings-options-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 18px 0;
}

.setting-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(3, 16, 43, 0.85);
  border: 1.5px solid #2d62b3;
  border-radius: 14px;
  padding: 10px 14px;
}

.setting-slider-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(3, 16, 43, 0.85);
  border: 1.5px solid #2d62b3;
  border-radius: 14px;
  padding: 12px 14px;
}

.slider-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-label {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.volume-val-badge {
  color: #ffd700;
  font-weight: 700;
  font-size: 12px;
  background: rgba(255, 215, 0, 0.18);
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.ludo-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #0b316c;
  border-radius: 4px;
  outline: none;
  border: 1px solid #3b76cf;
}

.ludo-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff59d 0%, #ffd700 50%, #ff8f00 100%);
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.setting-toggle-btn {
  background: #2e7d32;
  color: #ffffff;
  border: 1.5px solid #81c784;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.setting-toggle-btn.muted {
  background: #616161;
  border-color: #9e9e9e;
}

.quit-match-btn {
  width: 100%;
  padding: 11px 0;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* ============================================================
   17. MODAL BACKDROPS & BOXES
   ============================================================ */
.modal-backdrop:not(.hidden) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(2, 8, 22, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10001 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  overscroll-behavior: contain !important;
}

body:has(.modal-backdrop:not(.hidden)) #lobby-screen,
body:has(.modal-backdrop:not(.hidden)) #play-arena,
body:has(.modal-backdrop:not(.hidden)) #top-bar {
  pointer-events: none !important;
}

#fireworks-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.ludo-modal-box {
  width: 90%;
  max-width: 360px;
  background: linear-gradient(180deg, #0e2246 0%, #061124 100%);
  border: 2px solid #ffd700;
  border-radius: 20px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
  position: relative !important;
  font-family: 'Poppins', 'Inter', sans-serif;
  box-sizing: border-box;
  z-index: 10002 !important;
  pointer-events: auto !important;
}

.modal-title {
  color: #ffd700;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  text-align: center;
}

.king-btn {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #ffb300 0%, #e65100 100%);
  border: 1px solid #ffe082;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(230, 81, 0, 0.4);
  padding: 10px 18px;
  cursor: pointer;
  transition: transform 0.1s ease;
  outline: none;
  pointer-events: auto !important;
}

.king-btn:active {
  transform: translateY(2px);
}

.red-btn {
  background: linear-gradient(180deg, #f44336 0%, #b71c1c 100%);
  border-color: #ef9a9a;
  box-shadow: 0 4px 12px rgba(183, 28, 28, 0.4);
}

.default-btn {
  background: linear-gradient(180deg, #29b6f6 0%, #01579b 100%);
  border-color: #b3e5fc;
  box-shadow: 0 4px 12px rgba(1, 87, 155, 0.4);
}

.start-gold, .play-again-gold {
  background: linear-gradient(180deg, #00e676 0%, #008744 100%);
  border-color: #b9f6ca;
  box-shadow: 0 4px 14px rgba(0, 230, 118, 0.4);
}

.name-input-field {
  width: 100%;
  height: 40px;
  background: #040d1f;
  border: 1.5px solid #1a3c75;
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 0 12px;
  outline: none;
  box-sizing: border-box;
  pointer-events: auto !important;
}

.name-input-field:focus {
  border-color: #ffd700;
}

.setup-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.setup-label {
  font-size: 10px;
  font-weight: 600;
  color: #ffe082;
  margin-bottom: 4px;
  letter-spacing: 0.4px;
}

.setup-actions {
  width: 100%;
}

.actions-split {
  display: flex;
  gap: 8px;
  width: 100%;
}

.small-btn {
  flex: 1;
  padding: 9px 0;
  font-size: 12px;
}

.screen-back-btn, .modal-back-btn {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(4, 18, 48, 0.95) !important;
  border: 2px solid #ffd700 !important;
  color: #ffd700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
  z-index: 10005 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.screen-back-btn:active, .modal-back-btn:active {
  transform: scale(0.90) !important;
}

/* ============================================================
   18. GRAND VICTORY CELEBRATION MODAL
   ============================================================ */
.celebration-backdrop, #win-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10005 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.victory-scorecard-box {
  position: relative !important;
  z-index: 10006 !important;
  width: 92% !important;
  max-width: 350px !important;
  margin: auto !important;
  background: linear-gradient(180deg, #0e2246 0%, #061124 100%) !important;
  border: 3px solid #ffd700 !important;
  border-radius: 22px !important;
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.9) !important;
  padding: 22px 18px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.win-trophy-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.win-trophy {
  font-size: 58px;
  color: #ffd700;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 12px rgba(255, 215, 0, 0.7));
  animation: bounceTrophy 1.5s infinite alternate ease-in-out;
}

@keyframes bounceTrophy {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-6px) scale(1.06); }
}

.winner-crown-hero {
  position: absolute;
  top: -14px;
  font-size: 32px;
  color: #ffd700;
}

.win-sub {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
  text-shadow: 1px 1px 3px #000;
}

.victory-meta-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  width: 100%;
}

.victory-meta-pill {
  flex: 1;
  background: rgba(14, 38, 77, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffe082;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.victory-prize-pill {
  background: linear-gradient(180deg, rgba(0, 230, 118, 0.25) 0%, rgba(0, 135, 68, 0.25) 100%);
  border-color: #00e676;
  color: #00e676;
}

.scorecard-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.scorecard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 22, 60, 0.85);
  border: 1.5px solid #2d62b3;
  border-radius: 12px;
  padding: 8px 12px;
}

.scorecard-row.rank-1 {
  border-color: #ffd700;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(6, 22, 60, 0.9) 100%);
}

.rank-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rank-number {
  font-size: 15px;
  font-weight: 800;
  color: #ffd700;
}

.mini-pin-preview {
  width: 24px !important;
  height: 30px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mini-pin-preview svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.rank-player-name {
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.you-tag-badge {
  background: #ffd700;
  color: #041233;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
}

.rank-title-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #1c2e4a;
  color: #b0c4de;
}

.badge-gold { background: #b8860b !important; color: #ffd700 !important; }
.badge-silver { background: #505d6b !important; color: #e6e6fa !important; }

/* ============================================================
   19. RESPONSIVE ADAPTATIONS
   ============================================================ */
@media (max-width: 380px) {
  .dice-box { width: 38px !important; height: 38px !important; }
  .pod-name { max-width: 38px !important; font-size: 8px !important; }
  .pod-inner { padding: 2px 4px !important; max-width: 115px !important; }
  .dashboard-menu-cards { max-width: 290px; }
  .logo-title { font-size: 32px !important; }
  .room-modal-box { max-width: 320px !important; }
  .victory-scorecard-box { width: 95% !important; padding: 18px 14px !important; }
  .deposit-modal-box, .withdraw-modal-box { width: 95% !important; padding: 16px 12px !important; }
  .inbox-modal-box { width: 95% !important; max-height: 85vh !important; }
}