/* Custom Variables and Palette */
:root {
  /* Explicit Design System Palette Specification */
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-glass: rgba(15, 23, 42, 0.95);
  --border-glass: #334155;

  --text-main: #F1F5F9;
  --text-muted: #94A3B8;

  --btn-primary-bg: #38BDF8;
  --btn-primary-text: #0F172A;
  --btn-secondary-bg: #1E293B;
  --btn-secondary-text: #F1F5F9;
  --btn-secondary-border: #334155;
  --accent-notification: #F59E0B;

  /* ═══ GOLD / ORO — Paleta Oro Metálico Real ═══ */
  /* #D4A017 = Oro profundo metálico – elimina el tono "paja" */
  --accent-gold: #D4A017;
  --accent-gold-bright: #F5C842;
  --accent-gold-light: #FFE082;
  --gold: #D4A017;
  --gold-dim: rgba(212, 160, 23, 0.15);
  --gold-border: rgba(212, 160, 23, 0.45);
  --gold-glow: rgba(212, 160, 23, 0.6);

  /* Resources — rich, high-contrast accessible colors */
  --res-wood-bg: rgba(6, 78, 59, 0.75);
  --res-wood-border: #10b981;
  --res-wood-text: #6ee7b7;
  --res-wood-glow: rgba(16, 185, 129, 0.45);

  --res-brick-bg: rgba(120, 40, 10, 0.55);
  --res-brick-border: #ea580c;
  --res-brick-text: #fdba74;
  --res-brick-glow: rgba(234, 88, 12, 0.4);

  --res-sheep-bg: rgba(101, 163, 13, 0.65);
  --res-sheep-border: #84cc16;
  --res-sheep-text: #bef264;
  --res-sheep-glow: rgba(132, 204, 22, 0.5);

  --res-wheat-bg: rgba(100, 70, 8, 0.55);
  --res-wheat-border: #d97706;
  --res-wheat-text: #fde68a;
  --res-wheat-glow: rgba(217, 119, 6, 0.4);

  --res-ore-bg: rgba(44, 50, 100, 0.55);
  --res-ore-border: #818cf8;
  --res-ore-text: #c7d2fe;
  --res-ore-glow: rgba(129, 140, 248, 0.4);
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto !important;
  position: relative !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch !important;
  background: #050b14;
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  /* Safe area for notched phones */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Board Canvas Lock Mode ONLY when playing game */
html.in-game,
body.in-game,
html.canvas-mode,
body.canvas-mode {
  overflow: hidden !important;
  position: fixed !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

/* Custom Global Luxury Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.5), rgba(212, 175, 55, 0.7));
  border-radius: 10px;
  border: 2px solid rgba(15, 23, 42, 0.8);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(251, 191, 36, 0.9);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 191, 36, 0.6) rgba(15, 23, 42, 0.7);
}

#app-container {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}

body.in-game #app-container,
body.canvas-mode #app-container {
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

/* Allow native touch scrolling only in list elements */
.right-panels-container,
.logs-list,
.players-container,
.hud-cards-list,
.lobby-main,
.room-lobby-main {
  touch-action: pan-y !important;
}

/* Screen Transitions */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Home / Lobby Screen Background with Custom Art & Vertical Scrolling */
#lobby-screen,
#room-lobby-screen {
  background: linear-gradient(180deg, rgba(8, 15, 30, 0.72) 0%, rgba(8, 15, 30, 0.88) 100%),
    url('../assets/images/bg-home.jpg') center center / cover no-repeat fixed;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  height: 100% !important;
  max-height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* =========================================
   CATIAN LUXURY LOADER STYLES (GPU Accelerated)
   ========================================= */
#loading-screen {
  background: #06070b !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  position: fixed;
  inset: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#loading-screen:not(.active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.catian-luxury-loader-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* --- ONDAS DE PULSACIÓN DE FONDO EXPANSIVAS CON ESTELA --- */
.loader-pulse-ripples {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.loader-pulse-ripples .ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.03) 45%, transparent 75%);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
  transform: translate3d(-50%, -50%, 0) scale(0.25);
  opacity: 0;
  will-change: transform, opacity;
  animation: pulseExpandWaveSlow 4.8s cubic-bezier(0.1, 0.7, 0.25, 1) infinite;
}

.loader-pulse-ripples .ring-1 {
  animation-delay: 0s;
}

.loader-pulse-ripples .ring-2 {
  animation-delay: 1.2s;
  border-color: rgba(245, 158, 11, 0.45);
}

.loader-pulse-ripples .ring-3 {
  animation-delay: 2.4s;
  border-color: rgba(212, 175, 55, 0.4);
}

.loader-pulse-ripples .ring-4 {
  animation-delay: 3.6s;
  border-color: rgba(251, 191, 36, 0.35);
}

@keyframes pulseExpandWaveSlow {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(0.25);
    opacity: 0.95;
  }

  50% {
    opacity: 0.45;
  }

  100% {
    transform: translate3d(-50%, -50%, 0) scale(7.5);
    opacity: 0;
  }
}

.catian-luxury-loader {
  position: relative;
  z-index: 2;
  width: 160px;
  height: 176px;
  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.35));
}

/* --- ANIMACIÓN HEXÁGONO MODERNO Y PROFESIONAL --- */

/* 1. Recorrido continuo del trazo dorado por las aristas */
.laser-border {
  stroke-dasharray: 180 360;
  stroke-dashoffset: 0;
  animation: laserRun 3s linear infinite;
}

/* 2. Respiración sofisticada de la geometría central */
.central-cube {
  transform-origin: 100px 110px;
  animation: cubeGlow 3s ease-in-out infinite;
}

/* 3. Parpadeo sutil de los nodos arquitectónicos */
.corner-node {
  animation: nodePulse 2s ease-in-out infinite alternate;
}

/* --- TEXTO: DE IZQUIERDA A DERECHA --- */
.catian-luxury-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  /* Orden estándar C A T I A N */
  margin-top: 25px;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 700;
}

.logo-text-branding {
  margin-top: 0 !important;
  font-size: 1.85rem !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.45)) !important;
  user-select: none !important;
}

.logo-text-branding .char {
  margin: 0 3px !important;
}

.char {
  color: #4A3E20;
  /* Color base apagado */
  margin: 0 5px;
  animation: waveGlowLeftToRight 4.2s ease-in-out infinite;
}

/* Secuencia de retrasos pausada y elegante de Izquierda (C) a Derecha (N) */
.c1 {
  animation-delay: 0.0s;
}

/* C */
.c2 {
  animation-delay: 0.3s;
}

/* A */
.c3 {
  animation-delay: 0.6s;
}

/* T */
.c4 {
  animation-delay: 0.9s;
}

/* I */
.c5 {
  animation-delay: 1.2s;
}

/* A */
.c6 {
  animation-delay: 1.5s;
}

/* N */

/* KEYFRAMES */

/* Animación del brillo de texto (Izquierda -> Derecha) */
@keyframes waveGlowLeftToRight {

  0%,
  100% {
    color: #4A3E20;
    text-shadow: none;
    transform: translateY(0);
  }

  25% {
    color: #FFFCF0;
    /* Destello Blanco/Oro */
    text-shadow: 0 0 12px rgba(255, 252, 240, 0.9), 0 0 22px rgba(212, 175, 55, 0.7);
    transform: translateY(-1px);
    /* Elevación imperceptible y elegante */
  }
}

/* Recorrido perimetral del láser */
@keyframes laserRun {
  0% {
    stroke-dashoffset: 540;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

/* Latido de luz del núcleo 3D */
@keyframes cubeGlow {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes nodePulse {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  100% {
    opacity: 0.9;
    filter: drop-shadow(0 0 4px #FFFCF0);
  }
}

/* Header */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-glass);
  z-index: 10;
  min-height: 48px;
  flex-shrink: 0;
}

.logo {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  position: relative;
  height: 44px;
  min-width: 230px;
  overflow: visible;
}

.app-logo-img {
  height: 130px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.7));
  transition: transform 0.3s ease;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 15;
  pointer-events: auto;
}

.app-logo-img:hover {
  transform: translateY(-50%) scale(1.04);
}

@media (max-width: 600px) {
  .logo {
    min-width: 130px;
    height: 34px;
  }

  .logo-text-branding {
    font-size: 1.32rem !important;
    letter-spacing: 1.5px !important;
  }

  .logo-text-branding .char {
    margin: 0 1.5px !important;
  }

  .app-logo-img {
    height: 72px;
    max-width: 160px;
  }
}

.logo span {
  color: var(--accent-gold);
}

.user-stats-bar {
  display: flex;
  gap: 15px;
}

.stat-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

.stat-badge.gold {
  border-color: rgba(255, 190, 59, 0.3);
  color: var(--accent-gold);
}

/* ==========================================================================
   HEXAGONAL GRID CONTAINER LOBBY & CENTERING SCROLL SNAP
   ========================================================================== */
.hex-grid-viewport {
  position: relative;
  width: 100%;
  height: calc(100vh - 72px);
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  padding: 20px 0 100px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hex-grid-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* TRUE REGULAR POINTY-TOP HEXAGON CONTAINER */
.hex-card {
  width: min(430px, calc(100vw - 20px));
  height: min(496px, calc((100vw - 20px) * 1.1547));
  aspect-ratio: 1 / 1.1547;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  opacity: 0.82;
  transform: scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: transform, opacity;
  box-sizing: border-box;
}

/* Active Centered Hexagon Card (Static positioning, moves only with scroll) */
.hex-card.hex-card-active,
.hex-card:focus-within {
  opacity: 1;
  transform: scale(1.0);
  z-index: 10;
}

/* True Regular Pointy-Top Hexagonal Frame Backdrop */
.hex-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.65);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.5));
  transition: filter 0.4s ease, transform 0.4s ease;
}

.hex-card.hex-card-active .hex-card-inner {
  filter: drop-shadow(0 0 30px rgba(245, 158, 11, 0.9));
}

/* Progressive Glowing Laser Border for Hexagon Containers */
.hex-laser-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.hex-laser-bg {
  fill: none;
  stroke: rgba(245, 158, 11, 0.22);
  stroke-width: 4;
}

.hex-laser-progress {
  fill: none;
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1490;
  stroke-dashoffset: 1490;
  filter: drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 24px #fbbf24) drop-shadow(0 0 45px #d97706);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: stroke-dashoffset;
}

.hex-card.hex-card-active .hex-laser-progress {
  animation: laserTrailGlowPulse 2.4s infinite alternate ease-in-out;
}

@keyframes laserTrailGlowPulse {
  0% {
    filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 20px #fbbf24) drop-shadow(0 0 35px #f59e0b);
  }

  100% {
    filter: drop-shadow(0 0 18px #ffffff) drop-shadow(0 0 36px #fef08a) drop-shadow(0 0 65px #d97706);
  }
}

/* Rectangular Container for Account ID Recovery at the end */
.hex-card.recovery-card {
  aspect-ratio: auto !important;
  min-height: auto !important;
  height: auto !important;
}

.rectangular-card-inner {
  width: 100%;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
  border: 2px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), inset 0 0 25px rgba(245, 158, 11, 0.08);
  border-radius: 24px;
  padding: 24px 20px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hex-card.hex-card-active .rectangular-card-inner {
  border-color: #f59e0b;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.5);
}

/* Inner Gold Hexagon Border Outline Overlay */
.hex-card-inner::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 1;
}

/* Content Container Inside Safe Rectangular Zone of Regular Hexagon */
.hex-card-content {
  position: absolute;
  z-index: 2;
  inset: 12% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 4px;
}

/* Custom Sleek Scrollbar for Hexagon Content */
.hex-card-content::-webkit-scrollbar {
  width: 4px;
}

.hex-card-content::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.6);
  border-radius: 4px;
}

.hex-badge {
  display: inline-block;
  background: rgba(245, 158, 11, 0.15);
  border: 1.5px solid #f59e0b;
  color: #fbbf24;
  padding: 3px 12px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.hex-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
  margin: 0;
}

.hex-desc {
  color: #94a3b8;
  font-size: 0.82rem;
  line-height: 1.4;
  max-width: 320px;
  margin: 0;
}

.lobby-hero-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 190, 59, 0.1) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .lobby-hero-card:hover::before {
    opacity: 1;
  }
}

.lobby-hero-card h2 {
  font-size: 1.5rem;
  color: var(--accent-gold);
  margin-bottom: 6px;
}

.lobby-hero-card p {
  font-size: 0.9rem;
  margin-bottom: 16px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.hero-badge {
  display: inline-block;
  background: rgba(45, 212, 191, 0.15);
  border: 1px solid rgba(45, 212, 191, 0.4);
  color: var(--accent-teal);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.btn-hero {
  padding: 14px 32px;
  font-size: 1rem;
  width: 100%;
  max-width: 320px;
}

/* Rooms Card — Full-width below hero */
.lobby-rooms-card {
  width: 100%;
  max-width: 1100px;
  text-align: center;
  padding: 20px 16px;
  align-items: center;
  box-sizing: border-box;
}

.lobby-rooms-card h2 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.lobby-rooms-card p {
  font-size: 0.85rem;
  margin-bottom: 14px;
}

/* Secondary Grid: Profile, Leaderboard, Tutorial — mobile-first & overflow-proof */
.lobby-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Card Styling (Luxury Glassmorphism) */
.card {
  background: rgba(20, 25, 35, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px 16px;
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.card:nth-child(2) {
  animation-delay: 0.1s;
}

.card:nth-child(3) {
  animation-delay: 0.2s;
}

.card:nth-child(4) {
  animation-delay: 0.3s;
}

.card:nth-child(5) {
  animation-delay: 0.4s;
}

/* Disable hover scale on touch — causes jank */
@media (hover: hover) {
  .card:hover {
    transform: scale(1.02) translateY(-4px);
    border-color: rgba(255, 190, 59, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.1);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card h2 {
  font-size: 1.4rem;
  font-weight: 800;
}

.card p {
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 0.9rem;
}

/* Profile Card & Input Rows */
.input-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.input-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.95rem;
  box-sizing: border-box;
}

.input-row button {
  padding: 10px 16px;
  font-size: 0.9rem;
  box-shadow: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.profile-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
  font-size: 0.95rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .profile-details-grid {
    grid-template-columns: 1fr;
  }
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-item.select-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.detail-item label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.detail-item select {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.profile-recovery-box {
  margin-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 15px;
  width: 100%;
  box-sizing: border-box;
}

.recovery-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.recovery-row {
  margin-bottom: 10px;
}

.recovery-row:last-child {
  margin-bottom: 0;
}

.recovery-row input {
  padding: 8px 12px;
  font-size: 0.8rem;
  font-family: monospace;
  text-align: center;
  color: var(--text-muted);
}

#profile-userid-restore-input {
  color: var(--text-main);
}

.recovery-row button {
  padding: 8px 14px;
  font-size: 0.85rem;
  border-radius: 8px;
}

/* Global Leaderboard Card */
.leaderboard-table-container {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 16px;
  background: rgba(10, 16, 30, 0.65);
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}



.loading-cell {
  text-align: center !important;
  padding: 20px !important;
  color: var(--text-muted) !important;
}

.btn-tutorial-start {
  margin-top: auto;
  width: 100%;
}

/* Room Lobby Screen Base Styles */
.room-lobby-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 12px 60px 12px;
  overflow: visible !important;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
  flex-shrink: 0;
  touch-action: pan-y !important;
}

.room-code-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.room-code-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.5px;
}

.room-code-title span {
  color: var(--accent-gold);
  font-family: monospace;
  letter-spacing: 2px;
}

.room-share-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.room-share-actions button {
  flex: 1;
  max-width: 160px;
  padding: 8px 12px;
  font-size: 0.82rem;
}

.room-lobby-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.players-lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

/* Buttons */
button {
  font-family: inherit;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

button:active {
  transform: scale(0.95);
}

.btn-primary {
  background: var(--gradient-logo-btn);
  color: #ffffff !important;
  font-weight: 800;
  padding: 14px 24px;
  font-size: 1rem;
  min-height: 48px;
  box-shadow: 0 4px 18px rgba(180, 83, 9, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  position: relative;
  overflow: hidden;
  border: 1.5px solid #fde047;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: all 0.5s ease;
}

.btn-primary:hover::after {
  left: 150%;
}

.btn-primary:hover {
  background: var(--gradient-logo-hover);
  color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.65), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-3px) scale(1.02);
}

.btn-accent {
  background: linear-gradient(135deg, var(--logo-teal), #0f766e);
  color: #fff;
  padding: 14px 24px;
  font-size: 1rem;
  min-height: 48px;
  box-shadow: 0 4px 16px rgba(45, 212, 191, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, 0.5);
}

.btn-accent::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-20deg);
  transition: all 0.5s ease;
}

.btn-accent:hover::after {
  left: 150%;
}

.btn-accent:hover {
  background: linear-gradient(135deg, #5eead4, var(--accent-teal));
  box-shadow: 0 8px 25px rgba(45, 212, 191, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-3px) scale(1.02);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  padding: 14px 20px;
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(5px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-danger {
  background: linear-gradient(145deg, #ef4444, #dc2626);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: linear-gradient(145deg, #f87171, #ef4444);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.6);
}

.btn-danger:active {
  transform: translateY(0);
}

.btn-sm {
  font-size: 0.85rem;
  border-radius: 8px;
}

/* Shop grid */
.shop-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.shop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 15px 20px;
  border-radius: 14px;
  border: 1px solid var(--border-glass);
}

.btn-buy {
  background: rgba(255, 190, 59, 0.1);
  color: var(--accent-gold);
  border: 1px solid rgba(255, 190, 59, 0.3);
  padding: 8px 16px;
}

.btn-buy:hover {
  background: var(--accent-gold);
  color: #000;
}

/* Matchmaking Queue Overlay */
#queue-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  padding-top: 20px;
  border-top: 1px solid var(--border-glass);
}

.spinner {
  width: 48px;
  height: 48px;
  background: conic-gradient(from 0deg, var(--accent-gold), transparent 70%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: spinHex 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 15px auto;
}

.spinner::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(20, 25, 35, 1);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

@keyframes spinHex {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================
   GAME SCREEN LAYOUT — Board-First Design
   ========================================= */
#game-screen .game-layout {
  flex: 1;
  display: flex;
  min-height: 0;
}

.board-area {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

#catan-board-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* =========================================
   GAME SCREEN STYLE — HUD & Panels
   ========================================= */
.game-hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  z-index: 10;
  gap: 12px;
}



.timer-progress-container {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.timer-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-teal), #60a5fa);
  transition: width 1s linear, background-color 0.5s ease;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.5);
}

.phase-badge {
  background: rgba(45, 212, 191, 0.15);
  border: 1px solid rgba(45, 212, 191, 0.4);
  color: var(--accent-teal);
  padding: 5px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ─── BOARD-FIRST LAYOUT ─────────────────── */
.game-layout {
  flex: 1;
  position: relative;
  /* anchor for floating panels */
  overflow: hidden;
  min-height: 0;
  background: #070c18;
}

/* Board fills 100% */
.board-area {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ─── FLOATING PANEL BASE ────────────────── */
.game-sidebar,
.controls-sidebar {
  position: absolute;
  top: 16px;
  max-height: calc(100% - 150px);
  background: rgba(8, 14, 26, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 20;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.35s ease;
}

.game-sidebar {
  width: 170px;
  padding: 10px;
  gap: 8px;
}

.controls-sidebar {
  width: 240px;
  padding: 14px;
  gap: 10px;
}

/* Left panel — players */
.game-sidebar {
  left: 16px;
}

/* Right panel — controls */
.controls-sidebar {
  right: 16px;
}

/* Collapsed state */
.game-sidebar.collapsed {
  transform: translateX(calc(-170px - 20px));
  opacity: 0;
  pointer-events: none;
}

.controls-sidebar.collapsed {
  transform: translateX(calc(240px + 20px));
  opacity: 0;
  pointer-events: none;
}

/* ─── PANEL TOGGLE BUTTONS ───────────────── */
.panel-toggle {
  position: absolute;
  top: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(8, 14, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 25;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.panel-toggle:hover {
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Left Toggles */
#toggle-players {
  left: 16px;
  top: 16px;
  width: 30px;
  height: 30px;
  font-size: 0.85rem;
}

/* Right Toggles */
#toggle-logs {
  right: 16px;
  top: 16px;
  left: auto;
  transform: none;
}

#toggle-buildings {
  right: 16px;
  top: 60px;
  left: auto;
  transform: none;
}

#toggle-dev-cards {
  right: 16px;
  top: 104px;
  left: auto;
  transform: none;
}

#toggle-bank {
  right: 16px;
  top: 148px;
  left: auto;
  transform: none;
}

/* Shift left toggles when panel is open */
.game-sidebar:not(.collapsed)~#toggle-players {
  left: calc(170px + 24px);
}


.players-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 4px solid var(--text-muted);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.player-row.active-turn {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.02));
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2), inset 0 0 10px rgba(251, 191, 36, 0.05);
  transform: translateX(4px);
}

.player-row.red {
  border-left-color: #ff4a5a;
}

.player-row.blue {
  border-left-color: #3498db;
}

.player-row.orange {
  border-left-color: #e67e22;
}

.player-row.green {
  border-left-color: #2ecc71;
}

.player-info {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.player-name {
  font-weight: 600;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 135px;
}

.player-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* =========================================
   RESOURCE CARDS — Rich Colored Design
   ========================================= */
.my-cards-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resource-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.res-card {
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 80px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.2s ease;
  cursor: default;
}

.res-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.res-card:hover::before {
  opacity: 1;
}

/* Accent top bar */
.res-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
}

/* WOOD */
.res-card.wood {
  background: var(--res-wood-bg);
  border-color: var(--res-wood-border);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.2), inset 0 1px 0 rgba(134, 239, 172, 0.1);
}

.res-card.wood::after {
  background: linear-gradient(90deg, #22c55e, #15803d);
}

.res-card.wood::before {
  background: var(--res-wood-glow);
}

.res-card.wood:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}

/* BRICK */
.res-card.brick {
  background: var(--res-brick-bg);
  border-color: var(--res-brick-border);
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.2), inset 0 1px 0 rgba(253, 186, 116, 0.1);
}

.res-card.brick::after {
  background: linear-gradient(90deg, #f97316, #c2410c);
}

.res-card.brick::before {
  background: var(--res-brick-glow);
}

.res-card.brick:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.35);
}

/* SHEEP */
.res-card.sheep {
  background: var(--res-sheep-bg);
  border-color: var(--res-sheep-border);
  box-shadow: 0 4px 16px rgba(132, 204, 22, 0.2), inset 0 1px 0 rgba(217, 249, 157, 0.1);
}

.res-card.sheep::after {
  background: linear-gradient(90deg, #a3e635, #65a30d);
}

.res-card.sheep::before {
  background: var(--res-sheep-glow);
}

.res-card.sheep:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(132, 204, 22, 0.35);
}

/* WHEAT */
.res-card.wheat {
  background: var(--res-wheat-bg);
  border-color: var(--res-wheat-border);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.2), inset 0 1px 0 rgba(253, 230, 138, 0.1);
}

.res-card.wheat::after {
  background: linear-gradient(90deg, #fbbf24, #92400e);
}

.res-card.wheat::before {
  background: var(--res-wheat-glow);
}

.res-card.wheat:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
}

/* ORE */
.res-card.ore {
  background: var(--res-ore-bg);
  border-color: var(--res-ore-border);
  box-shadow: 0 4px 16px rgba(129, 140, 248, 0.2), inset 0 1px 0 rgba(199, 210, 254, 0.1);
}

.res-card.ore::after {
  background: linear-gradient(90deg, #a5b4fc, #4f46e5);
}

.res-card.ore::before {
  background: var(--res-ore-glow);
}

.res-card.ore:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(129, 140, 248, 0.35);
}

.res-card-icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.res-card-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 2px;
}

/* Header color per resource */
.res-card.wood .res-card-header {
  color: var(--res-wood-text);
}

.res-card.brick .res-card-header {
  color: var(--res-brick-text);
}

.res-card.sheep .res-card-header {
  color: var(--res-sheep-text);
}

.res-card.wheat .res-card-header {
  color: var(--res-wheat-text);
}

.res-card.ore .res-card-header {
  color: var(--res-ore-text);
}

.res-card-count {
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.15s ease;
}

.res-card-count.pop {
  transform: scale(1.4);
  color: var(--accent-gold);
}

/* Control panel buttons */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-action {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  padding: 10px 14px;
  font-size: 0.88rem;
  text-align: left;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Build cost pill inline in button */
.build-cost {
  display: flex;
  gap: 3px;
  align-items: center;
  opacity: 0.75;
  font-size: 0.82rem;
}

.cost-item {
  padding: 1px 3px;
  border-radius: 4px;
  line-height: 1;
}

.cost-item.wood {
  color: var(--res-wood-text);
}

.cost-item.brick {
  color: var(--res-brick-text);
}

.cost-item.sheep {
  color: var(--res-sheep-text);
}

.cost-item.wheat {
  color: var(--res-wheat-text);
}

.cost-item.ore {
  color: var(--res-ore-text);
}

.btn-action:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn-action:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Dice */
.dice-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.die {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #fff, #e2e8f0);
  color: #000;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

@keyframes diceRoll {
  0% {
    transform: rotate(0deg) scale(1) translateY(0);
  }

  25% {
    transform: rotate(-15deg) scale(1.1) translateY(-5px);
  }

  50% {
    transform: rotate(15deg) scale(1.1) translateY(0);
  }

  75% {
    transform: rotate(-15deg) scale(1.1) translateY(-5px);
  }

  100% {
    transform: rotate(0deg) scale(1) translateY(0);
  }
}

.die.rolling {
  animation: diceRoll 0.25s infinite;
  color: var(--accent-gold);
  background: linear-gradient(135deg, #fff, #fef08a);
}

/* Dice Skins */
.die.die-ruby {
  background: linear-gradient(135deg, #ef4444, #991b1b) !important;
  color: #ffffff !important;
  border: 2px solid #f87171 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.die.die-fire {
  background: linear-gradient(135deg, #ff6b00, #b91c1c) !important;
  color: #fef08a !important;
  border: 2px solid #f97316 !important;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.8), inset 0 -3px 0 rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 0 8px rgba(254, 240, 138, 0.8) !important;
}

.die.die-gold {
  background: linear-gradient(135deg, #fef08a, #d97706) !important;
  color: #451a03 !important;
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.8), inset 0 -3px 0 rgba(120, 53, 15, 0.4) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.die.die-neon {
  background: linear-gradient(135deg, #06b6d4, #7c3aed) !important;
  color: #ffffff !important;
  border: 2px solid #22d3ee !important;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.8), inset 0 -3px 0 rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.9) !important;
}

.die.die-cosmic {
  background: linear-gradient(135deg, #3b0764, #1e1b4b) !important;
  color: #e9d8fd !important;
  border: 2px solid #a855f7 !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.8), inset 0 -3px 0 rgba(0, 0, 0, 0.5) !important;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.9) !important;
}

/* Hide helper */
.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Global Modal Overlays */
.game-overlay,
.friends-modal-overlay,
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(2, 6, 23, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.game-overlay.hidden,
.friends-modal-overlay.hidden,
.modal-overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- CUSTOM ROOM LOBBY STYLES --- */
.lobby-action-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

.lobby-action-row .btn-accent {
  width: 100%;
}

.join-room-box {
  display: flex;
  gap: 8px;
  width: 100%;
}

.join-room-box input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  color: var(--text-main);
  padding: 12px;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  outline: none;
}

.join-room-box button {
  flex-shrink: 0;
  padding: 12px 20px;
  font-size: 1rem;
}

.join-room-box input:focus {
  border-color: var(--accent-teal);
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.room-lobby-main {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  padding: 16px 20px 50px 20px;
  box-sizing: border-box;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.room-code-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 20px;
  background: rgba(20, 25, 35, 0.7);
  border: 1px solid rgba(255, 190, 59, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box;
}

.room-code-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.room-code-title span {
  color: var(--accent-gold);
  letter-spacing: 3px;
}

.room-share-actions {
  display: flex;
  gap: 8px;
}

.room-share-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.85rem;
  border-radius: 10px;
  min-height: 40px;
  white-space: nowrap;
}

.room-lobby-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(360px, 1fr);
  gap: 20px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.room-players-card,
.room-config-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.94));
  border: 1px solid rgba(255, 190, 59, 0.3);
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (max-width: 768px) {
  .room-code-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .room-share-actions {
    width: 100%;
  }

  .room-share-actions button {
    flex: 1;
  }

  .room-lobby-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .room-lobby-main {
    padding: 10px 8px 40px 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .room-players-card,
  .room-config-card {
    padding: 14px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

.players-lobby-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lobby-player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 40, 55, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 20px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  width: 100%;
  box-sizing: border-box;
}

.lobby-player-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 190, 59, 0.3);
  background: rgba(40, 50, 70, 0.7);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.lobby-player-item.bot {
  border-color: rgba(0, 210, 196, 0.2);
  color: var(--accent-teal);
}

.btn-remove-bot {
  background: rgba(255, 74, 90, 0.15);
  color: var(--accent-danger);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 0;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-bot:hover {
  background: var(--accent-danger);
  color: #fff;
}

.lobby-bot-controls {
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.lobby-bot-controls button {
  width: 100%;
  min-height: 48px;
}

.config-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.config-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.config-group select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  color: var(--text-main);
  padding: 12px;
  font-size: 16px;
  /* Prevent iOS zoom */
  font-family: inherit;
  min-height: 48px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
}

.config-group select:focus {
  border-color: var(--accent-teal);
  outline: 3px solid var(--accent-gold);
  /* WCAG 2.4.7 Focus Visible */
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.4);
}

select option {
  background-color: #1e2837;
  /* Solid dark background for contrast */
  color: #ffffff;
  font-weight: 500;
}

.lobby-start-controls {
  margin-top: 16px;
}

.lobby-start-controls button {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
}

/* Persistent Chat Notification Pulse Animation */
.btn-nav-chat.chat-notify-pulse,
#dock-toggle-chat.chat-notify-pulse,
#toggle-chat.chat-notify-pulse {
  animation: chatBadgePulse 1.2s infinite ease-in-out !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.85), inset 0 0 8px rgba(251, 191, 36, 0.45) !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(217, 119, 6, 0.55)) !important;
  color: #ffffff !important;
}

@keyframes chatBadgePulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
  }

  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 14px rgba(251, 191, 36, 1));
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
  }
}

/* --- SHOP & COLLECTION RESPONSIVE CARDS SYSTEM --- */
#shop-items-grid,
#collection-items-grid {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 0 !important;
}

#collection-items-grid.test-mode,
#collection-items-grid[data-tab="test"] {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
}

.shop-card-hex {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-height: 215px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.shop-card-hex:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

/* Rarities */
.shop-card-hex.rarity-rare {
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2) !important;
}

.shop-card-hex.rarity-epic {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.25) !important;
}

.shop-card-hex.rarity-legendary {
  border-color: rgba(251, 191, 36, 0.7) !important;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3) !important;
}

.shop-card-hex.state-equipped {
  border-color: #10b981 !important;
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.16), rgba(15, 23, 42, 0.98)) !important;
}

/* Action Buttons */
.btn-shop-action {
  width: 100% !important;
  padding: 8px 6px !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
  text-align: center !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

.btn-shop-action.btn-buy {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #000 !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35) !important;
}

.btn-shop-action.btn-buy:hover {
  filter: brightness(1.1) !important;
  transform: scale(1.02) !important;
}

.btn-shop-action.btn-equip {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35) !important;
}

.btn-shop-action.btn-equip:hover {
  filter: brightness(1.1) !important;
  transform: scale(1.02) !important;
}

.btn-shop-action.btn-active {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
  border: 1px solid #10b981 !important;
  cursor: default !important;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {

  #shop-items-grid,
  #collection-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)) !important;
    gap: 8px !important;
  }

  .shop-card-hex {
    min-height: 195px !important;
    padding: 10px 8px !important;
    border-radius: 14px !important;
  }

  .btn-shop-action,
  .btn-equip-collection {
    padding: 7px 4px !important;
    font-size: 0.74rem !important;
  }
}

/* --- FRIEND ONLINE DISCREET POPUP --- */
.friend-online-popup {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
  border: 1.5px solid rgba(52, 211, 153, 0.6);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(52, 211, 153, 0.2);
  backdrop-filter: blur(12px);
  animation: friendPopupSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  max-width: 340px;
}

.friend-online-popup.dismissing {
  animation: friendPopupSlideOut 0.3s ease forwards;
}

.friend-online-popup .popup-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 2px solid #34d399;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.friend-online-popup .popup-info {
  flex: 1;
  min-width: 0;
}

.friend-online-popup .popup-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.88rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-online-popup .popup-badge {
  font-size: 0.7rem;
  color: #34d399;
  font-weight: 700;
}

.friend-online-popup .popup-sub {
  font-size: 0.74rem;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-online-popup .popup-btn-invite {
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
  transition: transform 0.15s ease;
}

.friend-online-popup .popup-btn-invite:hover {
  transform: scale(1.04);
}

.friend-online-popup .popup-btn-close {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.friend-online-popup .popup-btn-close:hover {
  color: #fca5a5;
}

@keyframes friendPopupSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes friendPopupSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
}

/* --- HUD GOLD CHOICE BAR — Modo Mina de Oro (Inline HUD) --- */
.hud-gold-choice-bar {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(20, 12, 0, 0.97), rgba(50, 28, 0, 0.97));
  border: 2px solid var(--accent-gold);
  border-radius: 18px;
  padding: 10px 12px;
  z-index: 90;
  box-shadow: 0 0 24px var(--gold-glow), 0 8px 30px rgba(0, 0, 0, 0.7);
  animation: goldBarSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@keyframes goldBarSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hud-gold-choice-bar.hidden {
  display: none !important;
}

.hud-gold-choice-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-gold-choice-title {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--accent-gold-bright, #F5C842);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-shadow: 0 0 12px var(--gold-glow);
}

.hud-gold-choice-options {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.btn-gold-choice-option {
  flex: 1;
  padding: 10px 4px;
  font-size: 1.35rem;
  border-radius: 12px;
  border: 1.5px solid rgba(212, 160, 23, 0.35);
  background: rgba(212, 160, 23, 0.1);
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-gold-choice-option:hover,
.btn-gold-choice-option:active {
  background: rgba(212, 160, 23, 0.3);
  border-color: var(--accent-gold);
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 4px 16px var(--gold-glow);
}

.btn-gold-choice-option.wood {
  border-color: var(--res-wood-border);
  background: var(--res-wood-bg);
}

.btn-gold-choice-option.brick {
  border-color: var(--res-brick-border);
  background: var(--res-brick-bg);
}

.btn-gold-choice-option.sheep {
  border-color: var(--res-sheep-border);
  background: var(--res-sheep-bg);
}

.btn-gold-choice-option.wheat {
  border-color: var(--res-wheat-border);
  background: var(--res-wheat-bg);
}

.btn-gold-choice-option.ore {
  border-color: var(--res-ore-border);
  background: var(--res-ore-bg);
}

/* Gold glow pulse on in-gold-mode state of the HUD */
.my-resources-hud.in-gold-mode {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  box-shadow: 0 0 20px var(--gold-glow);
  transition: outline 0.2s ease, box-shadow 0.2s ease;
}

/* --- GOLD CHOICE OVERLAY STYLES --- */

.game-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 19, 26, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.overlay-content {
  background: var(--bg-secondary);
  border: 2px solid var(--accent-gold);
  box-shadow: 0 0 30px rgba(255, 190, 59, 0.2);
  border-radius: 24px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.overlay-content h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-gold);
}

.overlay-content p {
  color: var(--text-main);
  font-size: 1rem;
}

.gold-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.btn-gold-option {
  padding: 14px;
  font-size: 0.95rem;
  color: #fff;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-gold-option:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.1);
}

.btn-gold-option.wood {
  background: var(--res-wood-bg);
  border-color: var(--res-wood-border);
  color: var(--res-wood-text);
}

.btn-gold-option.brick {
  background: var(--res-brick-bg);
  border-color: var(--res-brick-border);
  color: var(--res-brick-text);
}

.btn-gold-option.sheep {
  background: var(--res-sheep-bg);
  border-color: var(--res-sheep-border);
  color: var(--res-sheep-text);
}

.btn-gold-option.wheat {
  background: var(--res-wheat-bg);
  border-color: var(--res-wheat-border);
  color: var(--res-wheat-text);
}

.btn-gold-option.ore {
  background: var(--res-ore-bg);
  border-color: var(--res-ore-border);
  color: var(--res-ore-text);
}

.progress-bar-container {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
  margin-top: 10px;
}

.progress-bar {
  background: var(--accent-gold);
  height: 100%;
  width: 100%;
}

.progress-bar.animating {
  animation: progressShrink 3s linear forwards;
}

@keyframes progressShrink {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

/* Selected option in multi-select action choice */
.btn-gold-option.selected {
  border: 2px solid var(--accent-gold);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
  transform: scale(1.05);
}

/* --- TRADE OVERLAY STYLES (MOBILE FIRST) --- */
.trade-content {
  max-width: 680px;
  width: 95%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trade-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trade-modal-header h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent-gold);
  margin: 0;
}

.btn-close-modal {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-close-modal:hover {
  background: rgba(239, 68, 68, 0.8);
  border-color: #ef4444;
}

/* Visual Trade Summary Card */
.trade-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.4);
}

.summary-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.give-box .summary-label {
  color: #f87171;
}

.want-box .summary-label {
  color: #4ade80;
}

.summary-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  align-items: center;
}

.empty-text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.summary-badge {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-badge.wood {
  background: var(--res-wood-bg);
  border-color: var(--res-wood-border);
}

.summary-badge.brick {
  background: var(--res-brick-bg);
  border-color: var(--res-brick-border);
}

.summary-badge.sheep {
  background: var(--res-sheep-bg);
  border-color: var(--res-sheep-border);
}

.summary-badge.wheat {
  background: var(--res-wheat-bg);
  border-color: var(--res-wheat-border);
}

.summary-badge.ore {
  background: var(--res-ore-bg);
  border-color: var(--res-ore-border);
}

.summary-arrow {
  font-size: 1.6rem;
  color: var(--accent-gold);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

/* Quick Presets Bar */
.trade-presets-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.presets-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.btn-preset {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 5px 12px;
  border-radius: 18px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-preset:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.btn-preset-clear {
  margin-left: auto;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.btn-preset-clear:hover {
  background: rgba(239, 68, 68, 0.35);
  color: #fff;
}

/* Layout for Give and Want sections */
.trade-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: rgba(0, 0, 0, 0.2);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 640px) {
  .trade-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.trade-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trade-side h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.give-side h3 {
  color: #f87171;
}

.want-side h3 {
  color: #4ade80;
}

.trade-selectors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trade-res-control {
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: all 0.2s ease;
  min-height: 48px;
}

.trade-res-control.wood {
  background: var(--res-wood-bg);
  border-color: var(--res-wood-border);
}

.trade-res-control.brick {
  background: var(--res-brick-bg);
  border-color: var(--res-brick-border);
}

.trade-res-control.sheep {
  background: var(--res-sheep-bg);
  border-color: var(--res-sheep-border);
}

.trade-res-control.wheat {
  background: var(--res-wheat-bg);
  border-color: var(--res-wheat-border);
}

.trade-res-control.ore {
  background: var(--res-ore-bg);
  border-color: var(--res-ore-border);
}

.trade-ctrl-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-trade-dec,
.btn-trade-inc {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #fff;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  touch-action: manipulation;
}

.btn-trade-dec:hover,
.btn-trade-inc:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.06);
}

.btn-trade-dec:active,
.btn-trade-inc:active {
  transform: scale(0.92);
}

.res-info-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.res-emoji-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.res-my-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.res-my-count .my-amt {
  color: var(--accent-gold);
}

.btn-trade-dec:disabled,
.btn-trade-inc:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.05);
}

.trade-amt {
  font-size: 1.15rem;
  font-weight: 800;
  min-width: 24px;
  text-align: center;
}

.bank-valid-glow {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6) !important;
  animation: pulseCardLimit 1.5s infinite ease-in-out;
}

.trade-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
}

.trade-actions button {
  flex: 1 1 180px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 12px;
  padding: 8px 14px;
  box-sizing: border-box;
}

.dev-cards-hud {
  position: absolute;
  top: 104px;
  right: 60px;
  bottom: auto;
  left: auto;
  transform: none;
  width: 400px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 14px 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dev-cards-hud.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -30px);
}

/* --- BUILDINGS HUD --- */
.buildings-hud {
  position: absolute;
  top: 60px;
  right: 60px;
  bottom: auto;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 85;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  transition: all 0.3s ease;
}

.buildings-hud.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(30px);
}

.buildings-list {
  display: flex;
  gap: 15px;
}

.building-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.1rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.hud-header {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hud-cards-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 4px !important;
}

.hud-dev-card {
  position: relative;
  width: 100px;
  height: 140px;
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease, box-shadow 0.3s ease;
}

.hud-dev-card:hover:not(.locked):not(.played) {
  transform: translateY(-12px) scale(1.08);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(251, 191, 36, 0.2);
  border-color: var(--accent-gold);
}

/* Card Glow Effect */
.card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.card-emoji {
  font-size: 2rem;
  margin-top: 4px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.card-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.card-desc {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
  padding: 0 4px;
}

/* Card Themes */
.card-knight {
  background: radial-gradient(circle at center, #1e293b, #0f172a);
  border-color: rgba(99, 102, 241, 0.25);
}

.card-road {
  background: radial-gradient(circle at center, #064e3b, #022c22);
  border-color: rgba(16, 185, 129, 0.25);
}

.card-plenty {
  background: radial-gradient(circle at center, #78350f, #451a03);
  border-color: rgba(245, 158, 11, 0.25);
}

.card-monopoly {
  background: radial-gradient(circle at center, #581c87, #3b0764);
  border-color: rgba(168, 85, 247, 0.25);
}

.card-vp {
  background: radial-gradient(circle at center, #14532d, #052e16);
  border-color: rgba(34, 197, 94, 0.25);
}

/* Played State */
.hud-dev-card.played {
  opacity: 0.4;
  filter: grayscale(80%);
  cursor: default;
  pointer-events: none;
}

.played-badge {
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.1);
}

/* Locked State */
.hud-dev-card.locked {
  opacity: 0.7;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.05);
}

.card-status-badge {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  position: absolute;
  bottom: 8px;
}

.locked-badge {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

/* --- TOAST NOTIFICATIONS SYSTEM --- */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100000;
  pointer-events: none;
  max-width: 90vw;
}

@media (max-width: 768px) {
  #toast-container {
    top: 14px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 420px;
    align-items: center;
  }
}

.toast {
  background: rgba(15, 23, 42, 0.95);
  color: white;
  padding: 12px 18px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  transform: translateY(-120%);
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.toast.success {
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(34, 197, 94, 0.25);
  background: rgba(15, 23, 42, 0.95);
}

.toast.warning {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(251, 191, 36, 0.25);
}

.toast.danger,
.toast.error {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.25);
}

.toast.show {
  transform: translateY(0);
}

.toast.hide {
  transform: translateY(-120%);
  opacity: 0;
}

/* --- FLOATING CANCEL ACTION BUTTON --- */
.floating-cancel-action {
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  pointer-events: auto;
}

.btn-cancel-mode {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.95));
  color: #ffffff;
  border: 1.5px solid #fca5a5;
  padding: 10px 22px;
  border-radius: 24px;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5), 0 0 15px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-cancel-mode:active {
  transform: scale(0.95);
}

.bank-resources-hud {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 16, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid var(--accent-gold);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(251, 191, 36, 0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 320px;
  max-width: 90vw;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
}

.bank-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.bank-label {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.btn-close-hud {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #a0aec0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-close-hud:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fff;
  border-color: #ef4444;
  transform: rotate(90deg);
}

.bank-res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  width: 100%;
}

.bank-res-grid .res-card-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bank-res-grid .res-card-hud:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.bank-res-grid .res-card-hud.wood {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(15, 23, 42, 0.9));
}

.bank-res-grid .res-card-hud.brick {
  border-color: rgba(234, 88, 12, 0.5);
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.2), rgba(15, 23, 42, 0.9));
}

.bank-res-grid .res-card-hud.sheep {
  border-color: rgba(132, 204, 22, 0.5);
  background: linear-gradient(135deg, rgba(132, 204, 22, 0.2), rgba(15, 23, 42, 0.9));
}

.bank-res-grid .res-card-hud.wheat {
  border-color: rgba(234, 179, 8, 0.5);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(15, 23, 42, 0.9));
}

.bank-res-grid .res-card-hud.ore {
  border-color: rgba(129, 140, 248, 0.5);
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.2), rgba(15, 23, 42, 0.9));
}

.bank-res-grid .res-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.3px;
}

.bank-res-grid .res-count {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-gold);
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 10px;
  border-radius: 8px;
}



.player-card-compact {
  flex: 1 1 0px;
  min-width: 175px;
  max-width: 250px;
  border-radius: 14px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Color theme borders & subtle background tint (Color visible ONLY on border and subtle background tint) */
.player-card-compact.red {
  border: 1.5px solid rgba(239, 68, 68, 0.7);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(239, 68, 68, 0.14) 100%);
}

.player-card-compact.red.active-turn {
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6), inset 0 0 8px rgba(239, 68, 68, 0.2) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(239, 68, 68, 0.24) 100%) !important;
}

.player-card-compact.blue {
  border: 1.5px solid rgba(59, 130, 246, 0.7);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(59, 130, 246, 0.14) 100%);
}

.player-card-compact.blue.active-turn {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.6), inset 0 0 8px rgba(59, 130, 246, 0.2) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(59, 130, 246, 0.24) 100%) !important;
}

.player-card-compact.green {
  border: 1.5px solid rgba(34, 197, 94, 0.7);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(34, 197, 94, 0.14) 100%);
}

.player-card-compact.green.active-turn {
  border-color: #22c55e !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.6), inset 0 0 8px rgba(34, 197, 94, 0.2) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(34, 197, 94, 0.24) 100%) !important;
}

.player-card-compact.orange {
  border: 1.5px solid rgba(249, 115, 22, 0.7);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(249, 115, 22, 0.14) 100%);
}

.player-card-compact.orange.active-turn {
  border-color: #f97316 !important;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.6), inset 0 0 8px rgba(249, 115, 22, 0.2) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(249, 115, 22, 0.24) 100%) !important;
}

.player-card-compact.yellow,
.player-card-compact.white {
  border: 1.5px solid rgba(234, 179, 8, 0.7);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(234, 179, 8, 0.14) 100%);
}

.player-card-compact.yellow.active-turn,
.player-card-compact.white.active-turn {
  border-color: #eab308 !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.6), inset 0 0 8px rgba(234, 179, 8, 0.2) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(234, 179, 8, 0.24) 100%) !important;
}

/* Row 1: Header Identity & Timer */
.player-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.player-card-identity {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.player-color-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.player-color-dot.blue {
  background-color: #3b82f6;
  box-shadow: 0 0 6px #3b82f6;
}

.player-color-dot.red {
  background-color: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}

.player-color-dot.orange {
  background-color: #f97316;
  box-shadow: 0 0 6px #f97316;
}

.player-color-dot.white,
.player-color-dot.yellow {
  background-color: #eab308;
  box-shadow: 0 0 6px #eab308;
}

.player-color-dot.green {
  background-color: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.player-user-tag {
  font-size: 0.82rem;
  line-height: 1;
  flex-shrink: 0;
}

.player-card-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.player-timer-pill {
  font-size: 0.72rem;
  font-weight: 800;
  font-family: monospace;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 1px 6px;
  border-radius: 12px;
  flex-shrink: 0;
}

.player-timer-pill.my-turn {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(74, 222, 128, 0.4);
}

/* Row 2: Main Stats Badges */
.player-card-stats-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  flex-wrap: nowrap;
}

.player-vp-badge {
  font-size: 0.76rem;
  font-weight: 900;
  color: #fde047;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(180, 83, 9, 0.22));
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(250, 204, 21, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.cards-count-badge {
  font-size: 0.74rem;
  font-weight: 800;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.res-over-limit-badge {
  font-size: 0.74rem;
  font-weight: 800;
  color: #fef08a;
  background: rgba(239, 68, 68, 0.35);
  border: 1px solid rgba(239, 68, 68, 0.6);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
  animation: overLimitPulse 1.5s infinite ease-in-out;
}

@keyframes overLimitPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.03);
  }
}

.special-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.special-card-badge.road-badge {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fef3c7;
  border: 1px solid #f59e0b;
}

.special-card-badge.army-badge {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fee2e2;
  border: 1px solid #ef4444;
}

/* Row 3: Pieces Strip */
.player-card-pieces-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.piece-item {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.piece-item b {
  color: #ffffff;
  font-weight: 800;
}

@keyframes badgePulse {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.06);
    filter: brightness(1.25);
  }
}

.dev-card-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-gold);
  margin: 8px 0 4px 0;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.dev-card-section-title.played-section {
  color: #94a3b8;
  border-bottom-color: rgba(148, 163, 184, 0.2);
  margin-top: 12px;
}

.turn-status-banner {
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.turn-status-banner.my-turn-banner {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
  color: #34d399;
}

.turn-timer-mono {
  font-family: monospace;
  font-weight: 800;
}

.timer-progress-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: rgba(15, 23, 42, 0.8);
  z-index: 1000;
  pointer-events: none;
}

.timer-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-teal), #60a5fa);
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.8);
  transition: width 1s linear, background 0.3s ease;
}

/* Prominent Setup Action Banner — Positioned neatly below players top bar */
.setup-action-banner {
  position: relative;
  margin: 4px auto 0 auto;
  width: fit-content;
  max-width: 90vw;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(96, 165, 250, 0.6);
  border-radius: 24px;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(59, 130, 246, 0.3);
  z-index: 65;
  animation: bannerGlowPulse 2s infinite ease-in-out;
  pointer-events: auto !important;
  white-space: nowrap;
}

@keyframes bannerGlowPulse {

  0%,
  100% {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 12px rgba(59, 130, 246, 0.3);
  }

  50% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 22px rgba(96, 165, 250, 0.6);
  }
}

.setup-banner-icon {
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.setup-banner-text {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.setup-banner-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: #93c5fd;
}

/* Floating 3D Dice HUD */
.floating-dice-hud {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.92);
  padding: 3px 6px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 55;
  cursor: pointer;
  height: 52px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Glowing/shining state when it's your turn to roll */
.floating-dice-hud:not(.disabled) {
  border-color: rgba(251, 191, 36, 0.9);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: diceGlowPulse 1.8s infinite ease-in-out;
}

@keyframes diceGlowPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
    border-color: rgba(251, 191, 36, 0.6);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 22px rgba(251, 191, 36, 0.85);
    border-color: rgba(251, 191, 36, 1);
    transform: scale(1.04);
  }
}

.floating-dice-hud:hover:not(.disabled) {
  border-color: #f59e0b;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px) scale(1.03);
}

.floating-dice-hud.disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* Individual 3D Die Cube Styles */
.floating-dice-hud .die {
  width: 38px;
  height: 38px;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f1f5f9 65%, #cbd5e1 100%);
  color: #0f172a;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  font-size: 1.45rem;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5), inset 0 -4px 0 rgba(0, 0, 0, 0.15), inset 0 2px 2px #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.15s ease;
}

.floating-dice-hud .die.rolling {
  animation: rollAnimation 0.18s infinite alternate;
  background: radial-gradient(circle at 35% 35%, #fffde7 0%, #fef08a 65%, #eab308 100%);
  color: #78350f;
}

@keyframes rollAnimation {
  0% {
    transform: rotate(-12deg) scale(0.92);
  }

  100% {
    transform: rotate(12deg) scale(1.08);
  }
}

/* Top HUD Bar with Black-to-Transparent Top-to-Bottom Gradient */
.game-hud-top {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  z-index: 100;
  box-shadow: none !important;
  gap: 10px;
  box-sizing: border-box;
}

.hud-top-left,
.hud-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ⬡ Hexagonal HUD Icon Buttons */
.btn-hud-icon,
.btn-nav-social {
  width: 48px;
  height: 48px;
  min-width: 48px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: #0f172a !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  color: #ffffff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
  flex-shrink: 0;
  box-shadow: none !important;
}

.btn-hud-icon:hover,
.btn-hud-icon:active,
.btn-nav-social:hover {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  color: #0f172a !important;
  border: none !important;
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.6));
}

/* (Old duplicate top-bank-bar styling removed) */



.phase-badge {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Timer progress bar */
.timer-progress-container {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 195;
  pointer-events: none;
}

.timer-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transition: width 1s linear;
}



.player-card-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 0.78rem;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
  height: 32px;
}

.player-card-compact.active-turn {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.cards-count-badge,
.res-over-limit-badge {
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

.turn-status-banner {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  margin-left: 4px;
}

/* Long-press Feedback pulse for Fast Trade */
.res-card-hud.holding-press {
  animation: cardPressPulse 0.4s infinite alternate ease-in-out !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.7) !important;
}

@keyframes cardPressPulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.08);
  }
}

/* Container for right-side panels to prevent overlapping */
.right-panels-container {
  position: absolute;
  top: 104px;
  right: 14px;
  width: 320px;
  max-height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  z-index: 300;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Main Board Area Wrapper */
.game-layout {
  position: relative;
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
}

.board-area {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* =========================================
   FLOATING ROBBER PLACEMENT HUD NOTICE
   ========================================= */
.robber-notice-hud {
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: rgba(26, 15, 10, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.25);
  pointer-events: none;
  animation: robberNoticePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.robber-notice-hud.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.robber-notice-pulse-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
  animation: pulseDot 1.2s infinite ease-in-out;
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.5;
  }
}

.robber-notice-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.robber-notice-title {
  font-size: 0.92rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.robber-notice-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

@keyframes robberNoticePop {
  0% {
    transform: translate(-50%, -15px) scale(0.9);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}

/* Custom scrollbar for right-panels-container */
.right-panels-container::-webkit-scrollbar {
  width: 4px;
}

.right-panels-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Ensure individual HUDs style correctly when inside the container */
.right-panels-container .logs-hud,
.right-panels-container .buildings-hud,
.right-panels-container .dev-cards-hud {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  max-height: none !important;
  pointer-events: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.right-panels-container .logs-hud.hidden,
.right-panels-container .buildings-hud.hidden,
.right-panels-container .dev-cards-hud.hidden,
.my-resources-hud.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.bank-label {
  color: #fbbf24;
  /* amber-400 */
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-right: 4px;
}

.bank-res {
  padding: 3px 6px;
  border-radius: 10px;
  min-width: 45px;
}

.hud-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 1.1rem;
  padding: 0 4px;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.my-resources-hud:hover .hud-drag-handle {
  opacity: 1;
  color: var(--accent-gold);
}

.my-resources-hud {
  position: absolute;
  bottom: 20px;
  left: 20px;
  top: auto;
  transform: none;
  background: rgba(10, 18, 32, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 8px 12px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  z-index: 80;
  display: flex;
  gap: 8px;
  align-items: center;
  transition: bottom 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.my-resources-hud.is-dragging {
  cursor: grabbing !important;
  user-select: none !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 190, 59, 0.4) !important;
  z-index: 9999 !important;
}

.my-resources-hud.user-dragged {
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
  transition: opacity 0.3s ease !important;
}

/* =========================================
   BOTTOM ACTION BAR — Floating toolbar
   ========================================= */
.action-bar-bottom {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: calc(50% - 30px);
  min-height: 72px;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(6, 10, 20, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  z-index: 50;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Right actions group: Tirar Dados + Pasar Turno inline */
.action-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.action-bar-right .btn-primary,
.action-bar-right .btn-secondary {
  height: 42px;
  /* Matching the dice height */
  padding: 0 16px;
  font-size: 0.88rem;
  white-space: nowrap;
  border-radius: 12px;
}

/* Glowing/shining state for Pass Turn button when active */
#btn-end-turn:not(:disabled) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  /* Vibrant Emerald Green */
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: passGlowPulse 1.8s infinite ease-in-out;
  cursor: pointer;
  font-weight: 700;
}

#btn-end-turn:not(:disabled):hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
  transform: translateY(-1px);
}

@keyframes passGlowPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.7);
    transform: scale(1.03);
  }
}

/* --- PASS TURN INACTIVITY REMINDER (7s+ Idle on Turn) --- */
.pass-btn-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pass-turn-reminder-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  left: auto;
  transform: none;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid #fbbf24;
  border-radius: 20px;
  padding: 4px 10px;
  color: #fde68a;
  font-weight: 800;
  font-size: 0.74rem;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(251, 191, 36, 0.35);
  pointer-events: none;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 5px;
  animation: passReminderFloat 2s infinite ease-in-out;
  max-width: min(180px, calc(100vw - 20px));
}

.pass-turn-reminder-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 22px;
  left: auto;
  transform: none;
  border-width: 5px;
  border-style: solid;
  border-color: #fbbf24 transparent transparent transparent;
}

.pass-turn-reminder-bubble.hidden {
  display: none !important;
  opacity: 0 !important;
}

@keyframes passReminderFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

#btn-end-turn.remind-pass-pulse:not(:disabled) {
  animation: passReminderAttention 1.2s infinite ease-in-out !important;
  border-color: #fbbf24 !important;
}

@keyframes passReminderAttention {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.8), 0 0 15px rgba(16, 185, 129, 0.5);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(251, 191, 36, 0), 0 0 24px rgba(251, 191, 36, 0.7);
    transform: scale(1.08);
  }
}

/* Vertical separator */
.action-bar-sep {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  margin: 0 4px;
}

/* Build buttons group */
.action-bar-builds {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex: 1;
}

.action-bar-builds .btn-action {
  height: 44px;
  padding: 0 12px;
  font-size: 0.82rem;
  flex-shrink: 0;
  border-radius: 10px;
  white-space: nowrap;
}


/* Each resource tactile playing card in the HUD */
.res-card-hud {
  position: relative;
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 64px;
  height: 86px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
  overflow: hidden;
  user-select: none;
}

/* Card Top Gloss Overlay */
.res-card-hud::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 13px 13px 0 0;
  pointer-events: none;
}

.res-card-hud:hover {
  transform: translateY(-6px) scale(1.08);
  z-index: 10;
}

/* Zero vs Has-Cards State */
.res-card-hud.is-zero {
  opacity: 0.55;
  filter: grayscale(0.35);
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.res-card-hud.has-cards {
  opacity: 1;
  filter: none;
  transform: scale(1);
}

/* Color themes per resource */
.res-card-hud.wood {
  background: linear-gradient(160deg, #15803d 0%, #166534 50%, #052e16 100%);
  border-color: rgba(74, 222, 128, 0.35);
}

.res-card-hud.wood.has-cards {
  border-color: #22c55e;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.res-card-hud.brick {
  background: linear-gradient(160deg, #c2410c 0%, #9a3412 50%, #431407 100%);
  border-color: rgba(251, 146, 60, 0.35);
}

.res-card-hud.brick.has-cards {
  border-color: #f97316;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.res-card-hud.sheep {
  background: linear-gradient(160deg, #65a30d 0%, #4d7c0f 50%, #1a2e05 100%);
  border-color: rgba(163, 230, 53, 0.35);
}

.res-card-hud.sheep.has-cards {
  border-color: #84cc16;
  box-shadow: 0 6px 20px rgba(132, 204, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.res-card-hud.wheat {
  background: linear-gradient(160deg, #d97706 0%, #b45309 50%, #451a03 100%);
  border-color: rgba(251, 191, 36, 0.35);
}

.res-card-hud.wheat.has-cards {
  border-color: #f59e0b;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.res-card-hud.ore {
  background: linear-gradient(160deg, #4f46e5 0%, #3730a3 50%, #1e1b4b 100%);
  border-color: rgba(129, 140, 248, 0.35);
}

.res-card-hud.ore.has-cards {
  border-color: #6366f1;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.res-card-hud.total {
  background: linear-gradient(160deg, #334155 0%, #1e293b 50%, #0f172a 100%);
  border-color: rgba(148, 163, 184, 0.35);
  margin-left: 4px;
}

.res-card-hud.total.has-cards {
  border-color: #94a3b8;
  box-shadow: 0 6px 20px rgba(148, 163, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.res-emoji {
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s ease;
}

.res-card-hud:hover .res-emoji {
  transform: scale(1.15) rotate(-3deg);
}

.res-hud-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.res-count-badge {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 2px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.res-count {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

.res-count.pop {
  transform: scale(1.6);
  color: var(--accent-gold);
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.9);
}

/* TOTAL CARD HUD & OVER-LIMIT RED ALERT */
.res-card-hud.total.exceeded-limit {
  background: linear-gradient(160deg, #991b1b 0%, #7f1d1d 50%, #450a0a 100%) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  animation: pulseCardLimit 0.9s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.res-count.exceeded-limit {
  color: #fef08a !important;
  text-shadow: 0 0 12px rgba(239, 68, 68, 1) !important;
  font-weight: 900 !important;
}

@keyframes pulseCardLimit {
  0% {
    transform: scale(1);
    border-color: #ef4444;
  }

  100% {
    transform: scale(1.08);
    border-color: #f87171;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.95), inset 0 0 10px rgba(248, 113, 113, 0.5);
  }
}

.res-over-limit {
  color: #ef4444 !important;
  font-weight: 800 !important;
  background: rgba(239, 68, 68, 0.22);
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.5);
  font-size: 0.75rem;
  animation: pulseOverLimitText 1.2s infinite alternate;
}

@keyframes pulseOverLimitText {
  0% {
    opacity: 0.85;
  }

  100% {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.8));
  }
}

/* =========================================
   RESPONSIVE — Scale UP from mobile base
   ========================================= */

/* Tablet (768px+) */
@media (min-width: 768px) {
  .app-header {
    padding: 16px 30px;
  }

  .logo {
    font-size: 1.8rem;
  }

  .lobby-main {
    padding: 24px 5%;
    gap: 22px;
  }

  .lobby-hero-card {
    padding: 40px 32px 36px;
  }

  .lobby-hero-card h2 {
    font-size: 2rem;
  }

  .lobby-hero-card p {
    font-size: 1rem;
  }

  .hero-badge {
    font-size: 0.76rem;
    padding: 4px 14px;
  }

  .btn-hero {
    padding: 16px 40px;
    font-size: 1.1rem;
  }

  .lobby-rooms-card {
    padding: 30px 28px;
  }

  .lobby-rooms-card h2 {
    font-size: 1.45rem;
  }

  .lobby-secondary {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .card {
    padding: 32px 28px;
    border-radius: 22px;
    gap: 18px;
  }

  .card h2 {
    font-size: 1.6rem;
  }

  .room-lobby-main {
    padding: 24px 30px;
  }

  .room-code-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
  }

  .room-code-title {
    font-size: 1.4rem;
  }

  .room-share-actions {
    width: auto;
  }

  .room-share-actions button {
    flex: none;
  }

  .room-lobby-layout {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .players-lobby-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .app-header {
    padding: 18px 40px;
  }

  .lobby-main {
    padding: 30px 8%;
    gap: 28px;
  }

  .lobby-hero-card {
    padding: 48px 40px;
  }

  .lobby-hero-card h2 {
    font-size: 2.4rem;
  }

  .lobby-hero-card p {
    font-size: 1.05rem;
  }

  .btn-hero {
    padding: 18px 48px;
    font-size: 1.2rem;
  }

  .lobby-rooms-card {
    padding: 36px 40px;
  }

  .lobby-rooms-card h2 {
    font-size: 1.6rem;
  }

  .lobby-secondary {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .card {
    padding: 36px;
    border-radius: 24px;
    gap: 20px;
  }

  .card h2 {
    font-size: 1.8rem;
  }

  .room-lobby-main {
    padding: 30px 40px;
  }

  .room-lobby-layout {
    gap: 32px;
  }

  .room-code-header {
    padding: 16px 24px;
    border-radius: 16px;
  }

  .room-code-title {
    font-size: 1.5rem;
  }
}

/* =========================================
   GAME SCREEN — Responsive (max-width)
   ========================================= */
@media (max-width: 1024px) {

  /* Panels become smaller on tablet */
  .game-sidebar {
    width: 145px;
    padding: 8px;
    gap: 6px;
  }

  .controls-sidebar {
    width: 200px;
    padding: 10px;
    gap: 8px;
  }

  .game-sidebar.collapsed {
    transform: translateX(calc(-145px - 20px));
  }

  .controls-sidebar.collapsed {
    transform: translateX(calc(200px + 20px));
  }

  .my-resources-hud {
    bottom: 15px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
  }

  #dev-cards-hud:not(.hidden)~.my-resources-hud {
    bottom: 120px;
  }
}

@media (max-width: 768px) {

  /* Toggles: Grouped cleanly at top edges */
  #toggle-players {
    top: 60px;
    left: 10px;
  }

  #toggle-dev-cards {
    top: 60px;
    right: 10px;
  }

  #toggle-buildings {
    top: 104px;
    right: 10px;
  }

  #toggle-logs {
    top: 148px;
    right: 10px;
  }

  #toggle-bank {
    top: 192px;
    right: 10px;
    left: auto !important;
  }

  /* Sidebars and HUDs: Compact floating modals next to toggles */
  .game-sidebar {
    width: 180px;
    max-width: calc(100vw - 70px);
    max-height: 260px;
    top: 60px;
    bottom: auto;
  }

  .dev-cards-hud:not(.right-panels-container *),
  .buildings-hud:not(.right-panels-container *),
  .logs-hud:not(.right-panels-container *) {
    width: 270px;
    max-width: calc(100vw - 70px);
    max-height: 260px;
    top: 60px;
    bottom: auto;
  }

  /* Right Panels Container on Mobile */
  .right-panels-container {
    width: 270px !important;
    max-width: calc(100vw - 70px) !important;
    right: 50px !important;
    top: 60px !important;
    bottom: auto !important;
    max-height: 380px !important;
    padding-right: 0 !important;
  }

  .right-panels-container .logs-hud,
  .right-panels-container .buildings-hud,
  .right-panels-container .dev-cards-hud {
    max-height: 320px !important;
    overflow-y: hidden !important;
  }

  .bank-resources-hud {
    width: auto;
    max-width: calc(100vw - 20px);
    max-height: 100px;
    top: 10px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    justify-content: center;
    z-index: 900;
    padding: 4px 8px !important;
    gap: 6px !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;
  }

  .bank-resources-hud .res-card-hud {
    min-width: unset !important;
    padding: 4px 8px !important;
  }

  .bank-resources-hud .bank-label {
    font-size: 0.75rem !important;
  }

  .game-sidebar {
    left: 50px;
  }

  .players-top-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .player-card-compact {
    flex: 1 1 0px !important;
    min-width: 0 !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
  }

  .setup-action-banner {
    padding: 6px 14px;
    margin-top: 4px;
  }

  .setup-banner-text {
    font-size: 0.8rem;
  }

  .setup-banner-sub {
    font-size: 0.72rem;
  }

  .dev-cards-hud:not(.right-panels-container *),
  .buildings-hud:not(.right-panels-container *),
  .logs-hud:not(.right-panels-container *) {
    right: 50px;
  }

  .game-sidebar h3 {
    display: none;
  }

  .game-sidebar.collapsed {
    transform: translateY(-200%);
    opacity: 0;
  }

  /* Bottom Actions: Unified Thumb Dock */
  .action-bar-bottom {
    overflow: visible !important;
    max-height: none !important;
  }

  .action-bar-middle {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .action-bar-middle button {
    flex: 1;
    height: 44px;
    box-sizing: border-box;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 12px;
  }

  .action-bar-right {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .action-bar-right button,
  .action-bar-right .floating-dice-hud {
    flex: 1;
    height: 44px;
    box-sizing: border-box;
  }

  .action-bar-builds {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 5px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .action-bar-sep {
    display: none;
  }

  /* My Resources: Anchored just above the action bar for constant visibility */
  .my-resources-hud {
    top: auto;
    bottom: 126px;
    /* Sits right on top of action-bar (action-bar ends at ~116px) */
    left: 10px;
    width: calc(100% - 20px);
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 5px;
    padding: 8px;
    border-radius: 16px;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
  }

  body.build-menu-open .my-resources-hud {
    bottom: 345px !important;
    /* Shift up to sit on top of build menu */
  }

  .res-card-hud {
    min-width: unset;
    height: 68px;
    padding: 4px 2px;
    flex: 1;
    align-items: center;
  }

  .res-hud-label {
    font-size: 0.5rem;
    letter-spacing: 0.2px;
    line-height: 1;
  }

  .res-emoji {
    font-size: 1.15rem;
  }

  .res-count-badge {
    padding: 1px 4px;
    min-width: 22px;
    border-radius: 8px;
  }

  .res-count {
    font-size: 0.9rem;
  }

  /* App Headers: already mobile-first, minor tweaks */
  .app-header {
    margin-bottom: 0 !important;
  }

  .logo {
    font-size: 1.3rem !important;
  }

  .user-stats-bar {
    gap: 5px !important;
  }

  .stat-badge {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    border-radius: 12px !important;
  }

  #btn-leave-room {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }

  /* Build Menu Popup on mobile */
  .build-menu-popup {
    width: 280px;
    max-width: calc(100vw - 20px);
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6);
    padding: 8px;
    gap: 6px;
    border-radius: 12px;
    z-index: 950;
  }

  .build-menu-popup .btn-action {
    height: 38px;
    font-size: 0.8rem;
    padding: 0 10px;
  }

  /* Trade overlay mobile adjustments */
  .trade-content {
    padding: 16px !important;
    max-width: 340px !important;
  }

  .trade-layout {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 10px !important;
  }

  .trade-side {
    width: 100% !important;
    gap: 8px !important;
  }

  .trade-side h3 {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
    text-align: center !important;
  }

  .trade-selectors {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .trade-res-control {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 8px !important;
    min-height: 38px !important;
    font-size: 0.9rem !important;
  }

  .btn-trade-dec,
  .btn-trade-inc {
    width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
  }

  .trade-center {
    font-size: 1.8rem !important;
    margin: 4px 0 !important;
    transform: rotate(90deg) !important;
    /* Rotate arrows for vertical layout */
  }

  /* Removed conflicting .game-hud-top here */

  .game-hud-top .btn-danger {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
  }



  .game-hud-top .phase-badge {
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
  }

  /* Right Panels Container: ensure 3 panels fit and don't overflow */
  .right-panels-container {
    width: 280px !important;
    max-width: calc(100vw - 20px) !important;
    right: 10px !important;
    /* align near toggles */
    top: 60px !important;
    bottom: auto !important;
    max-height: calc(100vh - 200px) !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    z-index: 990 !important;
  }

  .right-panels-container .logs-hud,
  .right-panels-container .buildings-hud,
  .right-panels-container .dev-cards-hud {
    max-height: 340px !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    border-width: 1px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .right-panels-container .buildings-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  .right-panels-container .building-item {
    font-size: 0.9rem !important;
    padding: 4px 8px !important;
    gap: 4px !important;
  }

  .right-panels-container .hud-cards-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    padding: 6px 2px !important;
  }

  .right-panels-container .hud-dev-card {
    flex-shrink: 0 !important;
    min-width: 85px !important;
    width: 85px !important;
    scroll-snap-align: start !important;
    height: 115px !important;
    padding: 6px 4px !important;
    gap: 2px !important;
    font-size: 0.7rem !important;
    border-radius: 10px !important;
  }

  .right-panels-container .hud-dev-card .card-emoji {
    font-size: 1.2rem !important;
  }

  .right-panels-container .hud-dev-card .card-title {
    font-size: 0.75rem !important;
    font-weight: bold !important;
  }

  .right-panels-container .hud-dev-card .card-desc {
    display: none !important;
    /* Hide description on mobile to save space */
  }

  .right-panels-container .hud-dev-card .played-badge {
    font-size: 0.55rem !important;
    padding: 1px 4px !important;
  }
}

/* ==========================================================================
   MODERN UI REDESIGN — Top Header, Player Cards Bar & Touch Controls
   ========================================================================== */

/* Top HUD Controls */
.hud-top-left,
.hud-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-hud-icon {
  background: #0f172a !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  color: #fff;
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none !important;
}

.btn-hud-icon:hover {
  background: #1e293b !important;
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 10px rgba(56, 189, 248, 0.5));
}

/* ROW 3: Dedicated Full-Width Top Bank Stock Bar (Transparent Floating Row) */
.top-bank-bar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 6px 14px;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer;
  user-select: none;
  z-index: 200 !important;
  position: relative !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none !important;
}

.top-bank-bar * {
  pointer-events: auto !important;
}

.top-bank-bar:hover {
  background: transparent !important;
}

/* Hide horizontal player cards bar when user clicks top HUD toggle */
#game-screen.top-bar-hidden .players-top-bar {
  display: none !important;
}

.top-bank-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #f1f5f9;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.top-bank-emoji {
  font-size: 0.9rem;
}

/* Detailed Bank Grid Modal */
.bank-res-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.bank-res-grid .res-card-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}



/* Player Compact Card */
.player-card-compact {
  flex: 1;
  min-width: 175px;
  max-width: 260px;
  background: rgba(15, 23, 42, 0.82);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

/* Color theme borders */
.player-card-compact.red {
  border-left: 4px solid #ef4444;
}

.player-card-compact.blue {
  border-left: 4px solid #3b82f6;
}

.player-card-compact.green {
  border-left: 4px solid #10b981;
}

.player-card-compact.orange {
  border-left: 4px solid #f97316;
}



.player-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.player-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.player-card-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cards-count-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 10px;
}

.res-over-limit-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  padding: 1px 6px;
  border-radius: 10px;
  animation: pulseWarning 1.5s infinite ease-in-out;
}

@keyframes pulseWarning {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.player-card-stats-row {
  display: flex;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  margin-top: 2px;
}

.player-card-pieces-row {
  display: flex;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  margin-top: 1px;
}

.turn-status-banner {
  margin-top: 4px;
  background: rgba(59, 130, 246, 0.25);
  border: 1px solid rgba(96, 165, 250, 0.5);
  color: #93c5fd;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.turn-status-banner.my-turn-banner {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.5), rgba(59, 130, 246, 0.7));
  color: #ffffff;
  border-color: #60a5fa;
}

.turn-status-banner.waiting-banner {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  justify-content: center;
  box-shadow: none;
}

.turn-timer-mono {
  font-family: monospace;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}

/* Floating Left Circular Actions */
.floating-left-actions {
  position: absolute;
  bottom: 85px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 12;
}

.btn-circle-action {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.btn-circle-action:hover {
  background: rgba(30, 41, 59, 0.95);
  transform: scale(1.08);
  border-color: var(--accent-gold);
}

/* Bottom Action Bar Controls */
.action-bar-right-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-action-round {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}

.btn-action-round.trade {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #60a5fa;
}

.btn-action-round.devcard {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-color: #a78bfa;
}

.btn-action-round.debug {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border-color: #f87171;
}

.btn-action-round.pass {
  background: linear-gradient(135deg, #d97706, #b45309);
  border-color: #fbbf24;
}

.btn-action-round:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.btn-action-round:active:not(:disabled) {
  transform: scale(0.95);
}

.btn-action-round:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

/* ---------- Game Logs HUD ---------- */
.logs-hud {
  position: absolute;
  top: 16px;
  right: 60px;
  width: 320px;
  background: var(--surface-glass);
  backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 12px;
  color: var(--text-light);
  font-size: 0.9rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 15;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.logs-hud.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}

.logs-hud:not(.hidden) {
  pointer-events: auto;
}

.logs-list {
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.logs-list::-webkit-scrollbar {
  width: 4px;
}

.logs-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.log-item {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 6px;
  border-left: 3px solid var(--accent-gold);
  line-height: 1.3;
  animation: popIn 0.3s ease;
}

.log-item .log-turn {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 2px;
  display: block;
}

/* Build Menu Popup */
.build-menu-popup {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  left: auto;
  transform: none;
  background: rgba(10, 16, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 250px;
  z-index: 100;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(251, 191, 36, 0.2);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.build-menu-popup.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.95);
}

.build-menu-popup .btn-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.build-menu-popup .btn-action:hover:not(:disabled) {
  background: rgba(255, 215, 0, 0.15);
  border-color: var(--accent-gold);
  transform: translateX(3px);
  color: var(--accent-gold);
}

.build-menu-popup .btn-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.build-cost {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cost-item {
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* Prominent Setup Placement Banner (Positioned naturally below bank bar) */
.setup-action-banner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 8px auto !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 6px 18px !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1.5px solid var(--accent-gold) !important;
  border-radius: 30px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  width: fit-content !important;
  max-width: 92vw !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  pointer-events: auto !important;
}

.setup-action-banner.my-turn {
  border-color: #38bdf8 !important;
  background: rgba(15, 23, 42, 0.98) !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.45), 0 6px 20px rgba(0, 0, 0, 0.7) !important;
  animation: none !important;
}

.setup-banner-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.setup-banner-text {
  font-size: 0.9rem;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setup-banner-sub {
  font-size: 0.8rem;
  color: var(--accent-gold);
  font-weight: 600;
  white-space: nowrap;
}

.btn-nav-banner {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

.btn-nav-banner:hover {
  background: rgba(56, 189, 248, 0.32);
  border-color: #38bdf8;
}

.btn-nav-banner.banner-off {
  background: rgba(100, 116, 139, 0.2);
  border-color: rgba(148, 163, 184, 0.3);
  color: #94a3b8;
}

.setup-action-banner.banner-collapsed {
  display: none !important;
}

.top-bank-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 4px 16px !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  z-index: 55 !important;
  position: relative !important;
  cursor: pointer !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.top-bank-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

.top-bank-item:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 600px) {
  .setup-action-banner {
    top: 50px;
    padding: 8px 14px;
    gap: 6px;
  }

  .setup-banner-icon {
    font-size: 1.2rem;
  }

  .setup-banner-text {
    font-size: 0.8rem;
  }

  .setup-banner-sub {
    font-size: 0.75rem;
  }
}

/* Discard Overlay & Selectors Grid */
.discard-selectors-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  width: 100%;
}

.discard-selectors-grid .trade-res-control {
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.discard-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: #38bdf8;
}

/* =========================================
   GAME OVERLAYS & FLOATING HUD PANELS
   ========================================= */

.game-overlay {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 8, 16, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.game-overlay.hidden {
  display: none !important;
}

.overlay-content {
  background: rgba(10, 18, 32, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #ffffff;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal-compact {
  max-width: 440px;
  width: 100%;
}

.trade-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 14px;
}

.trade-modal-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fbbf24;
  margin: 0;
}

.btn-close-modal,
.btn-close-hud {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-close-modal:hover,
.btn-close-hud:hover {
  background: rgba(239, 68, 68, 0.8);
  color: #ffffff;
  transform: scale(1.1);
}

.right-panels-container>* {
  pointer-events: auto;
}

.dev-cards-hud,
.logs-hud {
  background: rgba(10, 18, 32, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.75);
  color: #ffffff;
  max-height: 50vh;
  overflow-y: auto;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.dev-cards-hud.hidden,
.logs-hud.hidden {
  display: none !important;
}

.hud-header {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}

.buildings-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.building-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.logs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 0.85rem;
  color: #cbd5e1;
}

.log-entry {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border-left: 3px solid #fbbf24;
  line-height: 1.35;
}

/* Bank detail grid */
.bank-res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.bank-res {
  height: 70px !important;
  min-width: unset !important;
  padding: 6px !important;
}

/* =========================================
   MOBILE RESPONSIVE OVERRIDES
   ========================================= */

@media (max-width: 768px) {

  /* 1. TOP HUD HEADER (Fixed Top - Fits inside 360px+ screens without overflow) */
  /* 1. TOP HUD HEADER (Fixed Top) */
  .hud-top-nav-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
  }

  #game-phase-indicator {
    display: none !important;
  }

  #btn-bank-mobile {
    display: flex !important;
  }

  /* Top Header Exit & Action Buttons */
  #btn-exit-game,
  .game-hud-top .btn-hud-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    background: #0f172a !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
  }

  .game-hud-top .btn-hud-icon:hover,
  #btn-exit-game:hover {
    transform: translateY(-2px) !important;
    background: #1e293b !important;
    filter: drop-shadow(0 4px 10px rgba(251, 191, 36, 0.5)) !important;
  }

  #btn-exit-game .btn-text {
    display: none !important;
  }

  #btn-exit-game .btn-icon {
    display: block !important;
    font-size: 1.35rem !important;
  }



  .timer-progress-container {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    z-index: 1000 !important;
    background: rgba(0, 0, 0, 0.5) !important;
  }

  /* 2. PLAYERS LIST TOP BAR (Fixed under Header - Transparent) */
  .players-top-bar {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 10px !important;
    gap: 8px !important;
    z-index: 100 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  .player-card-compact {
    flex-shrink: 0 !important;
    min-width: 200px !important;
    max-width: 260px !important;
    height: auto !important;
    min-height: 86px !important;
    font-size: 0.86rem !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }

  .player-card-name {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  .vp-badge-circle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 1.2rem !important;
    border-width: 2px !important;
  }

  .cards-count-badge {
    font-size: 0.8rem !important;
    padding: 2px 7px !important;
    font-weight: 700 !important;
  }

  .player-card-stats-row {
    font-size: 0.8rem !important;
    gap: 10px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
  }

  .player-card-pieces-row {
    font-size: 0.76rem !important;
    gap: 8px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600 !important;
  }

  /* 3. PROMPT BANNER & POPUPS (Positioned naturally below Bank Bar) */
  .setup-action-banner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: fit-content !important;
    max-width: calc(100vw - 24px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    z-index: 50 !important;
    margin: 6px auto !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.96), rgba(15, 23, 42, 0.98)) !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.35) !important;
    backdrop-filter: blur(12px) !important;
    pointer-events: auto !important;
  }

  .right-panels-container {
    position: fixed !important;
    top: 158px !important;
    right: 8px !important;
    left: auto !important;
    width: min(320px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 280px) !important;
    z-index: 950 !important;
  }

  .bank-resources-hud {
    position: fixed !important;
    top: 158px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(340px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 280px) !important;
    z-index: 950 !important;
    padding: 8px 12px !important;
  }



  .res-card-hud {
    padding: 3px 6px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    height: auto !important;
  }

  .res-emoji {
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
    line-height: 1 !important;
  }

  .res-hud-label {
    font-size: clamp(0.48rem, 1.7vw, 0.6rem) !important;
    letter-spacing: 0.2px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .res-count-badge {
    padding: 2px 4px !important;
    min-width: 18px !important;
    border-radius: 8px !important;
  }

  .res-count {
    font-size: clamp(0.95rem, 3.2vw, 1.2rem) !important;
    font-weight: 900 !important;
  }

  /* 5. ACTION BAR BOTTOM — full-width bottom dock */
  .action-bar-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 8px 12px 12px !important;
    gap: 7px !important;
    z-index: 900 !important;
    background: rgba(9, 17, 32, 0.97) !important;
    backdrop-filter: blur(22px) !important;
    border-radius: 20px 20px 0 0 !important;
    border-top: 1.5px solid rgba(251, 191, 36, 0.28) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.8) !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }


  .action-bar-bottom::-webkit-scrollbar {
    display: none !important;
  }

  .action-bar-left-controls,
  .action-bar-right-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }



  .action-bar-right-controls .btn-action-round {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 16px !important;
    font-size: 1.45rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }

  .action-bar-right-controls .btn-action-round:not([disabled]):hover {
    transform: translateY(-3px) scale(1.06) !important;
    filter: brightness(1.2) !important;
  }

  .action-bar-right-controls #btn-buy-dev-card {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.4) !important;
  }

  .action-bar-right-controls #btn-end-turn {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    border: 2px solid #a78bfa !important;
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.4) !important;
  }

  #btn-roll-dice,
  #btn-pass-turn {
    height: 52px !important;
    min-height: 52px !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
  }

  #floating-dice {
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  #floating-dice .die {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.55rem !important;
    line-height: 48px !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.9) !important;
    transition: all 0.2s ease !important;
  }



  #floating-dice:not(.disabled):hover .die {
    transform: scale(1.08) rotate(-4deg) !important;
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.6) !important;
  }

  /* Floating Left Actions (Logs icon) */
  .floating-left-actions {
    position: fixed !important;
    bottom: 152px !important;
    left: 10px !important;
    z-index: 880 !important;
  }

  /* Mobile Container Responsiveness Fixes */
  .overlay-content {
    max-width: 95vw !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 14px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .lobby-main {
    padding: 12px 10px !important;
    gap: 16px !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .card,
  .lobby-hero-card,
  .lobby-rooms-card,
  .profile-card,
  .leaderboard-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: min-content !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 18px 14px !important;
    margin-bottom: 0 !important;
  }

  .lobby-hero-card h2 {
    font-size: 1.35rem !important;
    margin: 4px 0 6px 0 !important;
    line-height: 1.25 !important;
  }

  .lobby-hero-card p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .btn-hero {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
  }

  .profile-details-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .recovery-row,
  .join-room-box,
  .input-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .recovery-row input,
  .join-room-box input,
  .input-row input {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .leaderboard-table-container {
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hud-panel,
  .bank-resources-hud,
  .dev-cards-hud,
  .buildings-hud,
  .logs-hud {
    max-height: calc(100vh - 240px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 480px) {
  .phase-badge {
    display: none !important;
  }

  .btn-hud-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 1.05rem !important;
    border-radius: 10px !important;
  }

  #btn-exit-game {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .action-bar-bottom {
    padding: 7px 10px 11px !important;
    height: auto !important;
    min-height: 0 !important;
  }


  .action-bar-right-controls .btn-action-round {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 1.1rem !important;
    border-radius: 10px !important;
  }

  #floating-dice .die {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.15rem !important;
    line-height: 36px !important;
    border-radius: 8px !important;
  }

  .btn-trade-dec,
  .btn-trade-inc {
    width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
    line-height: 26px !important;
  }
}

/* =========================================
   UI SCALE & COLLAPSE CONTROLS
   ========================================= */

/* Top Bar Hidden Mode (Ocultar Barra Superior) */
#game-screen.top-bar-hidden .players-top-bar {
  display: none !important;
}

#game-screen.top-bar-hidden .setup-action-banner {
  top: 52px !important;
}

#game-screen.top-bar-hidden .right-panels-container {
  top: 52px !important;
}

#game-screen.top-bar-hidden .bank-resources-hud {
  top: 52px !important;
}

/* UI Scale: Small (Pequeño - 85%) */
#game-screen.ui-scale-sm .game-hud-top {
  transform: scale(0.95);
  transform-origin: top center;
}

#game-screen.ui-scale-sm .players-top-bar {
  transform: scale(0.95);
  transform-origin: top center;
  top: 40px !important;
}

#game-screen.ui-scale-sm .my-resources-hud:not(.user-dragged) {
  transform: scale(1.1);
  transform-origin: bottom center;
}

#game-screen.ui-scale-sm .action-bar-bottom {
  transform: scale(0.85);
  transform-origin: bottom center;
}

/* UI Scale: Large (Grande - 115%) */
#game-screen.ui-scale-lg .game-hud-top {
  transform: scale(1.15);
  transform-origin: top center;
}

#game-screen.ui-scale-lg .players-top-bar {
  transform: scale(1.15);
  transform-origin: top center;
  top: 54px !important;
}

#game-screen.ui-scale-lg .my-resources-hud:not(.user-dragged) {
  transform: scale(1.15);
  transform-origin: bottom center;
}

#game-screen.ui-scale-lg .action-bar-bottom {
  transform: scale(1.15);
  transform-origin: bottom center;
}

/* =========================================
   BRAND LOGO ACCENT & BUTTON COLOR SYSTEM
   ========================================= */
.btn-hud-icon {
  background: #0f172a !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
}

.btn-hud-icon:hover {
  border: none !important;
  filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.5)) !important;
}

.btn-hud-icon.panel-open,
.btn-hud-icon:active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 60%, #78350f 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  border: none !important;
  filter: drop-shadow(0 4px 14px rgba(217, 119, 6, 0.65)) !important;
}

.btn-action-round {
  background: rgba(10, 19, 36, 0.94) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  transition: all 0.25s ease !important;
}

.btn-action-round:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.5) !important;
}

.btn-action-round.active,
.btn-action-round:active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 60%, #78350f 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  border: 1.5px solid #fde047 !important;
  box-shadow: 0 0 18px rgba(217, 119, 6, 0.65) !important;
}

/* =========================================
   ACHIEVEMENT TOAST BANNER & VICTORY MODAL
   ========================================= */
.achievement-toast-banner {
  position: fixed !important;
  top: 66px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 12px 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96)) !important;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4), 0 0 20px rgba(245, 158, 11, 0.3) !important;
  animation: toastBannerSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  width: 95vw !important;
  max-width: 95vw !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.achievement-toast-banner.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes toastBannerSlideIn {
  0% {
    transform: translate(-50%, -40px) scale(0.85);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}

.achievement-toast-icon {
  font-size: 2.2rem;
  animation: crownPulse 1.2s infinite ease-in-out;
}

@keyframes crownPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18);
  }
}

.achievement-toast-title {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fbbf24;
  letter-spacing: 0.5px;
}

.achievement-toast-desc {
  font-size: 0.82rem;
  color: #ffffff;
  font-weight: 600;
}

/* Victory & Game Over Modal — Fits 100% in viewport without scrolling */
/* ==========================================================================
   IMPERIAL VICTORY & GAME OVER MODAL — LUXURY GLASSMORPHISM & RESPONSIVE
   ========================================================================== */

#game-over-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: rgba(8, 12, 22, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#game-over-overlay.hidden {
  display: none !important;
}

.game-over-modal-imperial {
  position: relative !important;
  width: min(640px, calc(100vw - 20px)) !important;
  max-width: 640px !important;
  height: min(92vh, 820px) !important;
  max-height: 92vh !important;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 29, 0.99) 100%) !important;
  border: 2px solid rgba(251, 191, 36, 0.65) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 50px rgba(251, 191, 36, 0.25), inset 0 0 35px rgba(251, 191, 36, 0.06) !important;
  border-radius: 28px !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: victoryPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* Dedicated internal scrollable body that never gets covered by buttons */
.game-over-scroll-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 24px 20px 20px 20px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Custom sleek scrollbar for victory modal scroll body */
.game-over-scroll-body::-webkit-scrollbar {
  width: 6px;
}

.game-over-scroll-body::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
}

.game-over-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(251, 191, 36, 0.4);
  border-radius: 8px;
}

.game-over-scroll-body::-webkit-scrollbar-thumb:hover {
  background: rgba(251, 191, 36, 0.7);
}

@keyframes victoryPopIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(40px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.victory-close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #94a3b8 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  z-index: 15 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.victory-close-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #fff !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  transform: rotate(90deg) scale(1.1) !important;
}

/* Grand Victory Header */
.victory-header-imperial {
  position: relative;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.victory-glow-rays {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  background: conic-gradient(from 0deg at 50% 50%, rgba(251, 191, 36, 0.12) 0deg, transparent 45deg, rgba(251, 191, 36, 0.12) 90deg, transparent 135deg, rgba(251, 191, 36, 0.12) 180deg, transparent 225deg, rgba(251, 191, 36, 0.12) 270deg, transparent 315deg, rgba(251, 191, 36, 0.12) 360deg);
  border-radius: 50%;
  pointer-events: none;
  animation: rotateRays 25s linear infinite;
  z-index: 1;
}

@keyframes rotateRays {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

.victory-glow-center {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 120px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.victory-crown-badge {
  font-size: 3.6rem;
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
  display: inline-block;
  animation: victoryCrownPulse 2.4s infinite ease-in-out;
  filter: drop-shadow(0 0 25px rgba(251, 191, 36, 0.95));
}

@keyframes victoryCrownPulse {

  0%,
  100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 25px rgba(251, 191, 36, 0.9));
  }

  50% {
    transform: scale(1.1) translateY(-4px);
    filter: drop-shadow(0 0 45px rgba(251, 191, 36, 1));
  }
}

.victory-title-imperial {
  position: relative;
  z-index: 2;
  font-family: 'Cinzel', serif, system-ui;
  font-weight: 900;
  font-size: 1.85rem;
  margin: 0;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #ffffff 10%, #fbbf24 85%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(251, 191, 36, 0.5));
}

.victory-subtitle-imperial {
  position: relative;
  z-index: 2;
  font-size: 0.88rem;
  color: #cbd5e1;
  margin: 6px 0 0 0;
  font-weight: 700;
  line-height: 1.35;
  max-width: 480px;
}

/* Winner Spotlight Card */
.winner-spotlight-card {
  position: relative;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.45);
  border-radius: 20px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(251, 191, 36, 0.08);
}

.winner-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(217, 119, 6, 0.4));
  border: 2px solid #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

.winner-avatar-icon {
  font-size: 1.7rem;
}

.winner-avatar-glow {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px dashed rgba(251, 191, 36, 0.6);
  animation: rotateRays 12s linear infinite;
}

.winner-info-wrap {
  flex: 1;
  min-width: 0;
}

.winner-tag {
  font-size: 0.65rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
}

.winner-player-name {
  font-size: 1rem !important;
  font-weight: 900;
  color: #ffffff;
  margin: 2px 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.winner-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.winner-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 800;
}

.winner-stat-pill.secondary {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

/* Animated Rewards & Trophies Banner (Stacked vertically) */
.victory-rewards-banner {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.reward-box {
  background: rgba(30, 41, 59, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reward-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.reward-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.reward-box.trophy-reward {
  border-color: rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(30, 41, 59, 0.85) 100%);
}

.reward-box.gold-reward {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(30, 41, 59, 0.85) 100%);
}

.reward-icon-wrap {
  font-size: 1.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
}

.reward-text-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.reward-label {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reward-value-animated {
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
  flex-shrink: 0;
  margin-left: 8px;
}

.reward-value-animated.trophy-val {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.reward-value-animated.gold-val {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

/* Match Statistics Grid */
.game-stats-card-imperial {
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  width: 100%;
  box-sizing: border-box;
}

.stats-header-title {
  font-size: 0.82rem;
  font-weight: 900;
  color: #fbbf24;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.stats-header-icon {
  font-size: 1rem;
}

.stats-grid-imperial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.stat-box-imperial {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.stat-box-imperial:hover {
  border-color: rgba(251, 191, 36, 0.35);
}

.stat-box-left {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.stat-ico {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.stat-lbl {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-val {
  font-size: 0.88rem;
  font-weight: 900;
  color: #ffffff;
  flex-shrink: 0;
  margin-left: 4px;
}

.stat-val.highlight-cyan {
  color: #38bdf8;
}

.stat-val.highlight-gold {
  color: #fbbf24;
}

/* Gaussian Dice Distribution Chart */
.dice-chart-wrapper-imperial {
  width: 100%;
  margin-bottom: 14px;
  box-sizing: border-box;
}

/* Match Scoreboard Table */
.match-players-table-imperial {
  width: 100%;
  margin-bottom: 16px;
  box-sizing: border-box;
}

/* Docked Action Footer (Stacked Vertically) */
.game-over-footer-imperial {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 20px 14px 20px !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(10, 15, 29, 0.99) 100%) !important;
  border-top: 1.5px solid rgba(251, 191, 36, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

.btn-imperial-action {
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 0.92rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  letter-spacing: 0.5px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

.btn-imperial-action:hover {
  transform: translateY(-2px);
}

.btn-imperial-action:active {
  transform: translateY(1px);
}

.btn-imperial-lobby {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  color: #031826;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.45);
}

.btn-imperial-lobby:hover {
  box-shadow: 0 6px 24px rgba(56, 189, 248, 0.65);
}

.btn-imperial-play {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.45);
}

.btn-imperial-play:hover {
  box-shadow: 0 6px 24px rgba(34, 197, 94, 0.65);
}

/* Mobile Responsive Tweaks for Victory Modal */
@media (max-width: 640px) {
  #game-over-overlay {
    padding: 6px !important;
    align-items: center !important;
  }

  .game-over-modal-imperial {
    width: 100% !important;
    max-width: 100% !important;
    height: 96vh !important;
    max-height: 96vh !important;
    border-radius: 20px !important;
  }

  .game-over-scroll-body {
    padding: 16px 12px 14px 12px !important;
    gap: 10px !important;
  }

  .victory-crown-badge {
    font-size: 2.8rem;
    margin-bottom: 2px;
  }

  .victory-title-imperial {
    font-size: 1.45rem;
  }

  .victory-subtitle-imperial {
    font-size: 0.8rem;
  }

  .winner-spotlight-card {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 16px;
  }

  .winner-avatar-wrap {
    width: 44px;
    height: 44px;
  }

  .winner-avatar-icon {
    font-size: 1.4rem;
  }

  .winner-player-name {
    font-size: 1rem !important;
  }

  .winner-stat-pill {
    font-size: 0.7rem;
    padding: 2px 6px;
  }

  .stats-grid-imperial {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .stat-box-imperial {
    height: 36px;
    padding: 4px 8px;
  }

  .stat-lbl {
    font-size: 0.68rem;
  }

  .stat-val {
    font-size: 0.82rem;
  }

  .victory-rewards-banner {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .reward-box {
    padding: 8px 12px !important;
    border-radius: 12px;
    gap: 8px;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .reward-icon-wrap {
    font-size: 1.3rem;
  }

  .reward-label {
    font-size: 0.62rem;
  }

  .reward-value-animated {
    font-size: 0.95rem;
  }

  .game-over-footer-imperial {
    padding: 10px 12px 12px 12px !important;
    gap: 6px !important;
    flex-direction: column !important;
  }

  .btn-imperial-action {
    width: 100% !important;
    min-width: 0 !important;
    padding: 11px 12px !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 380px) {
  .victory-title-imperial {
    font-size: 1.25rem;
  }

  .btn-imperial-action {
    padding: 10px 10px !important;
    font-size: 0.8rem !important;
  }
}

/* =========================================
   MOBILE LEADERBOARD CARD VISIBILITY FIX
   ========================================= */
@media (max-width: 768px) {
  .leaderboard-card {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  .leaderboard-card .hex-card-inner {
    clip-path: none !important;
    border-radius: 22px !important;
    border: 2px solid rgba(245, 158, 11, 0.45) !important;
    padding: 18px 14px !important;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98)) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(245, 158, 11, 0.1) !important;
  }

  .leaderboard-card .hex-card-inner::after {
    display: none !important;
  }

  .leaderboard-table-container {
    max-height: 320px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    margin-top: 10px !important;
    border-radius: 14px !important;
    background: rgba(10, 16, 30, 0.75) !important;
  }


}

/* =========================================
   DICE 7 ANNOUNCEMENT BANNER
   ========================================= */
.dice-seven-banner {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(45, 10, 10, 0.94) 0%, rgba(20, 5, 5, 0.94) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(239, 68, 68, 0.65);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75), 0 0 25px rgba(239, 68, 68, 0.35);
  animation: diceSevenPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-width: 90vw;
  width: 440px;
}

.dice-seven-banner.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dice-seven-icon {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.8));
  animation: pulseSevenIcon 1s infinite alternate ease-in-out;
}

@keyframes pulseSevenIcon {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.18) rotate(5deg);
  }
}

.dice-seven-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dice-seven-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: #f87171;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.dice-seven-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
  font-weight: 500;
}

@keyframes diceSevenPop {
  0% {
    transform: translate(-50%, -20px) scale(0.88);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}

/* =========================================
   DEV CARD DRAWN MODAL OVERLAY
   ========================================= */
.dev-card-drawn-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: fadeIn 0.3s ease;
}

.dev-card-drawn-overlay.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dev-card-drawn-box {
  width: 320px;
  max-width: 90vw;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
  border: 2px solid #fbbf24;
  border-radius: 28px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(251, 191, 36, 0.4);
  animation: devCardPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes devCardPop {
  0% {
    transform: scale(0.7) translateY(30px);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.dev-card-drawn-badge {
  font-size: 0.76rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 1px;
  background: rgba(251, 191, 36, 0.15);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.dev-card-drawn-icon {
  font-size: 3.8rem;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.6));
  margin: 6px 0;
}

.dev-card-drawn-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: #ffffff;
}

.dev-card-drawn-desc {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.dev-card-drawn-footer {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 600;
}

/* =========================================
   HOLD-AND-DRAG QUICK BANK TRADE PICKER
   ========================================= */
/* ==========================================================================
   CENTERED RADIAL BANK TRADE SELECTOR WITH PROMINENT CANCEL BUTTON
   ========================================================================== */
.quick-trade-picker {
  position: fixed !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10000 !important;
  background: linear-gradient(145deg, rgba(13, 20, 38, 0.98), rgba(10, 14, 26, 0.99)) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 2px solid rgba(251, 191, 36, 0.75) !important;
  border-radius: 26px !important;
  padding: 14px 16px 16px 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(251, 191, 36, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(380px, calc(100vw - 28px)) !important;
  max-width: 380px !important;
  animation: quickPickerPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  touch-action: none !important;
  user-select: none !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.quick-trade-picker.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes quickPickerPop {
  0% {
    transform: translate(-50%, 14px) scale(0.92);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}

.radial-trade-header-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}

.radial-giving-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(251, 191, 36, 0.15) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.5) !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 0.82rem !important;
  color: #f8fafc !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.2) !important;
}

.giving-label {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.5px !important;
}

.giving-amount {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.giving-amount strong {
  font-weight: 900 !important;
  color: #fbbf24 !important;
  font-size: 0.95rem !important;
}

.giving-ratio-badge {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
}

.radial-prompt-text {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-align: center !important;
}

/* 4-Node 2x2 Grid + Central Cancel */
.quick-trade-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 2px 0 !important;
  box-sizing: border-box !important;
}

.quick-opt-btn.radial-node {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: rgba(30, 41, 59, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
  user-select: none !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
}

.quick-opt-btn.radial-node:hover,
.quick-opt-btn.radial-node.highlighted {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: #fbbf24 !important;
  background: rgba(45, 55, 75, 0.98) !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.45) !important;
}

.radial-node-icon {
  font-size: 1.55rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) !important;
}

.radial-node-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.radial-node-name {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.1 !important;
}

.radial-node-badge {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  color: #4ade80 !important;
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  padding: 0.5px 5px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
}

/* Distinct color accents for each resource node */
.quick-opt-btn.radial-node.wood {
  border-color: rgba(34, 197, 94, 0.35) !important;
}

.quick-opt-btn.radial-node.brick {
  border-color: rgba(239, 68, 68, 0.35) !important;
}

.quick-opt-btn.radial-node.sheep {
  border-color: rgba(168, 85, 247, 0.35) !important;
}

.quick-opt-btn.radial-node.wheat {
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.quick-opt-btn.radial-node.ore {
  border-color: rgba(100, 116, 139, 0.45) !important;
}

/* Central / Full-width Cancel Button */
.quick-opt-btn.radial-cancel-btn {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.5) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  margin-top: 4px !important;
  user-select: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.quick-opt-btn.radial-cancel-btn:hover,
.quick-opt-btn.radial-cancel-btn.highlighted {
  background: rgba(239, 68, 68, 0.32) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.radial-cancel-btn .cancel-icon {
  font-size: 1rem !important;
  line-height: 1 !important;
}

.radial-cancel-btn .cancel-label {
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  color: #fca5a5 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.quick-opt-btn .opt-label {
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  color: #e2e8f0 !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
}

/* High-Contrast Distinct Hover & Drag Highlight */
.quick-opt-btn.highlighted,
.quick-opt-btn:hover {
  transform: translateY(-18px) scale(1.26) rotate(0deg) !important;
  z-index: 10 !important;
  border-width: 2.5px !important;
}

.quick-opt-btn.wood.highlighted,
.quick-opt-btn.wood:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: #34d399 !important;
  box-shadow: 0 10px 30px rgba(52, 211, 153, 0.7) !important;
}

.quick-opt-btn.brick.highlighted,
.quick-opt-btn.brick:hover {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  border-color: #f87171 !important;
  box-shadow: 0 10px 30px rgba(248, 113, 113, 0.7) !important;
}

.quick-opt-btn.sheep.highlighted,
.quick-opt-btn.sheep:hover {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%) !important;
  border-color: #c084fc !important;
  box-shadow: 0 10px 30px rgba(192, 132, 252, 0.75) !important;
}

.quick-opt-btn.wheat.highlighted,
.quick-opt-btn.wheat:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border-color: #fde047 !important;
  box-shadow: 0 10px 30px rgba(253, 224, 71, 0.7) !important;
}

.quick-opt-btn.ore.highlighted,
.quick-opt-btn.ore:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 30px rgba(56, 189, 248, 0.7) !important;
}

.quick-opt-btn.cancel-opt.highlighted,
.quick-opt-btn.cancel-opt:hover {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.7) !important;
}

.quick-opt-btn.highlighted .opt-label {
  color: #ffffff !important;
  font-size: 0.72rem !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.quick-opt-btn.highlighted .opt-emoji {
  transform: scale(1.15) !important;
}

/* ==========================================================================
   PLATO / ANDROID / iOS NATIVE BOARD GAME UI — ERGONOMIC THUMB DOCK
   ========================================================================== */

/* Unified Bottom Ergonomic Dock (Floating at lower thumb reach) */
.action-bar-bottom {
  position: fixed !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(520px, calc(100vw - 12px)) !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  background: rgba(8, 14, 26, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 22px !important;
  padding: 8px 12px !important;
  z-index: 500 !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
}

/* My Resources Hand Cards embedded cleanly right above Dock */
.my-resources-hud {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 4px !important;
  justify-content: space-between !important;
  z-index: 10 !important;
  overflow: visible !important;
}

.my-resources-hud .res-card-hud {
  flex: 1 !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 2px 2px !important;
  border-radius: 12px !important;
  gap: 1px !important;
  touch-action: manipulation !important;
}

.my-resources-hud .res-emoji {
  font-size: 1.15rem !important;
}

.my-resources-hud .res-hud-label {
  font-size: 0.52rem !important;
  letter-spacing: 0.4px !important;
}

.my-resources-hud .res-count {
  font-size: 0.92rem !important;
}

/* Upper Row inside Bottom Dock (Mini Dev Cards HUD + 3D Dice Pair) */
.dock-upper-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0 4px !important;
}

.my-dev-cards-mini-hud {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(192, 132, 252, 0.3) !important;
  border-radius: 14px !important;
  padding: 4px 10px !important;
  min-height: 36px !important;
}

.mini-hud-label {
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  color: #c084fc !important;
  letter-spacing: 0.4px !important;
}

.mini-dev-cards-list {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.mini-dev-empty {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.mini-dev-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: rgba(126, 34, 206, 0.4) !important;
  border: 1px solid #c084fc !important;
  border-radius: 8px !important;
  padding: 2px 6px !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

/* Control Row inside Bottom Dock: Timer (Left) -> Dev Card -> Market -> Pass Turn (Right) */
.action-bar-right-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  justify-content: space-between !important;
}

/* Timer Box in Action Bar (Far Left) */
.timer-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(0, 210, 196, 0.4) !important;
  border-radius: 16px !important;
  padding: 8px 12px !important;
  min-width: 54px !important;
  height: 52px !important;
  box-sizing: border-box !important;
}



/* Tactile 3D Action Buttons */
.btn-action-round {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease !important;
  touch-action: manipulation !important;
  padding: 0 !important;
  position: relative !important;
}

.btn-action-round:active:not(:disabled) {
  transform: translateY(2px) scale(0.95) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.btn-action-round .btn-icon {
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

.btn-action-round .btn-label-sub {
  font-size: 0.54rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-top: 2px !important;
}

.btn-action-round.trade {
  background: linear-gradient(145deg, #0369a1, #075985) !important;
  border-color: #38bdf8 !important;
}

.btn-action-round.devcard {
  background: linear-gradient(145deg, #7e22ce, #6b21a8) !important;
  border-color: #c084fc !important;
}

.btn-action-round.pass {
  background: linear-gradient(145deg, #059669, #047857) !important;
  border-color: #34d399 !important;
}

.btn-action-round:disabled {
  opacity: 0.45 !important;
  filter: grayscale(0.6) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Floating 3D Dice Pair inside Thumb Dock Upper Row */
.floating-dice-hud {
  display: flex !important;
  gap: 6px !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  border-radius: 12px !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}

.floating-dice-hud:not(.disabled) {
  animation: diceGlowPulse 1.8s infinite ease-in-out !important;
}

@keyframes diceGlowPulse {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
  }

  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.95));
  }
}

.floating-dice-hud.disabled {
  opacity: 0.6 !important;
  cursor: default !important;
  animation: none !important;
}

.floating-dice-hud .die {
  width: 34px !important;
  height: 34px !important;
  background: linear-gradient(145deg, #ffffff, #e2e8f0) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}


/* --- FAST TRADE 1-SEC HOLD & SLIDE-TO-SELECT --- */
.res-card-hud.holding-press {
  animation: holdingPulse 1s ease-in-out forwards;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.8), inset 0 0 10px rgba(251, 191, 36, 0.4) !important;
  border-color: #fbbf24 !important;
  transform: scale(1.08) !important;
}

@keyframes holdingPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.05);
    filter: brightness(1.2);
  }

  100% {
    transform: scale(1.08);
    filter: brightness(1.4);
  }
}



/* --- DEV CARD DRAWN POPUP OVERLAY --- */
.dev-card-drawn-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-card-drawn-box {
  background: linear-gradient(145deg, #1e1b4b, #0f172a);
  border: 3px solid #fbbf24;
  border-radius: 24px;
  padding: 28px 24px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(251, 191, 36, 0.3);
  animation: devCardPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes devCardPop {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(30px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dev-card-drawn-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 900;
  color: #0f172a;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.dev-card-drawn-icon {
  font-size: 4rem;
  margin: 10px 0;
  filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.4));
  animation: floatIcon 2s infinite ease-in-out;
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.dev-card-drawn-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 8px;
  font-family: 'Cinzel', serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.dev-card-drawn-desc {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* --- DICE 7 / ROBBER PROMINENT BANNER --- */
.dice-seven-banner {
  position: fixed;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.95), rgba(69, 10, 10, 0.95));
  backdrop-filter: blur(12px);
  border: 2px solid #ef4444;
  border-radius: 16px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 92vw;
  width: 520px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(239, 68, 68, 0.3);
  animation: bannerSlideDown 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bannerSlideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.dice-seven-icon {
  font-size: 2.2rem;
  animation: pulseDice 1.5s infinite;
}

@keyframes pulseDice {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

.dice-seven-content {
  flex: 1;
}

.dice-seven-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: #fef2f2;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.dice-seven-desc {
  font-size: 0.82rem;
  color: #fca5a5;
  line-height: 1.35;
}



/* Ensure dice stay nicely anchored at the far right of upper dock */
#floating-dice,
.floating-dice-hud {
  margin-left: auto !important;
  z-index: 940 !important;
}

/* --- MINI TRADE ACTIVE WIDGET STYLING --- */

/* --- ROOM CONFIGURATION ACCESSIBILITY & HIGH-CONTRAST STYLING --- */
.room-config-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95)) !important;
  border: 2px solid rgba(251, 191, 36, 0.5) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(251, 191, 36, 0.2) !important;
}

.room-config-card h2 {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1.5px solid rgba(251, 191, 36, 0.3) !important;
  padding-bottom: 10px !important;
}

.config-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.config-group label {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  letter-spacing: 0.3px !important;
}

.config-group select {
  width: 100% !important;
  padding: 12px 14px !important;
  background: #0f172a !important;
  border: 2px solid rgba(251, 191, 36, 0.5) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  outline: none !important;
  cursor: pointer !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

.config-group select:focus,
.config-group select:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.config-group select option {
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 10px !important;
}

/* --- ULTRA-COMPACT CATAN ROAD RANGE SLIDER WITH HEXAGON THUMB --- */
.catan-turn-slider-group {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

.catan-slider-label {
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  display: block !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.2px !important;
}

.catan-road-slider-wrapper {
  position: relative !important;
  width: 100% !important;
  padding: 2px 0 !important;
}

/* Custom Catan Road Track Range Input */
.catan-road-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 18px !important;
  background: transparent !important;
  outline: none !important;
  cursor: pointer !important;
  margin: 2px 0 !important;
}

/* Track Styling (Compact Catan Road Texture) */
.catan-road-slider::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 14px !important;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 255, 255, 0.65) 10px, rgba(255, 255, 255, 0.65) 16px),
    linear-gradient(90deg, #9a3412 0%, #c2410c 50%, #ea580c 100%) !important;
  border: 1.5px solid #7c2d12 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 8px rgba(194, 65, 12, 0.25) !important;
  transition: all 0.2s ease !important;
}

.catan-road-slider::-moz-range-track {
  width: 100% !important;
  height: 14px !important;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 255, 255, 0.65) 10px, rgba(255, 255, 255, 0.65) 16px),
    linear-gradient(90deg, #9a3412 0%, #c2410c 50%, #ea580c 100%) !important;
  border: 1.5px solid #7c2d12 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 8px rgba(194, 65, 12, 0.25) !important;
  transition: all 0.2s ease !important;
}

/* Hexagon Thumb Button (Compact 24px) */
.catan-road-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 24px !important;
  height: 26px !important;
  margin-top: -6px !important;
  background: radial-gradient(circle at 35% 35%, #fef08a 0%, #fbbf24 55%, #b45309 100%) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  cursor: grab !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}

.catan-road-slider::-moz-range-thumb {
  width: 24px !important;
  height: 26px !important;
  background: radial-gradient(circle at 35% 35%, #fef08a 0%, #fbbf24 55%, #b45309 100%) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  border: none !important;
  cursor: grab !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}

.catan-road-slider::-webkit-slider-thumb:hover,
.catan-road-slider:focus::-webkit-slider-thumb {
  transform: scale(1.15) !important;
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(251, 191, 36, 0.8)) !important;
  cursor: grabbing !important;
}

.catan-road-slider::-moz-range-thumb:hover,
.catan-road-slider:focus::-moz-range-thumb {
  transform: scale(1.15) !important;
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(251, 191, 36, 0.8)) !important;
  cursor: grabbing !important;
}

/* Tick Steps underneath road slider */
.catan-slider-ticks {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 2px !important;
  padding: 0 2px !important;
}

.catan-tick-step,
.catan-tick-step-points,
.catan-tick-step-cards {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
  user-select: none !important;
  padding: 0 2px !important;
}

.catan-tick-step:hover,
.catan-tick-step-points:hover,
.catan-tick-step-cards:hover {
  color: #fbbf24 !important;
}

.catan-tick-step.active,
.catan-tick-step-points.active,
.catan-tick-step-cards.active {
  color: #fbbf24 !important;
  font-weight: 900 !important;
  transform: scale(1.1) !important;
  text-shadow: 0 0 5px rgba(251, 191, 36, 0.5) !important;
}

#btn-lobby-start-game {
  width: 100% !important;
  padding: 16px !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: 2px solid #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#btn-lobby-start-game:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.65) !important;
}

#btn-lobby-start-game:disabled {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   TOP GAME HUD HEADER BAR (Responsive & Distributed Controls)
   ========================================================================== */
.game-hud-top {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-left: max(12px, env(safe-area-inset-left)) !important;
  padding-right: max(12px, env(safe-area-inset-right)) !important;
  padding-bottom: 6px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 9990 !important;
  gap: 8px !important;
  pointer-events: auto !important;
}

.game-hud-top,
.hud-top-nav-row {
  pointer-events: auto !important;
}

.game-hud-top button,
.game-hud-top .btn-hud-top-nav,
.game-hud-top .btn-hud-icon,
.game-hud-top .phase-badge {
  pointer-events: auto !important;
  z-index: 9999 !important;
}

.hud-top-left,
.hud-top-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 9995 !important;
  pointer-events: auto !important;
}

.btn-hud-top-nav,
.game-hud-top .btn-hud-icon {
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 12px !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  outline: none !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 2px !important;
  white-space: nowrap !important;
  transition: transform 0.22s ease, background 0.22s ease, filter 0.22s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-select: none !important;
}

.btn-hud-top-nav .nav-label {
  display: none !important;
}

.btn-hud-top-nav:hover,
.game-hud-top .btn-hud-icon:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.2) !important;
}

.btn-hud-top-nav:active,
.game-hud-top .btn-hud-icon:active {
  transform: translateY(0) !important;
}

/* Color Themes for Header Navigation Buttons */
.btn-nav-settings {
  background: #0f172a !important;
  border: none !important;
  color: #f8fafc !important;
  filter: drop-shadow(0 2px 6px rgba(248, 250, 252, 0.2)) !important;
}

/* Social button — sky/blue accent */
.btn-nav-social {
  background: rgba(15, 23, 42, 0.95) !important;
  border: none !important;
  color: #38bdf8 !important;
  filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.4)) !important;
}

.btn-nav-social:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.6)) !important;
}

/* Chat button — teal/cyan accent */
.btn-nav-chat {
  background: rgba(15, 23, 42, 0.95) !important;
  border: none !important;
  color: #2dd4bf !important;
  filter: drop-shadow(0 2px 8px rgba(20, 184, 166, 0.4)) !important;
}

.btn-nav-chat:hover {
  background: rgba(20, 184, 166, 0.25) !important;
  filter: drop-shadow(0 4px 12px rgba(20, 184, 166, 0.6)) !important;
}

/* Logs/Events button — indigo/violet accent */
.btn-nav-logs {
  background: rgba(15, 23, 42, 0.95) !important;
  border: none !important;
  color: #a5b4fc !important;
  filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.4)) !important;
}

.btn-nav-logs:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.6)) !important;
}

/* Info/Rules button — amber/yellow */
.btn-nav-rules {
  background: rgba(15, 23, 42, 0.95) !important;
  border: none !important;
  color: #fbbf24 !important;
  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.4)) !important;
}

.btn-nav-rules:hover {
  background: rgba(251, 191, 36, 0.25) !important;
  filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.6)) !important;
}

.btn-nav-bank {
  background: rgba(15, 23, 42, 0.95) !important;
  border: none !important;
  color: #38bdf8 !important;
  filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.4)) !important;
}

.btn-nav-exit {
  background: rgba(15, 23, 42, 0.95) !important;
  border: none !important;
  color: #fca5a5 !important;
  filter: drop-shadow(0 2px 8px rgba(239, 68, 68, 0.4)) !important;
}


.top-bank-bar {
  position: relative !important;
  clear: both !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  padding: 4px 16px !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 95 !important;
  overflow-x: auto !important;
  pointer-events: none !important;
}

.top-bank-bar * {
  pointer-events: auto !important;
}

.top-bank-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  color: #e2e8f0 !important;
  white-space: nowrap !important;
}

/* Responsive breakpoint: shrink labels on narrow screens and keep touch targets generous */
@media (max-width: 900px) {
  .btn-hud-top-nav .nav-label {
    display: none !important;
  }

  .btn-hud-top-nav,
  .game-hud-top .btn-hud-icon {
    padding: 0 !important;
    min-width: 38px !important;
    max-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
    touch-action: manipulation !important;
  }
}

@media (max-width: 650px) {
  .game-hud-top {
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-left: max(6px, env(safe-area-inset-left)) !important;
    padding-right: max(6px, env(safe-area-inset-right)) !important;
    padding-bottom: 4px !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .hud-top-left,
  .hud-top-right {
    gap: 4px !important;
  }

  .btn-hud-top-nav,
  .game-hud-top .btn-hud-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    font-size: 1rem !important;
  }

  .top-bank-bar {
    padding: 2px 6px !important;
    gap: 4px !important;
  }

  .top-bank-item {
    font-size: 0.74rem !important;
    padding: 2px 6px !important;
  }
}

@media (max-width: 480px) {
  .game-hud-top {
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-left: max(4px, env(safe-area-inset-left)) !important;
    padding-right: max(4px, env(safe-area-inset-right)) !important;
    padding-bottom: 2px !important;
    gap: 2px !important;
  }

  .hud-top-left,
  .hud-top-right {
    gap: 3px !important;
  }

  .btn-hud-top-nav,
  .game-hud-top .btn-hud-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    font-size: 0.95rem !important;
    margin: 0 1px !important;
  }
}

/* ==========================================================================
   POPOVER DROPDOWN POSITIONING (Positioned directly underneath top buttons)
   ========================================================================== */
/* Permanently hide setup-action-banner (Aviso de Turno) */
#setup-action-banner {
  display: none !important;
}

/* ==========================================================================
   POPOVER / MODAL DROPDOWN POSITIONING
   ========================================================================== */
#rules-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#rules-overlay.hidden {
  display: none !important;
}

#rules-overlay .overlay-content {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  width: min(460px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
  background: rgba(15, 23, 42, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(251, 191, 36, 0.2) !important;
  animation: modalPopIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes popoverSlideDown {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   TRANSPARENT FULL-SCREEN OVERLAY & SLEEK FAST TRADE CONTAINER
   ========================================================================== */
#fast-trade-overlay.game-overlay,
#fast-trade-overlay {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#fast-trade-overlay.hidden {
  display: none !important;
}

/* Floating Glassmorphic Container for Fast Trade Content */
#fast-trade-overlay .overlay-content {
  pointer-events: auto !important;
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 20px !important;
  padding: 16px 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 25px rgba(251, 191, 36, 0.25) !important;
  max-width: min(480px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  margin: auto !important;
}

/* --- RESPONSIVE FAST TRADE BUTTONS & GRID --- */
.gold-options-grid,
#fast-trade-options {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 12px !important;
}

.btn-gold-option {
  width: 100% !important;
  padding: 12px 8px !important;
  border-radius: 14px !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(30, 41, 59, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.btn-gold-option:active {
  transform: scale(0.96);
}

.btn-gold-option.wood {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.btn-gold-option.brick {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.btn-gold-option.sheep {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.2);
  color: #e9d5ff;
}

.btn-gold-option.wheat {
  border-color: #eab308;
  background: rgba(234, 179, 8, 0.2);
  color: #fde047;
}

.btn-gold-option.ore {
  border-color: #94a3b8;
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}

.btn-gold-option.cancel,
.btn-gold-option.cancel-option {
  grid-column: 1 / -1 !important;
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
  font-weight: 900 !important;
  margin-top: 4px !important;
}



@media (max-width: 480px) {
  .btn-gold-option {
    font-size: 0.82rem !important;
    padding: 10px 4px !important;
  }

  #fast-trade-overlay .overlay-content {
    padding: 12px 14px !important;
    width: calc(100vw - 16px) !important;
  }
}

/* --- DEV MODE & CHEAT TOOLBAR STYLES --- */
.dev-cheat-toolbar {
  animation: devToolbarGlow 2s infinite alternate ease-in-out;
}

@keyframes devToolbarGlow {
  0% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 10px rgba(239, 68, 68, 0.3);
  }

  100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(239, 68, 68, 0.6);
  }
}

.btn-dev-cheat {
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn-dev-cheat:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.2);
}

.btn-dev-cheat:active {
  transform: translateY(0) scale(0.96);
}

.dev-match-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(239, 68, 68, 0.3);
}

/* Mobile GPU Acceleration & Hardware Rendering Optimizations */
#catan-board-canvas,
#my-resources-hud,
.res-card-hud,
.action-bar-bottom,
.game-overlay,
.overlay-content,
.hex-card {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* ==========================================================================
   PREMIUM UNIFIED BOTTOM HUD DOCK — Complete Redesign
   Left: Resource Pills  |  Divider  |  Right: Action Controls
   ========================================================================== */

.action-bar-bottom {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 64px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 18px 10px !important;
  background: linear-gradient(180deg,
      rgba(9, 17, 32, 0.96) 0%,
      rgba(6, 11, 22, 0.99) 100%) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-top: 1.5px solid rgba(251, 191, 36, 0.28) !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow:
    0 -6px 28px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 60px rgba(251, 191, 36, 0.08) !important;
  z-index: 900 !important;
  box-sizing: border-box !important;
  /* Smooth entrance when dock appears */
  transition: box-shadow 0.3s ease !important;
}

/* ── Left Section: Resource Pill Row ── */
.my-resources-hud {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Resource Pill Base */
.res-card-hud {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  width: 44px !important;
  height: 50px !important;
  padding: 4px 2px !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(20, 30, 50, 0.75) !important;
  cursor: pointer !important;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Subtle top gloss */
.res-card-hud::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 40% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%) !important;
  border-radius: 13px 13px 0 0 !important;
  pointer-events: none !important;
}

.res-card-hud:hover {
  transform: translateY(-5px) scale(1.06) !important;
  z-index: 10 !important;
}

.res-card-hud:active {
  transform: translateY(-2px) scale(0.97) !important;
}

/* Zero state: dimmed */
.res-card-hud.is-zero {
  opacity: 0.38 !important;
  filter: grayscale(0.6) !important;
  transform: scale(0.94) !important;
  box-shadow: none !important;
}

/* Has-cards state: glowing per resource */
.res-card-hud:not(.is-zero) {
  opacity: 1 !important;
  filter: none !important;
}

/* Count Badge — punchy number */
.res-count {
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s ease !important;
}

.res-count.pop {
  transform: scale(1.7) !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.95) !important;
}

.res-emoji {
  font-size: 1.25rem !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)) !important;
  transition: transform 0.18s ease !important;
}

.res-card-hud:hover .res-emoji {
  transform: scale(1.2) rotate(-5deg) !important;
}

/* Per-resource glow colors */
.res-card-hud.wood:not(.is-zero) {
  border-color: #22c55e !important;
  background: linear-gradient(160deg, rgba(21, 128, 61, 0.55), rgba(6, 46, 27, 0.8)) !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(134, 239, 172, 0.18) !important;
}

.res-card-hud.brick:not(.is-zero) {
  border-color: #f97316 !important;
  background: linear-gradient(160deg, rgba(194, 65, 12, 0.55), rgba(67, 20, 7, 0.8)) !important;
  box-shadow: 0 4px 18px rgba(249, 115, 22, 0.35), inset 0 1px 0 rgba(253, 186, 116, 0.18) !important;
}

.res-card-hud.sheep:not(.is-zero) {
  border-color: #a855f7 !important;
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.55), rgba(76, 29, 149, 0.8)) !important;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.38), inset 0 1px 0 rgba(233, 213, 255, 0.18) !important;
}

.res-card-hud.wheat:not(.is-zero) {
  border-color: #f59e0b !important;
  background: linear-gradient(160deg, rgba(217, 119, 6, 0.55), rgba(69, 26, 3, 0.8)) !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.38), inset 0 1px 0 rgba(253, 230, 138, 0.18) !important;
}

.res-card-hud.ore:not(.is-zero) {
  border-color: #94a3b8 !important;
  background: linear-gradient(160deg, rgba(79, 70, 229, 0.45), rgba(30, 27, 75, 0.8)) !important;
  box-shadow: 0 4px 18px rgba(148, 163, 184, 0.3), inset 0 1px 0 rgba(199, 210, 254, 0.15) !important;
}

.res-card-hud.total {
  border-color: #38bdf8 !important;
  background: linear-gradient(160deg, rgba(3, 105, 161, 0.5), rgba(12, 74, 110, 0.8)) !important;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(125, 211, 252, 0.15) !important;
  margin-left: 2px !important;
}

.res-card-hud.total.exceeded-limit {
  border-color: #ef4444 !important;
  background: linear-gradient(160deg, rgba(153, 27, 27, 0.7), rgba(69, 10, 10, 0.9)) !important;
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.85), inset 0 1px 0 rgba(252, 165, 165, 0.25) !important;
  animation: pulseCardLimit 0.9s infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Divider ── */
.hud-dock-divider {
  width: 1px !important;
  height: 36px !important;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(251, 191, 36, 0.35) 35%,
      rgba(251, 191, 36, 0.35) 65%,
      transparent 100%) !important;
  flex-shrink: 0 !important;
  margin: 0 2px !important;
}

/* ── Right Section: Action Controls ── */
.action-bar-right-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  flex-shrink: 0 !important;
}

/* Timer Widget */
.timer-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(9, 17, 32, 0.9) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 14px !important;
  padding: 4px 10px !important;
  min-width: 48px !important;
  height: 50px !important;
  box-sizing: border-box !important;
  gap: 2px !important;
}

.timer-box .timer-label {
  font-size: 1.0rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}


/* Dice Widget */
.floating-dice-hud.interactive-dice {
  display: flex !important;
  flex-direction: row !important;
  gap: 5px !important;
  align-items: center !important;
  cursor: pointer !important;
  padding: 6px !important;
  border-radius: 14px !important;
  background: rgba(9, 17, 32, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  height: 50px !important;
  box-sizing: border-box !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.floating-dice-hud:not(.disabled) {
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25) !important;
  animation: diceGlowPulse 2s infinite ease-in-out !important;
}

.floating-dice-hud.disabled {
  opacity: 0.5 !important;
  cursor: default !important;
  animation: none !important;
}

.floating-dice-hud .die {
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(145deg, #f8fafc, #e2e8f0) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 9px !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Action Buttons — premium pills */
.btn-action-round {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 58px !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, filter 0.15s ease !important;
  touch-action: manipulation !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Top gloss on buttons */
.btn-action-round::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 38% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%) !important;
  border-radius: 15px 15px 0 0 !important;
  pointer-events: none !important;
}

.btn-action-round:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65) !important;
  filter: brightness(1.15) !important;
}

.btn-action-round:active:not(:disabled) {
  transform: translateY(1px) scale(0.96) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.btn-action-round .btn-icon {
  font-size: 1.3rem !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}

.btn-action-round .btn-label-sub {
  font-size: 0.52rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1 !important;
}

/* Button color themes */
.btn-action-round.devcard {
  background: linear-gradient(160deg, rgba(109, 40, 217, 0.85), rgba(88, 28, 135, 0.95)) !important;
  border-color: #a78bfa !important;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.4), inset 0 1px 0 rgba(196, 181, 253, 0.2) !important;
}

.btn-action-round.devcard .btn-label-sub {
  color: #e9d5ff !important;
}

.btn-action-round.trade {
  background: linear-gradient(160deg, rgba(3, 105, 161, 0.85), rgba(7, 89, 133, 0.95)) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(3, 105, 161, 0.4), inset 0 1px 0 rgba(125, 211, 252, 0.2) !important;
}

.btn-action-round.trade .btn-label-sub {
  color: #bae6fd !important;
}

.btn-action-round.recycle {
  background: linear-gradient(160deg, rgba(5, 150, 105, 0.85), rgba(4, 120, 87, 0.95)) !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35), inset 0 1px 0 rgba(110, 231, 183, 0.2) !important;
}

.btn-action-round.recycle .btn-label-sub {
  color: #a7f3d0 !important;
}

.btn-action-round.recycle.active-recycle {
  background: linear-gradient(160deg, #10b981, #059669) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.85), 0 0 36px rgba(52, 211, 153, 0.55) !important;
  animation: recyclePulse 1s infinite alternate ease-in-out !important;
}

/* Pass button — most prominent — slightly wider */
.btn-action-round.pass {
  background: linear-gradient(160deg, rgba(5, 150, 105, 0.9), rgba(4, 120, 87, 0.98)) !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.45), inset 0 1px 0 rgba(110, 231, 183, 0.25) !important;
  width: 66px !important;
}

.btn-action-round.pass .btn-label-sub {
  color: #a7f3d0 !important;
}

#btn-end-turn:not(:disabled) {
  background: linear-gradient(160deg, #059669, #047857) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 18px rgba(5, 150, 105, 0.6), 0 4px 16px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(110, 231, 183, 0.25) !important;
  animation: passGlowPulse 2s infinite ease-in-out !important;
}

#btn-end-turn:not(:disabled):hover {
  background: linear-gradient(160deg, #10b981, #059669) !important;
  box-shadow: 0 0 28px rgba(16, 185, 129, 0.75), 0 8px 20px rgba(5, 150, 105, 0.5) !important;
}

@keyframes passGlowPulse {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(5, 150, 105, 0.5), 0 4px 14px rgba(5, 150, 105, 0.3), inset 0 1px 0 rgba(110, 231, 183, 0.2);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.75), 0 6px 20px rgba(5, 150, 105, 0.45), inset 0 1px 0 rgba(110, 231, 183, 0.3);
    transform: scale(1.04);
  }
}

.btn-action-round.devcard.can-buy {
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.7), inset 0 0 10px rgba(168, 85, 247, 0.35) !important;
  border-color: #c084fc !important;
}

.btn-action-round:disabled {
  opacity: 0.32 !important;
  filter: grayscale(0.65) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ── Dev Card Hold Progress Ring ── */
.btn-action-round.devcard {
  overflow: hidden !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.btn-action-round.devcard .hold-progress-ring {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: conic-gradient(#ec4899 0%, transparent 0%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease !important;
  z-index: 1 !important;
}

.btn-action-round.devcard.holding-dev-card {
  transform: scale(1.12) !important;
  box-shadow: 0 0 28px rgba(236, 72, 153, 0.9), 0 0 44px rgba(168, 85, 247, 0.8) !important;
}

.btn-action-round.devcard.holding-dev-card .hold-progress-ring {
  opacity: 0.88 !important;
}

/* ── Responsive: Mobile ── */
@media (max-width: 768px) {
  .action-bar-bottom {
    /* Force full-width anchored to bottom — override older pill-float rules */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 8px 12px 12px !important;
  }

  /* Row 1: Resources */
  .my-resources-hud {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }

  .res-card-hud {
    flex: 1 1 0px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 3px 2px !important;
    border-radius: 12px !important;
    touch-action: manipulation !important;
  }

  /* Row 2: Action Controls */
  .action-bar-right-controls {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 5px !important;
  }

  .hud-dock-divider {
    display: none !important;
  }

  .timer-box {
    height: 44px !important;
    min-width: 44px !important;
    padding: 4px 8px !important;
  }

  .floating-dice-hud.interactive-dice {
    height: 44px !important;
    padding: 4px !important;
    gap: 4px !important;
  }

  .floating-dice-hud .die {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.95rem !important;
  }

  .btn-action-round {
    flex: 1 1 0px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    border-radius: 13px !important;
    touch-action: manipulation !important;
  }

  .pass-btn-container {
    flex: 1.4 1 0px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .pass-btn-container .btn-action-round.pass {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .pass-turn-reminder-bubble {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    bottom: calc(100% + 6px) !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    max-width: 140px !important;
    white-space: nowrap !important;
    border-radius: 14px !important;
  }

  .pass-turn-reminder-bubble::after {
    right: 20px !important;
    left: auto !important;
    transform: none !important;
  }

  .btn-action-round .btn-icon {
    font-size: 1.15rem !important;
  }

  .btn-action-round .btn-label-sub {
    font-size: 0.5rem !important;
  }

  /* Tactile press feedback */
  .btn-action-round:active,
  .res-card-hud:active {
    transform: scale(0.93) !important;
    filter: brightness(1.25) !important;
  }
}

/* Floating Confirmation Popover for Buying Dev Card */
.devcard-confirm-popover {
  position: absolute !important;
  bottom: 72px !important;
  right: 0 !important;
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.6) !important;
  border-radius: 18px !important;
  padding: 12px 16px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(168, 85, 247, 0.35) !important;
  z-index: 1000 !important;
  width: 200px !important;
  box-sizing: border-box !important;
  animation: devConfirmPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes devConfirmPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.devcard-confirm-popover.hidden {
  display: none !important;
}

.confirm-popover-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.confirm-popover-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #f3e8ff;
}

.confirm-popover-cost {
  font-size: 0.78rem;
  font-weight: 700;
  color: #d8b4fe;
  background: rgba(168, 85, 247, 0.18);
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.confirm-popover-status {
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 6px;
}

.confirm-popover-status.success {
  color: #34d399;
}

.confirm-popover-status.error {
  color: #f87171;
}

.confirm-popover-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.btn-confirm-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1.35rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-confirm-opt.accept {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.btn-confirm-opt.accept:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.7);
}

.btn-confirm-opt.accept:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.8);
  box-shadow: none;
}

.btn-confirm-opt.reject {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.btn-confirm-opt.reject:hover {
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.7);
}

.btn-confirm-opt.reject:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.6);
}

/* Positioning Dev Cards HUD right above action bar bottom */
#dev-cards-hud:not(.hidden) {
  position: fixed !important;
  bottom: 85px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 950 !important;
  max-height: calc(100vh - 120px) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(168, 85, 247, 0.3) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(20px) !important;
}

@media (max-width: 768px) {
  #dev-cards-hud:not(.hidden) {
    bottom: 95px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 20px) !important;
    max-width: 480px !important;
  }
}

/* ==========================================================================
   INDEX BOTTOM NAVIGATION & SHOP OPTIMIZATIONS
   ========================================================================== */

/* Fast Smooth Scroll Navigation Bar */
.hex-nav-bar {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
  touch-action: pan-x !important;
}

.hex-nav-btn {
  scroll-snap-align: center !important;
  min-height: 44px !important;
  touch-action: manipulation !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease !important;
}

.hex-nav-btn:active {
  transform: scale(0.92) !important;
}

/* Responsive Modern Shop Modal */
.shop-tabs {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
}

.shop-tab-btn {
  scroll-snap-align: start !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  border-radius: 14px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   MOBILE-FIRST OVERHAULED SHOP SYSTEM
   ========================================================================== */

.shop-header-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.shop-coins-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1.5px solid #38bdf8 !important;
  color: #38bdf8 !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  font-weight: 900 !important;
  font-size: 0.88rem !important;
  margin-top: 4px !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
}

.shop-category-wrapper {
  width: 100% !important;
  margin-bottom: 12px !important;
}

/* Mobile Category Select Dropdown */
.shop-category-select {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1.5px solid #38bdf8 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Desktop & Mobile Horizontal Swipable Tab Pills */
.shop-tabs-pills {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 2px 8px 2px !important;
  scrollbar-width: thin !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

.shop-tab-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  scroll-snap-align: start !important;
  padding: 8px 14px !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  border-radius: 12px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.shop-tab-btn:hover {
  transform: translateY(-2px) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

.shop-tab-btn.active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.4), rgba(56, 189, 248, 0.5)) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4) !important;
}

/* Horizontal Swipable Items Carousel Inside Container */
.shop-carousel-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 4px !important;
}

.btn-shop-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1.5px solid #38bdf8 !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s ease !important;
}

.btn-shop-nav.prev {
  left: 2px !important;
}

.btn-shop-nav.next {
  right: 2px !important;
}

.btn-shop-nav:hover {
  background: #38bdf8 !important;
  color: #0f172a !important;
  transform: translateY(-50%) scale(1.12) !important;
}

.shop-items-carousel {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 40px 14px 40px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

.shop-items-carousel>div {
  flex: 0 0 min(220px, 70vw) !important;
  width: min(220px, 70vw) !important;
  scroll-snap-align: center !important;
  flex-shrink: 0 !important;
}

/* Compact & Customizable Profile Card */
.profile-compact-card {
  padding: 16px 14px !important;
  gap: 10px !important;
  max-width: 440px !important;
  width: 100% !important;
}

.profile-avatar-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.profile-avatar-frame-glow {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
  padding: 2px !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.5) !important;
  flex-shrink: 0 !important;
}

.profile-avatar-circle {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.profile-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.profile-username-row {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
}

.profile-username-row input {
  flex: 1 !important;
  padding: 6px 10px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}

.profile-user-title-badge {
  display: inline-block !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.profile-stats-pills {
  display: flex !important;
  gap: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #e2e8f0 !important;
}

.profile-stat-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.profile-color-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  align-items: flex-start !important;
}

.profile-section-label {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
}

.profile-color-swatches {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.color-swatch-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  font-size: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.color-swatch-btn:hover {
  transform: scale(1.15) !important;
  border-color: #38bdf8 !important;
}

.color-swatch-btn.active {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.9) !important;
  transform: scale(1.18) !important;
  background: rgba(56, 189, 248, 0.25) !important;
}

.profile-avatar-skin-section {
  width: 100% !important;
  margin-top: 2px !important;
}

.profile-skin-select {
  flex: 1 !important;
  padding: 8px 10px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

.shop-items-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  overflow-y: auto !important;
  max-height: 52vh !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
}

@media (max-width: 480px) {
  .shop-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   HEXAGONAL CATAN THEMATIC SYSTEM (Enforcing Specified Color Palette)
   ========================================================================== */

/* Background de menú: #0F172A */
#lobby-screen,
#room-lobby-screen,
#app-container,
body {
  background: #0F172A !important;
}

#lobby-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 0),
    url("data:image/svg+xml,%3Csvg width='56' height='97' viewBox='0 0 56 97' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0l28 16.166v32.333L28 64.666 0 48.499V16.166L28 0zm0 32.333l14 8.083v16.166L28 64.666l-14-8.084V40.416l14-8.083z' fill='%2338bdf8' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 56px 97px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* Tarjetas / Contenedores: Fondo #1E293B, Bordes #334155 */
.rectangular-card-inner,
.card,
.shop-modal,
.room-players-card,
.devcard-confirm-popover {
  background: #1E293B !important;
  border: 2px solid #334155 !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
  clip-path: polygon(24px 0,
      calc(100% - 24px) 0,
      100% 24px,
      100% calc(100% - 24px),
      calc(100% - 24px) 100%,
      24px 100%,
      0 calc(100% - 24px),
      0 24px) !important;
  border-radius: 0 !important;
  position: relative !important;
}

.rectangular-card-inner::after {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  clip-path: polygon(22px 0,
      calc(100% - 22px) 0,
      100% 22px,
      100% calc(100% - 22px),
      calc(100% - 22px) 100%,
      22px 100%,
      0 calc(100% - 22px),
      0 22px);
}

/* Botón Primario: Fondo #38BDF8, Texto #0F172A */
.btn-primary,
.btn-accent,
.btn-hero {
  background: #38BDF8 !important;
  color: #0F172A !important;
  border: none !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.3) !important;
}

.btn-primary:hover,
.btn-accent:hover,
.btn-hero:hover {
  background: #7DD3FC !important;
  color: #0F172A !important;
  transform: translateY(-2px) !important;
}

/* Botón Secundario: Fondo #1E293B, Texto #F1F5F9, Borde #334155 */
.btn-secondary {
  background: #1E293B !important;
  color: #F1F5F9 !important;
  border: 1.5px solid #334155 !important;
  font-weight: 800 !important;
}

.btn-secondary:hover {
  background: #334155 !important;
  color: #FFFFFF !important;
  border-color: #38BDF8 !important;
}

/* Detalles / Notificaciones: #F59E0B (Naranja) */
.hex-badge,
.shop-coins-badge,
.detail-notification,
.toast-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1.5px solid #F59E0B !important;
  color: #F59E0B !important;
  font-weight: 900 !important;
}

.hex-title {
  color: #38BDF8 !important;
}

.hex-title::after {
  content: '';
  display: block;
  width: 70px;
  height: 3px;
  margin: 6px auto 0 auto;
  background: linear-gradient(90deg, transparent, #F59E0B, transparent);
  border-radius: 2px;
}

/* Hexagonal Input Controls */
.profile-edit-box input,
.profile-recovery-box input,
.config-group select,
.detail-item select {
  background: #0F172A !important;
  color: #F1F5F9 !important;
  border: 1.5px solid #334155 !important;
}

/* ==========================================================================
   UNIVERSAL HIGH-CONTRAST TEXT & LEGIBILITY GUARANTEE FOR INDEX
   ========================================================================== */

/* All headings, labels, paragraphs, table rows, and descriptions */
body,
#app-container,
#lobby-screen,
.screen {
  color: #F1F5F9 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
span,
div,
td,
th,
li,
a,
.hex-desc,
.recovery-label,
.detail-item,
.profile-section-label,
.room-title,
.friend-name,
.leaderboard-name {
  color: #F1F5F9;
}

.hex-title {
  color: #38BDF8 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

.hex-desc {
  color: #CBD5E1 !important;
}

/* Ensure inputs, textareas, and select dropdown options are 100% readable */
input,
select,
textarea {
  color: #F1F5F9 !important;
  background-color: #0F172A !important;
}

input::placeholder,
textarea::placeholder {
  color: #94A3B8 !important;
}

select option {
  background-color: #0F172A !important;
  color: #F1F5F9 !important;
  padding: 8px 12px !important;
}

/* Primary buttons: High-contrast dark text on bright cyan background */
.btn-primary,
.btn-accent,
.btn-hero {
  background: #38BDF8 !important;
  color: #0F172A !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.btn-primary:hover,
.btn-accent:hover,
.btn-hero:hover {
  background: #7DD3FC !important;
  color: #0F172A !important;
}

/* Secondary buttons: High-contrast bright white text on slate background */
.btn-secondary {
  background: #1E293B !important;
  color: #F1F5F9 !important;
  border: 1.5px solid #334155 !important;
  font-weight: 800 !important;
}

.btn-secondary:hover {
  background: #334155 !important;
  color: #FFFFFF !important;
  border-color: #38BDF8 !important;
}

/* ==========================================================================
   FULL-PAGE PRIVATE PROFILE DASHBOARD SYSTEM
   ========================================================================== */

.game-overlay,
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1300 !important;
  background: rgba(5, 11, 20, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.25s ease !important;
}

.game-overlay.hidden,
.modal-overlay.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.private-dashboard-modal {
  width: min(720px, 94vw) !important;
  max-height: 88vh !important;
  background: #1E293B !important;
  border: 2px solid #38BDF8 !important;
  border-radius: 20px !important;
  padding: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(56, 189, 248, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  overflow-y: auto !important;
}

.private-dashboard-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1.5px solid #334155 !important;
  padding-bottom: 12px !important;
}

.private-player-hero {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: #0F172A !important;
  border: 1.5px solid #334155 !important;
  border-radius: 16px !important;
  padding: 16px !important;
}

.hero-avatar-wrapper {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
  padding: 3px !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5) !important;
  flex-shrink: 0 !important;
}

.hero-avatar-circle {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-player-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.hero-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.hero-title-tag {
  background: rgba(245, 158, 11, 0.2) !important;
  border: 1px solid #F59E0B !important;
  color: #F59E0B !important;
  padding: 2px 10px !important;
  border-radius: 12px !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
}

.hero-xp-bar-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
}

.xp-labels {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.8rem !important;
}

.xp-bar-bg {
  width: 100% !important;
  height: 8px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.xp-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #0284c7, #38bdf8) !important;
  border-radius: 4px !important;
  transition: width 0.3s ease !important;
}

.hero-stats-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.hero-stat-card {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid #334155 !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.hero-stat-card .stat-val {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #38BDF8 !important;
}

.hero-stat-card .stat-lbl {
  font-size: 0.72rem !important;
  color: #94A3B8 !important;
}

.private-dashboard-tabs {
  display: flex !important;
  gap: 8px !important;
  border-bottom: 1.5px solid #334155 !important;
  padding-bottom: 8px !important;
  overflow-x: auto !important;
}

.dash-tab-btn {
  padding: 8px 16px !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  background: #0F172A !important;
  border: 1.5px solid #334155 !important;
  color: #94A3B8 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.dash-tab-btn.active {
  background: #38BDF8 !important;
  color: #0F172A !important;
  border-color: #38BDF8 !important;
}

.dash-sub-title {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #38BDF8 !important;
  margin: 10px 0 8px 0 !important;
}

.locker-equipped-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}

.equipped-slot {
  background: #0F172A !important;
  border: 1.5px solid #334155 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.equipped-slot .slot-type {
  font-size: 0.74rem !important;
  color: #94A3B8 !important;
  font-weight: 700 !important;
}

.equipped-slot .slot-name {
  font-size: 0.88rem !important;
  color: #F1F5F9 !important;
  font-weight: 800 !important;
}

.dash-friends-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
}

/* ==========================================================================
   FIX & IMPROVEMENTS: DEVCARD BUY POPOVER (Z-INDEX & HUD LAYOUT FIX)
   ========================================================================== */
.devcard-confirm-popover {
  position: fixed !important;
  bottom: 85px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10000 !important;
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.6) !important;
  border-radius: 20px !important;
  padding: 14px 18px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(251, 191, 36, 0.3) !important;
  min-width: 260px !important;
  max-width: 90vw !important;
  pointer-events: auto !important;
  animation: popoverSlideUp 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.devcard-confirm-popover.hidden {
  display: none !important;
}

@keyframes popoverSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 15px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.confirm-popover-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.confirm-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #fbbf24;
  font-size: 1rem;
}

.confirm-popover-cost {
  font-size: 0.85rem;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 10px;
}

.confirm-popover-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  width: 100%;
}

.btn-confirm-opt {
  flex: 1;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-confirm-opt.accept {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #34d399;
  color: #ffffff;
}

.btn-confirm-opt.accept:hover {
  transform: scale(1.04);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
}

.btn-confirm-opt.reject {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fca5a5;
}

.btn-confirm-opt.reject:hover {
  background: rgba(239, 68, 68, 0.4);
}

/* ==========================================================================
   ANIMATED FLYING RESOURCE PARTICLES (DISAPPEARS UNDER HUD DOCK)
   ========================================================================== */
.flying-resource-particle {
  position: fixed !important;
  z-index: 800 !important;
  /* Passes UNDER lower dock HUD (z-index 900) */
  pointer-events: none !important;
  font-size: 1.8rem !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) !important;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
  will-change: transform, opacity !important;
  user-select: none !important;
}

/* ==========================================================================
   ROBBER ANNOUNCEMENT & BANNER AESTHETIC REFINEMENT
   ========================================================================== */
.setup-action-banner.robber-active-banner {
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.96), rgba(30, 10, 20, 0.98)) !important;
  border: 1.5px solid #ef4444 !important;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.5), 0 0 25px rgba(0, 0, 0, 0.85) !important;
  animation: robberBannerGlow 1.5s infinite ease-in-out !important;
}

@keyframes robberBannerGlow {

  0%,
  100% {
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4), 0 0 15px rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
  }

  50% {
    box-shadow: 0 12px 35px rgba(239, 68, 68, 0.75), 0 0 30px rgba(239, 68, 68, 0.6);
    border-color: #fca5a5;
  }
}

/* ==========================================================================
   PLATO APP INSPIRED MODERN UI/UX REFINEMENTS
   ========================================================================== */
.hex-card,
.overlay-content,
.modal-compact {
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.shop-tab-btn,
.dash-tab-btn,
.hex-nav-btn {
  border-radius: 14px !important;
  font-weight: 800 !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.shop-tab-btn.active,
.dash-tab-btn.active,
.hex-nav-btn.active {
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4) !important;
}

/* Color swatch preview pill in shop */
.shop-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: inline-block;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   SUPABASE LOGIN SCREEN STYLES
   ========================================================================== */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 1));
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 1000;
}

.login-card-glass {
  width: 100%;
  max-width: 420px;
  height: 86vh;
  max-height: 86vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(251, 191, 36, 0.3);
  border-radius: 24px;
  padding: 32px 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: loginModalEnter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.login-card-glass::-webkit-scrollbar {
  width: 6px;
}

.login-card-glass::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
}

.login-card-glass::-webkit-scrollbar-thumb {
  background: rgba(251, 191, 36, 0.4);
  border-radius: 8px;
}

.login-card-glass::-webkit-scrollbar-thumb:hover {
  background: rgba(251, 191, 36, 0.7);
}

@keyframes loginModalEnter {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.login-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.login-logo-badge {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.4));
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 0.86rem;
  color: #94a3b8;
  font-weight: 500;
  margin: 0;
}

.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.auth-input-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #cbd5e1;
}

.auth-input-group input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #ffffff;
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input-group input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.auth-submit-btn {
  padding: 12px !important;
  font-size: 0.88rem !important;
  border-radius: 12px !important;
}

.auth-error-text {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #fca5a5;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  text-align: center;
  font-weight: 600;
}

.login-footer {
  text-align: center;
  margin-top: 4px;
}

.btn-link-guest {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.btn-link-guest:hover {
  color: #38bdf8;
}

/* --- UNIFIED SUPERIOR HEADER & NOTIFICATION SYSTEM STYLES --- */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(251, 191, 36, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 100;
  min-height: 52px;
  box-sizing: border-box;
}

.logo-link:hover .logo-text-branding {
  filter: brightness(1.2);
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.notifications-bell-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.btn-notifications-bell {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.45) !important;
  color: #fbbf24 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 1.2rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  overflow: visible !important;
}

.btn-notifications-bell:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #fbbf24 !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(251, 191, 36, 0.35) !important;
}

#notifications-badge-count {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  padding: 2px 6px !important;
  min-width: 19px !important;
  height: 19px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #020617 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.95), 0 0 22px rgba(239, 68, 68, 0.5) !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  animation: pulseBellBadge 1.8s infinite ease-in-out !important;
}

#notifications-badge-count[style*="display: none"],
#notifications-badge-count:empty,
#notifications-badge-count[data-count="0"] {
  display: none !important;
}

@keyframes pulseBellBadge {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.9), 0 0 20px rgba(239, 68, 68, 0.4);
  }

  50% {
    transform: scale(1.18);
    box-shadow: 0 0 18px rgba(239, 68, 68, 1), 0 0 28px rgba(239, 68, 68, 0.7);
  }
}





/* Toast Container Floating */
#toast-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100vw - 40px);
}

#toast-container .toast {
  pointer-events: auto;
}

/* Notification Drawer Animation */
.notifications-drawer-glass {
  animation: modalPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Premium Social Player Cards & Social Hub Aesthetics */
.social-player-card-premium {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.92) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.2);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  animation: socialSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  overflow: hidden;
}

.social-player-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #38bdf8, #818cf8);
  border-radius: 4px 0 0 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease, width 0.2s ease;
}

.social-player-card-premium:hover {
  border-color: rgba(56, 189, 248, 0.55);
  transform: translateY(-3px) scale(1.008);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 15px rgba(56, 189, 248, 0.2);
}

.social-player-card-premium:hover::before {
  opacity: 1;
  width: 5px;
}

@keyframes socialSlideIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hexagon Avatar Mask with Glow */
.social-hex-avatar-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.social-hex-avatar {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.15rem;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease;
}

.social-hex-avatar-wrapper:hover .social-hex-avatar {
  transform: scale(1.05);
}

.social-online-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e, 0 0 20px rgba(34, 197, 94, 0.5);
  display: inline-block;
  animation: pulseDot 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.social-offline-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #64748b;
  display: inline-block;
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

.streak-badge-w {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid #22c55e;
  color: #4ade80;
  font-size: 0.65rem;
  font-weight: 900;
}

.streak-badge-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #fca5a5;
  font-size: 0.65rem;
  font-weight: 900;
}

/* --- CATAN FAST BUG FIXES & UI IMPROVEMENTS --- */

/* 1. Bank HUD Overflow Fix */
.bank-resources-hud {
  max-height: 85vh !important;
  overflow-y: auto !important;
  max-width: min(380px, 94vw) !important;
  z-index: 9999 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(251, 191, 36, 0.3) !important;
}

@media (max-width: 768px) {
  .bank-resources-hud {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 92vw !important;
  }
}

/* 2. Floating Chat/Logs Toggle Position above Bottom Dock */
.btn-floating-chat,
.toggle-hud-btn[data-hud="logs-hud"],
#toggle-logs {
  bottom: calc(var(--bottom-dock-height, 75px) + 12px) !important;
  z-index: 1100 !important;
}

/* 3. Fullscreen Game Over Victory Modal */
#game-over-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: rgba(10, 15, 26, 0.96) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 24px 16px !important;
  box-sizing: border-box !important;
}

#game-over-overlay .game-over-card,
#game-over-overlay .game-over-modal-content,
#game-over-overlay>div {
  max-width: 580px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  word-break: break-word !important;
}

/* 4. Dev Cards Horizontal Scroll */
#dev-cards-hud-list {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px 4px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#dev-cards-hud-list .hud-dev-card {
  flex-shrink: 0 !important;
  min-width: 115px !important;
  width: 115px !important;
  scroll-snap-align: start !important;
}

/* 5. 3-Player Cards Grid in Mobile */
@media (max-width: 600px) {
  .players-lobby-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .player-box,
  .player-card,
  .lobby-player-slot {
    min-width: 0 !important;
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
  }
}

/* 6. Slide In Right Animation for Invite Popup */
@keyframes slideInRight {
  from {
    transform: translateX(120%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes victoryCrownPulse {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 25px rgba(251, 191, 36, 0.9));
  }

  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 40px rgba(251, 191, 36, 1));
  }
}

/* 7. Game Over Victory Modal Container Integration */
#game-over-overlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

#game-over-overlay.hidden {
  display: none !important;
}

/* Ensure child tables and charts fit naturally */
#game-over-overlay .game-stats-card,
#game-over-overlay #match-dice-distribution-chart,
#game-over-overlay #match-players-final-table {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#match-players-final-table table {
  width: 100% !important;
  table-layout: auto !important;
  word-wrap: break-word !important;
}

/* Shop Preview Hex Icon Ultra-Compact Centered Styling */
.shop-hex-preview {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 4px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.98)) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.shop-hex-preview span,
.shop-hex-preview div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 1.5rem !important;
}

.btn-item-info {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fbbf24 !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.65rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.btn-item-info:hover {
  background: #fbbf24 !important;
  color: #000 !important;
  transform: scale(1.1) !important;
}

/* AAA Modern Ultra-Compact Shop Grid System */
#page-shop {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

#page-shop .page-content-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 10px !important;
}

#shop-items-grid,
.shop-items-grid-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding: 2px 0 16px 0 !important;
}

.btn-shop-action {
  width: 100% !important;
  padding: 5px 2px !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.stats-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}

.stat-box-row {
  padding: 4px 8px !important;
  height: 36px !important;
  min-height: 36px !important;
}

.stat-box-row span {
  font-size: 0.72rem !important;
}

#match-players-final-table table th,
#match-players-final-table table td {
  padding: 6px 3px !important;
  font-size: 0.74rem !important;
}

.dice-chart-col span {
  font-size: 0.62rem !important;
}


/* Shop Preview Hex Icon Centering & High-End Styling */
.shop-hex-preview {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  margin: 8px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.98)) !important;
  border: 1.8px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.shop-hex-preview span,
.shop-hex-preview div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Compact 2x4 Category Grid without Scroll */
.shop-tabs-pills .shop-tab-btn {
  padding: 7px 4px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 10px !important;
}

/* Compact Shop Card Hex Styling */
.shop-items-grid-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important;
  gap: 10px !important;
}


.btn-item-info {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fbbf24 !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.76rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.btn-item-info:hover {
  background: #fbbf24 !important;
  color: #000 !important;
  transform: scale(1.1) !important;
}

/* AAA Modern Responsive Shop Layout System */
#page-shop {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

#page-shop .page-content-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px !important;
}

/* Ranking Category Switcher (Trofeos vs Monedas) */
.ranking-tabs-wrapper {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 12px !important;
}

.ranking-tabs-pills {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ranking-tabs-pills .ranking-tab-btn {
  padding: 10px 8px !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  text-align: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 3.5px solid #020617 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ranking-tabs-pills .ranking-tab-btn:hover {
  color: #fff !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  border-bottom-color: #d97706 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.ranking-tabs-pills .ranking-tab-btn.active {
  color: #000 !important;
  border: 1px solid #fef08a !important;
  border-bottom: 4px solid #b45309 !important;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  font-weight: 900 !important;
}

.ranking-tabs-pills .ranking-tab-btn:active {
  transform: translateY(2px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.shop-category-wrapper {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 12px !important;
}

.shop-tabs-pills {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(2, auto) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 3D Depth Buttons for Shop Categories */
.shop-tabs-pills .shop-tab-btn {
  padding: 9px 4px !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  text-align: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 3.5px solid #020617 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer !important;
  position: relative !important;
  top: 0 !important;
}

.shop-tabs-pills .shop-tab-btn:hover {
  color: #fff !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  border-bottom-color: #d97706 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.shop-tabs-pills .shop-tab-btn.active {
  color: #000 !important;
  background: linear-gradient(180deg, #fef08a, #fbbf24) !important;
  border: 1px solid #fef08a !important;
  border-bottom: 4px solid #b45309 !important;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  font-weight: 900 !important;
}

.shop-tabs-pills .shop-tab-btn:active {
  transform: translateY(2px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

#shop-items-grid,
.shop-items-grid-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding: 4px 0 10px 0 !important;
}

/* Shop Smooth Vertical Category Transitions */
@keyframes shopSlideInUp {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shopSlideInDown {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.shop-slide-up {
  animation: shopSlideInUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.shop-slide-down {
  animation: shopSlideInDown 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.btn-shop-footer-pill {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

.btn-shop-footer-pill:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.5) !important;
}

.btn-shop-footer-pill:active {
  transform: scale(0.96);
}

.btn-shop-action {
  width: 100% !important;
  padding: 7px 4px !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.btn-shop-action.btn-buy {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  color: #000 !important;
}

.btn-shop-action.btn-equip {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #fff !important;
}

.btn-shop-action.btn-active {
  background: rgba(34, 211, 165, 0.15) !important;
  color: #22d3a5 !important;
  border: 1px solid rgba(34, 211, 165, 0.4) !important;
}

/* Hero Card Jet Black VIP Ultra-Compact Design */
.pcard.hero-card-compact {
  padding: 14px 16px !important;
  gap: 10px !important;
  background: rgba(8, 11, 20, 0.96) !important;
  border: 1px solid rgba(226, 232, 240, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

.pcard.hero-card-compact:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 15px rgba(255, 255, 255, 0.12) !important;
}

.hero-section {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.hero-avatar-wrap {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  position: relative !important;
}

.hero-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #1e293b, #0f172a) !important;
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.6rem !important;
}

.hero-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.hero-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.hero-name {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
}

.hero-title-badge {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #000 !important;
  background: linear-gradient(135deg, #fef08a, #fbbf24) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

.hero-badges-compact {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hero-badge-pill {
  padding: 4px 10px !important;
  border-radius: 10px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.hero-badge-pill.gold {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
}

.hero-badge-pill.cyan {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}

.hero-badge-pill .lbl {
  opacity: 0.7 !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
}

/* ── Modern, Responsive & Accessible Hero Quick Actions Grid ── */
.hero-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hero-quick-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  border-radius: 13px !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border: 1.5px solid transparent !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-quick-btn:focus-visible {
  outline: 2px solid #fbbf24 !important;
  outline-offset: 2px !important;
}

.hero-quick-btn:hover {
  transform: translateY(-2px) !important;
}

.hero-quick-btn:active {
  transform: translateY(1px) scale(0.98) !important;
}

.hero-quick-btn .btn-quick-icon {
  font-size: 1.05rem !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.hero-quick-btn .btn-quick-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hero-quick-btn .btn-quick-badge {
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  line-height: 1 !important;
}

/* History Variant (Gold Glow) */
.hero-quick-btn--history {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(217, 119, 6, 0.28) 100%) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.15) !important;
}
.hero-quick-btn--history:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(217, 119, 6, 0.45) 100%) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 6px 18px rgba(251, 191, 36, 0.35) !important;
  color: #ffffff !important;
}

/* Stats Variant (Cyan Glow) */
.hero-quick-btn--stats {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16) 0%, rgba(2, 132, 199, 0.26) 100%) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.15) !important;
}
.hero-quick-btn--stats:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28) 0%, rgba(2, 132, 199, 0.42) 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.35) !important;
  color: #ffffff !important;
}

/* Avatar Variant (Purple / Lavender Glow) */
.hero-quick-btn--avatar {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16) 0%, rgba(126, 34, 206, 0.26) 100%) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.15) !important;
}
.hero-quick-btn--avatar:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(126, 34, 206, 0.42) 100%) !important;
  border-color: #c084fc !important;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35) !important;
  color: #ffffff !important;
}

/* Admin CMS Variant (Crimson Glow) */
.hero-quick-btn--admin {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.3) 100%) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.18) !important;
}
.hero-quick-btn--admin:hover {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border-color: #f87171 !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.5), 0 0 10px rgba(251, 191, 36, 0.3) !important;
}

.hero-quick-btn--admin.hidden {
  display: none !important;
}

.hero-quick-btn {
  flex: 1 !important;
  padding: 6px 10px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.hero-quick-btn--gold {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(217, 119, 6, 0.2)) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: #fbbf24 !important;
}

/* --- ROBBER VIGNETTE RED BORDER EFFECT --- */
.robber-vignette {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 9998 !important;
  box-shadow: inset 0 0 120px rgba(220, 38, 38, 0.75), inset 0 0 40px rgba(185, 28, 28, 0.9) !important;
  animation: robberPulseVignette 1.5s ease-in-out infinite !important;
}

@keyframes robberPulseVignette {

  0%,
  100% {
    box-shadow: inset 0 0 100px rgba(220, 38, 38, 0.6), inset 0 0 30px rgba(185, 28, 28, 0.8) !important;
  }

  50% {
    box-shadow: inset 0 0 160px rgba(239, 68, 68, 0.95), inset 0 0 60px rgba(220, 38, 38, 1) !important;
  }
}

/* --- LUXURY GLASSMORPHIC BUILD COST LEGEND BAR --- */
.build-cost-legend-bar {
  position: fixed !important;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: auto !important;
  max-width: 96vw !important;
  z-index: 8500 !important;
  pointer-events: auto !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 100%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 16px !important;
  padding: 5px 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), 0 0 20px rgba(251, 191, 36, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box !important;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}

.build-cost-legend-bar.hidden {
  display: none !important;
}

.build-cost-legend-bar.user-dragged {
  bottom: auto !important;
  transform: none !important;
}

.build-cost-legend-bar.is-dragging {
  cursor: grabbing !important;
  opacity: 0.95 !important;
  border-color: rgba(56, 189, 248, 0.8) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.88), 0 0 30px rgba(56, 189, 248, 0.5) !important;
}

.legend-drag-handle {
  color: rgba(251, 191, 36, 0.6) !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  cursor: grab !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  transition: color 0.2s ease !important;
}

.legend-drag-handle:hover {
  color: #fbbf24 !important;
}

.build-cost-legend-bar .legend-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 9px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  opacity: 0.65;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.build-cost-legend-bar .legend-item:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}

.build-cost-legend-bar .legend-item.can-afford {
  opacity: 1 !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
  border-color: rgba(34, 197, 94, 0.75) !important;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.build-cost-legend-bar .legend-header {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.build-cost-legend-bar .legend-icon {
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

.build-cost-legend-bar .legend-title {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.3px !important;
}

.build-cost-legend-bar .legend-check {
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  color: #4ade80 !important;
  background: rgba(34, 197, 94, 0.3) !important;
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6) !important;
}

.build-cost-legend-bar .legend-cost {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

.build-cost-legend-bar .cost-badge {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.build-cost-legend-bar .cost-badge.wood {
  border-color: rgba(34, 197, 94, 0.4) !important;
}

.build-cost-legend-bar .cost-badge.brick {
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.build-cost-legend-bar .cost-badge.sheep {
  border-color: rgba(168, 85, 247, 0.4) !important;
}

.build-cost-legend-bar .cost-badge.wheat {
  border-color: rgba(234, 179, 8, 0.4) !important;
}

.build-cost-legend-bar .cost-badge.ore {
  border-color: rgba(148, 163, 184, 0.4) !important;
}

/* Responsive Media Queries for Build Cost Legend Bar */
@media (max-width: 768px) {
  .build-cost-legend-bar {
    gap: 5px !important;
    padding: 4px 8px !important;
    max-width: 98vw !important;
  }

  .build-cost-legend-bar .legend-item {
    padding: 3px 6px !important;
  }

  .build-cost-legend-bar .legend-title {
    font-size: 0.65rem !important;
  }

  .build-cost-legend-bar .cost-badge {
    font-size: 0.62rem !important;
    padding: 1px 3px !important;
  }
}

@media (max-width: 540px) {
  .build-cost-legend-bar {
    gap: 3px !important;
    padding: 3px 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .build-cost-legend-bar .legend-title {
    display: none !important;
  }

  .build-cost-legend-bar .legend-item {
    padding: 2px 4px !important;
    gap: 2px !important;
  }

  .build-cost-legend-bar .legend-icon {
    font-size: 0.85rem !important;
  }

  .build-cost-legend-bar .cost-badge {
    font-size: 0.6rem !important;
    padding: 0 3px !important;
  }

  .legend-drag-handle {
    font-size: 0.9rem !important;
    padding: 0 2px !important;
  }
}

/* --- RESPONSIVE SETTINGS PANEL & SHOP PADDING --- */
#settings-overlay .modal-content,
.settings-panel-container {
  max-height: 85vh !important;
  overflow-y: auto !important;
  padding: clamp(14px, 3vw, 28px) !important;
  border-radius: 20px !important;
}

.shop-items-grid,
#shop-screen,
.shop-container-scroll {
  padding-bottom: clamp(90px, 12vh, 140px) !important;
}

/* ==========================================================================
   SETTINGS MODAL OVERLAY — PREMIUM RESPONSIVE UI WOW
   ========================================================================== */

#settings-overlay.game-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99990 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(8, 12, 22, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#settings-overlay.hidden {
  display: none !important;
}

#settings-overlay .overlay-content,
.settings-card-modern {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 500px !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  margin: auto !important;
  background: linear-gradient(145deg, rgba(20, 28, 45, 0.96) 0%, rgba(10, 16, 28, 0.98) 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.4) !important;
  border-radius: 20px !important;
  padding: 22px 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  box-sizing: border-box !important;
  color: #f8fafc !important;
  scroll-behavior: smooth !important;
}

.kw-highlight {
  color: #fbbf24 !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
}

/* Header del Modal */
.settings-card-modern .trade-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.settings-card-modern .trade-modal-header h2 {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  margin: 0 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 2px 10px rgba(251, 191, 36, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.settings-card-modern .btn-close-modal {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #94a3b8 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.settings-card-modern .btn-close-modal:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  transform: scale(1.1) rotate(90deg) !important;
}

/* Títulos de Sección */
.settings-section-title {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #38bdf8 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Grid de Información de Partida */
.settings-match-info-box {
  margin-bottom: 22px !important;
}

.settings-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .settings-info-grid {
    grid-template-columns: 1fr !important;
  }
}

.settings-info-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.settings-info-card .info-card-label {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

.settings-info-card .info-card-value {
  font-size: 0.92rem !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

.settings-info-card .info-card-value.warning {
  color: #fbbf24 !important;
}

/* Settings Room Code Box (Modern Centered Showcase) */
.settings-room-code-box {
  margin-top: 16px !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85)) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.45) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

.settings-room-code-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.settings-room-code-label {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.settings-room-code-display-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#settings-room-code-val,
.settings-room-code-badge {
  font-family: 'Outfit', 'Segoe UI', monospace !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 2px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px dashed rgba(251, 191, 36, 0.5) !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  width: 100% !important;
  max-width: 320px !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.15) !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5) !important;
  user-select: all !important;
  word-break: break-all !important;
}

.btn-copy-settings-room-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 320px !important;
  padding: 10px 16px !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(245, 158, 11, 0.35)) !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 12px !important;
  color: #fef08a !important;
  font-weight: 800 !important;
  font-size: 0.84rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.2) !important;
}

.btn-copy-settings-room-code:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.38), rgba(245, 158, 11, 0.55)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4) !important;
  color: #ffffff !important;
}

.btn-copy-settings-room-code:active {
  transform: translateY(0) scale(0.98) !important;
}

/* --- IN-GAME SETTINGS TABBED NAVIGATION --- */
.settings-nav-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  padding: 4px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.settings-tab-nav-btn {
  flex: 1 !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: #94a3b8 !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.settings-tab-nav-btn:hover {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.settings-tab-nav-btn.active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.3)) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.25) !important;
}

.settings-tab-panel {
  display: none !important;
}

.settings-tab-panel.active {
  display: block !important;
  animation: settingsTabFade 0.2s ease-out !important;
}

@keyframes settingsTabFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Lista de Preferencias y Toggles en Filas Limpias */
.settings-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.settings-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

.settings-toggle-row:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  transform: translateX(2px) !important;
}

/* Toggle Switch Personalizado */
.custom-toggle-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 44px !important;
  height: 24px !important;
  background: rgba(51, 65, 85, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  position: relative !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
}

.custom-toggle-input::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  background: #94a3b8 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}

.custom-toggle-input:checked {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

.custom-toggle-input:checked::before {
  transform: translateX(20px) !important;
  background: #ffffff !important;
}

/* Botones de Acción de Ajustes Más Estéticos */
.settings-action-block {
  margin-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 14px !important;
}

.btn-settings-action {
  width: 100% !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.4px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-sizing: border-box !important;
  text-transform: uppercase !important;
}

.btn-settings-action.primary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35) !important;
}

.btn-settings-action.primary:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5) !important;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
}

.btn-settings-action.secondary {
  background: rgba(30, 41, 59, 0.8) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  margin-top: 8px !important;
}

.btn-settings-action.secondary:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 600px) {
  .settings-card-modern {
    width: 95vw !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .settings-toggle-row {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
  }
}

/* ==========================================================================
   HIDE ALL NON-BLOCKING TOAST CONTAINERS & POPUP NOTIFICATIONS
   ========================================================================== */
#toast-container,
.toast-container,
.toast-banner,
.toast,
#achievement-toast-banner,
.achievement-toast-banner,
#compact-notification-popup,
.non-blocking-toast {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   INTERACTIVE DISCARD MODE FOR USER RESOURCE HUD
   ========================================================================== */

.my-resources-hud.in-discard-mode {
  border: 1.5px solid rgba(248, 113, 113, 0.7) !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}

.my-resources-hud.in-discard-mode .res-card-hud:not(.total) {
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  position: relative !important;
}

.my-resources-hud.in-discard-mode .res-card-hud:not(.total):hover {
  transform: translateY(-3px) scale(1.04) !important;
  border-color: #ef4444 !important;
}

.res-card-hud.has-discard-selected {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.35)) !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.6) !important;
}

.hud-discard-badge {
  position: absolute !important;
  top: -8px !important;
  right: -6px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 10px rgba(239, 68, 68, 0.8) !important;
  animation: badgePopIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 10 !important;
}

@keyframes badgePopIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Permanently hide #discard-overlay modal popup */
#discard-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ==========================================================================
   FLOATING HUD DISCARD BAR & DIRECT PLUS/MINUS BUTTONS
   ========================================================================== */
.hud-discard-bar {
  position: absolute !important;
  bottom: calc(100% + 24px) !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(11, 17, 32, 0.96) !important;
  border: 1.5px solid rgba(248, 113, 113, 0.7) !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(239, 68, 68, 0.3) !important;
  backdrop-filter: blur(16px) !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  animation: hudBarSlideUp 0.25s ease-out !important;
}

.hud-discard-bar.hidden {
  display: none !important;
}

@keyframes hudBarSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hud-discard-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
}

.hud-discard-title {
  color: #f87171 !important;
  font-weight: 800 !important;
}

.hud-discard-progress-track {
  width: 100% !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.hud-discard-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #38bdf8, #22c55e) !important;
  transition: width 0.25s ease !important;
}

.hud-discard-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.btn-hud-discard-quick {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #e2e8f0 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-hud-discard-quick:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

.btn-hud-discard-confirm {
  margin-left: auto !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  cursor: not-allowed !important;
  transition: all 0.2s ease !important;
}

.btn-hud-discard-confirm.ready {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #ffffff !important;
  border-color: #4ade80 !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.6) !important;
  cursor: pointer !important;
}

/* Plus & Minus buttons inside HUD pills */
.hud-res-btn-minus,
.hud-res-btn-plus {
  display: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  user-select: none !important;
  z-index: 12 !important;
}

.my-resources-hud.in-discard-mode .hud-res-btn-minus,
.my-resources-hud.in-discard-mode .hud-res-btn-plus {
  display: inline-flex !important;
}

.hud-res-btn-minus {
  background: rgba(239, 68, 68, 0.85) !important;
  color: #ffffff !important;
}

.hud-res-btn-minus:hover {
  background: #dc2626 !important;
}

.hud-res-btn-plus {
  background: rgba(34, 197, 94, 0.85) !important;
  color: #ffffff !important;
}

.hud-res-btn-plus:hover {
  background: #16a34a !important;
}

/* ==========================================================================
   FLOATING HUD TRADE BAR & WANT SELECTOR PANEL
   ========================================================================== */
.my-resources-hud.in-trade-mode .hud-res-btn-minus,
.my-resources-hud.in-trade-mode .hud-res-btn-plus {
  display: inline-flex !important;
}

.hud-trade-bar {
  position: absolute !important;
  bottom: calc(100% + 24px) !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.7) !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(56, 189, 248, 0.3) !important;
  backdrop-filter: blur(16px) !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  animation: hudBarSlideUp 0.25s ease-out !important;
}

.hud-trade-bar.hidden {
  display: none !important;
}

.hud-trade-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
}

.hud-trade-title {
  color: #38bdf8 !important;
  font-weight: 800 !important;
}

.hud-trade-summary-text {
  font-size: 0.8rem !important;
  color: #f87171 !important;
  font-weight: 700 !important;
}

.hud-trade-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-hud-trade-primary {
  flex: 1 !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid #60a5fa !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-hud-trade-primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.btn-hud-trade-bank-link {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #eab308 !important;
  border: 1px solid rgba(234, 179, 8, 0.4) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-hud-trade-bank-link:hover {
  background: rgba(234, 179, 8, 0.3) !important;
}

.btn-hud-trade-cancel {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-hud-trade-cancel:hover {
  background: rgba(239, 68, 68, 0.3) !important;
}

/* Panel Emergente Fase 2: Quieres */
.hud-trade-want-panel {
  position: absolute !important;
  bottom: calc(100% + 24px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 320px !important;
  max-width: 92vw !important;
  background: rgba(15, 23, 42, 0.97) !important;
  border: 1.5px solid rgba(34, 197, 94, 0.7) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(34, 197, 94, 0.25) !important;
  backdrop-filter: blur(20px) !important;
  z-index: 110 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  animation: hudPanelPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.hud-trade-want-panel.hidden {
  display: none !important;
}

@keyframes hudPanelPop {
  from {
    opacity: 0;
    transform: translate(-50%, 15px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.hud-trade-want-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.hud-trade-want-title {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #4ade80 !important;
}

.btn-hud-trade-close-x {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.btn-hud-trade-close-x:hover {
  color: #f87171 !important;
}

.hud-trade-presets {
  display: flex !important;
  gap: 4px !important;
  overflow-x: auto !important;
}

.btn-trade-preset {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}

.btn-trade-preset:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

.btn-trade-preset.btn-clear {
  margin-left: auto !important;
  color: #f87171 !important;
}

.hud-trade-want-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
}

.hud-want-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 6px 2px !important;
}

.hud-want-emoji {
  font-size: 1.1rem !important;
}

.hud-want-val {
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  color: #4ade80 !important;
}

.hud-want-btn-dec,
.hud-want-btn-inc {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.hud-want-btn-dec {
  background: rgba(239, 68, 68, 0.8) !important;
  color: white !important;
}

.hud-want-btn-inc {
  background: rgba(34, 197, 94, 0.8) !important;
  color: white !important;
}

.hud-trade-want-footer {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.btn-hud-trade-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #e2e8f0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}

.btn-hud-trade-confirm {
  flex: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  cursor: not-allowed !important;
  transition: all 0.2s ease !important;
}

.btn-hud-trade-confirm.ready {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #ffffff !important;
  border-color: #4ade80 !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.6) !important;
  cursor: pointer !important;
}

.hud-trade-give-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 10px rgba(239, 68, 68, 0.8) !important;
  z-index: 10 !important;
}

.res-card-hud.has-trade-give-selected {
  border-color: #ef4444 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
  transform: translateY(-3px) !important;
}

/* Animation during Long Press on HUD Resource Card (Bank Trade Trigger) */
.res-card-hud.is-pressing {
  transform: scale(0.94) !important;
  border-color: #eab308 !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.8) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

/* Page Viewport inside Lobby Screen */
#lobby-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at center, #1e293b, #0f172a);
}

/* 🌌 Slow Progressive Shifting Gradient Background for Top Header */
@keyframes slowHeaderColorShift {
  0% {
    background: linear-gradient(180deg, #020617 0%, rgba(15, 23, 42, 0.88) 50%, rgba(15, 23, 42, 0.3) 85%, transparent 100%) !important;
  }

  25% {
    background: linear-gradient(180deg, #18092c 0%, rgba(28, 14, 48, 0.88) 50%, rgba(28, 14, 48, 0.3) 85%, transparent 100%) !important;
  }

  50% {
    background: linear-gradient(180deg, #041c2c 0%, rgba(6, 32, 50, 0.88) 50%, rgba(6, 32, 50, 0.3) 85%, transparent 100%) !important;
  }

  75% {
    background: linear-gradient(180deg, #221404 0%, rgba(40, 22, 6, 0.88) 50%, rgba(40, 22, 6, 0.3) 85%, transparent 100%) !important;
  }

  100% {
    background: linear-gradient(180deg, #020617 0%, rgba(15, 23, 42, 0.88) 50%, rgba(15, 23, 42, 0.3) 85%, transparent 100%) !important;
  }
}

/* Floating Sticky App Header */
.app-header {
  position: sticky !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 60px;
  min-height: 60px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  z-index: 200 !important;
  flex-shrink: 0 !important;
  animation: slowHeaderColorShift 28s ease-in-out infinite !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ⬡ Hexagonal Floating Header Navigation Buttons */
.btn-hud-hex-header:not(.btn-notifications-bell) {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: #0f172a !important;
  border: none !important;
  outline: none !important;
  color: #fbbf24 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ⬡ Header Stat Badges as Floating Hexagonal Pills */
.user-stats-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.stat-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border-radius: 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%) !important;
  border: none !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  transition: all 0.2s ease !important;
}

.stat-badge.gold {
  color: #fbbf24 !important;
  background: rgba(30, 25, 10, 0.9) !important;
}

/* Page Container */
.lobby-pages-viewport {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

/* Single Page View */
.lobby-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  box-sizing: border-box;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

/* Active Page */
.lobby-page.active-page {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateX(0);
  z-index: 10;
}

/* Slide Direction Transitions */
.lobby-page.slide-out-left {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-30%) scale(0.95);
}

.lobby-page.slide-out-right {
  opacity: 0;
  pointer-events: none;
  transform: translateX(30%) scale(0.95);
}

.lobby-page.slide-in-right {
  animation: slideInRight 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.lobby-page.slide-in-left {
  animation: slideInLeft 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Page Card Wrappers - Responsive & Mobile Optimized Luxury Glass Layout */
.page-content-card {
  width: 100%;
  max-width: 960px;
  min-height: auto;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.97) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(251, 191, 36, 0.28);
  border-radius: 24px;
  padding: 22px 22px 90px 22px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
  margin: 0 auto 16px auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 768px) {
  .page-content-card {
    padding: 16px 14px 95px 14px;
    border-radius: 18px;
    margin: 0 auto 12px auto;
    border-width: 1px;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .page-content-card {
    padding: 14px 10px 100px 10px;
    border-radius: 14px;
    gap: 12px;
  }
}

/* 🌌 HUD Background Top-to-Bottom Gradient (Black to Transparent) */
.app-header {
  background: linear-gradient(180deg, #020617 0%, rgba(10, 16, 28, 0.94) 40%, rgba(15, 23, 42, 0.5) 75%, transparent 100%) !important;
}

.game-hud-top,
.hud-top-gradient-overlay {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 🛡️ Bottom Navigation Container (Transparent Floating Dock - No Background & No Borders) */
.tab-bar-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 540px;
  height: 76px;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom)) 12px;
  box-sizing: border-box;
  z-index: 1000;
  box-shadow: none !important;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.25s ease !important;
  will-change: transform, opacity;
}

/* Hide tab bar when scrolling down */
.tab-bar-bottom.tab-bar-hidden {
  transform: translate(-50%, calc(100% + 24px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Universal Link Reset to Eliminate Any White Underline Lines */
.tab-bar-bottom a,
.tab-bar-bottom a:hover {
  text-decoration: none !important;
  animation: fadeIn 0.22s ease-out !important;
}

/* 🎨 Cosmetic Sub-Tabs (#tab-collection) */
.cosmetic-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

.ctab {
  padding: 8px 16px !important;
  border-radius: 12px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.ctab:hover {
  color: #fbbf24 !important;
  background: rgba(56, 189, 248, 0.2) !important;
}

.ctab.active {
  color: #0f172a !important;
  background: #fbbf24 !important;
  font-weight: 900 !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.55) !important;
}

.cosmetic-section {
  display: none;
}

.cosmetic-section.active {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 14px !important;
  padding: 10px 4px 18px 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .cosmetic-section.active {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}


.shop-card-hex.state-equipped {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.35) !important;
}

.shop-card-hex.state-owned {
  border-color: rgba(56, 189, 248, 0.35) !important;
}

.shop-card-status-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shop-card-status-pill {
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shop-card-status-pill.equipped {
  color: #fbbf24;
}

.shop-card-status-pill.owned {
  color: #22d3a5;
}

.shop-card-status-pill.locked {
  color: #64748b;
}

.shop-card-preview-box {
  width: 100%;
  height: 64px;
  background: rgba(30, 41, 59, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.shop-card-meta {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2px;
}

.shop-card-title {
  font-weight: 800;
  font-size: 0.84rem;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-card-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.2;
  height: 2.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shop-card-action {
  margin-top: auto;
  width: 100%;
}

.btn-shop-state {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 0.75rem;
  box-sizing: border-box;
}

.btn-shop-state.btn-equipped {
  border: 1px solid #22c55e;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  cursor: default;
}

.btn-shop-state.btn-equip {
  border: none;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #000;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.35);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.btn-shop-state.btn-equip:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.btn-shop-state.btn-locked {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #64748b;
  cursor: default;
}

/* 🏦 Dedicated Single-Row Top Bank Stock Bar (#top-bank-bar) */
#top-bank-bar.hidden,
.top-bank-bar.hidden {
  display: none !important;
}

#top-bank-bar,
.top-bank-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1200 !important;
  position: relative !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  pointer-events: none !important;
}

.top-bank-item {
  pointer-events: auto !important;
}

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

.top-bank-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1px !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
  background: rgba(30, 41, 59, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  color: #f8fafc !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ⬡ 2-Row Ultra-Compact Player Cards System (#players-list) */
/* ⬡ Player Cards Scroll Horizontal System (#players-list) */
#players-list,
.players-top-bar,
div#players-list,
div.players-top-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 6px 12px !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  scroll-behavior: smooth !important;
  pointer-events: auto !important;
  z-index: 100 !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Ocultar Barra de Scroll visual manteniedo el scroll funcional */
#players-list::-webkit-scrollbar,
.players-top-bar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.hex-player-pod {
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: auto !important;
  min-height: 54px !important;
  max-height: none !important;
  padding: 4px 8px !important;
  gap: 3px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  clip-path: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  user-select: none !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-width: 160px !important;
  max-width: 220px !important;
}

.pod-row-top,
.pod-row-bottom,
.pod-row-stock {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 4px !important;
}

.pod-row-stock {
  margin-top: 1px !important;
  padding-top: 2px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  font-weight: 800 !important;
  justify-content: space-around !important;
}

.pod-name-col {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.pod-color-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6) !important;
  flex-shrink: 0 !important;
}

.pod-player-name {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  max-width: 85px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.pod-stat-pill {
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  line-height: 1 !important;
}

.pod-stat-pill strong {
  font-weight: 900 !important;
  color: #ffffff !important;
}

.pod-stat-pill.vp {
  background: rgba(251, 191, 36, 0.2) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: #fbbf24 !important;
}

.pod-stat-pill.vp strong {
  color: #fbbf24 !important;
}

.pod-stat-pill.hand.over-limit {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fca5a5 !important;
}

/* 🎲 Equipped Dice Cosmetic Skins */

/* 🎲 Equipped Dice Cosmetic Skins (16 Sets: Complete Color Palette + Luminous & Sparkle Shaders) */

/* 1. Default Ivory White 🎲 */
#floating-dice.skin-dice_default .die,
#floating-dice.skin-default .die,
.floating-dice-hud.skin-dice_default .die,
.floating-dice-hud.skin-default .die {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #dc2626 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* 2. Ruby Crystal 💎 (Crimson Red with Ruby Glow) */
#floating-dice.skin-dice_ruby .die,
#floating-dice.skin-ruby .die,
#floating-dice.skin-dice_red .die,
#floating-dice.skin-red .die,
.floating-dice-hud.skin-dice_ruby .die,
.floating-dice-hud.skin-ruby .die,
.floating-dice-hud.skin-dice_red .die,
.floating-dice-hud.skin-red .die {
  background: linear-gradient(145deg, #ef4444 0%, #991b1b 100%) !important;
  border: 1.5px solid #fca5a5 !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 10px #f87171 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.75), inset 0 1px 0 rgba(254, 202, 202, 0.6) !important;
}

/* 3. Oceanic Sapphire 🔷 (Deep Blue Aquamarine Glow) */
#floating-dice.skin-dice_sapphire .die,
#floating-dice.skin-sapphire .die,
#floating-dice.skin-dice_blue .die,
#floating-dice.skin-blue .die,
.floating-dice-hud.skin-dice_sapphire .die,
.floating-dice-hud.skin-sapphire .die,
.floating-dice-hud.skin-dice_blue .die,
.floating-dice-hud.skin-blue .die {
  background: linear-gradient(145deg, #0284c7 0%, #0369a1 50%, #0c4a6e 100%) !important;
  border: 1.5px solid #7dd3fc !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 10px #38bdf8 !important;
  box-shadow: 0 0 14px rgba(2, 132, 199, 0.75), inset 0 1px 0 rgba(186, 230, 253, 0.7) !important;
}

/* 4. Forest Emerald 🟢 (Luminous Jade Green) */
#floating-dice.skin-dice_emerald .die,
#floating-dice.skin-emerald .die,
#floating-dice.skin-dice_green .die,
#floating-dice.skin-green .die,
.floating-dice-hud.skin-dice_emerald .die,
.floating-dice-hud.skin-emerald .die,
.floating-dice-hud.skin-dice_green .die,
.floating-dice-hud.skin-green .die {
  background: linear-gradient(145deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
  border: 1.5px solid #6ee7b7 !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 10px #34d399 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.75), inset 0 1px 0 rgba(167, 243, 208, 0.7) !important;
}

/* 5. Solar Amber 🧡 (Radiant Warm Amber Orange) */
#floating-dice.skin-dice_amber .die,
#floating-dice.skin-amber .die,
#floating-dice.skin-dice_orange .die,
#floating-dice.skin-orange .die,
.floating-dice-hud.skin-dice_amber .die,
.floating-dice-hud.skin-amber .die,
.floating-dice-hud.skin-dice_orange .die,
.floating-dice-hud.skin-orange .die {
  background: linear-gradient(145deg, #f97316 0%, #ea580c 50%, #7c2d12 100%) !important;
  border: 1.5px solid #fdba74 !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 10px #fb923c !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.75), inset 0 1px 0 rgba(254, 215, 170, 0.7) !important;
}

/* 6. Mystic Amethyst 💜 (Royal Electric Purple) */
#floating-dice.skin-dice_amethyst .die,
#floating-dice.skin-amethyst .die,
#floating-dice.skin-dice_purple .die,
#floating-dice.skin-purple .die,
.floating-dice-hud.skin-dice_amethyst .die,
.floating-dice-hud.skin-amethyst .die,
.floating-dice-hud.skin-dice_purple .die,
.floating-dice-hud.skin-purple .die {
  background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 50%, #4c1d95 100%) !important;
  border: 1.5px solid #c4b5fd !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 10px #a78bfa !important;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.75), inset 0 1px 0 rgba(221, 214, 254, 0.7) !important;
}

/* 7. Radiant Topaz 💛 (Sunburst Topaz Yellow) */
#floating-dice.skin-dice_topaz .die,
#floating-dice.skin-topaz .die,
#floating-dice.skin-dice_yellow .die,
#floating-dice.skin-yellow .die,
.floating-dice-hud.skin-dice_topaz .die,
.floating-dice-hud.skin-topaz .die,
.floating-dice-hud.skin-dice_yellow .die,
.floating-dice-hud.skin-yellow .die {
  background: linear-gradient(145deg, #eab308 0%, #ca8a04 50%, #713f12 100%) !important;
  border: 1.5px solid #fef08a !important;
  color: #451a03 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.75), inset 0 1px 0 rgba(254, 240, 138, 0.8) !important;
}

/* 8. Sakura Blossom Pink 🩷 (Pastel/Neon Pink) */
#floating-dice.skin-dice_sakura .die,
#floating-dice.skin-sakura .die,
#floating-dice.skin-dice_pink .die,
#floating-dice.skin-pink .die,
.floating-dice-hud.skin-dice_sakura .die,
.floating-dice-hud.skin-sakura .die,
.floating-dice-hud.skin-dice_pink .die,
.floating-dice-hud.skin-pink .die {
  background: linear-gradient(145deg, #ec4899 0%, #be185d 50%, #831843 100%) !important;
  border: 1.5px solid #fbcfe8 !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 10px #f472b6 !important;
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.75), inset 0 1px 0 rgba(251, 207, 232, 0.7) !important;
}

/* 9. Tactical Obsidian 🖤 (Matte Black with Crimson Runes) */
#floating-dice.skin-dice_obsidian .die,
#floating-dice.skin-obsidian .die,
#floating-dice.skin-dice_black .die,
#floating-dice.skin-black .die,
.floating-dice-hud.skin-dice_obsidian .die,
.floating-dice-hud.skin-obsidian .die,
.floating-dice-hud.skin-dice_black .die,
.floating-dice-hud.skin-black .die {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 50%, #020617 100%) !important;
  border: 1.5px solid #64748b !important;
  color: #ef4444 !important;
  text-shadow: 0 0 8px #dc2626, 0 0 14px #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(148, 163, 184, 0.5) !important;
}

/* 10. Arctic Glaciar Crystal 🧊 (Ice Cyan with Frost Shimmer) */
#floating-dice.skin-dice_cyan .die,
#floating-dice.skin-cyan .die,
#floating-dice.skin-dice_ice .die,
#floating-dice.skin-ice .die,
.floating-dice-hud.skin-dice_cyan .die,
.floating-dice-hud.skin-cyan .die,
.floating-dice-hud.skin-dice_ice .die,
.floating-dice-hud.skin-ice .die {
  background: linear-gradient(145deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%) !important;
  border: 1.5px solid #bae6fd !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px #38bdf8, 0 0 14px #0284c7 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.8), inset 0 1px 0 rgba(224, 242, 254, 0.8) !important;
}

/* 11. Prismatic Diamond 💎 (Pure White Diamond with Shimmer Sparkles) */
#floating-dice.skin-dice_diamond .die,
#floating-dice.skin-diamond .die,
.floating-dice-hud.skin-dice_diamond .die,
.floating-dice-hud.skin-diamond .die {
  background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 30%, #fdf4ff 60%, #e2e8f0 100%) !important;
  border: 1.8px solid #ffffff !important;
  color: #0f172a !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.8) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  animation: diamondSparklePulse 2s infinite alternate ease-in-out !important;
}

@keyframes diamondSparklePulse {
  0% {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 1);
  }

  50% {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.95), inset 0 1px 0 rgba(24df, 255, 255, 1);
  }

  100% {
    box-shadow: 0 0 22px rgba(236, 72, 153, 0.85), inset 0 1px 0 rgba(255, 255, 255, 1);
  }
}

/* 12. Pure 24K Gold 🪙 (Metallic Gold & Amber Sparkles) */
#floating-dice.skin-dice_gold .die,
#floating-dice.skin-gold .die,
.floating-dice-hud.skin-dice_gold .die,
.floating-dice-hud.skin-gold .die {
  background: linear-gradient(145deg, #fbbf24 0%, #d97706 50%, #b45309 100%) !important;
  border: 1.8px solid #fef08a !important;
  color: #451a03 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.85), inset 0 1px 0 rgba(254, 240, 138, 0.9) !important;
  animation: goldSparkleGlow 2s infinite alternate ease-in-out !important;
}

@keyframes goldSparkleGlow {
  0% {
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.7), inset 0 1px 0 rgba(254, 240, 138, 0.8);
  }

  100% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.95), inset 0 1px 0 rgba(254, 240, 138, 1);
  }
}

/* 13. Chromatic Rainbow RGB 🌈 (Animated Spectrum Flow) */
#floating-dice.skin-dice_rainbow .die,
#floating-dice.skin-rainbow .die,
.floating-dice-hud.skin-dice_rainbow .die,
.floating-dice-hud.skin-rainbow .die {
  background: linear-gradient(135deg, #ef4444, #f59e0b, #10b981, #06b6d4, #8b5cf6, #ec4899, #ef4444) !important;
  background-size: 300% 300% !important;
  border: 1.8px solid #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 12px #ffffff !important;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  animation: rainbowDiceShift 3.5s ease infinite !important;
}

@keyframes rainbowDiceShift {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.85);
  }

  33% {
    background-position: 50% 100%;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.85);
  }

  66% {
    background-position: 100% 50%;
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.85);
  }

  100% {
    background-position: 0% 50%;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.85);
  }
}

/* 14. Inferno Fire 🔥 (Flame Orange/Yellow Magma Glow) */
#floating-dice.skin-dice_fire .die,
#floating-dice.skin-fire .die,
.floating-dice-hud.skin-dice_fire .die,
.floating-dice-hud.skin-fire .die {
  background: linear-gradient(145deg, #f97316 0%, #c2410c 100%) !important;
  border: 1.5px solid #fed7aa !important;
  color: #fff7ed !important;
  text-shadow: 0 0 6px #f59e0b, 0 0 12px #ea580c !important;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.85), inset 0 1px 0 rgba(253, 230, 138, 0.7) !important;
  animation: diceFirePulse 1.8s infinite alternate ease-in-out !important;
}

@keyframes diceFirePulse {
  0% {
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.6), inset 0 1px 0 rgba(253, 230, 138, 0.6);
  }

  100% {
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.9), inset 0 1px 0 rgba(254, 240, 138, 0.9);
  }
}

/* 15. Cyberpunk Neon ⚡ (Electric Cyan & Purple Neon) */
#floating-dice.skin-dice_neon .die,
#floating-dice.skin-neon .die,
.floating-dice-hud.skin-dice_neon .die,
.floating-dice-hud.skin-neon .die {
  background: linear-gradient(145deg, #06b6d4 0%, #4f46e5 100%) !important;
  border: 1.5px solid #67e8f9 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px #22d3ee, 0 0 16px #06b6d4 !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.85), inset 0 1px 0 rgba(165, 243, 252, 0.8) !important;
}

/* 16. Cosmic Galaxy 🌌 (Deep Nebula Starlight Violet) */
#floating-dice.skin-dice_cosmic .die,
#floating-dice.skin-cosmic .die,
.floating-dice-hud.skin-dice_cosmic .die,
.floating-dice-hud.skin-cosmic .die {
  background: linear-gradient(145deg, #a855f7 0%, #3b0764 100%) !important;
  border: 1.5px solid #e9d5ff !important;
  color: #faf5ff !important;
  text-shadow: 0 0 8px #c084fc, 0 0 16px #9333ea !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.85), inset 0 1px 0 rgba(233, 213, 255, 0.8) !important;
}

/* Turn Timer Seconds Text & Progress Bar Styles */
#turn-timer {
  display: inline-block !important;
  font-family: 'Outfit', monospace, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.5px !important;
}

.timer-progress-container {
  display: block !important;
}

#timer-progress-fill {
  display: block !important;
}

/* Active Turn & Myself Highlights — PROFESSIONAL ULTRA UI */
.hex-player-pod.active-turn {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.45), 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  filter: none !important;
  transform: none !important;
}

.hex-player-pod.is-myself {
  border-color: rgba(56, 189, 248, 0.7) !important;
  box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.15), 0 3px 10px rgba(0, 0, 0, 0.5) !important;
  filter: none !important;
}

.hex-player-pod.active-turn.is-myself {
  background: linear-gradient(145deg, rgba(20, 38, 70, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.55), inset 0 0 14px rgba(56, 189, 248, 0.25), 0 6px 18px rgba(0, 0, 0, 0.7) !important;
  filter: none !important;
  transform: none !important;
}

.hex-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 100% !important;
  margin-top: 2px !important;
  position: relative !important;
}

.hex-avatar-icon {
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

.hex-vp-crown {
  background: #fbbf24 !important;
  color: #0f172a !important;
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  padding: 1px 4px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.hex-timer-badge {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  padding: 1px 4px !important;
  border-radius: 6px !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8) !important;
  margin: 1px 0 !important;
}

.hex-satellite-badges {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px 4px !important;
  width: 100% !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  justify-items: center !important;
}

.hex-sat-badge {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  padding: 1px 3px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

.hex-sat-badge.over-limit {
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.3) !important;
}

.hex-sat-badge.owner-crown {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.25) !important;
}

.hex-player-name-label {
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 80px !important;
  text-align: center !important;
  margin-bottom: 2px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ⬡ Floating Hexagonal Icon-Only Buttons (Perfect Dead-Center Alignment Without Scale Distortions) */
.tab-bar-item {
  pointer-events: auto !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  flex: 0 0 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 4px !important;
  cursor: pointer !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: #0f172a !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  color: #94a3b8 !important;
  transition: transform 0.22s ease, background 0.22s ease, filter 0.22s ease !important;
  position: relative !important;
  user-select: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transform-origin: center center !important;
}

.tab-bar-item .tab-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.tab-bar-item .custom-tab-svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  margin: auto !important;
  transform: none !important;
  stroke: #94a3b8;
  transition: stroke 0.2s ease, fill 0.2s ease, filter 0.2s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.tab-bar-item .tab-label {
  display: none !important;
}

.tab-bar-item:hover {
  color: #fbbf24 !important;
  background: #1e293b !important;
  transform: translateY(-3px) !important;
  filter: drop-shadow(0 4px 10px rgba(56, 189, 248, 0.5)) !important;
}

.tab-bar-item:hover .custom-tab-svg {
  stroke: #38bdf8;
  transform: none !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.7));
}

.tab-bar-item.active-tab {
  color: #ffffff !important;
  background: linear-gradient(145deg, #fbbf24, #d97706) !important;
  transform: translateY(-4px) !important;
  filter: drop-shadow(0 4px 14px rgba(251, 191, 36, 0.7)) !important;
}

.tab-bar-item.active-tab .custom-tab-svg {
  stroke: #0f172a;
  fill: rgba(15, 23, 42, 0.25);
  transform: none !important;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}

/* Active Glow Pill underneath the active tab */
.tab-bar-item::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 18px;
  height: 4px;
  background: #fbbf24;
  border-radius: 4px;
  box-shadow: 0 0 10px #fbbf24, 0 0 18px #fbbf24;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tab-bar-item.active-tab::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Header Compact Bar for SPA */
.spa-header-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  border-bottom: 1.5px solid rgba(251, 191, 36, 0.2);
  z-index: 50;
}

/* REGULAR HEXAGON THEMATIC BADGES & FRAMES */
.reg-hex-avatar {
  width: 52px;
  height: 58px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, #1e293b, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  position: relative;
  flex-shrink: 0;
}

.reg-hex-avatar::before {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #0f172a;
  z-index: -1;
}

.reg-hex-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(251, 191, 36, 0.12);
  border: 1.5px solid rgba(251, 191, 36, 0.4);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  color: #fbbf24;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
}



/* ==========================================================================
   GLOBAL RANKING & PODIUM PREMIUM STYLES (HEXAGONAL CATAN THEME)
   ========================================================================== */

.podium-container {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 20px 0 28px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
}

.podium-card {
  flex: 1 !important;
  max-width: 140px !important;
  border-radius: 18px !important;
  padding: 14px 8px 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  animation: podiumRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) ease-out !important;
}

.podium-card:hover {
  transform: translateY(-6px) scale(1.03) !important;
}

/* Podium Heights and Hierarchy */
.podium-card.first {
  order: 2 !important;
  min-height: 185px !important;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.22) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
  border: 2px solid rgba(251, 191, 36, 0.7) !important;
  box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3), inset 0 0 20px rgba(251, 191, 36, 0.15) !important;
  z-index: 3 !important;
}

.podium-card.second {
  order: 1 !important;
  min-height: 158px !important;
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.2) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.5) !important;
  box-shadow: 0 8px 24px rgba(148, 163, 184, 0.2) !important;
  z-index: 2 !important;
}

.podium-card.third {
  order: 3 !important;
  min-height: 142px !important;
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.2) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.5) !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.18) !important;
  z-index: 1 !important;
}

/* Custom Hexagon Top Badges */
.hex-top-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

.hex-top-badge.first {
  background: linear-gradient(90deg, #d97706, #fbbf24) !important;
  color: #0f172a !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5) !important;
}

.hex-top-badge.second {
  background: linear-gradient(90deg, #475569, #cbd5e1) !important;
  color: #0f172a !important;
}

.hex-top-badge.third {
  background: linear-gradient(90deg, #78350f, #d97706) !important;
  color: #ffffff !important;
}

/* Hexagonal Avatar Containers */
.podium-avatar-hex-wrapper {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
}

.podium-card.first .podium-avatar-hex-wrapper {
  width: 60px !important;
  height: 60px !important;
}

.podium-avatar-hex {
  width: 100% !important;
  height: 100% !important;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%) !important;
  background: rgba(15, 23, 42, 0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

.podium-card.first .podium-avatar-hex {
  font-size: 1.8rem !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.35) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
}

.podium-card.second .podium-avatar-hex {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.3) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
}

.podium-card.third .podium-avatar-hex {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.3) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
}

/* Hexagonal Rank Tile in Table Rows */
.hex-rank-tile {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%) !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  color: #cbd5e1 !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}

.hex-rank-tile.top-1 {
  background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%) !important;
  color: #0f172a !important;
}

.hex-rank-tile.top-2 {
  background: linear-gradient(135deg, #475569 0%, #cbd5e1 100%) !important;
  color: #0f172a !important;
}

.hex-rank-tile.top-3 {
  background: linear-gradient(135deg, #78350f 0%, #d97706 100%) !important;
  color: #ffffff !important;
}

/* Crown / Trophy Floating Badge */
.podium-crown {
  font-size: 1.6rem !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) !important;
  animation: crownFloat 2.5s ease-in-out infinite alternate !important;
}

.podium-card.first .podium-crown {
  font-size: 2.1rem !important;
  margin-top: -8px !important;
}

/* Avatar Badge */
.podium-avatar-badge {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  margin-bottom: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.podium-card.first .podium-avatar-badge {
  width: 52px !important;
  height: 52px !important;
  font-size: 1.7rem !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.5) !important;
}

/* Player Name */
.podium-name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-bottom: 2px !important;
}

.podium-card.first .podium-name {
  font-size: 0.95rem !important;
  color: #fffde7 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4) !important;
}

/* ELO Points */
.podium-elo {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 6px !important;
}

/* Rank Tag Badge */
.podium-rank-tag {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.podium-card.first .podium-rank-tag {
  background: linear-gradient(90deg, #d97706, #fbbf24) !important;
  color: #0f172a !important;
  font-weight: 900 !important;
}

/* Table Enhancements — Responsive Leaderboard Card Layout */
.leaderboard-table-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
  border-radius: 16px !important;
  background: rgba(10, 16, 30, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  margin-top: 10px !important;
  padding: 0 4px 6px 4px !important;
}

.responsive-ranking-table {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  table-layout: fixed !important;
  border-spacing: 0 6px !important;
  border-collapse: separate !important;
}

.responsive-ranking-table thead th {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 8px 6px !important;
}

.responsive-ranking-table .th-player-col {
  text-align: left !important;
  padding-left: 10px !important;
  width: auto !important;
}

.responsive-ranking-table .th-score-col {
  text-align: right !important;
  padding-right: 10px !important;
  width: 92px !important;
}

.responsive-ranking-table tbody tr.ranking-row {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  animation: rowFadeIn 0.35s ease-out forwards !important;
}

.responsive-ranking-table tbody tr.ranking-row td {
  padding: 6px 8px !important;
}

.responsive-ranking-table tbody tr.ranking-row td:first-child {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

.responsive-ranking-table tbody tr.ranking-row td:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

.responsive-ranking-table tbody tr.ranking-row:hover {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  transform: translateX(2px) scale(1.003) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.responsive-ranking-table tbody tr.ranking-row.is-me {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.18) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
}

/* Player Cell & Meta Information */
.player-cell {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 6px 4px 6px 8px !important;
}

.hex-rank-tile {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

.hex-rank-tile.top-1 {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  color: #000 !important;
}

.hex-rank-tile.top-2 {
  background: linear-gradient(135deg, #e2e8f0, #94a3b8) !important;
  color: #000 !important;
}

.hex-rank-tile.top-3 {
  background: linear-gradient(135deg, #d97706, #78350f) !important;
  color: #fff !important;
}

.player-avatar-mini {
  font-size: 1.05rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
}

.player-meta-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
  overflow: hidden !important;
}

.player-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.player-name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  color: #f8fafc !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.player-sub-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 1px !important;
}

.player-level-badge {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 0px 5px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  white-space: nowrap !important;
}

.you-badge {
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  background: #38bdf8 !important;
  color: #0f172a !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  flex: 0 0 auto !important;
}

/* ELO / Score Cell & Badge */
.elo-cell {
  text-align: right !important;
  vertical-align: middle !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 96px !important;
  box-sizing: border-box !important;
  padding: 6px 8px 6px 4px !important;
}

.elo-pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  background: rgba(251, 191, 36, 0.12) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  padding: 3px 8px !important;
  border-radius: 16px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.elo-val {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
  color: #fbbf24 !important;
  white-space: nowrap !important;
}

.elo-icon {
  font-size: 0.75rem !important;
  flex-shrink: 0 !important;
}

@media (max-width: 480px) {
  .leaderboard-table-container {
    max-height: calc(100vh - 280px) !important;
    padding: 0 2px 4px 2px !important;
  }

  .player-cell {
    gap: 6px !important;
    padding: 5px 2px 5px 6px !important;
  }

  .player-avatar-mini {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.95rem !important;
  }

  .hex-rank-tile {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 0.68rem !important;
  }

  .player-name {
    font-size: 0.78rem !important;
  }

  .elo-cell {
    width: 82px !important;
    min-width: 82px !important;
    padding: 5px 6px 5px 2px !important;
  }

  .elo-pill-badge {
    padding: 2px 6px !important;
  }

  .elo-val {
    font-size: 0.74rem !important;
  }
}

@media (max-width: 360px) {
  .player-avatar-mini {
    display: none !important;
  }
  
  .elo-cell {
    width: 76px !important;
    min-width: 76px !important;
  }
}

/* Animations */
@keyframes podiumRise {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes crownFloat {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-4px);
  }
}

@keyframes rowFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .podium-container {
    gap: 6px !important;
    margin: 14px 0 20px 0 !important;
  }

  .podium-card.first {
    min-height: 160px !important;
    padding: 10px 4px !important;
  }

  .podium-card.second {
    min-height: 140px !important;
    padding: 10px 4px !important;
  }

  .podium-card.third {
    min-height: 125px !important;
    padding: 10px 4px !important;
  }

  .podium-name {
    font-size: 0.75rem !important;
  }

  .podium-elo {
    font-size: 0.72rem !important;
  }
}

/* ==========================================================================
   UNIFIED PAGE COMPONENT STYLES (Profile, Shop, Social, Ranking)
   ======================================================*/
/* ═══════════════════════════════════════════════════
   PROFILE PAGE — Mobile-First Responsive Redesign
   ═══════════════════════════════════════════════════ */

.profile-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Card Base (Glassmorphism) ── */
.pcard {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(9, 14, 26, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 20px;
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), transparent);
}

/* ── pcard-title ── */
.pcard-title {
  font-size: 0.78rem;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Tab Navigation — Compact & Accessible (No Horizontal Scroll) ── */
.tab-nav {
  display: flex;
  gap: 3px;
  background: rgba(9, 14, 26, 0.95);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* No horizontal scroll */
}

.tab-btn {
  flex: 1;
  min-height: 38px;
  padding: 7px 6px;
  border: none;
  background: transparent;
  color: #64748b;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tab-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.1));
  color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.18), inset 0 1px 0 rgba(56, 189, 248, 0.2);
}

.tab-btn:hover:not(.active) {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
}

.tab-panel {
  display: none;
  flex-direction: column;
  gap: 14px;
}

.tab-panel.active {
  display: flex;
}

/* ── Hero Card — Compact Mobile Layout ── */
.hero-card-compact {
  padding: 14px;
}

.hero-section {
  display: flex;
  gap: 12px;
  align-items: center;
  /* vertically centered */
}

.hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.hero-avatar {
  width: 58px;
  height: 58px;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%) !important;
  background: linear-gradient(135deg, #1e3a5f, #0f2040);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.6));
  transition: all 0.3s ease;
}

.hero-avatar-edit-pencil {
  position: absolute !important;
  bottom: -4px !important;
  right: -4px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  border: 2px solid #0f172a !important;
  color: #000 !important;
  font-size: 0.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.6) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
  line-height: 1 !important;
}

.hero-avatar-edit-pencil:hover {
  transform: scale(1.2) rotate(15deg) !important;
  filter: brightness(1.15) !important;
  box-shadow: 0 6px 18px rgba(251, 191, 36, 0.9) !important;
}

/* ==========================================================================
   AVATAR EMOJI CUSTOMIZER MODAL (Responsive, No Overflow, Vertical Scroll Only)
   ========================================================================== */

#modal-edit-avatar {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(2, 6, 23, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 99999 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#modal-edit-avatar.hidden {
  display: none !important;
}

.modal-avatar-glass {
  max-width: 460px !important;
  width: 100% !important;
  padding: 24px 20px !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(251, 191, 36, 0.4) !important;
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(251, 191, 36, 0.15) !important;
  color: #fff !important;
  text-align: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-avatar-close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  font-size: 1.1rem !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  z-index: 10 !important;
}
.modal-avatar-close-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #fff !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  transform: rotate(90deg) !important;
}

.modal-avatar-header-badge {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
}

.modal-avatar-title {
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: 0.3px !important;
}

.modal-avatar-preview-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

.modal-avatar-preview-circle {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(56, 189, 248, 0.2)) !important;
  border: 3px solid #fbbf24 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.6rem !important;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.35) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Custom Emoji Input Container */
.avatar-custom-input-box {
  margin-bottom: 16px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.avatar-custom-input-label {
  display: block !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

.avatar-custom-input-row {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

.avatar-custom-input-field {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  text-align: center !important;
  padding: 6px 10px !important;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji, sans-serif !important;
}

.avatar-custom-input-field:focus {
  outline: none !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

.btn-apply-emoji {
  flex: 0 0 auto !important;
  padding: 0 16px !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.avatar-preset-heading {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
  text-align: left !important;
  margin-bottom: 8px !important;
}

/* Preset Emoji Grid - STRICT VERTICAL SCROLL ONLY */
.avatar-preset-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
  gap: 6px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 6px 4px !important;
  margin-bottom: 18px !important;
  background: rgba(10, 15, 29, 0.7) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.avatar-preset-grid::-webkit-scrollbar {
  width: 5px !important;
}
.avatar-preset-grid::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5) !important;
  border-radius: 8px !important;
}
.avatar-preset-grid::-webkit-scrollbar-thumb {
  background: rgba(251, 191, 36, 0.35) !important;
  border-radius: 8px !important;
}
.avatar-preset-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(251, 191, 36, 0.65) !important;
}

.btn-emoji-choice {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  font-size: 1.35rem !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji, sans-serif !important;
}

.btn-emoji-choice:hover {
  background: rgba(251, 191, 36, 0.25) !important;
  border-color: #fbbf24 !important;
  transform: scale(1.15) !important;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4) !important;
}

.btn-emoji-choice.selected {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.35), rgba(56, 189, 248, 0.35)) !important;
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.6) !important;
  transform: scale(1.1) !important;
}

.modal-avatar-actions-row {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.modal-avatar-btn-cancel {
  flex: 1 !important;
  padding: 12px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
}

.modal-avatar-btn-save {
  flex: 2 !important;
  padding: 12px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #000 !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  #modal-edit-avatar {
    padding: 10px !important;
  }

  .modal-avatar-glass {
    padding: 18px 12px 14px 12px !important;
    border-radius: 20px !important;
  }

  .avatar-preset-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    max-height: 155px !important;
    padding: 4px !important;
    gap: 5px !important;
  }

  .btn-emoji-choice {
    height: 36px !important;
    font-size: 1.25rem !important;
  }
}

/* Avatar Frame Skins */
.hero-avatar.frame-flame,
.hero-avatar-wrap.frame-flame .hero-avatar {
  filter: drop-shadow(0 0 12px #f97316) drop-shadow(0 0 20px #ef4444) !important;
  animation: frameFlamePulse 1.8s infinite ease-in-out !important;
}

@keyframes frameFlamePulse {

  0%,
  100% {
    filter: drop-shadow(0 0 10px #f97316) drop-shadow(0 0 18px #ef4444);
  }

  50% {
    filter: drop-shadow(0 0 16px #ef4444) drop-shadow(0 0 28px #fb923c);
  }
}

.hero-avatar.frame-gold,
.hero-avatar-wrap.frame-gold .hero-avatar {
  filter: drop-shadow(0 0 14px #fbbf24) drop-shadow(0 0 22px #d97706) !important;
  animation: frameGoldGlow 2.5s infinite linear !important;
}

@keyframes frameGoldGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 20px rgba(217, 119, 6, 0.6));
  }

  50% {
    filter: drop-shadow(0 0 18px rgba(255, 220, 80, 0.95)) drop-shadow(0 0 30px rgba(245, 158, 11, 0.85));
  }
}

.hero-avatar.frame-cyber,
.hero-avatar-wrap.frame-cyber .hero-avatar {
  filter: drop-shadow(0 0 12px #22d3ee) drop-shadow(0 0 20px #a855f7) !important;
  animation: frameCyberPulse 1.5s infinite ease-in-out !important;
}

@keyframes frameCyberPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 10px #22d3ee) drop-shadow(0 0 18px #a855f7);
  }

  50% {
    filter: drop-shadow(0 0 16px #c084fc) drop-shadow(0 0 26px #06b6d4);
  }
}

.hero-avatar.frame-galaxy,
.hero-avatar-wrap.frame-galaxy .hero-avatar {
  filter: drop-shadow(0 0 14px #a855f7) drop-shadow(0 0 22px #ec4899) !important;
  animation: frameGalaxyRotate 3s infinite ease-in-out !important;
}

@keyframes frameGalaxyRotate {

  0%,
  100% {
    filter: drop-shadow(0 0 12px #a855f7) drop-shadow(0 0 20px #ec4899);
  }

  50% {
    filter: drop-shadow(0 0 18px #ec4899) drop-shadow(0 0 28px #818cf8);
  }
}



.hero-info {
  flex: 1;
  min-width: 0;
  /* prevents overflow */
}

.hero-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.hero-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.hero-title-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
  white-space: nowrap;
}

.xp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  margin-bottom: 4px;
  color: #94a3b8;
  font-weight: 700;
}

.xp-row #hero-level {
  color: #38bdf8;
}

.xp-bar-bg {
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transition: width .6s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Stats Row (below hero) ── */
.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.stat-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
  transition: background .2s;
}

.stat-tile:hover {
  background: rgba(56, 189, 248, 0.06);
}

.stat-tile .val {
  font-size: 0.95rem;
  font-weight: 900;
  color: #38bdf8;
  display: block;
  line-height: 1.2;
}

.stat-tile .lbl {
  font-size: 0.62rem;
  color: #64748b;
  margin-top: 2px;
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .03em;
}



/* ── Inline Username Edit ── */
.hero-name-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0.55;
  transition: opacity .2s, background .2s;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hero-name-edit-btn:hover,
.hero-name-edit-btn:focus {
  opacity: 1;
  background: rgba(56, 189, 248, 0.12);
  outline: none;
}

.hero-name-input {
  padding: 6px 10px !important;
  font-size: 16px !important;
  /* no iOS zoom */
  border-radius: 9px !important;
  height: 34px;
  flex: 1;
  min-width: 0;
}

.hero-name-save-btn {
  min-height: 34px;
  padding: 4px 10px !important;
  border-radius: 9px !important;
  font-size: 0.9rem !important;
  flex-shrink: 0;
}

.hero-name-cancel-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  min-height: 34px;
  padding: 3px 8px;
  flex-shrink: 0;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s;
}

.hero-name-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.25);
}



/* ── Form Fields ── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.field-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.field-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(56, 189, 248, 0.18);
  color: #e2e8f0;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  /* 16px prevents iOS auto-zoom */
  font-weight: 600;
  transition: border-color .2s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.field-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.field-input[readonly] {
  cursor: default;
  opacity: 0.65;
}

.field-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

.field-row .field-input {
  flex: 1;
  min-width: 140px;
}

.btn-save {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #0f172a;
  font-weight: 900;
  font-size: 0.9rem;
  font-family: 'Outfit', sans-serif;
  transition: all .2s;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-save:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-copy {
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(56, 189, 248, 0.22);
  background: transparent;
  color: #e2e8f0;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  touch-action: manipulation;
}

.btn-copy:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: #38bdf8;
}

/* ── Legacy .color-swatches (non-carousel fallback) ── */
.color-swatches {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}


.swatch {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 2.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all .2s;
  background: rgba(255, 255, 255, 0.05);
}

.swatch:hover {
  transform: scale(1.12);
}

.swatch.active {
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
  transform: scale(1.08);
}


.cosmetic-item:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.06);
}

.cosmetic-item.equipped {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

.cosmetic-item.locked {
  opacity: 0.45;
  cursor: default;
}

.cosmetic-item .item-icon {
  font-size: 2rem;
  margin-bottom: 6px;
}

.cosmetic-item .item-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
}

.cosmetic-item .item-tag {
  font-size: 0.65rem;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 8px;
  display: inline-block;
  font-weight: 700;
}

.item-tag.equipped-tag {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.item-tag.locked-tag {
  background: rgba(100, 116, 139, 0.2);
  color: #64748b;
}

.item-tag.free-tag {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.titles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.title-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(56, 189, 248, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-item:hover {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.06);
}

.title-item.equipped {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
}

.title-item.locked {
  opacity: 0.45;
  cursor: default;
}

.title-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #e2e8f0;
}

.title-desc {
  font-size: 0.72rem;
  color: #64748b;
}

.title-status {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  width: fit-content;
}

/* Shop Styles */
.shop-items-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.shop-card-item {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1.5px solid rgba(251, 191, 36, 0.25);
  border-radius: 20px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.shop-card-item:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.25);
}

.shop-card-item.owned {
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.75));
}

.preview-canvas-container {
  width: 100%;
  height: 90px;
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.preview-canvas-container canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-toast-banner {
  display: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Social & Leaderboard Styles */
.social-filter-pills {
  display: flex;
  gap: 8px;
  background: rgba(15, 23, 42, 0.6);
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
}

.social-pill {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.social-pill.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(2, 132, 199, 0.3));
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);
}

.friend-card-plato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.friend-card-plato:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
}

.avatar-status-badge {
  position: relative;
  flex-shrink: 0;
}

.avatar-icon-wrap {
  width: 48px;
  height: 54px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #0f172a;
}

.status-dot.online {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.status-dot.in-game {
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
}

.status-dot.offline {
  background: #64748b;
}

.friend-actions-group {
  display: flex;
  gap: 6px;
}

.btn-friend-action {
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-friend-action.challenge {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #000;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.btn-friend-action.challenge:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.5);
}

.btn-friend-action.copy-id {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38bdf8;
  color: #38bdf8;
}

.btn-friend-action.remove {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #fca5a5;
}

.my-id-card-banner {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.8));
  border: 1.5px dashed rgba(56, 189, 248, 0.3);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.podium-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 18px 0;
  padding: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.8));
  border-radius: 20px;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.podium-card {
  flex: 1;
  max-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
  border-radius: 16px;
  background: rgba(30, 41, 59, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  position: relative;
}

.podium-card.first {
  order: 2;
  transform: translateY(-8px);
  border-color: #fbbf24;
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.2), rgba(15, 23, 42, 0.9));
  box-shadow: 0 10px 25px rgba(251, 191, 36, 0.3);
}

.podium-card.second {
  order: 1;
  border-color: #94a3b8;
}

.podium-card.third {
  order: 3;
  border-color: #b45309;
}

.podium-crown {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 4px;
}

.podium-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.podium-elo {
  font-size: 0.76rem;
  font-weight: 800;
  color: #fbbf24;
  margin-top: 2px;
}

/* 📱 Mobile Responsive Minimalist Optimization */
@media (max-width: 600px) {

  .page-content-card,
  .profile-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 14px 12px 100px 12px !important;
    box-sizing: border-box !important;
  }

  /* Profile: 2-col stats on small screens */
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Slightly smaller hero name on tiny screens */
  .hero-name {
    font-size: 1rem !important;
  }

  /* Stack quick-action buttons vertically on very small */
  .hero-quick-actions {
    flex-direction: row !important;
  }

  /* Cosmetics grid: 2 columns on mobile */
  #shop-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }


  .shop-container,
  .leaderboard-container,
  .social-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Full width action rows, room creation controls, and grids */
  .lobby-action-row {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  #btn-create-room {
    width: 100% !important;
    padding: 16px !important;
    font-size: 1.05rem !important;
  }

  .join-room-box {
    width: 100% !important;
    flex-direction: row !important;
  }

  #input-room-code {
    flex: 1 !important;
    font-size: 1rem !important;
  }

  .join-room-box button {
    width: auto !important;
  }

  .shop-items-grid,
  .cosmetics-grid,
  .shop-items-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .profile-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
}

/* Popover Notifications Overlay Modal */
.notifications-drawer-overlay {
  position: fixed !important;
  top: 65px !important;
  right: 16px !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  z-index: 9999999 !important;
}

.notifications-drawer-overlay.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.notifications-drawer-overlay:not(.hidden) {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ⚙️ Modern Settings Modal & Match Info Grid */
.settings-card-modern {
  max-width: 480px !important;
  width: 92% !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96)) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
  box-sizing: border-box !important;
}

.settings-section-title {
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  color: #38bdf8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.settings-match-info-box {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  margin: 12px 0 16px 0 !important;
}

.settings-info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.settings-info-card {
  background: rgba(30, 41, 59, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.info-card-label {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
}

.info-card-value {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
}

.info-card-value.warning {
  color: #f87171 !important;
}

.settings-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.settings-toggle-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 14px !important;
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.settings-toggle-row:hover {
  background: rgba(30, 41, 59, 0.8) !important;
}

.custom-toggle-input {
  width: 22px !important;
  height: 22px !important;
  cursor: pointer !important;
  accent-color: #38bdf8 !important;
}

.dev-tools-box {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 12px !important;
  margin-top: 6px !important;
}

.btn-dev-logs {
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px !important;
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1.5px solid #ef4444 !important;
  color: #fca5a5 !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}

/* ⏱️ Turn Timer Box Widget */
.timer-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 48px !important;
  padding: 0 !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

#turn-timer,
.timer-value {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: 'Outfit', monospace, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  color: #38bdf8 !important;
  letter-spacing: 0px !important;
  font-variant-numeric: tabular-nums !important;
}

/* ==========================================================================
   ✨ NUEVO CENTRO SOCIAL — ESTILOS PREMIUM
   ========================================================================== */

/* Hero Banner del Jugador */
.social-hero-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.social-hero-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.social-hero-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}

.social-hero-avatar-ring {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.35);
  flex-shrink: 0;
}

.social-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.social-hero-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.15rem;
  color: #ffffff;
}

.social-hero-title-badge {
  font-size: 0.72rem;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  font-weight: 800;
  letter-spacing: 0.3px;
}

.social-hero-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 700;
}

.social-hero-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.6);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Caja de Código de Usuario / Copiar ID */
.social-hero-id-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.7);
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.social-hero-id-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.social-hero-id-val {
  font-size: 0.95rem;
  font-weight: 900;
  color: #38bdf8;
  font-family: monospace;
  letter-spacing: 0.5px;
}

/* Animación de Pulso de Estado */
.friend-status-pulse {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}

.friend-status-pulse.online {
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: pulse-green 2s infinite;
}

.friend-status-pulse.ingame {
  background: #a855f7;
  box-shadow: 0 0 10px #a855f7;
  animation: pulse-purple 2s infinite;
}

.friend-status-pulse.offline {
  background: #64748b;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes pulse-purple {
  0% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(168, 85, 247, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
  }
}

/* Tarjeta Mejorada de Amigo */
.friend-card-v2 {
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 12px 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.friend-card-v2:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(30, 41, 59, 0.85);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.friend-v2-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.friend-v2-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.friend-v2-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.friend-v2-username {
  font-weight: 900;
  font-size: 0.94rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.friend-v2-tag {
  font-size: 0.72rem;
  color: #64748b;
  font-family: monospace;
  font-weight: 600;
}

.friend-v2-subtext {
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.friend-v2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-friend-invite {
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(2, 132, 199, 0.3));
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-friend-invite:hover {
  background: rgba(56, 189, 248, 0.3);
  border-color: #38bdf8;
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}

.btn-friend-remove {
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-friend-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ffffff;
}

/* Solicitudes Pendientes Section */
.pending-requests-card {
  margin-bottom: 20px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
  border: 1.5px solid rgba(251, 191, 36, 0.3);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.pending-requests-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pending-requests-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 900;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pending-requests-badge-anim {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.pending-request-item {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pending-request-item:last-child {
  margin-bottom: 0;
}

/* Empty State Animado */
.social-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
  font-size: 0.88rem;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 18px;
  border: 1.5px dashed rgba(255, 255, 255, 0.08);
}

.social-empty-icon {
  font-size: 2.8rem;
  display: block;
  margin-bottom: 10px;
  opacity: 0.8;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

/* Botón Minimalista de la Tienda */
.btn-shop-action {
  width: 100% !important;
  padding: 3px 4px !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  border: none !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.btn-shop-action.btn-buy {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3) !important;
}

.btn-shop-action.btn-buy:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.5) !important;
}

.btn-shop-action.btn-equip {
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #38bdf8 !important;
}

.btn-shop-action.btn-equip:hover {
  background: rgba(56, 189, 248, 0.35) !important;
  color: #ffffff !important;
}

.btn-shop-action.btn-active {
  background: rgba(34, 197, 94, 0.2) !important;
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  color: #4ade80 !important;
}

/* 🃏 Cartas de Desarrollo — Carrusel Horizontal Dividido & Accesible */
.hud-scroll-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#dev-cards-hud-list,
.hud-cards-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  touch-action: pan-x !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px 14px 12px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(192, 132, 252, 0.5) rgba(15, 23, 42, 0.6) !important;
}

.dev-cards-lane {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
}

.dev-lane-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 4px !important;
  flex-shrink: 0 !important;
}

.dev-lane-header .lane-title {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
  white-space: nowrap !important;
}

.dev-lane-header.used .lane-title {
  color: #94a3b8 !important;
  text-shadow: none !important;
}

.dev-lane-cards {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
}

/* Divisor vertical entre Activas y Usadas */
.dev-cards-divider {
  display: flex !important;
  align-items: stretch !important;
  padding: 16px 2px 0 2px !important;
  flex-shrink: 0 !important;
}

.dev-cards-divider .divider-line {
  width: 2px !important;
  height: 100% !important;
  min-height: 110px !important;
  background: linear-gradient(180deg, rgba(192, 132, 252, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  border-radius: 2px !important;
}

#dev-cards-hud-list .hud-dev-card,
.hud-cards-list .hud-dev-card {
  flex-shrink: 0 !important;
  min-width: 110px !important;
  width: 110px !important;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 14px !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 4px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  position: relative !important;
  user-select: none !important;
}

#dev-cards-hud-list .hud-dev-card:hover:not(.played):not(.locked),
.hud-cards-list .hud-dev-card:hover:not(.played):not(.locked) {
  transform: translateY(-4px) scale(1.03) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 22px rgba(56, 189, 248, 0.35) !important;
}

/* Cartas de desarrollo Usadas / Agotadas */
.dev-cards-lane.used-lane .hud-dev-card,
#dev-cards-hud-list .hud-dev-card.played,
.hud-cards-list .hud-dev-card.played {
  opacity: 0.65 !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.25) !important;
  filter: grayscale(0.35) !important;
  box-shadow: none !important;
}

.dev-cards-lane.used-lane .hud-dev-card:hover,
#dev-cards-hud-list .hud-dev-card.played:hover {
  opacity: 0.85 !important;
  transform: none !important;
}

/* Badges de estado */
.card-status-badge {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.card-status-badge.played-badge {
  background: rgba(148, 163, 184, 0.2) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
}

.card-status-badge.vp-badge {
  background: rgba(251, 191, 36, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.6) !important;
}

.card-status-badge.locked-badge {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

/* Scrollbar Personalizado Sutil */
#dev-cards-hud-list::-webkit-scrollbar,
.hud-cards-list::-webkit-scrollbar {
  height: 6px !important;
}

#dev-cards-hud-list::-webkit-scrollbar-track,
.hud-cards-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6) !important;
  border-radius: 4px !important;
}

#dev-cards-hud-list::-webkit-scrollbar-thumb,
.hud-cards-list::-webkit-scrollbar-thumb {
  background: rgba(192, 132, 252, 0.4) !important;
  border-radius: 4px !important;
}

#dev-cards-hud-list::-webkit-scrollbar-thumb:hover,
.hud-cards-list::-webkit-scrollbar-thumb:hover {
  background: rgba(192, 132, 252, 0.75) !important;
}

.dev-cards-hud {
  max-width: min(520px, 94vw) !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   MINIMALIST HUD PLAYER TRADE BAR & COMPACT TRADE RESPONSE CARD
   ========================================================================== */
.hud-player-trade-bar {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid #2dd4bf;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(45, 212, 191, 0.25);
  z-index: 100;
  animation: hudTradeBarSlide 0.25s ease-out;
  box-sizing: border-box;
}

@keyframes hudTradeBarSlide {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98) translateX(-50%);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) translateX(-50%);
  }
}

.hud-player-trade-bar.hidden {
  display: none !important;
}

.hud-trade-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}

.hud-trade-bar-title {
  font-size: 0.85rem;
  font-weight: 900;
  color: #2dd4bf;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-trade-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hud-trade-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px;
  box-sizing: border-box;
  min-width: 0;
}

.side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hud-trade-side-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
}

.hud-trade-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 32px;
}

.hud-trade-chips .empty-hint {
  font-size: 0.72rem;
  color: #64748b;
  font-style: italic;
}

.hud-give-chip {
  background: rgba(45, 212, 191, 0.2);
  border: 1px solid #2dd4bf;
  color: #2dd4bf;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-hud-mini-icon {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s ease;
}

.btn-hud-mini-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hud-trade-divider {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fbbf24;
  user-select: none;
  flex-shrink: 0;
}

.hud-trade-want-selectors {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  flex-wrap: wrap;
}

.hud-want-chip {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  flex: 1;
  min-width: 38px;
  justify-content: center;
}

.hud-want-chip:hover {
  background: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
}

.hud-want-chip .want-count {
  font-weight: 900;
  font-size: 0.78rem;
  color: #fbbf24;
  min-width: 10px;
  text-align: center;
}

.hud-trade-bar-footer {
  display: flex;
  justify-content: flex-end;
}

.btn-hud-send-trade {
  width: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1.5px solid #34d399;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
  transition: all 0.15s ease;
  text-align: center;
}

.btn-hud-send-trade:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-hud-send-trade:not(:disabled):hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.btn-hud-close-trade {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #ef4444;
  font-weight: 800;
  font-size: 0.85rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-hud-close-trade:hover {
  background: #ef4444;
  color: #fff;
}

/* --- TRADE ACTIVE ULTRA-COMPACT FLOATING CARD (PRO ESPORTS REDESIGN) --- */
.trade-active-compact-card {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1200 !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(24, 33, 53, 0.98)) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.8) !important;
  border-radius: 20px !important;
  padding: 14px 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(251, 191, 36, 0.35) !important;
  width: 350px !important;
  max-width: calc(100vw - 28px) !important;
  box-sizing: border-box !important;
  animation: tradeCardPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto !important;
}

@keyframes tradeCardPop {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 16px)) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.trade-active-compact-card.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.trade-active-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.trade-active-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 8px !important;
}

.trade-active-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.trade-active-avatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  flex-shrink: 0 !important;
}

.trade-active-avatar.hidden {
  display: none !important;
}

.trade-active-title {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
}

.trade-timer-badge {
  background: rgba(251, 191, 36, 0.2) !important;
  border: 1px solid #fbbf24 !important;
  border-radius: 8px !important;
  padding: 2px 7px !important;
  color: #fbbf24 !important;
  font-weight: 900 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.trade-accepted-alert {
  color: #34d399 !important;
  font-weight: 900 !important;
  font-size: 0.82rem !important;
  animation: acceptedGlow 1s infinite alternate ease-in-out !important;
}

@keyframes acceptedGlow {
  from {
    color: #34d399;
    text-shadow: 0 0 4px rgba(52, 211, 153, 0.4);
  }

  to {
    color: #6ee7b7;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.9);
  }
}

.btn-trade-close-mini {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #cbd5e1 !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.btn-trade-close-mini:hover {
  background: #ef4444 !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

/* Timer progress bar */
.trade-timer-bar-container {
  width: 100% !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.trade-timer-bar-fill {
  height: 100% !important;
  width: 100% !important;
  background: linear-gradient(90deg, #10b981 0%, #fbbf24 60%, #ef4444 100%) !important;
  border-radius: 4px !important;
  transition: width 0.3s linear !important;
}

.trade-active-body {
  font-size: 0.8rem !important;
  margin: 0 !important;
  width: 100% !important;
}

.trade-compact-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  background: rgba(10, 15, 29, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}

.trade-arrow-divider {
  color: #fbbf24 !important;
  font-weight: 900 !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.5) !important;
}

.trade-res-section {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.trade-res-section-label {
  font-weight: 900 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.trade-res-section.recibes .trade-res-section-label {
  color: #34d399 !important;
}

.trade-res-section.entregas .trade-res-section-label {
  color: #fca5a5 !important;
}

.trade-res-chips {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
}

.trade-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  padding: 3px 7px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.trade-chip.wood {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.18);
}

.trade-chip.brick {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.18);
}

.trade-chip.sheep {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.18);
}

.trade-chip.wheat {
  border-color: rgba(234, 179, 8, 0.4);
  background: rgba(234, 179, 8, 0.18);
}

.trade-chip.ore {
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.18);
}

.chip-qty {
  color: #fbbf24 !important;
  font-weight: 900 !important;
}

.trade-res-empty {
  color: var(--text-muted) !important;
  font-size: 0.76rem !important;
}

/* Receiver Accept / Reject action buttons */
.trade-compact-actions {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 4px !important;
}

.btn-trade-tick {
  flex: 1 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  font-size: 0.84rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
  border: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.btn-trade-tick.accept {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1.5px solid #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

.btn-trade-tick.accept:hover {
  filter: brightness(1.18) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.65) !important;
}

.btn-trade-tick.reject {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  border: 1.5px solid #f87171 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
}

.btn-trade-tick.reject:hover {
  filter: brightness(1.18) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.65) !important;
}

.btn-trade-tick:disabled,
.btn-trade-tick.disabled {
  background: rgba(71, 85, 105, 0.4) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.3) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.45 !important;
  filter: grayscale(0.8) !important;
  pointer-events: none !important;
}

/* Sender Rival Response Items */
.trade-sender-responses {
  max-height: 140px !important;
  overflow-y: auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.trade-rival-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.trade-rival-item.accepted {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.15) 100%) !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35) !important;
}

.trade-rival-item.rejected {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.rival-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.rival-avatar {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 0.72rem !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

.rival-text-col {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.rival-name {
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  color: #f8fafc !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rival-status-tag {
  font-weight: 800 !important;
  font-size: 0.68rem !important;
}

.rival-status-tag.accept {
  color: #34d399 !important;
}

.rival-status-tag.reject {
  color: #fca5a5 !important;
}

.rival-status-tag.waiting {
  color: #94a3b8 !important;
}

/* Outstanding Deal Execute Button for the Sender */
.btn-trade-deal-execute {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1.5px solid #34d399 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
  padding: 5px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5) !important;
  white-space: nowrap !important;
  animation: pulseDealBtn 1.5s infinite alternate ease-in-out !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}

@keyframes pulseDealBtn {
  from {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
  }

  to {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.8), 0 0 10px #34d399;
  }
}

.btn-trade-deal-execute:hover {
  filter: brightness(1.2) !important;
  transform: scale(1.08) !important;
}

.btn-trade-deal-execute:active {
  transform: scale(0.96) !important;
}

/* Receiver Response Feedback Card */
.trade-response-feedback {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  margin-top: 6px !important;
  box-sizing: border-box !important;
}

.trade-response-feedback.accepted {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1.5px solid #10b981 !important;
  color: #34d399 !important;
}

.trade-response-feedback.rejected {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1.5px solid #ef4444 !important;
  color: #fca5a5 !important;
}

.trade-response-feedback .feedback-icon {
  font-size: 1.2rem !important;
}

.trade-response-feedback .feedback-text {
  display: flex !important;
  flex-direction: column !important;
  font-size: 0.78rem !important;
}

.trade-response-feedback .feedback-text strong {
  font-weight: 900 !important;
  font-size: 0.82rem !important;
}

.trade-response-feedback .feedback-text span {
  font-size: 0.72rem !important;
  opacity: 0.9 !important;
}

@media (max-width: 640px) {
  .trade-active-compact-card {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(340px, calc(100vw - 20px)) !important;
    padding: 12px 14px !important;
  }
}

/* --- Lobby Players List & Grid Responsive Layout --- */
#lobby-players-list,
.players-lobby-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}

.lobby-player-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.lobby-player-item:hover {
  border-color: rgba(251, 191, 36, 0.75) !important;
  background: rgba(30, 41, 59, 0.95) !important;
  transform: translateY(-1px) !important;
}

.lobby-player-item.bot {
  border-color: rgba(56, 189, 248, 0.4) !important;
}

.lobby-player-item .p-name {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  color: #ffffff !important;
  flex: 1 !important;
  min-width: 0 !important;
  word-break: break-word !important;
}

.btn-remove-bot {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: #f87171 !important;
  border-radius: 8px !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.btn-remove-bot:hover {
  background: rgba(239, 68, 68, 0.5) !important;
  color: #ffffff !important;
}

@media (min-width: 640px) {

  #lobby-players-list,
  .players-lobby-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 12px !important;
  }
}

/* --- Modern Premium Social Center Styles --- */
.social-hero-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
}

.social-filter-pills,
.social-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 5px !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.social-pill,
.social-tab-btn {
  flex: 1 1 auto !important;
  min-width: 70px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  user-select: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.social-pill.active,
.social-tab-btn.active {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4) !important;
}

.friend-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(30, 41, 59, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.friend-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  background: rgba(30, 41, 59, 0.95) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}

.friend-card button {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.pending-requests-card {
  background: rgba(251, 191, 36, 0.08) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* --- Settings Modal & Custom Square Checkbox System --- */
.settings-card-modern {
  max-width: 520px !important;
  width: 95% !important;
  box-sizing: border-box !important;
  padding: 24px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: rgba(15, 23, 42, 0.96) !important;
  border: 2px solid rgba(56, 189, 248, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
}

.settings-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-height: 65vh !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.settings-section-title {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fbbf24 !important;
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

.settings-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(30, 41, 59, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
}

.settings-toggle-row:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: rgba(30, 41, 59, 0.95) !important;
}

.settings-toggle-row span {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  flex: 1 !important;
  min-width: 0 !important;
  word-break: break-word !important;
}

/* Custom Square Checkbox (Static, Crisp, Zero White Flash) */
.custom-toggle-input,
.custom-toggle-input:active,
.custom-toggle-input:focus,
.custom-toggle-input:hover,
.settings-toggle-row,
.settings-toggle-row:active,
.settings-toggle-row:focus {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  outline: none !important;
  user-select: none !important;
}

.custom-toggle-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 2px solid rgba(148, 163, 184, 0.5) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  outline: none !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.custom-toggle-input::before {
  content: none !important;
  display: none !important;
}

.custom-toggle-input::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  opacity: 0 !important;
  transition: opacity 0.12s ease !important;
}

.custom-toggle-input:checked {
  background: #fbbf24 !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4) !important;
}

.custom-toggle-input:checked::after {
  opacity: 1 !important;
}

.custom-toggle-input:active {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: #fbbf24 !important;
}

.custom-toggle-input:checked:active {
  background: #fbbf24 !important;
  border-color: #fbbf24 !important;
}

.custom-toggle-input:focus-visible {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35) !important;
}

/* Settings Action Buttons */
.btn-settings-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: break-word !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.btn-settings-action.primary {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(2, 132, 199, 0.3) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
}

.btn-settings-action.primary:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.35) 0%, rgba(2, 132, 199, 0.5) 100%) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-1px) !important;
}

.btn-settings-action.secondary {
  background: rgba(148, 163, 184, 0.15) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.4) !important;
  color: #cbd5e1 !important;
}

/* --- Social Center Search & Add Friend Input Bar --- */
#social-page-add-wrap,
#modal-add-friend-wrap {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
}

.social-search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.social-search-input-wrap {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 12px !important;
  padding: 0 12px 0 38px !important;
  height: 42px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.social-search-input-wrap:focus-within {
  border-color: #38bdf8 !important;
  background: rgba(15, 23, 42, 0.98) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.social-search-icon {
  position: absolute !important;
  left: 12px !important;
  font-size: 1rem !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s ease, color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.social-search-input-wrap:focus-within .social-search-icon {
  opacity: 1 !important;
  color: #38bdf8 !important;
}

.social-search-input-wrap input,
#social-input-add-friend {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.social-search-input-wrap input::placeholder,
#social-input-add-friend::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  font-size: 0.84rem !important;
}

.btn-social-add-submit {
  height: 42px !important;
  padding: 0 14px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-social-add-submit:hover {
  background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
  box-shadow: 0 5px 14px rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-1px) !important;
}

.btn-social-add-submit:active {
  transform: translateY(1px) !important;
}

.btn-social-pending-toggle {
  height: 42px !important;
  padding: 0 12px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-social-pending-toggle:hover {
  background: rgba(251, 191, 36, 0.24) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3) !important;
  transform: translateY(-1px) !important;
}

.btn-social-pending-toggle:active {
  transform: translateY(1px) !important;
}

.btn-social-pending-toggle .badge-count {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  border-radius: 8px;
  padding: 1px 6px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.pending-modal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}

.pending-modal-item:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(56, 189, 248, 0.3);
}

/* --- Jet Black with Fine Silver Border Cards & Integrated Action Buttons --- */
.friend-card-v2,
.pending-modal-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: rgba(8, 11, 20, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.friend-card-v2:hover,
.pending-modal-item:hover {
  background: rgba(13, 18, 30, 0.98) !important;
  border-color: rgba(248, 250, 252, 0.5) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 14px rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

.btn-card-action-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.6) !important;
  padding: 7px 14px !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-card-action-primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%) !important;
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.5) !important;
  transform: translateY(-1px) !important;
}

.btn-card-action-secondary {
  background: rgba(248, 250, 252, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(226, 232, 240, 0.25) !important;
  padding: 7px 12px !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.btn-card-action-secondary:hover {
  background: rgba(248, 250, 252, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}

.btn-card-action-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  padding: 7px 12px !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.btn-card-action-danger:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

/* --- Ultra-Compact Shop Items Grid (2 Cards Per Row) & High-Contrast Touch Buttons --- */
#shop-items-grid,
.shop-items-grid,
.shop-items-grid-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#collection-items-grid,
.collection-items-grid {
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


.shop-card-hex {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 6px !important;
  background: rgba(8, 11, 20, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.2) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 115px !important;
}

.shop-card-hex:hover {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 12px rgba(56, 189, 248, 0.2) !important;
  transform: translateY(-2px) !important;
}

.shop-hex-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  font-size: 1.6rem !important;
  margin-bottom: 2px !important;
}

.btn-shop-action {
  width: 100% !important;
  padding: 6px 2px !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-align: center !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.btn-shop-action.btn-buy {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: #000000 !important;
  border: 1px solid #fbbf24 !important;
  box-shadow: 0 3px 10px rgba(251, 191, 36, 0.35) !important;
}

.btn-shop-action.btn-buy:hover {
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(251, 191, 36, 0.5) !important;
}

.btn-shop-action.btn-equip {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: 1px solid #38bdf8 !important;
  box-shadow: 0 3px 10px rgba(56, 189, 248, 0.35) !important;
}

.btn-shop-action.btn-equip:hover {
  background: linear-gradient(135deg, #7dd3fc 0%, #0369a1 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(56, 189, 248, 0.5) !important;
}

.btn-shop-action.btn-active {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border: 1px solid #22c55e !important;
  cursor: default !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DICE ROLL ORDER OVERLAY (Tirada inicial de orden)
   ═══════════════════════════════════════════════════════════════════ */
.dice-roll-order-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: fadeInOrder 0.3s ease-out;
}

.dice-roll-order-overlay.hidden {
  display: none !important;
}

@keyframes fadeInOrder {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.dice-roll-order-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 2px solid rgba(212, 160, 23, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 160, 23, 0.2);
  border-radius: 24px;
  width: 100%;
  max-width: 480px;
  padding: 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.dice-roll-order-header {
  margin-bottom: 20px;
}

.dice-roll-order-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  animation: bounceDice 2s infinite ease-in-out;
}

@keyframes bounceDice {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(10deg);
  }
}

.dice-roll-order-title {
  color: #f5c842;
  font-family: 'Cinzel', serif, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 6px 0;
  text-shadow: 0 2px 10px rgba(212, 160, 23, 0.3);
}

.dice-roll-order-subtitle {
  color: #94a3b8;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}

.dice-roll-order-players {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  max-height: 320px;
  overflow-y: auto;
}

.order-player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px 14px;
  transition: all 0.3s ease;
}

.order-player-item.is-me {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.08);
}

.order-player-item.has-rolled {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
}

.order-player-item.is-winner {
  border-color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.18) !important;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.35);
  transform: scale(1.02);
}

.order-winner-announcement-banner {
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.35));
  border: 1.5px solid #fbbf24;
  border-radius: 14px;
  color: #fef08a;
  font-weight: 800;
  font-size: 0.95rem;
  animation: pulseWinnerBanner 1.5s infinite ease-in-out;
}

@keyframes pulseWinnerBanner {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.2);
  }

  50% {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
  }
}

.order-player-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-player-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  background: #1e293b;
  color: #ffffff;
}

.order-player-name {
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.95rem;
}

.order-player-result {
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-player-badge-waiting {
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
}

.order-player-badge-score {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 1rem;
}

.btn-roll-order {
  width: 100%;
  padding: 14px 20px;
  font-size: 1.1rem;
  font-weight: 900;
  color: #0f172a;
  background: linear-gradient(135deg, #f5c842, #d4a017);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(212, 160, 23, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s ease;
}

.btn-roll-order:hover:not(:disabled) {
  transform: translateY(-2deg);
  box-shadow: 0 10px 25px rgba(212, 160, 23, 0.6);
  background: linear-gradient(135deg, #ffe082, #f5c842);
}

.btn-roll-order:active:not(:disabled) {
  transform: translateY(1deg);
}

.btn-roll-order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #475569;
  color: #94a3b8;
  box-shadow: none;
}

/* ==========================================================================
   TURN ACTION STRIPE (Franja / Botón Táctil de Acción de Turno)
   ========================================================================== */
.turn-action-stripe {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 90%;
  max-width: 620px;
  min-height: 44px;
  padding: 8px 24px;
  border-radius: 24px;
  font-family: inherit;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  touch-action: none;
}

.turn-action-stripe.is-dragging {
  cursor: grabbing !important;
  opacity: 0.92;
  transform: scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important;
}

.turn-action-stripe.hidden {
  display: none !important;
}

.stripe-drag-handle {
  font-size: 1rem;
  opacity: 0.6;
  letter-spacing: -2px;
  margin-right: 4px;
  cursor: grab;
}

.turn-action-stripe:hover .stripe-drag-handle {
  opacity: 1;
}

/* Estado: ¡TIRA LOS DADOS! (Verde Pulsante) */
.turn-action-stripe.stripe-roll {
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.92), rgba(34, 197, 94, 0.95)) !important;
  border: 1.5px solid #4ade80 !important;
  color: #ffffff !important;
  pointer-events: auto !important;
  animation: stripeGlowPulse 1.5s infinite ease-in-out;
}

.turn-action-stripe.stripe-roll:hover:not(.is-dragging) {
  box-shadow: 0 12px 35px rgba(34, 197, 94, 0.6);
  filter: brightness(1.1);
}

/* Estado: PASAR TURNO (Azul Elegante) */
.turn-action-stripe.stripe-end {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.92), rgba(37, 99, 235, 0.95)) !important;
  border: 1.5px solid #60a5fa !important;
  color: #ffffff !important;
  pointer-events: auto !important;
}

.turn-action-stripe.stripe-end:hover:not(.is-dragging) {
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.6);
  filter: brightness(1.1);
}

/* Estado: SETUP INICIAL (Ámbar / Dorado) */
.turn-action-stripe.stripe-setup {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.92), rgba(245, 158, 11, 0.95)) !important;
  border: 1.5px solid #fbbf24 !important;
  color: #ffffff !important;
  pointer-events: auto !important;
  animation: stripeGlowPulseGold 1.6s infinite ease-in-out;
}

/* Estado: LADRÓN / ROBO (Rojo Alerta) */
.turn-action-stripe.stripe-robber {
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.92), rgba(239, 68, 68, 0.95)) !important;
  border: 1.5px solid #fca5a5 !important;
  color: #ffffff !important;
  pointer-events: auto !important;
  animation: stripeGlowPulseRed 1.3s infinite ease-in-out;
}

/* Estado: DESCARTE POR 7 (Naranja Alerta) */
.turn-action-stripe.stripe-discard {
  background: linear-gradient(135deg, rgba(194, 65, 12, 0.92), rgba(249, 115, 22, 0.95)) !important;
  border: 1.5px solid #fdba74 !important;
  color: #ffffff !important;
  pointer-events: auto !important;
  animation: stripeGlowPulseRed 1.3s infinite ease-in-out;
}

/* Estado: ORO / RECOMPENSA (Dorado Brillante) */
.turn-action-stripe.stripe-gold {
  background: linear-gradient(135deg, rgba(161, 98, 7, 0.92), rgba(234, 179, 8, 0.95)) !important;
  border: 1.5px solid #fde047 !important;
  color: #ffffff !important;
  pointer-events: auto !important;
}

/* Estado: Esperando Turno de Rival (Gris Semitransparente Pasivo) */
.turn-action-stripe.stripe-waiting {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

@keyframes stripeGlowPulseRed {

  0%,
  100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 14px rgba(239, 68, 68, 0.5);
  }

  50% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(248, 113, 113, 0.9);
  }
}

@keyframes stripeGlowPulseGold {

  0%,
  100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 14px rgba(245, 158, 11, 0.5);
  }

  50% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(251, 191, 36, 0.9);
  }
}

@keyframes stripeGlowPulse {

  0%,
  100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 14px rgba(34, 197, 94, 0.4);
  }

  50% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(74, 222, 128, 0.8);
  }
}

/* Responsivo Móvil: Franja alargada completa de extremo a extremo */
@media (max-width: 600px) {
  .turn-action-stripe {
    top: 50px;
    width: 94%;
    max-width: 94vw;
    padding: 8px 16px;
    font-size: 0.85rem;
    min-height: 42px;
    gap: 8px;
  }
}

/* Tarjetas de Jugador Colapsables (>3 Jugadores) */
#players-list.many-players-bar,
div#players-list.many-players-bar,
.players-top-bar.many-players-bar {
  gap: 6px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  overflow-y: visible !important;
  padding: 4px 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#players-list .hex-player-pod.pod-compact,
div#players-list .hex-player-pod.pod-compact,
.players-top-bar .hex-player-pod.pod-compact {
  flex: 1 1 120px !important;
  min-width: 110px !important;
  max-width: 185px !important;
  min-height: 34px !important;
  height: auto !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#players-list .hex-player-pod.pod-compact:hover,
div#players-list .hex-player-pod.pod-compact:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.15) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

#players-list .hex-player-pod.pod-compact .pod-compact-header,
div#players-list .hex-player-pod.pod-compact .pod-compact-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  width: 100 !important;
  width: 100% !important;
}

#players-list .hex-player-pod.pod-compact .pod-compact-header .pod-player-name,
div#players-list .hex-player-pod.pod-compact .pod-compact-header .pod-player-name {
  max-width: 75px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.78rem !important;
  color: #f8fafc !important;
}

#players-list .hex-player-pod.pod-compact .pod-expand-arrow,
div#players-list .hex-player-pod.pod-compact .pod-expand-arrow {
  font-size: 0.65rem !important;
  opacity: 0.7 !important;
  margin-left: 2px !important;
  transition: transform 0.2s ease !important;
  display: inline-block !important;
}

/* Esconder detalles cuando está colapsado */
#players-list .hex-player-pod.pod-compact:not(.pod-expanded) .pod-expand-details,
div#players-list .hex-player-pod.pod-compact:not(.pod-expanded) .pod-expand-details,
#players-list .hex-player-pod.pod-compact:not(.pod-expanded) .pod-row-bottom,
div#players-list .hex-player-pod.pod-compact:not(.pod-expanded) .pod-row-bottom,
#players-list .hex-player-pod.pod-compact:not(.pod-expanded) .pod-row-stock,
div#players-list .hex-player-pod.pod-compact:not(.pod-expanded) .pod-row-stock {
  display: none !important;
}

/* Mostrar detalles cuando está expandido */
#players-list .hex-player-pod.pod-compact.pod-expanded,
div#players-list .hex-player-pod.pod-compact.pod-expanded {
  min-width: 175px !important;
  max-width: 220px !important;
  z-index: 120 !important;
}

#players-list .hex-player-pod.pod-compact.pod-expanded .pod-expand-arrow,
div#players-list .hex-player-pod.pod-compact.pod-expanded .pod-expand-arrow {
  transform: rotate(180deg) !important;
  opacity: 1 !important;
}

#players-list .hex-player-pod.pod-compact.pod-expanded .pod-expand-details,
div#players-list .hex-player-pod.pod-compact.pod-expanded .pod-expand-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 5px !important;
  padding-top: 5px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  animation: podDetailsFade 0.2s ease-out forwards !important;
}

#players-list .hex-player-pod.pod-compact.pod-expanded .pod-row-bottom,
div#players-list .hex-player-pod.pod-compact.pod-expanded .pod-row-bottom,
#players-list .hex-player-pod.pod-compact.pod-expanded .pod-row-stock,
div#players-list .hex-player-pod.pod-compact.pod-expanded .pod-row-stock {
  display: flex !important;
}

@keyframes podDetailsFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   POSITIONING FIX: CHAT & DEV CARDS ANCHORED ABOVE BOTTOM RESOURCES HUD DOCK
   ========================================================================== */

/* 1. CHAT DE LA PARTIDA (#chat-hud)
   Appears in the center of the screen by default and is fully draggable */
#chat-hud.chat-hud,
.chat-hud {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(390px, calc(100vw - 28px)) !important;
  height: min(350px, calc(100vh - 120px)) !important;
  max-height: min(420px, calc(100vh - 100px)) !important;
  z-index: 1250 !important;
  background: rgba(10, 16, 30, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.6) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.88), 0 0 25px rgba(56, 189, 248, 0.3) !important;
  margin: 0 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow 0.2s ease, opacity 0.2s ease !important;
  touch-action: none;
}

.chat-drag-handle {
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  padding: 10px 14px !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.chat-drag-handle:active,
#chat-hud.is-dragging .chat-drag-handle {
  cursor: grabbing !important;
}

#chat-hud.is-dragging {
  cursor: grabbing !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.96), 0 0 35px rgba(56, 189, 248, 0.5) !important;
  opacity: 0.96 !important;
}

.btn-chat-reset-pos {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-chat-reset-pos:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

#chat-hud.hidden,
.chat-hud.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2. MIS CARTAS DE DESARROLLO (#dev-cards-hud)
   Elevated higher up above bottom dock so it NEVER covers resources HUD */
#dev-cards-hud.dev-cards-hud,
.dev-cards-hud {
  position: fixed !important;
  bottom: 165px !important;
  right: 18px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(520px, calc(100vw - 36px)) !important;
  max-height: min(340px, calc(100vh - 200px)) !important;
  z-index: 750 !important;
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1.5px solid rgba(192, 132, 252, 0.5) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(192, 132, 252, 0.3) !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

#dev-cards-hud.hidden,
.dev-cards-hud.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 600px) {

  #chat-hud.chat-hud,
  .chat-hud {
    width: min(340px, calc(100vw - 20px)) !important;
    height: min(310px, calc(100vh - 110px)) !important;
    max-height: 310px !important;
  }

  #dev-cards-hud.dev-cards-hud,
  .dev-cards-hud {
    bottom: 155px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(480px, calc(100vw - 16px)) !important;
    max-height: 290px !important;
  }
}

/* ==========================================================================
   🎰 CASINO CATAN (Ultra-Modern, Accessible & Luxurious Mini-Games)
   ========================================================================== */
.casino-lobby-wrapper {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Casino Hero Toggle Button */
.btn-casino-hero {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.95) 0%, rgba(59, 7, 100, 0.95) 50%, rgba(88, 28, 135, 0.95) 100%) !important;
  border: 2px solid rgba(251, 191, 36, 0.7) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  outline: none !important;
  touch-action: manipulation !important;
  user-select: none !important;
}

.btn-casino-hero:focus-visible {
  outline: 2px solid #fbbf24 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.8) !important;
}

.btn-casino-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 30px rgba(251, 191, 36, 0.45) !important;
  border-color: #fde047 !important;
}

.btn-casino-hero:active {
  transform: scale(0.98) !important;
}

.btn-casino-hero::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: rotate(30deg);
  animation: casinoShimmer 4s infinite linear;
  pointer-events: none;
}

@keyframes casinoShimmer {
  0% {
    transform: translate(-100%, -100%) rotate(30deg);
  }

  100% {
    transform: translate(100%, 100%) rotate(30deg);
  }
}

.casino-hero-icon {
  font-size: 2.3rem !important;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8)) !important;
  animation: pulseCasino 2.5s infinite ease-in-out !important;
  flex-shrink: 0 !important;
}

@keyframes pulseCasino {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08) rotate(3deg);
  }
}

.casino-hero-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 !important;
  margin-left: 14px !important;
  min-width: 0 !important;
}

.casino-hero-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.casino-hero-title {
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.6) !important;
}

.casino-hero-live-pill {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7) !important;
  animation: blinkLive 2s infinite ease-in-out !important;
}

@keyframes blinkLive {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.casino-hero-subtitle {
  font-size: 0.82rem !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.casino-hero-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.casino-hero-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.74rem !important;
  padding: 5px 11px !important;
  border-radius: 20px !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.6) !important;
  white-space: nowrap !important;
  letter-spacing: 0.03em !important;
}

.casino-hero-chevron {
  font-size: 0.85rem !important;
  color: #fbbf24 !important;
  transition: transform 0.3s ease !important;
}

.btn-casino-hero[aria-expanded="true"] .casino-hero-chevron {
  transform: rotate(180deg) !important;
}

/* ==========================================================================
   Casino Panel Frame
   ========================================================================== */
.casino-panel {
  width: 100% !important;
  margin-top: 14px !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.97) 0%, rgba(10, 15, 29, 0.98) 100%) !important;
  border: 2px solid rgba(251, 191, 36, 0.4) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(245, 158, 11, 0.15) !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.3s ease !important;
}

.casino-panel.hidden {
  display: none !important;
}

/* Casino Header & Live Balance */
.casino-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
}

.casino-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.casino-balance-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.45) !important;
  border-radius: 12px !important;
  padding: 6px 14px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(251, 191, 36, 0.15) !important;
}

.casino-balance-pill .balance-label {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
}

.casino-balance-pill .balance-amount {
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5) !important;
}

.btn-casino-sound {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-casino-sound:hover {
  color: #ffffff !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  background: rgba(51, 65, 85, 0.9) !important;
}

/* Casino Tabs Navigation */
.casino-tabs {
  display: flex !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 5px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.casino-tab {
  flex: 1 !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: #94a3b8 !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  user-select: none !important;
  white-space: nowrap !important;
  outline: none !important;
}

.casino-tab:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 1px !important;
}

.casino-tab:hover {
  color: #f1f5f9 !important;
  background: rgba(51, 65, 85, 0.5) !important;
}

.casino-tab.active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #000000 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important;
}

.casino-tab .tab-icon {
  font-size: 1.1rem !important;
}

.casino-tab-content {
  display: none !important;
  animation: casinoFadeIn 0.25s ease-out forwards;
}

.casino-tab-content.active {
  display: block !important;
}

@keyframes casinoFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   🎰 Tab 1: Slots Game (Authentic Vegas 3D Arcade Slot Machine)
   ========================================================================== */
.slots-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}

/* 3D Vegas Arcade Cabinet Frame */
.slots-arcade-frame {
  width: 100% !important;
  background: linear-gradient(180deg, #2a0845 0%, #16002c 40%, #0d001a 100%) !important;
  border: 3.5px solid #fbbf24 !important;
  border-radius: 24px !important;
  padding: 14px 16px !important;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.9),
    inset 0 2px 10px rgba(254, 240, 138, 0.4),
    inset 0 -4px 15px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(251, 191, 36, 0.25) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
}

/* Top Crown Marquee & Chasing Bulbs */
.slots-cabinet-crown {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.15), rgba(0, 0, 0, 0.4)) !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  box-sizing: border-box !important;
}

.slots-marquee-bulbs {
  display: flex !important;
  justify-content: space-between !important;
  width: 90% !important;
  gap: 8px !important;
}

.bulb {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  animation: bulbChase 1.2s infinite ease-in-out alternate !important;
}

.bulb.b-red {
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444 !important;
}

.bulb.b-gold {
  background: #fbbf24 !important;
  box-shadow: 0 0 8px #fbbf24 !important;
  animation-delay: 0.2s !important;
}

.bulb.b-green {
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
  animation-delay: 0.4s !important;
}

.bulb.b-blue {
  background: #38bdf8 !important;
  box-shadow: 0 0 8px #38bdf8 !important;
  animation-delay: 0.6s !important;
}

@keyframes bulbChase {
  0% {
    transform: scale(0.75);
    opacity: 0.4;
    filter: brightness(0.7);
  }

  100% {
    transform: scale(1.25);
    opacity: 1.0;
    filter: brightness(1.5);
  }
}

.slots-header-marquee {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px #fbbf24, 0 0 20px #f59e0b, 0 2px 4px #000 !important;
}

.marquee-crown-icon {
  font-size: 1.15rem !important;
  animation: crownBounce 2s infinite ease-in-out !important;
}

@keyframes crownBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px) scale(1.1);
  }
}

.slots-jackpot-meter {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #000 !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  border: 1.5px solid #fbbf24 !important;
  box-shadow: inset 0 0 8px rgba(251, 191, 36, 0.4), 0 0 12px rgba(251, 191, 36, 0.3) !important;
}

.jackpot-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #fca5a5 !important;
  letter-spacing: 0.05em !important;
}

.jackpot-value {
  font-family: 'Outfit', monospace, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 8px #fbbf24 !important;
}

/* Stage with 3D Glass Window and Side Lever (100% Centered Symmetrically) */
.slots-machine-stage {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

/* 3-Reel Cylinder Glass Window (3 Rows, Perfectly Symmetrical) */
.slots-reels-window {
  width: 100% !important;
  max-width: 380px !important;
  height: 180px !important;
  background: #09090b !important;
  border-radius: 18px !important;
  border: 3.5px solid #d97706 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  box-shadow:
    inset 0 16px 24px rgba(0, 0, 0, 0.95),
    inset 0 -16px 24px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(217, 119, 6, 0.45) !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 auto !important;
}

/* Horizontal Laser Payline Indicator (Dead Center) */
.slot-payline-beam {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.9) 0%, rgba(251, 191, 36, 1) 50%, rgba(239, 68, 68, 0.9) 100%) !important;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.9), 0 0 18px rgba(239, 68, 68, 0.7) !important;
  transform: translateY(-50%) !important;
  z-index: 8 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 6px !important;
}

.payline-arrow-left,
.payline-arrow-right {
  color: #fbbf24 !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px #fbbf24 !important;
  animation: paylinePulse 1s infinite alternate !important;
}

.payline-label {
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  background: rgba(220, 38, 38, 0.9) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #fbbf24 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.8) !important;
}

@keyframes paylinePulse {
  from {
    opacity: 0.6;
    transform: scale(0.9);
  }

  to {
    opacity: 1.0;
    transform: scale(1.15);
  }
}

/* 3 Reels Drum Grid */
.slots-reels {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.slot-reel {
  width: 100% !important;
  height: 100% !important;
  border-right: 2px solid rgba(251, 191, 36, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  user-select: none !important;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
  box-sizing: border-box !important;
}

.slot-reel:last-child {
  border-right: none !important;
}

.reel-strip {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-sizing: border-box !important;
}

.reel-cell {
  flex: 1 1 0 !important;
  height: 33.333% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 2.35rem !important;
  line-height: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.reel-cell.top-cell {
  opacity: 0.38 !important;
  transform: scale(0.82) !important;
  filter: blur(0.3px) !important;
}

.reel-cell.center-cell {
  opacity: 1 !important;
  font-size: 2.85rem !important;
  transform: scale(1.1) !important;
  z-index: 5 !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.9) !important;
}

.reel-cell.bottom-cell {
  opacity: 0.38 !important;
  transform: scale(0.82) !important;
  filter: blur(0.3px) !important;
}

/* Spinning Motion Blur */
.slot-reel.spinning .reel-strip {
  animation: reelStripSpin 0.08s linear infinite !important;
  filter: blur(2.5px) !important;
}

@keyframes reelStripSpin {
  0% {
    transform: translateY(-40px);
  }

  100% {
    transform: translateY(40px);
  }
}

/* Stop Bounce Physics */
.slot-reel.stopping .reel-strip {
  animation: reelSettleBounce 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.35) !important;
}

@keyframes reelSettleBounce {
  0% {
    transform: translateY(-16px);
  }

  60% {
    transform: translateY(6px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Winning Payline Symbol Pulse */
.reel-cell.center-cell.is-win-pulse {
  animation: winCellPulse 0.8s infinite alternate ease-in-out !important;
  filter: drop-shadow(0 0 14px #fbbf24) brightness(1.3) !important;
}

@keyframes winCellPulse {
  0% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1.38);
  }
}

/* Glass Cylinder Reflections and Depth Shadows */
.reel-cylinder-shadow-top {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

.reel-cylinder-shadow-bottom {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50px !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

.reel-glass-reflection {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 30%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 7 !important;
}

/* Mechanical 3D Pull Lever (Right Side) */
.slot-lever-container {
  position: absolute !important;
  right: -14px !important;
  top: 25px !important;
  width: 28px !important;
  height: 125px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 10 !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.lever-mount {
  width: 22px !important;
  height: 32px !important;
  background: linear-gradient(90deg, #78350f, #d97706, #451a03) !important;
  border-radius: 6px !important;
  border: 1.5px solid #fbbf24 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8) !important;
  position: absolute !important;
  bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.lever-pivot {
  width: 10px !important;
  height: 10px !important;
  background: #fbbf24 !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 3px #000 !important;
}

.lever-arm {
  position: absolute !important;
  bottom: 24px !important;
  width: 10px !important;
  height: 85px !important;
  transform-origin: bottom center !important;
  transition: transform 0.15s ease-out !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.lever-shaft {
  width: 6px !important;
  height: 70px !important;
  background: linear-gradient(90deg, #94a3b8, #f8fafc, #64748b) !important;
  border-radius: 4px !important;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6) !important;
}

.lever-ball {
  width: 26px !important;
  height: 26px !important;
  background: radial-gradient(circle at 35% 35%, #fca5a5 0%, #ef4444 45%, #991b1b 100%) !important;
  border-radius: 50% !important;
  border: 1.5px solid #fee2e2 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 12px rgba(239, 68, 68, 0.6) !important;
  position: absolute !important;
  top: -14px !important;
  transition: transform 0.15s ease !important;
}

.slot-lever-container:hover .lever-ball {
  transform: scale(1.15) !important;
  box-shadow: 0 0 18px #ef4444 !important;
}

/* Lever Pull Action Animation */
.slot-lever-container.pulled .lever-arm {
  transform: rotateX(65deg) translateY(42px) scaleY(0.6) !important;
  transition: transform 0.18s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
}

/* Digital LED Scoreboard Meter Displays */
.slots-digital-scoreboard {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: #020617 !important;
  border: 1.5px solid rgba(251, 191, 36, 0.4) !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9) !important;
}

.score-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
}

.score-title {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.08em !important;
}

.score-digits {
  font-family: 'Outfit', monospace, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.7) !important;
}

.score-box.win-box .score-digits {
  color: #4ade80 !important;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.7) !important;
}

/* Result Badge */
.casino-result-badge {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  min-height: 28px !important;
  text-align: center !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

/* ==========================================================================
   🎰 Enhanced Accessible & Beautiful Bet Section
   ========================================================================== */
.casino-bet-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(9, 13, 22, 0.95)) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

.casino-bet-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bet-section-title {
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Stepper Controller Bar with Big Tactile Touch Targets */
.casino-stepper-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.btn-bet-stepper {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: 2px solid rgba(251, 191, 36, 0.5) !important;
  color: #fbbf24 !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.btn-bet-stepper:hover {
  transform: translateY(-2px) scale(1.05) !important;
  border-color: #fbbf24 !important;
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
  box-shadow: 0 6px 15px rgba(251, 191, 36, 0.3) !important;
}

.btn-bet-stepper:active {
  transform: translateY(1px) scale(0.96) !important;
}

.bet-input-display-wrap {
  flex: 1 !important;
  max-width: 240px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #020617 !important;
  border: 2px solid #fbbf24 !important;
  border-radius: 14px !important;
  padding: 6px 12px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(251, 191, 36, 0.25) !important;
}

.bet-currency-icon {
  font-size: 1.1rem !important;
}

.bet-input-large {
  width: 90px !important;
  background: transparent !important;
  border: none !important;
  color: #fbbf24 !important;
  font-family: 'Outfit', monospace, sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  text-align: center !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bet-coin-tag {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.05em !important;
}

/* 3D Realistic Casino Chips Strip */
.bet-chips-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  margin: 4px 0 !important;
}

.chip-btn {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.7),
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
  padding: 0 !important;
  position: relative !important;
}

.chip-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
  pointer-events: none !important;
}

.chip-val {
  z-index: 2 !important;
}

/* Color specific 3D Casino Chips */
.chip-btn.chip-10 {
  background: radial-gradient(circle at 35% 35%, #38bdf8 0%, #0284c7 60%, #0369a1 100%) !important;
  border: 3px solid #7dd3fc !important;
}

.chip-btn.chip-50 {
  background: radial-gradient(circle at 35% 35%, #34d399 0%, #059669 60%, #064e3b 100%) !important;
  border: 3px solid #6ee7b7 !important;
}

.chip-btn.chip-100 {
  background: radial-gradient(circle at 35% 35%, #c084fc 0%, #7c3aed 60%, #4c1d95 100%) !important;
  border: 3px solid #d8b4fe !important;
}

.chip-btn.chip-500 {
  background: radial-gradient(circle at 35% 35%, #fbbf24 0%, #d97706 60%, #78350f 100%) !important;
  border: 3px solid #fde68a !important;
  color: #000 !important;
  text-shadow: none !important;
}

.chip-btn.chip-1000 {
  background: radial-gradient(circle at 35% 35%, #f87171 0%, #dc2626 60%, #7f1d1d 100%) !important;
  border: 3px solid #fca5a5 !important;
}

.chip-btn:hover {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 255, 255, 0.4) !important;
}

.chip-btn.active {
  transform: translateY(-4px) scale(1.12) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.9),
    0 0 0 3px #fff,
    0 0 16px #fbbf24 !important;
}

/* Quick Bet Multipliers */
.casino-quick-bet-bar {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
}

.btn-quick-bet {
  flex: 1 !important;
  min-height: 38px !important;
  padding: 6px 10px !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.btn-quick-bet:hover {
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.95), rgba(30, 41, 59, 1)) !important;
  color: #fbbf24 !important;
  border-color: #fbbf24 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25) !important;
}

/* Action Spin / Roll Button */
.btn-casino-action {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  outline: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.btn-casino-action:focus-visible {
  outline: 2px solid #34d399 !important;
  outline-offset: 2px !important;
}

.btn-casino-action:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6) !important;
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
}

.btn-casino-action:active {
  transform: translateY(0) !important;
}

.btn-casino-action:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.btn-casino-action.roll-btn {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: #000000 !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4) !important;
}

.btn-casino-action.roll-btn:hover {
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 100%) !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6) !important;
}

/* Payout Table Quick Card (Mobile-First 100% Responsive) */
.casino-payout-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

.payout-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-bottom: 4px !important;
  box-sizing: border-box !important;
}

.payout-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.payout-combo {
  color: #e2e8f0 !important;
  font-weight: 800 !important;
}

.payout-item.jackpot .payout-val {
  color: #fbbf24 !important;
  font-weight: 900 !important;
}

.payout-item.bonus .payout-val {
  color: #c084fc !important;
  font-weight: 900 !important;
}

.payout-item.high .payout-val {
  color: #34d399 !important;
  font-weight: 900 !important;
}

.payout-item.medium .payout-val {
  color: #38bdf8 !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   🎰 CATAN SLOTS PRO: Utility Bar, Free Spins Aura & Tension Spin FX
   ========================================================================== */
.slots-quick-utility-bar {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.btn-slot-util {
  flex: 1 !important;
  min-height: 36px !important;
  padding: 6px 8px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #cbd5e1 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.btn-slot-util:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #fff !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  transform: translateY(-1px) !important;
}

.btn-slot-util.active {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.35), rgba(202, 138, 4, 0.45)) !important;
  border-color: #facc15 !important;
  color: #fef08a !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.4) !important;
}

.btn-slot-util.gold {
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: #fbbf24 !important;
}

/* Free Spins Active Mode Aura */
.slots-free-spins-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(90deg, #b45309, #d97706, #b45309) !important;
  border: 1.5px solid #fef08a !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  margin-top: 6px !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
  animation: freeSpinsGlow 0.9s infinite alternate ease-in-out !important;
}

.slots-free-spins-badge.hidden {
  display: none !important;
}

.free-spins-text {
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
}

@keyframes freeSpinsGlow {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
  }

  100% {
    transform: scale(1.03);
    box-shadow: 0 0 26px rgba(251, 191, 36, 1), 0 0 40px rgba(245, 158, 11, 0.7);
  }
}

.slots-machine-stage.free-spins-active {
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.85), inset 0 0 20px rgba(251, 191, 36, 0.6) !important;
  border-color: #fbbf24 !important;
}

/* Tension Spin Slowdown FX on Reel 3 */
.slot-reel.tension-spin {
  animation: tensionPulse 0.3s infinite alternate !important;
  background: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%) !important;
  box-shadow: inset 0 0 18px rgba(251, 191, 36, 0.8) !important;
}

.slot-reel.tension-spin .reel-strip {
  animation: reelStripTension 0.18s linear infinite !important;
  filter: blur(1.2px) !important;
}

@keyframes reelStripTension {
  0% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(20px);
  }
}

@keyframes tensionPulse {
  0% {
    border-color: rgba(251, 191, 36, 0.4);
  }

  100% {
    border-color: rgba(239, 68, 68, 0.9);
  }
}

.slot-payline-beam.tension-active {
  background: linear-gradient(90deg, #ef4444 0%, #fbbf24 50%, #ef4444 100%) !important;
  height: 4px !important;
  box-shadow: 0 0 18px #fbbf24, 0 0 30px #ef4444 !important;
  animation: paylineTensionFlash 0.2s infinite alternate !important;
}

@keyframes paylineTensionFlash {
  0% {
    filter: brightness(1);
  }

  100% {
    filter: brightness(1.8);
  }
}

/* Falling Coin Particles */
.slot-coin-particle {
  position: absolute !important;
  font-size: 1.4rem !important;
  pointer-events: none !important;
  z-index: 20 !important;
  animation: coinFall linear forwards !important;
}

@keyframes coinFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.6);
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateY(180px) rotate(360deg) scale(1.2);
    opacity: 0;
  }
}

/* Paytable Modal Styling (Ultra Responsive Mobile) */
.slots-paytable-modal {
  max-width: 440px !important;
  width: min(440px, calc(100vw - 20px)) !important;
  max-height: 82vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.4) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(251, 191, 36, 0.2) !important;
}

.paytable-scroll-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 4px 2px !important;
  max-height: calc(82vh - 70px) !important;
  box-sizing: border-box !important;
}

.paytable-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.paytable-section-title {
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(251, 191, 36, 0.25) !important;
  padding-bottom: 4px !important;
}

.paytable-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.paytable-row.jackpot-row {
  border-color: rgba(251, 191, 36, 0.6) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(30, 41, 59, 0.9)) !important;
}

.paytable-row.bonus-row {
  border-color: rgba(168, 85, 247, 0.6) !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(30, 41, 59, 0.9)) !important;
}

.paytable-icons {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.paytable-desc {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.paytable-desc strong {
  font-size: 0.8rem !important;
  color: #f8fafc !important;
  line-height: 1.2 !important;
}

.paytable-desc small {
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
  line-height: 1.2 !important;
}

.paytable-grid-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .paytable-grid-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.paytable-mini-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 8px 4px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.mini-card-icon {
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

.mini-card-name {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
}

.mini-card-mult {
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  color: #34d399 !important;
}

/* ==========================================================================
   🎲 Tab 2: Lucky Dice (Velvet Craps Table Aesthetics)
   ========================================================================== */
.dice-game-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
}

.dice-arena-frame {
  width: 100% !important;
  padding: 16px !important;
  background: radial-gradient(circle at center, #064e3b 0%, #022c22 70%, #01140e 100%) !important;
  border: 2px solid #10b981 !important;
  border-radius: 18px !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.8), 0 0 20px rgba(16, 185, 129, 0.2) !important;
  box-sizing: border-box !important;
}

.dice-box-wrapper {
  display: flex !important;
  gap: 24px !important;
  justify-content: center !important;
  align-items: center !important;
  perspective: 600px !important;
}

.dice-box-wrapper.arena-shake {
  animation: casinoArenaShake 0.4s ease-in-out infinite alternate !important;
}

@keyframes casinoArenaShake {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-4px) scale(1.02);
  }

  100% {
    transform: translateY(3px) scale(0.99);
  }
}

.casino-die {
  font-family: 'Cinzel', 'Outfit', serif, sans-serif !important;
  font-size: 3.2rem !important;
  font-weight: 900 !important;
  width: 86px !important;
  height: 86px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%) !important;
  color: #dc2626 !important;
  border-radius: 18px !important;
  border: 3px solid #cbd5e1 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
  user-select: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  transform-style: preserve-3d !important;
}

/* 🎲 Equipped Dice Cosmetic Skins for Casino (16 Sets) */

/* 1. Default Ivory White 🎲 */
.skin-dice_default .casino-die,
.skin-default .casino-die,
.casino-die.skin-dice_default,
.casino-die.skin-default {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 3px solid #cbd5e1 !important;
  color: #dc2626 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12) !important;
}

/* 2. Ruby Crystal 💎 */
.skin-dice_ruby .casino-die,
.skin-ruby .casino-die,
.skin-dice_red .casino-die,
.skin-red .casino-die,
.casino-die.skin-dice_ruby,
.casino-die.skin-ruby,
.casino-die.skin-dice_red,
.casino-die.skin-red {
  background: linear-gradient(145deg, #ef4444 0%, #991b1b 100%) !important;
  border: 2.5px solid #fca5a5 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 12px #f87171 !important;
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.65), inset 0 2px 4px rgba(254, 202, 202, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Oceanic Sapphire 🔷 */
.skin-dice_sapphire .casino-die,
.skin-sapphire .casino-die,
.skin-dice_blue .casino-die,
.skin-blue .casino-die,
.casino-die.skin-dice_sapphire,
.casino-die.skin-sapphire,
.casino-die.skin-dice_blue,
.casino-die.skin-blue {
  background: linear-gradient(145deg, #0284c7 0%, #0369a1 50%, #0c4a6e 100%) !important;
  border: 2.5px solid #7dd3fc !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 12px #38bdf8 !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.7), inset 0 2px 4px rgba(186, 230, 253, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 4. Forest Emerald 🟢 */
.skin-dice_emerald .casino-die,
.skin-emerald .casino-die,
.skin-dice_green .casino-die,
.skin-green .casino-die,
.casino-die.skin-dice_emerald,
.casino-die.skin-emerald,
.casino-die.skin-dice_green,
.casino-die.skin-green {
  background: linear-gradient(145deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
  border: 2.5px solid #6ee7b7 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 12px #34d399 !important;
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.7), inset 0 2px 4px rgba(167, 243, 208, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 5. Solar Amber 🧡 */
.skin-dice_amber .casino-die,
.skin-amber .casino-die,
.skin-dice_orange .casino-die,
.skin-orange .casino-die,
.casino-die.skin-dice_amber,
.casino-die.skin-amber,
.casino-die.skin-dice_orange,
.casino-die.skin-orange {
  background: linear-gradient(145deg, #f97316 0%, #ea580c 50%, #7c2d12 100%) !important;
  border: 2.5px solid #fdba74 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 12px #fb923c !important;
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.7), inset 0 2px 4px rgba(254, 215, 170, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 6. Mystic Amethyst 💜 */
.skin-dice_amethyst .casino-die,
.skin-amethyst .casino-die,
.skin-dice_purple .casino-die,
.skin-purple .casino-die,
.casino-die.skin-dice_amethyst,
.casino-die.skin-amethyst,
.casino-die.skin-dice_purple,
.casino-die.skin-purple {
  background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 50%, #4c1d95 100%) !important;
  border: 2.5px solid #c4b5fd !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 12px #a78bfa !important;
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.7), inset 0 2px 4px rgba(221, 214, 254, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 7. Radiant Topaz 💛 */
.skin-dice_topaz .casino-die,
.skin-topaz .casino-die,
.skin-dice_yellow .casino-die,
.skin-yellow .casino-die,
.casino-die.skin-dice_topaz,
.casino-die.skin-topaz,
.casino-die.skin-dice_yellow,
.casino-die.skin-yellow {
  background: linear-gradient(145deg, #eab308 0%, #ca8a04 50%, #713f12 100%) !important;
  border: 2.5px solid #fef08a !important;
  color: #451a03 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 10px 28px rgba(234, 179, 8, 0.7), inset 0 2px 4px rgba(254, 240, 138, 0.8), inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
}

/* 8. Sakura Blossom Pink 🩷 */
.skin-dice_sakura .casino-die,
.skin-sakura .casino-die,
.skin-dice_pink .casino-die,
.skin-pink .casino-die,
.casino-die.skin-dice_sakura,
.casino-die.skin-sakura,
.casino-die.skin-dice_pink,
.casino-die.skin-pink {
  background: linear-gradient(145deg, #ec4899 0%, #be185d 50%, #831843 100%) !important;
  border: 2.5px solid #fbcfe8 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 12px #f472b6 !important;
  box-shadow: 0 10px 28px rgba(236, 72, 153, 0.7), inset 0 2px 4px rgba(251, 207, 232, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 9. Tactical Obsidian 🖤 */
.skin-dice_obsidian .casino-die,
.skin-obsidian .casino-die,
.skin-dice_black .casino-die,
.skin-black .casino-die,
.casino-die.skin-dice_obsidian,
.casino-die.skin-obsidian,
.casino-die.skin-dice_black,
.casino-die.skin-black {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 50%, #020617 100%) !important;
  border: 2.5px solid #64748b !important;
  color: #ef4444 !important;
  text-shadow: 0 0 10px #dc2626, 0 0 16px #ef4444 !important;
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.5), inset 0 2px 4px rgba(148, 163, 184, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.6) !important;
}

/* 10. Arctic Glaciar Crystal 🧊 */
.skin-dice_cyan .casino-die,
.skin-cyan .casino-die,
.skin-dice_ice .casino-die,
.skin-ice .casino-die,
.casino-die.skin-dice_cyan,
.casino-die.skin-cyan,
.casino-die.skin-dice_ice,
.casino-die.skin-ice {
  background: linear-gradient(145deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%) !important;
  border: 2.5px solid #bae6fd !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px #38bdf8, 0 0 16px #0284c7 !important;
  box-shadow: 0 10px 30px rgba(56, 189, 248, 0.8), inset 0 2px 4px rgba(224, 242, 254, 0.8), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 11. Prismatic Diamond 💎 */
.skin-dice_diamond .casino-die,
.skin-diamond .casino-die,
.casino-die.skin-dice_diamond,
.casino-die.skin-diamond {
  background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 30%, #fdf4ff 60%, #e2e8f0 100%) !important;
  border: 2.8px solid #ffffff !important;
  color: #0f172a !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.8) !important;
  box-shadow: 0 10px 32px rgba(255, 255, 255, 0.95), inset 0 2px 6px rgba(255, 255, 255, 1), inset 0 -3px 6px rgba(0, 0, 0, 0.2) !important;
  animation: diamondSparklePulse 2s infinite alternate ease-in-out !important;
}

/* 12. Pure 24K Gold 🪙 */
.skin-dice_gold .casino-die,
.skin-gold .casino-die,
.casino-die.skin-dice_gold,
.casino-die.skin-gold {
  background: linear-gradient(145deg, #fbbf24 0%, #d97706 50%, #b45309 100%) !important;
  border: 2.5px solid #fef08a !important;
  color: #451a03 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 10px 28px rgba(251, 191, 36, 0.85), inset 0 2px 4px rgba(254, 240, 138, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
  animation: goldSparkleGlow 2s infinite alternate ease-in-out !important;
}

/* 13. Chromatic Rainbow RGB 🌈 */
.skin-dice_rainbow .casino-die,
.skin-rainbow .casino-die,
.casino-die.skin-dice_rainbow,
.casino-die.skin-rainbow {
  background: linear-gradient(135deg, #ef4444, #f59e0b, #10b981, #06b6d4, #8b5cf6, #ec4899, #ef4444) !important;
  background-size: 300% 300% !important;
  border: 2.5px solid #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 14px #ffffff !important;
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
  animation: rainbowDiceShift 3.5s ease infinite !important;
}

/* 14. Inferno Fire 🔥 */
.skin-dice_fire .casino-die,
.skin-fire .casino-die,
.casino-die.skin-dice_fire,
.casino-die.skin-fire {
  background: linear-gradient(145deg, #f97316 0%, #c2410c 100%) !important;
  border: 2.5px solid #fed7aa !important;
  color: #fff7ed !important;
  text-shadow: 0 0 8px #f59e0b, 0 0 16px #ea580c !important;
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.85), inset 0 2px 4px rgba(253, 230, 138, 0.8), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
  animation: diceFirePulse 1.8s infinite alternate ease-in-out !important;
}

/* 15. Cyberpunk Neon ⚡ */
.skin-dice_neon .casino-die,
.skin-neon .casino-die,
.casino-die.skin-dice_neon,
.casino-die.skin-neon {
  background: linear-gradient(145deg, #06b6d4 0%, #4f46e5 100%) !important;
  border: 2.5px solid #67e8f9 !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px #22d3ee, 0 0 20px #06b6d4 !important;
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.85), inset 0 2px 4px rgba(165, 243, 252, 0.8), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 16. Cosmic Galaxy 🌌 */
.skin-dice_cosmic .casino-die,
.skin-cosmic .casino-die,
.casino-die.skin-dice_cosmic,
.casino-die.skin-cosmic {
  background: linear-gradient(145deg, #a855f7 0%, #3b0764 100%) !important;
  border: 2.5px solid #e9d5ff !important;
  color: #faf5ff !important;
  text-shadow: 0 0 10px #c084fc, 0 0 20px #9333ea !important;
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.85), inset 0 2px 4px rgba(233, 213, 255, 0.8), inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Enhanced 3D Physics Rolling Animations */
.casino-die.rolling,
.casino-die.rolling-1 {
  animation: casinoDieTumble1 0.22s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  filter: blur(0.3px) !important;
}

.casino-die.rolling-2 {
  animation: casinoDieTumble2 0.25s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  filter: blur(0.3px) !important;
}

@keyframes casinoDieTumble1 {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.94);
  }

  25% {
    transform: translateY(-16px) rotate(90deg) scale(1.12);
  }

  50% {
    transform: translateY(6px) rotate(180deg) scale(0.92);
  }

  75% {
    transform: translateY(-12px) rotate(270deg) scale(1.08);
  }

  100% {
    transform: translateY(0) rotate(360deg) scale(0.94);
  }
}

@keyframes casinoDieTumble2 {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.94);
  }

  25% {
    transform: translateY(-14px) rotate(-90deg) scale(1.10);
  }

  50% {
    transform: translateY(8px) rotate(-180deg) scale(0.90);
  }

  75% {
    transform: translateY(-18px) rotate(-270deg) scale(1.14);
  }

  100% {
    transform: translateY(0) rotate(-360deg) scale(0.94);
  }
}

.casino-die.landed {
  animation: casinoDieImpact 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes casinoDieImpact {
  0% {
    transform: scale(1.28) translateY(-14px);
  }

  45% {
    transform: scale(0.86) translateY(5px);
  }

  75% {
    transform: scale(1.08) translateY(-2px);
  }

  100% {
    transform: scale(1) translateY(0);
  }
}

.casino-die.winner {
  animation: casinoDieWinPulse 1.2s infinite alternate ease-in-out !important;
}

@keyframes casinoDieWinPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  100% {
    transform: scale(1.1) translateY(-3px);
    filter: brightness(1.25) drop-shadow(0 0 16px #fbbf24);
  }
}

.casino-die.loser {
  opacity: 0.88 !important;
}

/* Prediction Cards */
.dice-prediction-selector {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

.prediction-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 12px 8px !important;
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  color: #f8fafc !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  outline: none !important;
  user-select: none !important;
}

.prediction-btn:focus-visible {
  outline: 2px solid #38bdf8 !important;
}

.prediction-btn:hover {
  background: rgba(51, 65, 85, 0.9) !important;
  transform: translateY(-2px) !important;
}

.prediction-btn .pred-icon {
  font-size: 1.3rem !important;
  margin-bottom: 2px !important;
}

.prediction-btn .pred-title {
  font-size: 0.88rem !important;
  font-weight: 900 !important;
}

.prediction-btn .pred-subtitle {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  margin-top: 1px !important;
}

.prediction-btn .pred-mult {
  font-size: 0.78rem !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
  margin-top: 4px !important;
  background: rgba(251, 191, 36, 0.15) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.prediction-btn.pred-exact.active {
  background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5), 0 0 12px rgba(251, 191, 36, 0.4) !important;
  transform: translateY(-2px) !important;
}

.prediction-btn.pred-under.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5) !important;
  transform: translateY(-2px) !important;
}

.prediction-btn.pred-over.active {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: #34d399 !important;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.5) !important;
  transform: translateY(-2px) !important;
}

.pred-badge-hot {
  position: absolute !important;
  top: -8px !important;
  right: -4px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8) !important;
}

/* ==========================================================================
   🏆 Tab 3: Top Magnates Ranking
   ========================================================================== */
.casino-ranking-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.casino-ranking-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
}

.ranking-header-icon {
  font-size: 1.8rem !important;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6)) !important;
}

.ranking-header-text {
  display: flex !important;
  flex-direction: column !important;
}

.ranking-header-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.05em !important;
}

.ranking-header-subtitle {
  font-size: 0.74rem !important;
  color: #94a3b8 !important;
}

.casino-ranking-list {
  max-height: 250px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-right: 4px !important;
}

.casino-rank-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  transition: all 0.2s ease !important;
}

.casino-rank-item:hover {
  border-color: rgba(251, 191, 36, 0.4) !important;
  background: rgba(30, 41, 59, 0.95) !important;
  transform: translateX(2px) !important;
}

.casino-rank-pos {
  font-weight: 900 !important;
  width: 28px !important;
  color: #fbbf24 !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

.casino-rank-user {
  flex: 1 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-left: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 170px !important;
}

.casino-rank-coins {
  font-weight: 900 !important;
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  flex-shrink: 0 !important;
}

.casino-rank-loading {
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  padding: 20px !important;
}

/* ==========================================================================
   Casino Responsive Breakpoints
   ========================================================================== */
@media (max-width: 580px) {
  .slots-reels-window {
    height: 160px !important;
    max-width: 320px !important;
  }

  .reel-cell {
    font-size: 2rem !important;
  }

  .reel-cell.center-cell {
    font-size: 2.45rem !important;
  }

  .casino-die {
    width: 68px !important;
    height: 68px !important;
    font-size: 2.6rem !important;
  }

  .casino-hero-subtitle {
    display: none !important;
  }

  .casino-hero-title {
    font-size: 1.05rem !important;
  }

  .dice-prediction-selector {
    gap: 6px !important;
  }

  .prediction-btn {
    padding: 10px 4px !important;
  }

  .prediction-btn .pred-title {
    font-size: 0.8rem !important;
  }

  .prediction-btn .pred-subtitle {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 420px) {
  .casino-panel {
    padding: 14px 10px !important;
  }

  .slots-reels-window {
    height: 145px !important;
    max-width: 275px !important;
  }

  .reel-cell {
    font-size: 1.75rem !important;
  }

  .reel-cell.center-cell {
    font-size: 2.15rem !important;
  }

  .casino-die {
    width: 60px !important;
    height: 60px !important;
    font-size: 2.3rem !important;
  }

  .bet-chips {
    justify-content: center !important;
    width: 100% !important;
  }

  .casino-bet-controls {
    justify-content: center !important;
  }

  .casino-payout-card {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

/* ==========================================================================
   ENHANCED ACCESSIBLE & RESPONSIVE SOCIAL FRIENDS LIST
   ========================================================================== */

#social-friends-list-container,
.social-friends-list-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-height: min(520px, calc(100vh - 300px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 6px 14px 2px !important;
}

#social-friends-list-container::-webkit-scrollbar,
.social-friends-list-container::-webkit-scrollbar {
  width: 6px !important;
}

#social-friends-list-container::-webkit-scrollbar-track,
.social-friends-list-container::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4) !important;
  border-radius: 4px !important;
}

#social-friends-list-container::-webkit-scrollbar-thumb,
.social-friends-list-container::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.35) !important;
  border-radius: 4px !important;
}

#social-friends-list-container::-webkit-scrollbar-thumb:hover,
.social-friends-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.6) !important;
}

/* Individual Social Card Item */
.social-item-card,
.social-friend-card,
.social-player-card,
.social-room-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
}

.social-item-card:hover,
.social-friend-card:hover,
.social-player-card:hover,
.social-room-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.15) !important;
}

.social-item-card.is-online,
.social-friend-card.is-online {
  border-color: rgba(52, 211, 153, 0.35) !important;
}

.social-item-card.is-in-game,
.social-room-card {
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.15) !important;
}

/* Left Section: Avatar + Info */
.social-card-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.social-avatar-wrapper {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
}

.social-avatar-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.social-status-dot {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid #0f172a !important;
}

.social-status-dot.online {
  background: #34d399 !important;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.8) !important;
}

.social-status-dot.offline {
  background: #64748b !important;
}

.social-status-dot.ingame {
  background: #f59e0b !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.8) !important;
}

.social-card-details {
  min-width: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.social-card-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.social-card-name {
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 170px !important;
}

.social-card-elo-badge {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.15) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  flex-shrink: 0 !important;
}

.social-card-status-text {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Right Section: Action Buttons */
.social-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

/* Accessible Action Buttons */
.btn-social-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  touch-action: manipulation !important;
  user-select: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.btn-social-action:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
}

.btn-social-action.primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35) !important;
}

.btn-social-action.primary:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.5) !important;
}

.btn-social-action.primary:active {
  transform: translateY(0) !important;
}

.btn-social-action.blue {
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(56, 189, 248, 0.35) !important;
}

.btn-social-action.blue:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 15px rgba(56, 189, 248, 0.5) !important;
}

.btn-social-action.blue:active {
  transform: translateY(0) !important;
}

.btn-social-action.amber {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #000000 !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35) !important;
}

.btn-social-action.amber:hover {
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.5) !important;
}

.btn-social-action.amber:active {
  transform: translateY(0) !important;
}

.btn-social-action.danger {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fca5a5 !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
}

.btn-social-action.danger:hover {
  background: rgba(239, 68, 68, 0.28) !important;
  color: #fee2e2 !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  transform: translateY(-1px) !important;
}

.btn-social-action.icon-only {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
}

.social-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

.social-status-pill.friend {
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
}

.social-status-pill.pending {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.15) !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
}

/* Pending Requests Section */
.pending-request-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 14px !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.pending-request-text {
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  color: #ffffff !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Responsive Media Queries */
@media (max-width: 580px) {

  .social-item-card,
  .social-friend-card,
  .social-player-card,
  .social-room-card {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .social-card-name {
    max-width: 120px !important;
    font-size: 0.88rem !important;
  }

  .btn-social-action {
    padding: 7px 11px !important;
    font-size: 0.76rem !important;
    min-height: 36px !important;
  }

  .btn-social-action.icon-only {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .pending-request-item {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 440px) {

  .social-item-card,
  .social-friend-card,
  .social-player-card,
  .social-room-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .social-card-left {
    width: 100% !important;
  }

  .social-card-name {
    max-width: 180px !important;
  }

  .social-card-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 8px !important;
  }

  .social-filter-pills {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .social-pill {
    padding: 7px 10px !important;
    font-size: 0.78rem !important;
    min-width: unset !important;
    flex: 1 0 auto !important;
  }

  .social-search-bar {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  .social-search-input-wrap {
    height: 38px !important;
    padding: 0 8px 0 32px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .social-search-icon {
    left: 10px !important;
    font-size: 0.88rem !important;
  }

  .social-search-input-wrap input,
  #social-input-add-friend {
    font-size: 0.82rem !important;
  }

  .btn-social-add-submit {
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 0.76rem !important;
    flex: 0 0 auto !important;
  }

  .btn-social-pending-toggle {
    height: 38px !important;
    padding: 0 9px !important;
    font-size: 0.76rem !important;
    flex: 0 0 auto !important;
  }
}

/* ==========================================================================
   🔀 CHAOS BOARD GAME MODE STYLES & ANIMATIONS
   ========================================================================== */

/* Floating Countdown Pill on Board HUD */
.chaos-spin-pill {
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 120 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.96), rgba(15, 23, 42, 0.98)) !important;
  border: 1.8px solid #a855f7 !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 22px rgba(168, 85, 247, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  cursor: default !important;
  overflow: hidden !important;
  user-select: none !important;
  pointer-events: auto !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.chaos-spin-pill.hidden {
  display: none !important;
}

.chaos-spin-pill-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(147, 51, 234, 0.25), rgba(236, 72, 153, 0.35));
  pointer-events: none;
  z-index: 1;
  transition: width 0.4s ease;
}

.chaos-spin-pill-glow {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.4);
  pointer-events: none;
  z-index: 2;
}

.chaos-spin-icon {
  font-size: 1.15rem;
  z-index: 3;
  animation: chaosIconPulse 2.2s infinite ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes chaosIconPulse {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 2px rgba(168, 85, 247, 0.6));
  }

  50% {
    transform: scale(1.18) rotate(180deg);
    filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.9));
  }
}

.chaos-spin-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  z-index: 3;
}

.chaos-spin-title {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #c084fc;
  text-transform: uppercase;
}

.chaos-spin-count {
  font-size: 0.82rem;
  font-weight: 800;
  color: #f8fafc;
  font-family: inherit;
}

/* Warning State (2 rolls left) */
.chaos-spin-pill.chaos-spin-warning {
  border-color: #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  animation: chaosWarningPulse 1.2s infinite ease-in-out alternate;
}

.chaos-spin-pill.chaos-spin-warning .chaos-spin-title {
  color: #fbbf24;
}

.chaos-spin-pill.chaos-spin-warning .chaos-spin-count {
  color: #fef08a;
}

@keyframes chaosWarningPulse {
  0% {
    transform: translateX(-50%) scale(1);
  }

  100% {
    transform: translateX(-50%) scale(1.05);
  }
}

/* Critical State (1 roll left) */
.chaos-spin-pill.chaos-spin-critical {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.98), rgba(127, 29, 29, 0.98));
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.7), inset 0 0 12px rgba(248, 113, 113, 0.5);
  animation: chaosCriticalThrob 0.65s infinite ease-in-out alternate;
}

.chaos-spin-pill.chaos-spin-critical .chaos-spin-title {
  color: #fca5a5;
}

.chaos-spin-pill.chaos-spin-critical .chaos-spin-count {
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.9);
}

@keyframes chaosCriticalThrob {
  0% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.6);
  }

  100% {
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 0 28px rgba(239, 68, 68, 0.95);
  }
}

/* Floating Notification Banner for Chaos Spin (Unobtrusive & Non-blocking) */
.chaos-spin-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: chaosBannerSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chaos-spin-banner.hidden {
  display: none !important;
}

@keyframes chaosBannerSlideDown {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.chaos-spin-banner-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  border-radius: 9999px;
  border: 1.8px solid #c084fc;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.95), rgba(15, 23, 42, 0.98));
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}

.chaos-spin-portal-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #a855f7, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.85);
  animation: chaosPortalVortex 1.6s linear infinite;
  flex-shrink: 0;
}

.chaos-spin-portal-icon {
  font-size: 1.25rem;
  display: inline-block;
  animation: chaosIconSpin 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes chaosPortalVortex {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.12);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.9);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes chaosIconSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.chaos-spin-banner-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.chaos-spin-banner-title {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  background: linear-gradient(135deg, #f0abfc, #c084fc, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.chaos-spin-banner-sub {
  font-size: 0.75rem;
  font-weight: 700;
  color: #cbd5e1;
}

.chaos-sub-badge {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #cbd5e1;
}

/* Board Shake & Spin Animation on Canvas */
canvas.chaos-board-spinning {
  animation: chaosCanvasRumble 0.5s ease-in-out infinite alternate !important;
  filter: hue-rotate(90deg) brightness(1.2) !important;
  transition: filter 0.3s ease !important;
}

@keyframes chaosCanvasRumble {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  25% {
    transform: translate(-3px, 3px) scale(1.015) rotate(0.4deg);
  }

  50% {
    transform: translate(3px, -2px) scale(0.99) rotate(-0.4deg);
  }

  75% {
    transform: translate(-2px, -3px) scale(1.01) rotate(0.2deg);
  }

  100% {
    transform: translate(2px, 2px) scale(1) rotate(0deg);
  }
}

/* ==========================================================================
   PLAYER CHIP CARDS — New Single-Row Design (all player counts)
   ========================================================================== */

/* Bar: force single-row scroll, equal-width chips */
#players-list.players-chip-bar,
.players-top-bar.players-chip-bar {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  gap: 4px !important;
  padding: 3px 6px !important;
  align-items: stretch !important;
}

/* Chip card base — Ultra-Compact HUD */
.hex-player-pod.player-chip {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-width: 104px !important;
  max-width: 148px !important;
  flex: 1 1 104px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(15, 23, 42, 0.92) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.hex-player-pod.player-chip:hover,
.hex-player-pod.player-chip:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.6) !important;
}

.hex-player-pod.player-chip.active-turn {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5), 0 2px 8px rgba(0, 0, 0, 0.55) !important;
}

.hex-player-pod.player-chip.is-myself {
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.12), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.hex-player-pod.player-chip.active-turn.is-myself {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.55), inset 0 0 10px rgba(56, 189, 248, 0.2), 0 3px 10px rgba(0, 0, 0, 0.65) !important;
}

/* Left color accent bar */
.chip-color-bar {
  width: 3px !important;
  flex-shrink: 0 !important;
  border-radius: 8px 0 0 8px !important;
  opacity: 0.9 !important;
}

/* Right content area */
.chip-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 2px 4px !important;
  gap: 1px !important;
  overflow: hidden !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  width: calc(100% - 3px) !important;
}

.chip-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.chip-name {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.chip-turn-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #fbbf24 !important;
  box-shadow: 0 0 5px #fbbf24 !important;
  flex-shrink: 0 !important;
  animation: turnDotPulse 1.2s ease-in-out infinite alternate !important;
}

@keyframes turnDotPulse {
  from {
    opacity: 0.6;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1.15);
  }
}

.chip-stat.vp {
  background: rgba(251, 191, 36, 0.22) !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  color: #fbbf24 !important;
  font-size: 0.60rem !important;
  font-weight: 800 !important;
  padding: 0.5px 2.5px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 1px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.chip-stat.vp b {
  color: #fbbf24 !important;
  font-weight: 900 !important;
}

.chip-stats-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chip-mini-stat {
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0.5px 1px !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
}

.chip-mini-stat b {
  font-weight: 900 !important;
  color: #fff !important;
  font-size: 0.58rem !important;
}

.chip-mini-stat.gold-owner {
  background: rgba(251, 191, 36, 0.25) !important;
  border-color: rgba(251, 191, 36, 0.55) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 4px rgba(251, 191, 36, 0.3) !important;
}

.chip-mini-stat.gold-owner b {
  color: #fbbf24 !important;
}

.chip-mini-stat.hand.over {
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #fca5a5 !important;
  animation: chipOverLimitPulse 1s ease-in-out infinite alternate !important;
}

@keyframes chipOverLimitPulse {
  from {
    box-shadow: none;
  }

  to {
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
  }
}


/* ==========================================================================
   PLAYER DETAIL DRAWER — Bottom Sheet on Tap
   ========================================================================== */

.player-detail-drawer {
  position: fixed !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) translateY(100%) !important;
  width: min(480px, 100vw) !important;
  z-index: 2500 !important;
  background: linear-gradient(180deg, rgba(13, 20, 38, 0.99) 0%, rgba(10, 14, 26, 0.99) 100%) !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 0 0 max(env(safe-area-inset-bottom, 0px), 12px) !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.8), 0 -2px 8px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
  pointer-events: auto !important;
}

.player-detail-drawer.drawer-open {
  transform: translateX(-50%) translateY(0) !important;
}

.player-detail-drawer.drawer-exit {
  transform: translateX(-50%) translateY(100%) !important;
  transition: transform 0.22s ease-in !important;
}

.drawer-handle-bar {
  width: 36px !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
  margin: 10px auto 0 !important;
}

.drawer-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.drawer-color-swatch {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 8px currentColor !important;
}

.drawer-name-block {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.drawer-player-name {
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
  font-family: 'Outfit', sans-serif !important;
}

.drawer-player-label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

.drawer-close-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.drawer-close-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}

/* 5-cell grid for key stats */
.drawer-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
  padding: 12px 14px 8px !important;
}

.drawer-stat-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 10px !important;
  padding: 8px 4px !important;
  min-width: 0 !important;
}

.drawer-stat-cell.gold {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

.drawer-stat-cell.danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  animation: drawerDangerPulse 1s ease-in-out infinite alternate !important;
}

@keyframes drawerDangerPulse {
  from {
    box-shadow: none;
  }

  to {
    box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.3);
  }
}

.drawer-stat-icon {
  font-size: 1rem !important;
  line-height: 1 !important;
}

.drawer-stat-val {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.drawer-stat-label {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Stock row: roads/settlements/cities remaining */
.drawer-stock-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 8px 14px 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  margin-top: 0 !important;
}

.drawer-stock-item {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.drawer-stock-item b {
  color: #fff !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
}

.drawer-stock-item small {
  font-size: 0.62rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}