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

:root {
  /* LUXURY PRIVATE BANKING PALETTE - NOVA ACTIVITIES HUB */
  --bg-app: #0B1220;
  --bg-surface: #131F32;
  --bg-card: #1B2940;
  --bg-card-hover: #223452;
  --bg-overlay: rgba(11, 18, 32, 0.88);

  --border-subtle: rgba(214, 184, 120, 0.22);
  --border-card: rgba(214, 184, 120, 0.32);
  --border-focus: #D6B878;

  --accent-cobalt: #D6B878;
  --accent-cobalt-hover: #E9D39B;
  --accent-green: #36B894;
  --accent-green-bright: #36B894;
  --status-online: #36B894;

  --text-primary: #F3F0E8;
  --text-secondary: #A7B2C4;
  --text-muted: #7E8B9F;

  --lux-deep-night: #0B1220;
  --lux-navy: #131F32;
  --lux-surface: #1B2940;
  --lux-gold-champagne: #D6B878;
  --lux-gold-light: #E9D39B;
  --lux-bronze: #B98555;
  --lux-ivory: #F3F0E8;
  --lux-slate: #A7B2C4;
  --lux-emerald: #36B894;
  --lux-ruby: #D66B75;

  --radius-full: 9999px;
  --radius-card: 16px;
  --radius-inner: 10px;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
  background-color: var(--bg-app);
  color: var(--text-secondary);
  font-family: var(--font-family);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 184, 120, 0.45) #0B1220;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0B1220;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D6B878 0%, #B98555 100%);
  border-radius: 8px;
  border: 2px solid rgba(18, 12, 8, 0.95);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #E9D39B 0%, #D6B878 100%);
}

.hidden {
  display: none !important;
}

.background-overlay {
  display: none;
}

.app-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 28px 70px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 12px 24px;
  margin-bottom: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  background: linear-gradient(135deg, #D6B878, #B98555);
  box-shadow: 0 4px 14px rgba(214, 184, 120, 0.35);
  color: #ffffff;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

.logo-icon svg {
  width: 20px;
  height: 20px;
}

.brand-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.brand-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.user-profile-widget {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-status {
  background: rgba(91, 163, 43, 0.15);
  color: #79c53c;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(91, 163, 43, 0.3);
}

.voice-status.offline {
  background: rgba(139, 158, 179, 0.12);
  color: var(--text-muted);
  border-color: transparent;
}

.voice-status .dot {
  width: 8px;
  height: 8px;
  background-color: var(--status-online);
  border-radius: var(--radius-full);
  display: inline-block;
}

.voice-status.offline .dot {
  background-color: #627282;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #19232d;
  border: 1px solid var(--border-subtle);
  padding: 4px 14px 4px 4px;
  border-radius: var(--radius-full);
}

.avatar-circle {
  width: 32px;
  height: 32px;
  background: #2a475e;
  color: #fff;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}

.user-meta-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.user-meta-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.username {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.navbar-level-tag {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.navbar-xp-bar {
  width: 90px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.navbar-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* AVATAR FRAMES & GLOWS */
.avatar-circle.avatar-frame-frame_neon_cyan {
  border: 2px solid #22d3ee !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.9), inset 0 0 8px rgba(34, 211, 238, 0.4);
  animation: frameCyanPulse 2s infinite alternate;
}
@keyframes frameCyanPulse {
  0% { box-shadow: 0 0 8px rgba(34, 211, 238, 0.7); }
  100% { box-shadow: 0 0 16px rgba(34, 211, 238, 1), 0 0 25px rgba(6, 182, 212, 0.6); }
}

.avatar-circle.avatar-frame-frame_fire {
  border: 2px solid #f97316 !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.95), inset 0 0 8px rgba(239, 68, 68, 0.5);
  animation: frameFireBurn 1.6s infinite alternate;
}
@keyframes frameFireBurn {
  0% { border-color: #f97316; box-shadow: 0 0 10px rgba(249, 115, 22, 0.8); }
  100% { border-color: #fbbf24; box-shadow: 0 0 18px rgba(239, 68, 68, 1), 0 0 26px rgba(245, 158, 11, 0.7); }
}

.avatar-circle.avatar-frame-frame_gold {
  border: 2px solid #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.95), inset 0 0 8px rgba(254, 240, 138, 0.5);
  animation: frameGoldGlint 2.2s infinite alternate;
}
@keyframes frameGoldGlint {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.25); box-shadow: 0 0 20px rgba(234, 179, 8, 1); }
}

.avatar-circle.avatar-frame-frame_cosmic {
  border: 2px solid #c084fc !important;
  box-shadow: 0 0 14px rgba(192, 132, 252, 0.9), inset 0 0 8px rgba(168, 85, 247, 0.5);
  animation: frameCosmicPulse 2.4s infinite alternate;
}
@keyframes frameCosmicPulse {
  0% { border-color: #a855f7; box-shadow: 0 0 10px rgba(168, 85, 247, 0.7); }
  100% { border-color: #e879f9; box-shadow: 0 0 20px rgba(192, 132, 252, 1), 0 0 30px rgba(147, 51, 234, 0.5); }
}

/* Large profile modal avatar frame support */
.profile-avatar-large.avatar-frame-frame_neon_cyan {
  border: 3px solid #22d3ee !important;
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.9);
}
.profile-avatar-large.avatar-frame-frame_fire {
  border: 3px solid #f97316 !important;
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.95);
}
.profile-avatar-large.avatar-frame-frame_gold {
  border: 3px solid #facc15 !important;
  box-shadow: 0 0 24px rgba(250, 204, 21, 0.95);
}
.profile-avatar-large.avatar-frame-frame_cosmic {
  border: 3px solid #c084fc !important;
  box-shadow: 0 0 24px rgba(192, 132, 252, 0.95);
}

.shop-card-icon-wrapper.frame-preview-icon {
  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.2), rgba(15, 23, 42, 0.8));
  border-color: rgba(168, 85, 247, 0.4);
}

.avatar-frame-preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.avatar-frame-preview.frame-frame_neon_cyan {
  border: 2px solid #22d3ee;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.9);
}
.avatar-frame-preview.frame-frame_fire {
  border: 2px solid #f97316;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.9);
}
.avatar-frame-preview.frame-frame_gold {
  border: 2px solid #facc15;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.9);
}
.avatar-frame-preview.frame-frame_cosmic {
  border: 2px solid #c084fc;
  box-shadow: 0 0 16px rgba(192, 132, 252, 0.9);
}

.hero-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 28px;
  border: 1px solid var(--border-card);
  background:
    linear-gradient(90deg, rgba(14, 20, 27, 0.96) 0%, rgba(20, 28, 36, 0.85) 45%, rgba(20, 28, 36, 0.3) 100%),
    url('/assets/hub-arcade-3d.png') center/cover no-repeat;
  padding: 40px 36px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-content {
  max-width: 580px;
  position: relative;
  z-index: 2;
}

.badge-tag {
  background: rgba(26, 159, 255, 0.15);
  color: #67c1f5;
  border: 1px solid rgba(26, 159, 255, 0.3);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: inline-block;
  margin-bottom: 12px;
}

.hero-card h1 {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.hero-card p {
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 22px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}

.btn-primary {
  background-color: var(--accent-cobalt);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--accent-cobalt-hover);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-glass {
  background-color: #212d3d;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.btn-glass:hover {
  background-color: #2b3b4f;
  color: #ffffff;
}

.btn-sm {
  padding: 8px 20px;
  font-size: 13px;
  border-radius: var(--radius-full);
}

.category-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.tab-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-btn:hover {
  background: #1c2633;
  color: var(--text-primary);
  border-color: #384f68;
}

.tab-btn.active {
  background: var(--accent-cobalt);
  color: #ffffff;
  border-color: var(--accent-cobalt);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.game-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-focus);
  transform: translateY(-3px);
}

.card-banner {
  height: 165px;
  position: relative;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border-subtle);
}

.custom-badge-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(14, 20, 27, 0.9);
  color: #67c1f5;
  border: 1px solid rgba(103, 193, 245, 0.35);
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.2px;
}

.card-title svg {
  color: #67c1f5;
}

.card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 16px;
  flex-grow: 1;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  gap: 10px;
}

.card-footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.player-count {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.player-count svg {
  color: var(--text-muted);
}

.game-card-players-stack {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.game-card-player-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #161b22;
  margin-left: -8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, z-index 0.15s ease;
  background: #1f2937;
  position: relative;
}

.game-card-player-avatar:first-child {
  margin-left: 0;
}

.game-card-player-avatar:hover {
  transform: translateY(-2px) scale(1.15);
  z-index: 10;
  border-color: #f59e0b;
}

.game-card-player-avatar.fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  background: linear-gradient(135deg, #374151, #1f2937);
}

.game-card-player-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 10px;
  font-weight: 700;
  color: #e5e7eb;
  margin-left: -4px;
}

.crow-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cards-host-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.12) 100%);
  border: 1px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  color: #fde047;
  white-space: nowrap;
}

.cards-host-pill .host-pill-icon {
  color: #f59e0b;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.cards-host-pill .host-pill-label {
  color: rgba(253, 224, 71, 0.8);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cards-host-pill .host-pill-name {
  color: #ffffff;
  font-weight: 800;
}

.cards-host-pill .host-pill-you {
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.25);
  padding: 1px 6px;
  border-radius: 6px;
}

.btn-cards-end-game {
  font-weight: 700;
  font-size: 0.84rem;
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.game-arena-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-app);
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: 12px 18px 14px;
  overflow: hidden;
  box-sizing: border-box;
}

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

.arena-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.arena-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.arena-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.game-stage-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.stage-interactive-box {
  width: 100%;
  max-width: 720px;
  text-align: center;
}

.game-question-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-inner);
  padding: 22px;
  margin-bottom: 22px;
}

.game-question-box h3 {
  font-size: 19px;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-weight: 700;
}

.player-vote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.vote-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  padding: 16px;
  border-radius: var(--radius-inner);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vote-card:hover {
  background: var(--accent-cobalt);
  color: #ffffff !important;
  border-color: var(--accent-cobalt);
  transform: translateY(-2px);
}

.vote-card:hover * {
  color: #ffffff !important;
}

.game-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--bg-card);
  border: 1px solid var(--border-focus);
  color: var(--text-primary);
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 13.5px;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.game-stage-card:has(.city-monopoly-arena) {
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: visible !important;
  background: url('/assets/city-board-realistic-3d.jpg') center center / cover no-repeat !important;
}

.game-stage-card:has(.city-monopoly-arena):before,
.game-stage-card:has(.city-monopoly-arena):after {
  display: none !important;
}

.city-monopoly-arena {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px;
  overflow: visible !important;
  padding: 0 !important;
}

.mono-header {
  display: none;
}

.mono-3d-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  perspective: 1000px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
  width: 100%;
  max-width: 100%;
  overflow: visible !important;
}

.mono-board-3d {
  width: min(940px, 88vh, 96vw);
  height: min(940px, 88vh, 96vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.3fr);
  grid-template-rows: minmax(0, 1.45fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: 3px;
  padding: 4px;
  background:
    radial-gradient(circle at 50% 35%, rgba(45, 26, 16, 0.85) 0%, rgba(20, 10, 5, 0.94) 55%, rgba(10, 5, 2, 0.98) 100%),
    url('/assets/city-board-realistic-3d.jpg') center center / cover no-repeat;
  border: 3.5px solid rgba(245, 158, 11, 0.75);
  border-radius: 16px;
  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.98),
    0 15px 35px rgba(0, 0, 0, 0.85),
    0 0 45px rgba(245, 158, 11, 0.4),
    inset 0 0 50px rgba(0, 0, 0, 0.92),
    inset 0 2px 8px rgba(255, 237, 213, 0.3);
  transform: rotateX(6deg) scale(0.97) translateY(-4px);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-sizing: border-box;
}

.mono-board-3d:hover {
  transform: rotateX(4deg) scale(0.98) translateY(-4px);
}

.ct-mono-tile {
  background: linear-gradient(155deg, #2f1d13 0%, #20130b 55%, #150b06 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  transform-style: preserve-3d;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 237, 213, 0.12);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
  transform: translateZ(10px);
}

.ct-mono-tile:hover {
  transform: translateZ(28px) translateY(-6px);
  border-color: rgba(251, 191, 36, 0.8);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 158, 11, 0.35);
  z-index: 40;
}

.ct-mono-tile.corner {
  background: linear-gradient(155deg, #4d2b17 0%, #361b0c 60%, #241107 100%);
  border: 2px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 200, 0.2);
}

.ct-mono-tile.corner .tile-color-bar {
  display: none;
}

.tile-color-bar {
  height: 9px;
  width: 100%;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.tile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-align: center;
  gap: 2px;
}

.tile-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  line-height: 1;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateZ(6px);
  padding: 4px;
}

.custom-tile-svg {
  width: 19px;
  height: 19px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}

.ct-mono-tile:hover .tile-icon-badge {
  transform: translateZ(16px) scale(1.15);
}

.ct-mono-tile:hover .custom-tile-svg {
  transform: scale(1.1);
}

.tile-icon-badge.gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(217, 119, 6, 0.2));
  border: 1px solid rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}

.tile-icon-badge.purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(109, 40, 217, 0.2));
  border: 1px solid rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
}

.tile-icon-badge.cyan {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.4), rgba(14, 116, 144, 0.2));
  border: 1px solid rgba(103, 232, 249, 0.6);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.45);
}

.tile-icon-badge.red,
.tile-icon-badge.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(185, 28, 28, 0.2));
  border: 1px solid rgba(248, 113, 113, 0.6);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}

.tile-icon-badge.rose {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.4), rgba(159, 18, 57, 0.2));
  border: 1px solid rgba(251, 113, 133, 0.6);
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.45);
}

.tile-icon-badge.green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(4, 120, 87, 0.2));
  border: 1px solid rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

.tile-icon-badge.amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(180, 83, 9, 0.2));
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.tile-icon-badge.crown {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.5), rgba(161, 98, 7, 0.25));
  border: 1.5px solid #fef08a;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.6);
  animation: crown-glow 2s infinite alternate;
}

@keyframes crown-glow {
  from {
    filter: drop-shadow(0 0 2px #facc15);
  }

  to {
    filter: drop-shadow(0 0 8px #fef08a);
  }
}

.tile-icon-badge.slate {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.4), rgba(51, 65, 85, 0.2));
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.tile-name {
  font-size: 0.68rem;
  font-weight: 800;
  color: #fffaf0;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.tile-name .name-short {
  display: none;
}

.tile-name .name-full {
  display: inline;
}

.tile-cost {
  font-size: 0.58rem;
  color: #fde68a;
  font-weight: 600;
}

.tile-owner {
  font-size: 0.55rem;
  color: #38bdf8;
  font-style: normal;
  font-weight: 700;
}

.ct-mono-tile.owned {
  border-color: #38bdf8;
}

.tile-pawns {
  position: absolute;
  bottom: 3px;
  right: 3px;
  display: flex;
  gap: 3px;
  z-index: 5;
}

.ct-pawn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 255, 255, 0.4);
  transform: translateZ(12px);
  animation: pawn-bounce 1.5s ease-in-out infinite alternate;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.ct-pawn.with-avatar {
  padding: 0;
  background: transparent;
}

.ct-pawn-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

@keyframes pawn-bounce {
  from {
    transform: translateZ(10px) translateY(0);
  }

  to {
    transform: translateZ(18px) translateY(-3px);
  }
}

.mono-center-hub {
  grid-row: 2 / 9;
  grid-column: 2 / 9;
  background:
    radial-gradient(circle at center, rgba(35, 18, 10, 0.45) 0%, rgba(18, 9, 4, 0.82) 70%, rgba(10, 5, 2, 0.95) 100%),
    url('/assets/city-board-realistic-3d.jpg') center center / cover no-repeat;
  border: 2px dashed rgba(251, 191, 36, 0.55);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px;
  transform: translateZ(16px);
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 158, 11, 0.25);
  position: relative;
  z-index: 50;
  pointer-events: auto;
}

.mono-roster-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.mono-feed-center {
  font-size: 0.75rem;
  color: #fed7aa;
  text-align: center;
  background: rgba(20, 12, 8, 0.7);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 3px 8px;
  border-radius: 999px;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mono-action-dock {
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 60;
  position: relative;
  pointer-events: auto;
}

.mono-action-dock button {
  pointer-events: auto;
  cursor: pointer !important;
  z-index: 70;
}

.mono-hub-top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
  position: relative;
  z-index: 100;
  pointer-events: auto;
}

.mono-hub-top-bar button {
  position: relative;
  z-index: 101;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.mono-logo-badge {
  font-family: Orbitron, sans-serif;
  font-size: clamp(0.72rem, 1.4cqi, 0.98rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fef08a;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.75);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(60, 30, 15, 0.7));
  padding: 4px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(251, 191, 36, 0.65);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 20px rgba(245, 158, 11, 0.25);
  white-space: nowrap;
}

.ct-props-filter-group {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.ct-props-filter-group .btn {
  padding: 3px 8px !important;
  font-size: clamp(0.68rem, 1.15cqi, 0.78rem) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mono-hub-action-btns {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.mono-hub-action-btns .btn {
  padding: 3px 9px !important;
  font-size: clamp(0.68rem, 1.15cqi, 0.78rem) !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-manage-hub {
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fef08a !important;
}

.mono-spectator-badge {
  background: rgba(168, 85, 247, 0.25);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #c084fc;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
}

.ct-dice-cube-real {
  width: 76px;
  height: 76px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  display: grid;
  place-items: center;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.6),
    0 4px 10px rgba(0, 0, 0, 0.4),
    inset 0 3px 6px rgba(255, 255, 255, 0.9),
    inset 0 -4px 8px rgba(100, 116, 139, 0.35);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateZ(24px) rotateX(8deg) rotateY(-8deg);
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  position: relative;
}

.ct-dice-cube-real:hover {
  transform: translateZ(32px) rotateX(0deg) rotateY(0deg) scale(1.12);
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.45), 0 0 24px rgba(251, 191, 36, 0.6);
}

.ct-dice-cube-real.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.4);
  pointer-events: none;
}

.ct-dice-cube-real.rolling {
  animation: dice-tumble-real 0.12s infinite alternate ease-in-out;
  border-color: #f59e0b;
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.8), inset 0 0 16px rgba(255, 255, 255, 0.95);
  pointer-events: none;
}

@keyframes dice-tumble-real {
  0% {
    transform: translateZ(38px) rotateX(-35deg) rotateY(-45deg) rotateZ(10deg) scale(1.15);
  }

  50% {
    transform: translateZ(55px) rotateX(40deg) rotateY(35deg) rotateZ(-20deg) scale(1.22);
  }

  100% {
    transform: translateZ(30px) rotateX(20deg) rotateY(-20deg) rotateZ(35deg) scale(1.1);
  }
}

.dice-pip-grid {
  display: grid;
  grid-template-columns: repeat(3, 16px);
  grid-template-rows: repeat(3, 16px);
  gap: 5px;
  place-items: center;
  pointer-events: none;
}

.dice-pip {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: transparent;
  display: block;
}

.dice-pip.on {
  background: radial-gradient(circle at 35% 30%, #ef4444 0%, #b91c1c 80%, #7f1d1d 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(255, 255, 255, 0.5);
}

.dice-val {
  font-family: Orbitron, sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.btn-roll-3d {
  font-size: 1rem !important;
  padding: 10px 22px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(255, 119, 0, 0.4) !important;
}

.ct-buy-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fffaf0;
  background: rgba(18, 12, 8, 0.92);
  padding: 10px 16px;
  border-radius: 14px;
  border: 1.5px solid #f59e0b;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.3);
  transform: translateZ(24px);
  z-index: 80;
  pointer-events: auto;
}

.buy-btns {
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.buy-btns button {
  pointer-events: auto !important;
  cursor: pointer !important;
  font-weight: 800 !important;
  padding: 8px 18px !important;
  font-size: 0.88rem !important;
  z-index: 90;
}

.mono-hud-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  max-width: 550px;
  width: 90%;
  flex-shrink: 0;
  z-index: 50;
}

.mono-roster {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  background: linear-gradient(145deg, rgba(45, 26, 16, 0.95), rgba(28, 16, 10, 0.98));
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.ct-pname {
  font-weight: 700;
  color: #fffaf0;
  font-size: 0.8rem;
}

.ct-pcash {
  color: #fde047;
  font-size: 0.8rem;
}

.mono-feed {
  background: linear-gradient(145deg, rgba(38, 22, 14, 0.95), rgba(22, 12, 8, 0.98));
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.78rem;
  color: #fed7aa;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-line {
  color: #ffedd5;
}

@media (max-width: 720px) {
  .mono-board-3d {
    transform: rotateX(15deg);
  }

  .mono-hud-bar {
    grid-template-columns: 1fr;
  }
}

.ct-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 10px;
}

.ct-tile {
  position: relative;
  min-height: 98px;
  padding: 10px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-inner);
  background: var(--bg-card);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ct-tile:hover {
  border-color: var(--accent-cobalt);
  transform: translateY(-2px);
}

.ct-tile b {
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 700;
}

.ct-tile small {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: 11px;
}

.ct-tile em {
  margin-top: 4px;
  color: #67c1f5;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.ct-tile>span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
}

.ct-pawn,
.ct-dot {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}

.ct-dot {
  width: 8px;
  height: 8px;
  margin-right: 6px;
}

.p0 {
  background: #ef4444;
}

.p1 {
  background: #ff7700;
}

.p2 {
  background: #f59e0b;
}

.p3 {
  background: #10b981;
}

.p4 {
  background: #fbbf24;
}

.p5 {
  background: #ea580c;
}

.ct-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
}

.ct-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ct-player {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(26, 17, 10, 0.85);
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  color: #fef3c7;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.ct-player.active {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(45, 26, 16, 0.9));
  color: #fff;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}

.ct-player b {
  margin-left: 8px;
  color: #38bdf8;
  font-size: 14px;
  font-weight: 800;
}

.ct-log {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-inner);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.reaction-pad {
  width: 100%;
  max-width: 440px;
  height: 190px;
  margin: 16px auto;
  border-radius: var(--radius-card);
  border: 2px dashed var(--border-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  background: var(--bg-card);
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.reaction-pad.ready {
  background: #4c6b22;
  color: #ffffff;
  border: 2px solid #5ba32b;
}

.reaction-pad.early {
  background: rgba(192, 57, 43, 0.2);
  color: #e74c3c;
  border-color: #c0392b;
}

.color-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 320px;
  margin: 16px auto;
}

.color-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-inner);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.color-cell:hover {
  transform: scale(1.04);
}

.emoji-big {
  font-size: 2.8rem;
  letter-spacing: 0.1em;
  margin: 16px 0;
}

.canvas-wrap {
  position: relative;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-inner);
  overflow: hidden;
  margin: 14px auto;
  background: #ffffff;
  max-width: 600px;
}

.canvas-wrap canvas {
  display: block;
  cursor: crosshair;
}

.canvas-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.color-swatch:hover,
.color-swatch.active {
  transform: scale(1.15);
  border-color: #ffffff;
}

.game-input {
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-card);
  background: var(--bg-overlay);
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.game-input:focus {
  border-color: var(--accent-cobalt);
}

.timer-bar-wrap {
  width: 100%;
  max-width: 460px;
  height: 7px;
  background: var(--bg-card);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 16px auto;
}

.timer-bar {
  height: 100%;
  background: var(--accent-cobalt);
  border-radius: var(--radius-full);
  transition: width 0.1s linear;
}

.score-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}

.score-chip strong {
  color: #67c1f5;
}

.game-card {
  isolation: isolate;
  box-shadow: 0 12px 28px rgba(18, 10, 5, .35), inset 0 1px rgba(255, 200, 140, .08);
  transform: translateZ(0)
}

.game-card:hover {
  box-shadow: 0 22px 46px rgba(22, 12, 6, .5), 0 0 0 1px rgba(255, 140, 26, .35);
  transform: translateY(-7px) scale(1.012)
}

.card-scene {
  height: 182px !important;
  overflow: hidden;
  background-color: #2c1b12 !important;
  background-position: center !important;
  transition: background-position .45s ease, filter .3s ease
}

.card-scene:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(20, 13, 8, .65), rgba(32, 18, 10, .12) 60%, rgba(255, 150, 50, .2));
  z-index: 0
}

.game-card:hover .card-scene {
  background-position: center 43% !important;
  filter: saturate(1.2) brightness(1.08)
}

.card-scene-icon {
  position: absolute;
  z-index: 1;
  right: 15px;
  bottom: 13px;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 180, 80, .35);
  border-radius: 15px;
  background: rgba(28, 18, 12, .7);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .35)
}

.card-scene-icon svg {
  width: 21px;
  height: 21px
}

.custom-badge-tag {
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3)
}

.hero-card {
  background-image: linear-gradient(90deg, rgba(18, 12, 9, .97) 0%, rgba(28, 18, 13, .85) 40%, rgba(24, 15, 10, .25) 100%), url('/assets/hub-arcade-3d.png') !important;
  box-shadow: 0 26px 65px rgba(15, 8, 4, .45), inset 0 1px rgba(255, 200, 100, .15)
}

.hero-card:after {
  content: '';
  position: absolute;
  inset: auto -10% -48% 35%;
  height: 200px;
  background: radial-gradient(ellipse, rgba(255, 120, 20, .38), transparent 66%);
  filter: blur(14px);
  pointer-events: none
}

:root {
  --ink: #0d0a09;
  --panel: #1b130f;
  --panel-2: #251b14;
  --line: rgba(255, 175, 75, 0.22);
  --warm-orange: #ff6a00;
  --warm-amber: #f59e0b;
  --warm-yellow: #fbbf24;
  --warm-gold: #ffc107;
  --violet: #f97316;
  --pink: #ea580c;
  --cyan: #facc15;
  --gold: #ffb703;
  --muted: #bfa597;
  --text: #fffaf0;
}

body {
  background: radial-gradient(circle at 18% -8%, rgba(255, 110, 0, 0.28) 0, transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(245, 160, 11, 0.22) 0, transparent 38%),
    radial-gradient(circle at 50% 60%, rgba(234, 88, 12, 0.08) 0, transparent 55%),
    var(--ink);
  color: var(--text);
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: linear-gradient(rgba(255, 180, 80, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 180, 80, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(#000, transparent 75%);
}

.app-container {
  max-width: 1320px;
  padding: 22px 28px 70px;
}

.navbar {
  position: sticky;
  top: 12px;
  z-index: 10;
  background: rgba(27, 19, 15, 0.86);
  backdrop-filter: blur(22px);
  border-color: rgba(255, 165, 55, 0.25);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
}

.logo-icon {
  background: linear-gradient(135deg, #ff5500, #ffb703);
  box-shadow: 0 8px 24px rgba(255, 100, 0, 0.45);
}

.brand-title {
  font-family: Orbitron, Inter, sans-serif;
  letter-spacing: .04em;
  color: #fffaf0;
}

.brand-subtitle {
  display: block;
  color: #fcd34d;
}

.user-badge {
  background: rgba(255, 180, 50, 0.08);
  border-color: rgba(255, 165, 55, 0.25);
}

.hero-card {
  min-height: 314px !important;
  padding: 46px !important;
  border-color: rgba(255, 160, 45, 0.45) !important;
  background-image: linear-gradient(90deg, rgba(18, 13, 10, 0.98), rgba(28, 18, 14, 0.85) 49%, rgba(35, 20, 12, 0.12)), url("/assets/hub-arcade-3d.png") !important;
  background-position: center !important;
  box-shadow: 0 26px 65px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 200, 100, 0.18) !important;
}

.hero-card:after {
  content: '';
  position: absolute;
  inset: auto -10% -48% 35%;
  height: 200px;
  background: radial-gradient(ellipse, rgba(255, 120, 0, 0.35), transparent 66%);
  filter: blur(12px);
  pointer-events: none;
}

.hero-card h1 {
  font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(1.9rem, 4vw, 3.15rem);
  max-width: 710px;
  letter-spacing: -.05em;
  color: #fffaf0;
}

.hero-card p {
  font-size: 1rem;
  max-width: 570px;
  color: #fde68a;
}

.hero-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
  color: #fed7aa;
  font-size: .78rem;
  font-weight: 700;
}

.hero-meta>span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-meta i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 12px #f59e0b;
}

.score-chip {
  background: rgba(28, 19, 14, 0.75) !important;
  border-color: rgba(255, 160, 50, 0.3) !important;
  color: #fed7aa;
}

.score-chip strong {
  color: #f59e0b !important;
}

.hub-presence-dock {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  align-items: center;
}

.presence-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.presence-user-pill:hover {
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.presence-user-pill.is-me {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(30, 58, 138, 0.35);
}

.presence-user-pill.can-spectate {
  cursor: pointer;
  border-color: rgba(168, 85, 247, 0.4);
}

.presence-user-pill.can-spectate:hover {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.15);
}

.btn-presence-spectate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(126, 34, 206, 0.4));
  border: 1px solid rgba(192, 132, 252, 0.5);
  color: #f3e8ff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.btn-presence-spectate:hover {
  background: linear-gradient(135deg, #a855f7, #7e22ce);
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}

.presence-avatar-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.presence-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: block;
}

.presence-avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presence-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0f172a;
}

.presence-status-dot.status-hub {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.presence-status-dot.status-lobby {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

.presence-status-dot.status-playing {
  background: #a855f7;
  box-shadow: 0 0 6px #a855f7;
}

.presence-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.presence-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.presence-name .host-crown {
  color: #fbbf24;
  font-size: 0.85rem;
}

.presence-me-tag {
  background: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.presence-activity {
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

.presence-activity.status-hub {
  color: #a7f3d0;
}

.presence-activity.status-lobby {
  color: #fde68a;
}

.presence-activity.status-playing {
  color: #e9d5ff;
}

.pill-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 4px;
  vertical-align: middle;
}

.btn {
  font-weight: 800;
  letter-spacing: .01em;
}

.btn-primary {
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.28) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.38) !important;
}

.btn-glass {
  background: rgba(45, 30, 20, 0.6);
  border: 1px solid rgba(255, 180, 60, 0.22);
  color: #fde68a;
  backdrop-filter: blur(8px);
}

.btn-glass:hover {
  background: rgba(65, 42, 28, 0.8);
  border-color: rgba(255, 180, 60, 0.4);
  color: #fff;
}

.category-nav {
  padding-top: 4px;
}

.tab-btn {
  background: rgba(30, 21, 16, 0.75);
  border-color: rgba(255, 160, 50, 0.2);
  color: #fed7aa;
}

.tab-btn:hover {
  background: rgba(45, 30, 22, 0.85);
  color: #fff;
}

.tab-btn.active {
  background: linear-gradient(135deg, #ea580c, #f59e0b) !important;
  box-shadow: 0 8px 22px rgba(245, 120, 0, 0.38) !important;
  color: #fff !important;
  border-color: rgba(255, 215, 100, 0.5) !important;
}

.games-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.game-card {
  border-color: rgba(255, 160, 50, 0.2) !important;
  background: linear-gradient(145deg, rgba(34, 24, 20, 0.94), rgba(20, 14, 12, 0.98)) !important;
  border-radius: 20px !important;
}

.game-card:hover {
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 160, 50, 0.45) !important;
}

.card-body {
  padding: 17px 18px 18px;
}

.card-title {
  font-family: Orbitron, Inter, sans-serif;
  font-size: .95rem;
  color: #fffaf0;
}

.card-desc {
  color: #d1b8a9;
}

.card-scene {
  height: 176px !important;
}

.card-scene:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto -20% -35% 25%;
  height: 100px;
  background: radial-gradient(ellipse, rgba(255, 160, 0, 0.32), transparent 66%);
  filter: blur(8px);
}

.custom-badge-tag {
  background: rgba(30, 18, 12, 0.82) !important;
  color: #fde68a !important;
  border-color: rgba(255, 180, 50, 0.35) !important;
}

.card-footer {
  border-color: rgba(255, 160, 50, 0.16);
}

.game-arena-overlay {
  background: radial-gradient(circle at 80% 0, #381f12 0, transparent 35%), var(--ink);
  padding: 8px 12px 10px;
}

.arena-header {
  background: rgba(28, 19, 15, 0.85);
  border-color: rgba(255, 160, 50, 0.25);
  backdrop-filter: blur(20px);
}

.arena-title {
  font-family: Orbitron, Inter, sans-serif;
  color: #fcd34d;
}

.arena-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.arena-score {
  font-size: .78rem;
  font-weight: 800;
  color: #ffb703;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 183, 3, 0.12);
  border: 1px solid rgba(255, 183, 3, 0.3);
}

.player-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  margin: 2px;
  border-radius: 99px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.22);
  font-size: .75rem;
  color: #fde68a;
}

.game-stage-card {
  background: linear-gradient(145deg, rgba(28, 20, 16, 0.94), rgba(16, 11, 9, 0.98));
  border-color: rgba(255, 160, 50, 0.25);
  border-radius: 24px;
}

.stage-interactive-box {
  max-width: 800px;
}

.game-question-box,
.panel-soft {
  background: rgba(36, 25, 20, 0.72) !important;
  border-color: rgba(255, 160, 50, 0.22) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.badge-tag {
  background: rgba(255, 120, 0, 0.16) !important;
  color: #fed7aa !important;
  border-color: rgba(255, 140, 0, 0.38) !important;
}

.badge-tag.danger {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}

.vote-card,
.choice-btn {
  background: rgba(36, 25, 20, 0.75) !important;
  border-color: rgba(255, 160, 50, 0.22) !important;
  color: var(--text) !important;
}

.vote-card:hover,
.choice-btn:hover {
  background: linear-gradient(135deg, #ea580c, #f59e0b) !important;
  color: #fff !important;
}

.vote-avatar,
.letter-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff7700, #ffc107);
  color: #140d08;
  font-weight: 900;
  overflow: hidden;
}

.vote-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.input-row,
.action-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.action-row {
  margin-top: 18px;
}

.game-input,
.game-textarea {
  background: rgba(18, 12, 10, 0.85) !important;
  border-color: rgba(255, 160, 50, 0.25) !important;
  color: #fff !important;
}

.game-textarea {
  min-height: 120px;
  padding: 14px;
  border-radius: 14px;
  resize: vertical;
  font: inherit;
}

.chip {
  display: inline-block;
  margin: 4px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fde68a;
}

.result-banner {
  padding: 15px;
  border-radius: 14px;
  font-weight: 800;
  margin: 14px 0;
}

.result-banner.win {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
}

.result-banner.lose {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.timer-label {
  font: 900 2.35rem Orbitron, sans-serif;
  color: var(--gold);
}

.timer-bar {
  height: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px;
  overflow: hidden;
}

.timer-bar span,
#mem-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff7700, #ffc107);
  border-radius: inherit;
}

.memory-items,
.choice-grid {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.memory-items span {
  padding: 12px;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.22);
  color: #fde68a;
}

.choice-btn {
  padding: 12px 18px;
  border-radius: 12px;
  cursor: pointer;
}

.log-box {
  max-height: 160px;
  overflow: auto;
  margin-top: 16px;
  padding: 14px;
  text-align: left;
  border-radius: 14px;
  background: rgba(18, 12, 10, 0.65);
  border: 1px solid rgba(255, 160, 50, 0.2);
}

.me {
  color: #fbbf24;
  margin-top: 6px;
}

.muted {
  color: var(--muted);
}

.squad-lobby {
  width: min(900px, 100%);
  padding: 36px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(38, 26, 20, 0.92), rgba(20, 14, 11, 0.98));
  border: 1px solid rgba(255, 160, 50, 0.25);
  text-align: center;
}

.lobby-kicker {
  color: #fbbf24;
  font: 800 .75rem Orbitron, sans-serif;
  letter-spacing: .18em;
}

.squad-lobby h2 {
  font: 900 2rem Orbitron, sans-serif;
  margin: 8px;
  color: #fffaf0;
}

.lobby-copy,
.lobby-hint {
  color: var(--muted);
}

.lobby-summary {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px;
  flex-wrap: wrap;
}

.lobby-summary span {
  padding: 7px 11px;
  border: 1px solid rgba(255, 160, 50, 0.22);
  border-radius: 999px;
  color: #fde68a;
}

.squad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.squad-slot {
  position: relative;
  padding: 18px 12px;
  border-radius: 16px;
  background: rgba(18, 12, 10, 0.55);
  border: 1px solid rgba(255, 160, 50, 0.2);
}

.squad-slot.empty {
  opacity: .58;
  border-style: dashed;
}

.squad-avatar {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, #ff7700, #ffc107);
  font-weight: 900;
  color: #140d08;
}

.squad-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.squad-name {
  font-weight: 800;
  color: #fffaf0;
}

.squad-role {
  color: var(--muted);
  font-size: .75rem;
  margin-top: 4px;
}

.remove-bot {
  position: absolute;
  top: 7px;
  right: 7px;
  border: 0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.lobby-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 22px 0 12px;
}

.city-game {
  max-width: 1060px !important;
  background: linear-gradient(145deg, rgba(34, 24, 18, 0.96), rgba(18, 12, 10, 0.98)) !important;
  border-color: rgba(255, 160, 50, 0.25) !important;
}

.modal,
.welcome-overlay {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(10, 7, 6, 0.78);
  backdrop-filter: blur(10px);
}

.modal.hidden,
.welcome-overlay.hidden {
  display: none !important;
}

linear-gradient(155deg, #1B2940, #131F32);1px solid rgba(214, 184, 120, 0.35);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.65);
  text-align: center;
}

.modal-card h2,
.welcome-card h2 {
  font: 900 1.8rem Orbitron, sans-serif;
  margin: 14px 0;
  color: #fffaf0;
}

.modal-card p,
.welcome-card p {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

1px solid rgba(214, 184, 120, 0.35);#D6B878;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

rgba(214, 184, 120, 0.2);#D6B878;
  color: #fff;
  transform: scale(1.1);
}

.guide-steps {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 24px;
  flex-wrap: wrap;
}

.guide-steps span {
  padding: 6px 14px;
  border-radius: 12px;
  background: rgba(255, 140, 0, 0.1);
  border: 1px solid rgba(255, 170, 50, 0.25);
  color: #fbbf24;
  font-size: 0.85rem;
  font-weight: 600;
}

.game-arena-overlay {
  --arena-a: #ff7700;
  --arena-b: #fbbf24;
}

.game-stage-card {
  isolation: isolate;
}

.game-stage-card:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 84% 12%, rgba(255, 140, 0, 0.22), transparent 35%),
    radial-gradient(circle at 13% 92%, rgba(251, 191, 36, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(22, 15, 12, 0.96), rgba(14, 10, 8, 0.9));
  opacity: .96;
}

.game-stage-card:after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 200, 100, 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .18;
  mask-image: linear-gradient(130deg, transparent 0, black 45%, transparent 100%);
  animation: arena-drift 13s linear infinite;
}

.game-stage-card>* {
  position: relative;
  z-index: 1;
}

@keyframes arena-drift {
  to {
    background-position: 88px 48px;
  }
}

.game-question-box {
  border-left: 3px solid #ff7700 !important;
}

.game-stage-card .btn-primary {
  background: linear-gradient(135deg, #ff6a00, #f59e0b) !important;
}

.game-stage-card .badge-tag {
  box-shadow: 0 0 22px rgba(255, 120, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .game-stage-card:after {
    animation: none;
  }
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(36, 24, 18, 0.75) !important;
  border: 1px solid rgba(255, 170, 60, 0.22) !important;
  color: #fed7aa !important;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.navbar-actions .btn:hover {
  background: rgba(55, 36, 25, 0.95) !important;
  border-color: rgba(255, 180, 70, 0.5) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.navbar-actions .btn-leaderboard {
  border-color: rgba(250, 204, 21, 0.35) !important;
  color: #fde047 !important;
}

.navbar-actions .btn-wheel {
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fcd34d !important;
}

.navbar-actions .btn-shop {
  border-color: rgba(168, 85, 247, 0.35) !important;
  color: #d8b4fe !important;
}

.navbar-actions .btn-quests {
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fed7aa !important;
}

.navbar-actions .btn-settings {
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #7dd3fc !important;
}

.navbar-actions .btn-cinema {
  border-color: rgba(250, 204, 21, 0.35) !important;
  color: #fde047 !important;
}

.navbar-actions .btn-audio-toggle {
  padding: 7px 10px;
  color: #f97316 !important;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hero-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.hero-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
}

.hero-actions #btn-random-game {
  background: linear-gradient(135deg, #c2410c, #9a3412) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #ffffff !important;
}

.hero-actions #btn-random-game:hover {
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
}

.hero-actions .btn-gold {
  background: linear-gradient(135deg, rgba(146, 64, 14, 0.85), rgba(120, 53, 15, 0.95)) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fef08a !important;
}

.hero-actions .btn-gold:hover {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.95), rgba(146, 64, 14, 0.95)) !important;
  border-color: rgba(251, 191, 36, 0.6) !important;
  color: #ffffff !important;
}

.hero-actions .btn-purple {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.85), rgba(67, 20, 105, 0.95)) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  color: #f3e8ff !important;
}

.hero-actions .btn-purple:hover {
  background: linear-gradient(135deg, rgba(107, 33, 168, 0.95), rgba(88, 28, 135, 0.95)) !important;
  border-color: rgba(192, 132, 252, 0.6) !important;
  color: #ffffff !important;
}

.badge-tag.gold {
  background: rgba(255, 203, 107, 0.15) !important;
  color: #ffd478 !important;
  border-color: rgba(255, 203, 107, 0.45) !important;
}

.hub-leaderboard-preview {
  margin: 24px 0 28px;
  background: linear-gradient(155deg, rgba(27, 41, 64, 0.95), rgba(19, 31, 50, 0.98));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px 28px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.lb-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.lb-preview-title h2 {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 1.35rem;
  margin-top: 4px;
}

.podium-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.podium-mini-card {
  position: relative;
  background: rgba(16, 20, 48, 0.7);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.podium-mini-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 203, 107, 0.45);
}

.podium-mini-card.rank-1 {
  background: linear-gradient(135deg, rgba(255, 203, 107, 0.14), rgba(20, 24, 58, 0.85));
  border-color: rgba(255, 203, 107, 0.45);
  box-shadow: 0 6px 20px rgba(255, 203, 107, 0.15);
}

.podium-mini-card.rank-2 {
  background: linear-gradient(135deg, rgba(200, 215, 235, 0.1), rgba(20, 24, 58, 0.85));
  border-color: rgba(190, 205, 225, 0.35);
}

.podium-mini-card.rank-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(20, 24, 58, 0.85));
  border-color: rgba(205, 127, 50, 0.35);
}

.podium-rank-badge {
  font-size: 1.4rem;
  line-height: 1;
}

.podium-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  font-weight: 800;
  color: #0b0c1b;
  flex-shrink: 0;
}

.podium-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podium-user-info {
  flex: 1;
  min-width: 0;
}

.podium-username {
  font-weight: 800;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.podium-title {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 2px;
}

.podium-score {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--gold);
}

.leaderboard-modal-card {
  width: min(840px, 96vw) !important;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 22px !important;
  overflow: hidden;
}

.lb-modal-hero {
  text-align: center;
  margin-bottom: 20px;
}

.trophy-header-badge {
  font-size: 2.4rem;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 16px rgba(255, 203, 107, 0.6));
  animation: trophy-bounce 2.6s infinite ease-in-out;
}

@keyframes trophy-bounce {

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

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

.lb-subtitle {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 6px;
}

.lb-tabs-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.lb-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(22, 26, 56, 0.75);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lb-tab-btn:hover {
  background: rgba(36, 42, 88, 0.85);
  color: #fff;
}

.lb-tab-btn.active {
  background: linear-gradient(135deg, #7c5cff, #a855f7);
  color: #fff;
  border-color: rgba(200, 180, 255, 0.5);
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.35);
}

.live-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {

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

  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

.lb-podium-showcase {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  padding: 10px 10px 0;
}

.podium-pillar {
  position: relative;
  background: linear-gradient(180deg, rgba(28, 34, 76, 0.9), rgba(13, 16, 42, 0.95));
  border: 1px solid var(--line);
  border-radius: 20px 20px 14px 14px;
  padding: 16px 14px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 230px;
  height: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.podium-pillar.rank-1 {
  min-height: 260px;
  background: linear-gradient(180deg, rgba(48, 42, 20, 0.9), rgba(18, 16, 38, 0.98));
  border-color: rgba(255, 203, 107, 0.6);
  box-shadow: 0 16px 40px rgba(255, 203, 107, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  order: 2;
}

.podium-pillar.rank-2 {
  min-height: 235px;
  border-color: rgba(180, 200, 225, 0.4);
  order: 1;
}

.podium-pillar.rank-3 {
  min-height: 220px;
  border-color: rgba(205, 127, 50, 0.4);
  order: 3;
}

.pillar-crown {
  font-size: 1.8rem;
  margin-bottom: 2px;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

.pillar-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 2px solid transparent;
  overflow: hidden;
  margin: 4px auto 6px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  font-weight: 800;
  color: #0b0c1b;
  flex-shrink: 0;
}

.pillar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rank-1 .pillar-avatar {
  width: 60px;
  height: 60px;
  border-color: #ffd700;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.4);
}

.rank-2 .pillar-avatar {
  border-color: #c0c0c0;
}

.rank-3 .pillar-avatar {
  border-color: #cd7f32;
}

.pillar-name {
  font-weight: 800;
  font-size: 0.95rem;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  line-height: 1.2;
}

.pillar-badge {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
  margin-bottom: 8px;
  line-height: 1.2;
}

.pillar-score {
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--gold);
  line-height: 1.2;
  margin-top: auto;
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.pillar-place {
  position: static;
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
  margin-top: 2px;
  z-index: 1;
}

.lb-list-panel {
  flex: 1;
  overflow-y: auto;
  max-height: 280px;
  padding-right: 6px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: rgba(8, 10, 28, 0.45);
  border: 1px solid var(--line);
}

.lb-list-panel::-webkit-scrollbar {
  width: 6px;
}

.lb-list-panel::-webkit-scrollbar-thumb {
  background: rgba(139, 108, 255, 0.35);
  border-radius: 999px;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.lb-row:last-child {
  border-bottom: none;
}

.lb-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.lb-row.is-me {
  background: rgba(124, 92, 255, 0.18);
  border-left: 3px solid var(--violet);
}

.lb-rank-num {
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  width: 32px;
  text-align: center;
  color: var(--muted);
}

.lb-rank-num.medal-1 {
  color: #ffd700;
  font-size: 1.2rem;
}

.lb-rank-num.medal-2 {
  color: #e0e0e0;
  font-size: 1.15rem;
}

.lb-rank-num.medal-3 {
  color: #cd7f32;
  font-size: 1.15rem;
}

.lb-player-av {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  font-weight: 800;
  color: #0b0c1b;
  flex-shrink: 0;
}

.lb-player-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-player-info {
  flex: 1;
  min-width: 0;
}

.lb-player-name {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-player-tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-weight: 600;
}

.lb-stats-group {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: right;
}

.lb-stat-item {
  display: flex;
  flex-direction: column;
}

.lb-stat-val {
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--text);
}

.lb-stat-val.gold {
  color: var(--gold);
}

.lb-stat-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
}

.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 12px;
}

.record-card {
  background: linear-gradient(145deg, rgba(22, 27, 60, 0.8), rgba(12, 14, 38, 0.9));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.record-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 203, 107, 0.4);
}

.record-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-game-name {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--cyan);
}

.record-value {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--gold);
}

.record-holder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.record-holder-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}

.lb-my-position-bar {
  background: linear-gradient(135deg, rgba(32, 28, 74, 0.95), rgba(18, 16, 44, 0.98));
  border: 1px solid rgba(139, 108, 255, 0.35);
  border-radius: 16px;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.my-pos-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.my-pos-rank {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--gold);
}

.my-pos-name {
  font-weight: 800;
  font-size: 0.95rem;
}

.my-pos-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .podium-mini-grid {
    grid-template-columns: 1fr;
  }

  .lb-podium-showcase {
    grid-template-columns: 1fr;
  }

  .podium-pillar.rank-1,
  .podium-pillar.rank-2,
  .podium-pillar.rank-3 {
    height: auto;
    order: initial;
  }

  .lb-my-position-bar {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .my-pos-right {
    justify-content: center;
  }
}

.crow-game {
  width: min(840px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: linear-gradient(145deg, rgba(34, 24, 18, 0.95), rgba(18, 12, 9, 0.98));
  border: 1px solid rgba(255, 160, 50, 0.3);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.crow-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 170, 50, 0.18);
  padding-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.crow-head h3 {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: #fffaf0;
  margin: 6px 0 2px;
}

.crow-head p {
  color: var(--muted);
  font-size: 0.88rem;
}

.crow-turn {
  background: rgba(255, 140, 0, 0.15);
  border: 1px solid rgba(255, 170, 50, 0.35);
  padding: 8px 18px;
  border-radius: 999px;
  color: #fbbf24;
  font-weight: 700;
  font-size: 0.95rem;
}

.crow-opponents {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.crow-player {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 14, 11, 0.8);
  border: 1px solid rgba(255, 160, 50, 0.2);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.crow-player.active {
  border-color: #ff7700;
  background: rgba(255, 119, 0, 0.2);
  color: #fff;
}

.crow-player .mini-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff7700;
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.72rem;
}

.crow-player b {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 7px;
  border-radius: 8px;
  color: #fbbf24;
  font-weight: 800;
}

.crow-table {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding: 28px 10px;
  background: radial-gradient(circle, rgba(255, 120, 0, 0.12) 0%, transparent 70%);
  border-radius: 20px;
}

.crow-draw {
  width: 78px;
  height: 110px;
  border-radius: 14px;
  background: linear-gradient(145deg, #2e1d14, #180f0a);
  border: 2px dashed rgba(255, 170, 50, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: #fbbf24;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.crow-draw:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.05);
  border-color: #ff7700;
  box-shadow: 0 14px 30px rgba(255, 119, 0, 0.35);
}

.crow-draw span {
  font-size: 1.6rem;
}

.crow-draw small {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.crow-draw:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.crow-card {
  width: 78px;
  height: 112px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  position: relative;
  user-select: none;
}

.crow-card.red {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #ffffff;
}

.crow-card.blue {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
}

.crow-card.yellow {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  color: #1a1005;
}

.crow-card.green {
  background: linear-gradient(135deg, #10b981, #047857);
  color: #ffffff;
}

.crow-card b {
  font-family: Orbitron, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  align-self: flex-start;
}

.crow-card span {
  font-family: Orbitron, sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  align-self: center;
  line-height: 1;
}

.crow-card:hover:not(:disabled) {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  border-color: #ffffff;
  z-index: 10;
}

.crow-card:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.crow-status {
  text-align: center;
  font-weight: 700;
  color: #fed7aa;
  font-size: 0.95rem;
  min-height: 24px;
}

.crow-hand {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 6px;
  min-height: 130px;
  align-items: center;
}

.crow-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 170, 50, 0.15);
  padding-top: 14px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

radial-gradient(circle at 50% 15%, rgba(27, 41, 64, 0.98), rgba(19, 31, 50, 0.99)) !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(245, 158, 11, 0.15) !important;
}

.wheel-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 18px auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel-outer-ring {
  position: relative;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 8px #2b1810,
    0 0 0 14px #f59e0b,
    0 0 35px rgba(245, 158, 11, 0.4),
    0 18px 45px rgba(0, 0, 0, 0.85);
  background: #1c110a;
}

#wheel-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  transition: transform 4.2s cubic-bezier(0.12, 0.8, 0.15, 1);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.wheel-pointer {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.8));
  animation: pointer-bounce 1s infinite alternate ease-in-out;
}

@keyframes pointer-bounce {
  from {
    transform: translateX(-50%) translateY(0);
  }

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

.wheel-center-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a 0%, #f59e0b 60%, #b45309 100%);
  border: 4px solid #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 20px rgba(251, 191, 36, 0.5);
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pin-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.wheel-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.wheel-banner {
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  background: rgba(245, 158, 11, 0.2);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  color: #fef08a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.3s ease;
}

.profile-modal-card {
  max-width: 480px !important;
  width: 94% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  border-radius: 26px !important;
  background: #111217 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  animation: discordProfilePop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 191, 36, 0.3) rgba(255, 255, 255, 0.02);
}

.profile-modal-card::-webkit-scrollbar {
  width: 6px;
}

.profile-modal-card::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

.profile-modal-card::-webkit-scrollbar-thumb {
  background: rgba(251, 191, 36, 0.35);
  border-radius: 999px;
  border: none;
}

.profile-modal-card::-webkit-scrollbar-thumb:hover {
  background: rgba(251, 191, 36, 0.6);
}

@keyframes discordProfilePop {
  0% { transform: scale(0.92) translateY(12px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.discord-profile-banner {
  height: 140px;
  background: linear-gradient(135deg, #090d16 0%, #111827 50%, #1e1b4b 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.banner-overlay-mesh {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 80% at 75% 30%, rgba(56, 189, 248, 0.22), transparent),
    radial-gradient(circle at 20% 70%, rgba(139, 92, 246, 0.25), transparent 50%),
    linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.95) 100%);
}

.discord-profile-header {
  position: relative;
  padding: 0 22px;
  margin-top: -54px;
  display: flex;
  flex-direction: column;
}

.discord-avatar-container {
  position: relative;
  width: 98px;
  height: 98px;
  margin-bottom: 12px;
}

.discord-avatar-large {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  border: 6px solid #111217;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(124, 58, 237, 0.35);
}

.discord-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discord-status-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 4px solid #111217;
}

.discord-status-badge.online {
  background: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.75);
}

.discord-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.discord-badges-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 999px;
}

.discord-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  color: #fbbf24;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  cursor: default;
  transition: transform 0.2s;
}

.discord-badge-icon:nth-child(2) { color: #f97316; }
.discord-badge-icon:nth-child(3) { color: #38bdf8; }
.discord-badge-icon:nth-child(4) { color: #ec4899; }
.discord-badge-icon:hover { transform: scale(1.25); }

.discord-display-name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.discord-handle {
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 6px;
  margin-bottom: 2px;
}

.discord-tags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.badge-tag.level-pill {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.45);
  font-weight: 800;
  font-size: 0.76rem;
  border-radius: 999px;
  padding: 4px 10px;
}

.badge-tag.live-vocal {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
  font-weight: 700;
  font-size: 0.76rem;
  border-radius: 999px;
  padding: 4px 10px;
}

/* XP TRACKER */
.profile-xp-container {
  margin: 14px 22px 4px;
  background: rgba(24, 25, 33, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 14px;
}

.profile-xp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 7px;
}

.profile-xp-title {
  color: #94a3b8;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.profile-xp-ratio {
  color: #e2e8f0;
  font-weight: 800;
  font-family: Orbitron, Inter, sans-serif;
  font-size: 0.72rem;
}

.profile-xp-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.profile-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc, #f43f5e);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.7);
  transition: width 0.4s ease;
}

/* BIO BOX */
.profile-custom-bio-box {
  background: rgba(0, 0, 0, 0.28);
  border-left: 3px solid #8b5cf6;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.bio-kicker {
  font-size: 0.65rem;
  font-weight: 800;
  color: #a78bfa;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bio-text {
  font-size: 0.82rem;
  color: #cbd5e1;
  font-style: italic;
  line-height: 1.35;
}

.badge-rank {
  font-size: 0.7rem;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
  margin-left: auto;
}

.discord-profile-body {
  padding: 18px 20px;
  background: linear-gradient(180deg, #181920 0%, #121318 100%);
  margin: 10px 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  overflow: hidden;
}

.discord-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.discord-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.discord-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(30, 32, 44, 0.85);
  backdrop-filter: blur(10px);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.discord-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.stat-icon-wrapper {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(15, 17, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-icon-wrapper.gold-glow {
  background: radial-gradient(circle at center, rgba(234, 179, 8, 0.25), rgba(15, 17, 26, 0.8));
  border-color: rgba(234, 179, 8, 0.4);
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.2);
}

.stat-icon-wrapper.amber-glow {
  background: radial-gradient(circle at center, rgba(249, 115, 22, 0.25), rgba(15, 17, 26, 0.8));
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.2);
}

.stat-icon-wrapper.cyan-glow {
  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.25), rgba(15, 17, 26, 0.8));
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}

.stat-icon-wrapper.purple-glow {
  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.25), rgba(15, 17, 26, 0.8));
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.2);
}

.stat-icon-wrapper.emerald-glow {
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.25), rgba(15, 17, 26, 0.8));
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
}

.stat-icon-wrapper.fuchsia-glow {
  background: radial-gradient(circle at center, rgba(236, 72, 153, 0.25), rgba(15, 17, 26, 0.8));
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.2);
}

.discord-stat-card .stat-meta {
  display: flex;
  flex-direction: column;
}

.discord-stat-card .stat-label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.discord-stat-card .stat-val {
  font-size: 1.05rem;
  color: #ffffff;
  font-weight: 800;
  font-family: Orbitron, Inter, sans-serif;
  letter-spacing: 0.02em;
}

.profile-equipped-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
  background: rgba(22, 24, 34, 0.7);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.equipped-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.equipped-item .eq-label {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
}

.equipped-item .eq-val {
  font-size: 0.92rem;
  color: #f8fafc;
  font-weight: 800;
}

/* ACHIEVEMENTS ROW */
.profile-achievements-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.achieve-badge {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.achieve-badge:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(251, 191, 36, 0.4);
  transform: translateY(-2px);
}

.ach-icon {
  font-size: 1.15rem;
  color: #fbbf24;
}

.achieve-badge:nth-child(2) .ach-icon { color: #38bdf8; }
.achieve-badge:nth-child(3) .ach-icon { color: #c084fc; }
.achieve-badge:nth-child(4) .ach-icon { color: #4ade80; }

.ach-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  width: 100%;
  padding: 0 2px;
}

.discord-profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.btn-modern-action {
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-quests-glow {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.45) !important;
  border: none !important;
}

.btn-quests-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.6) !important;
}

.shop-modal-card,
.quests-modal-card {
  max-width: 780px;
  width: 95%;
  background: radial-gradient(circle at 50% 0%, rgba(27, 41, 64, 0.98), rgba(19, 31, 50, 0.99)) !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 40px rgba(245, 158, 11, 0.2) !important;
  border-radius: 20px !important;
}

.shop-currency-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

.shop-category-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  background: rgba(15, 10, 7, 0.6);
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 160, 50, 0.2);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.shop-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.shop-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.shop-tab-btn.active {
  background: linear-gradient(135deg, #ff7700 0%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  padding: 4px 6px 14px 4px;
}

.shop-card {
  position: relative;
  background: rgba(30, 19, 13, 0.75);
  border: 1px solid rgba(255, 160, 50, 0.2);
  border-radius: 16px;
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.shop-card:hover {
  transform: translateY(-5px);
  border-color: rgba(251, 191, 36, 0.6);
  background: rgba(45, 28, 19, 0.9);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.25);
}

.shop-card.equipped {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35) !important;
}

.shop-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
}

.rarity-mythic .shop-card-badge {
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.5);
  background: rgba(244, 63, 94, 0.15);
}

.rarity-legendary .shop-card-badge {
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.15);
}

.rarity-epic .shop-card-badge {
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.5);
  background: rgba(192, 132, 252, 0.15);
}

.rarity-rare .shop-card-badge {
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.15);
}

.rarity-common .shop-card-badge {
  color: #a3a3a3;
  border: 1px solid rgba(163, 163, 163, 0.3);
}

.shop-card-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(255, 160, 50, 0.25);
  display: grid;
  place-items: center;
  margin-top: 4px;
  position: relative;
}

.shop-card-icon {
  font-size: 1.8rem;
  display: grid;
  place-items: center;
}

.shop-card-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  line-height: 1.25;
}

.shop-card-type-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fed7aa;
  background: rgba(255, 119, 0, 0.15);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 119, 0, 0.25);
}

.shop-card-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
  min-height: 38px;
  flex: 1;
}

.shop-card-footer {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-card-price {
  font-family: Orbitron, sans-serif;
  font-weight: 700;
  color: #fbbf24;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.shop-card-price.unlocked {
  color: #10b981;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 800;
}

.btn-shop-action {
  width: 100%;
  font-size: 0.82rem !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

.btn-shop-action.equipped-btn {
  background: #10b981 !important;
  color: #fff !important;
  border: none !important;
  cursor: default !important;
  opacity: 1 !important;
}

.ct-pawn.pawn-skin-pawn_gold {
  border-color: #ffd700 !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(251, 191, 36, 0.5) !important;
  filter: drop-shadow(0 0 6px #ffd700);
}

.ct-pawn.pawn-skin-pawn_fire {
  border-color: #ff4500 !important;
  box-shadow: 0 0 18px rgba(255, 69, 0, 0.9), 0 0 28px rgba(234, 88, 12, 0.7) !important;
  filter: drop-shadow(0 0 8px #ff4500);
  animation: pawn-fire-pulse 1s infinite alternate !important;
}

.ct-pawn.pawn-skin-pawn_cyber {
  border-color: #00f0ff !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.9), 0 0 25px rgba(0, 240, 255, 0.5) !important;
  filter: drop-shadow(0 0 7px #00f0ff);
}

.ct-pawn.pawn-skin-pawn_diamond {
  border-color: #a5f3fc !important;
  box-shadow: 0 0 18px rgba(165, 243, 252, 0.95), 0 0 30px rgba(56, 189, 248, 0.6) !important;
  filter: drop-shadow(0 0 8px #a5f3fc);
}

.ct-pawn.pawn-skin-pawn_emerald {
  border-color: #10b981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.9), 0 0 25px rgba(16, 185, 129, 0.5) !important;
  filter: drop-shadow(0 0 7px #10b981);
}

.ct-pawn.pawn-skin-pawn_dark {
  border-color: #c084fc !important;
  box-shadow: 0 0 18px rgba(192, 132, 252, 0.9), 0 0 28px rgba(147, 51, 234, 0.6) !important;
  filter: drop-shadow(0 0 7px #c084fc);
}

@keyframes pawn-fire-pulse {
  from {
    transform: translateZ(12px) scale(1);
  }

  to {
    transform: translateZ(20px) scale(1.12);
  }
}

.quests-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(32, 21, 15, 0.7);
  border: 1px solid rgba(255, 160, 50, 0.18);
  border-radius: 14px;
  padding: 14px 18px;
  gap: 14px;
  transition: all 0.2s ease;
}

.quest-item.completed {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

.quest-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.quest-item-title {
  font-weight: 800;
  color: #fff;
  font-size: 0.95rem;
}

.quest-item-progress {
  font-size: 0.82rem;
  color: var(--muted);
}

.quest-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 4px;
}

.quest-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ea580c, #f59e0b);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.tile-building-3d {
  position: absolute;
  top: 3px;
  right: 4px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  transform-style: preserve-3d;
  z-index: 30;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
}

.houses-cluster {
  display: flex;
  gap: 3px;
  transform-style: preserve-3d;
}

.b3d-house {
  position: relative;
  width: 18px;
  height: 20px;
  transform-style: preserve-3d;
  animation: house-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes house-pop {
  0% {
    transform: scale(0) translateZ(0);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateZ(12px);
    opacity: 1;
  }
}

.b3d-house-body {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(12px);
}

.b3d-house-roof {
  position: absolute;
  top: -5px;
  left: 0;
  width: 18px;
  height: 9px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 4px 4px 1px 1px;
  box-shadow: 0 -2px 8px rgba(16, 185, 129, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.7);
  border-top: 1px solid #6ee7b7;
  transform: rotateX(25deg);
}

.b3d-house-wall {
  position: absolute;
  bottom: 0;
  left: 1px;
  width: 16px;
  height: 14px;
  background: linear-gradient(180deg, #f0fdf4 0%, #d1fae5 45%, #059669 100%);
  border-radius: 2px;
  border: 1px solid #10b981;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 0 2px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.default-building {
  opacity: 1;
}

.b3d-base-house {
  position: relative;
  width: 22px;
  height: 24px;
  transform-style: preserve-3d;
  transform: translateZ(14px);
}

.b3d-base-roof {
  position: absolute;
  top: -6px;
  left: 0;
  width: 22px;
  height: 10px;
  border-radius: 4px 4px 1px 1px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 -2px 6px rgba(0, 0, 0, 0.6);
  border-top: 1.5px solid rgba(255, 255, 255, 0.6);
  transform: rotateX(25deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.b3d-base-wall {
  position: absolute;
  bottom: 0;
  left: 1px;
  width: 20px;
  height: 16px;
  background: linear-gradient(180deg, #3d2315 0%, #26150b 55%, #140a05 100%);
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: 2px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.8), inset 0 1px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 2px;
}

.b3d-base-wall-side {
  position: absolute;
  top: 4px;
  right: -5px;
  width: 5px;
  height: 15px;
  background: #170b05;
  border-radius: 0 2px 2px 0;
  transform: skewY(-25deg);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-left: none;
}

.b3d-light-win {
  display: block;
  width: 4px;
  height: 6px;
  background: #fde047;
  border-radius: 1px;
  box-shadow: 0 0 6px #f59e0b;
}

.tile-building-3d-hero {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-style: preserve-3d;
  margin-top: -10px;
  margin-bottom: 2px;
  position: relative;
  z-index: 15;
}

.b3d-model-token {
  width: 48px;
  height: 48px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(28px) rotateX(-20deg) scale(1.18);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 12px rgba(251, 191, 36, 0.6));
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease;
  pointer-events: none;
}

.ct-mono-tile:hover .b3d-model-token {
  transform: translateZ(48px) rotateX(-8deg) scale(1.5);
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 1)) drop-shadow(0 0 18px rgba(251, 191, 36, 0.85));
  z-index: 50;
}

.b3d-token-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid #fde047;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.9), 0 0 10px rgba(251, 191, 36, 0.7);
  background: radial-gradient(circle, #2d160a 0%, #110804 100%);
}

.b3d-upgrade-hotel-badge {
  position: absolute;
  top: -8px;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  font-family: Orbitron, sans-serif;
  font-size: 7px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #fef08a;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
  z-index: 25;
  white-space: nowrap;
  animation: pulse-hotel 1.5s infinite alternate;
}

@keyframes pulse-hotel {
  from {
    transform: scale(0.95);
    box-shadow: 0 0 6px #ef4444;
  }

  to {
    transform: scale(1.05);
    box-shadow: 0 0 12px #f87171;
  }
}

.b3d-upgrade-houses-badge {
  position: absolute;
  top: -6px;
  font-size: 10px;
  line-height: 1;
  z-index: 25;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.ct-mono-tile:hover .b3d-real-building {
  transform: translateZ(28px) rotateX(-8deg) scale(1.15);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.98));
}

.b3d-roof-sign {
  font-family: Orbitron, sans-serif;
  font-size: 7px;
  font-weight: 900;
  color: #fff;
  padding: 1.5px 5px;
  border-radius: 3px;
  background: rgba(15, 10, 5, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.5);
  letter-spacing: 0.6px;
  margin-bottom: -3px;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.b3d-facade-main {
  width: 46px;
  height: 30px;
  background: linear-gradient(180deg, #422919 0%, #24140a 100%);
  border: 2px solid rgba(251, 191, 36, 0.75);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8), inset 0 1.5px rgba(255, 255, 255, 0.3);
}

.neon-entrance {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 8px #f59e0b);
}

.win-row {
  display: flex;
  gap: 2.5px;
}

.w-gold,
.w-pink,
.w-cyan,
.w-blue {
  width: 5px;
  height: 11px;
  border-radius: 1.5px;
  display: inline-block;
}

.w-gold {
  background: #fde047;
  box-shadow: 0 0 6px #f59e0b;
}

.w-pink {
  background: #f472b6;
  box-shadow: 0 0 6px #ec4899;
}

.w-cyan {
  background: #38bdf8;
  box-shadow: 0 0 6px #0284c7;
}

.w-blue {
  background: #60a5fa;
  box-shadow: 0 0 6px #2563eb;
}

.b3d-casino-complex .b3d-facade-main {
  background: linear-gradient(180deg, #6b21a8 0%, #3b0764 100%);
  border-color: #d8b4fe;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.7), inset 0 1.5px #f3e8ff;
}

.b3d-casino-complex .b3d-roof-sign {
  background: linear-gradient(90deg, #9333ea, #c084fc);
  color: #fff;
  border: 1px solid #f3e8ff;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.8);
}

.b3d-arcade-complex .b3d-facade-main {
  background: linear-gradient(180deg, #9d174d 0%, #500724 100%);
  border-color: #f472b6;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.7);
}

.b3d-arcade-complex .b3d-roof-sign {
  background: linear-gradient(90deg, #db2777, #f472b6);
  color: #fff;
  box-shadow: 0 0 8px rgba(244, 114, 182, 0.8);
}

.b3d-cyber-complex .b3d-facade-main {
  background: linear-gradient(180deg, #155e75 0%, #083344 100%);
  border-color: #22d3ee;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.7);
}

.b3d-cyber-complex .b3d-roof-sign {
  background: linear-gradient(90deg, #0891b2, #06b6d4);
  color: #fff;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
}

.server-racks {
  display: flex;
  gap: 3px;
}

.rack {
  width: 6px;
  height: 18px;
  background: repeating-linear-gradient(180deg, #22d3ee 0, #22d3ee 3px, #083344 3px, #083344 5px);
  border-radius: 1.5px;
  box-shadow: 0 0 7px #06b6d4;
}

.b3d-tower-complex {
  height: 52px;
}

.b3d-tower-spire-needle {
  width: 4px;
  height: 14px;
  background: #f43f5e;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px #fda4af;
  margin-bottom: -1px;
}

.b3d-facade-tower {
  width: 34px;
  height: 38px;
  background: linear-gradient(180deg, #9f1239 0%, #4c0519 100%);
  border: 2px solid #fb7185;
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.win-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.b3d-palace-crown {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 8px #fde047);
  margin-bottom: -2px;
}

.b3d-facade-palace {
  width: 48px;
  height: 28px;
  background: linear-gradient(180deg, #854d0e 0%, #422006 100%);
  border: 2px solid #fde047;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 3px 5px;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.7);
}

.columns-row {
  display: flex;
  gap: 3px;
}

.columns-row span {
  width: 3.5px;
  height: 18px;
  background: #fef08a;
  border-radius: 1px;
  box-shadow: 0 0 4px #facc15;
}

.b3d-marina-complex .b3d-facade-main {
  background: linear-gradient(180deg, #0369a1 0%, #075985 100%);
  border-color: #7dd3fc;
  box-shadow: 0 0 16px rgba(2, 132, 199, 0.7);
}

.b3d-marina-complex .b3d-roof-sign {
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  color: #fff;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
}

.b3d-modern-villa {
  width: 46px;
  height: 32px;
}

.b3d-villa-roof {
  width: 46px;
  height: 8px;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.7), inset 0 1px rgba(255, 255, 255, 0.5);
}

.b3d-modern-villa .b3d-facade-main {
  width: 44px;
  height: 24px;
}

.b3d-facade .win {
  width: 4px;
  height: 9px;
  background: #fef08a;
  border-radius: 1px;
  box-shadow: 0 0 6px #fde047;
  display: block;
}

.b3d-facade.side {
  position: absolute;
  top: 4px;
  right: -5px;
  width: 5px;
  height: 18px;
  background: #7f1d1d;
  border-radius: 0 2px 2px 0;
  transform: skewY(-25deg);
}

.btn-upgrade-house {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.floating-reactions-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(24, 15, 10, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 160, 50, 0.3);
  border-radius: 999px;
  padding: 5px 8px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.15);
  z-index: 9999;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dock-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #facc15;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
  padding: 0;
}

.dock-collapse-btn:hover {
  background: rgba(250, 204, 21, 0.25);
  border-color: #facc15;
  transform: scale(1.12);
}

.reactions-dock-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  max-width: 600px;
  opacity: 1;
  transition: max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, transform 0.3s ease;
  transform-origin: right center;
}

/* ÉTAT REPLIÉ */
.floating-reactions-dock.is-collapsed {
  padding: 5px;
  background: rgba(24, 15, 10, 0.92);
  border-color: rgba(250, 204, 21, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 15px rgba(250, 204, 21, 0.3);
}

.floating-reactions-dock.is-collapsed .reactions-dock-inner {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0);
}

.floating-reactions-dock.is-collapsed .dock-collapse-btn {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(234, 179, 8, 0.5));
  border-color: #facc15;
  color: #fff;
  width: 34px;
  height: 34px;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
}

.floating-reactions-dock.is-collapsed #dock-collapse-icon {
  transform: rotate(180deg);
}

#dock-collapse-icon {
  transition: transform 0.3s ease;
  font-size: 1.05rem;
}

.reaction-trigger-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #fed7aa;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.reaction-trigger-btn:hover {
  background: rgba(245, 158, 11, 0.2);
  transform: translateY(-2px);
  color: #fff;
}

.reactions-floating-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.floating-reaction-bubble {
  position: absolute;
  bottom: 80px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(24, 15, 10, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: floatUpFade 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes floatUpFade {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.7);
  }

  15% {
    opacity: 1;
    transform: translateY(-20px) scale(1.05);
  }

  80% {
    opacity: 1;
    transform: translateY(-120px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-160px) scale(0.9);
  }
}

.nova-roulette-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  width: 100%;
}

.roulette-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.roulette-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  padding: 4px 14px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
}

.roulette-badge .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulse 1.5s infinite;
}

.roulette-main-title {
  font-family: Orbitron, sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  margin: 0;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.roulette-subtitle {
  color: #94a3b8;
  font-size: 0.88rem;
  margin: 0;
}

.roulette-subtitle .gold-text {
  color: #fbbf24;
  font-weight: 700;
}

.roulette-balance-bar {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 440px;
  justify-content: center;
}

.balance-item {
  flex: 1;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.balance-label {
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.balance-value {
  font-size: 1.15rem;
  font-weight: 900;
  color: #38bdf8;
  font-family: Orbitron, monospace;
}

.balance-value.bet {
  color: #f59e0b;
}

.balance-value small {
  font-size: 0.7rem;
  color: #94a3b8;
}

.roulette-wheel-wrapper {
  position: relative;
  width: 290px;
  height: 290px;
  display: grid;
  place-items: center;
  margin: 10px 0;
}

.roulette-indicator-top {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
}

.indicator-arrow {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 26px solid #facc15;
  filter: drop-shadow(0 4px 10px rgba(250, 204, 21, 0.8));
}

.roulette-wheel-outer-ring {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, #27272a, #09090b);
  border: 8px solid #b45309;
  box-shadow: 0 0 45px rgba(245, 158, 11, 0.35), inset 0 0 25px rgba(0, 0, 0, 0.9);
  padding: 6px;
  display: grid;
  place-items: center;
  position: relative;
}

.roulette-wheel-track {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.15);
  transform: rotate(0deg);
}

.wheel-slot-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-text {
  font-size: 0.68rem;
  font-weight: 900;
  font-family: Orbitron, sans-serif;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.slot-text.gold {
  color: #fde047;
  font-weight: 900;
}

.roulette-center-dome {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fde047 0%, #d97706 60%, #78350f 100%);
  border: 3px solid #fef08a;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.7);
  display: grid;
  place-items: center;
  z-index: 10;
}

.dome-gem {
  color: #451a03;
  font-size: 1.3rem;
  font-weight: 900;
}

.roulette-banner-result {
  width: 100%;
  max-width: 440px;
  border-radius: 14px;
  padding: 14px 18px;
  animation: modal-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.roulette-banner-result.win {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(6, 78, 59, 0.45));
  border: 1.5px solid #10b981;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.35);
}

.roulette-banner-result.lose {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(127, 29, 29, 0.45));
  border: 1.5px solid #ef4444;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.35);
}

.result-head {
  font-family: Orbitron, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.roulette-banner-result.win .result-head {
  color: #34d399;
}

.roulette-banner-result.lose .result-head {
  color: #f87171;
}

.result-body {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin: 4px 0;
}

.gold-tag {
  color: #fbbf24;
  font-weight: 800;
}

.red-tag {
  color: #f87171;
  font-weight: 800;
}

.black-tag {
  color: #e2e8f0;
  font-weight: 800;
}

.result-profit {
  font-family: Orbitron, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #facc15;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}

.result-loss {
  font-family: Orbitron, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fca5a5;
}

.roulette-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 480px;
}

.roulette-color-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.roulette-color-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(51, 65, 85, 0.8);
}

.roulette-color-btn.selected {
  transform: scale(1.04);
}

.roulette-color-btn.red-btn.selected {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.roulette-color-btn.black-btn.selected {
  border-color: #94a3b8;
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.35);
}

.roulette-color-btn.gold-btn.selected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.22);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
}

.color-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  flex-shrink: 0;
}

.color-badge.red {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

.color-badge.black {
  background: #18181b;
  box-shadow: 0 0 8px #000;
}

.color-badge.gold {
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
}

.btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.color-name {
  font-family: Orbitron, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
}

.color-mult {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
}

.roulette-color-btn.gold-btn .color-mult {
  color: #fbbf24;
}

.roulette-bet-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 480px;
}

.bet-presets {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.btn-preset {
  flex: 1;
  padding: 8px 6px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  border-radius: 10px;
  font-family: Orbitron, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-preset:hover:not(:disabled) {
  border-color: #f59e0b;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
}

.btn-preset.max-btn {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.btn-preset.max-btn:hover:not(:disabled) {
  background: #ef4444;
  color: #fff;
}

.bet-adjuster-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-adjust {
  width: 40px;
  height: 38px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-adjust:hover:not(:disabled) {
  border-color: #38bdf8;
  color: #38bdf8;
}

.current-bet-pill {
  padding: 8px 18px;
  border-radius: 99px;
  background: rgba(245, 158, 11, 0.15);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.88rem;
  color: #fef08a;
}

.current-bet-pill strong {
  font-family: Orbitron, monospace;
  font-weight: 900;
  color: #f59e0b;
}

.roulette-spin-cta {
  width: 100%;
  max-width: 440px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  border: none;
  color: #fff;
  font-family: Orbitron, sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(234, 88, 12, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  transition: all 0.25s ease;
}

.roulette-spin-cta:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(234, 88, 12, 0.6);
  filter: brightness(1.1);
}

.roulette-spin-cta:active:not(:disabled) {
  transform: translateY(1px);
}

.roulette-spin-cta:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.roulette-spin-cta.spinning {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  box-shadow: none;
}

.roulette-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 4px;
}

.history-chips {
  display: flex;
  gap: 6px;
}

.hist-chip {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 900;
  font-family: Orbitron, sans-serif;
  color: #fff;
}

.hist-chip.red {
  background: #ef4444;
  border: 1px solid #fca5a5;
}

.hist-chip.black {
  background: #18181b;
  border: 1px solid #52525b;
}

.hist-chip.gold {
  background: #f59e0b;
  border: 1px solid #fef08a;
  color: #451a03;
}

.empty-hist {
  color: #475569;
  font-style: italic;
}

.victory-modal-card {
  max-width: 580px;
  background: radial-gradient(circle at top, rgba(30, 27, 75, 0.95), rgba(10, 10, 22, 0.98));
  border: 1px solid rgba(250, 204, 21, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(234, 179, 8, 0.15);
  text-align: center;
}

.victory-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  margin: 28px 0 20px;
  height: 200px;
}

.podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 140px;
  animation: podiumSlotRise 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.podium-slot.rank-3 {
  animation-delay: 0.15s;
}

.podium-slot.rank-2 {
  animation-delay: 0.45s;
}

.podium-slot.rank-1 {
  animation-delay: 0.8s;
}

@keyframes podiumSlotRise {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.85);
  }

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

.podium-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid #64748b;
  overflow: hidden;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
}

.podium-slot.rank-1 .podium-avatar {
  width: 68px;
  height: 68px;
  border-color: #facc15;
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.5);
}

.podium-slot.rank-2 .podium-avatar {
  border-color: #cbd5e1;
}

.podium-slot.rank-3 .podium-avatar {
  border-color: #d97706;
}

.podium-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.podium-score {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 6px;
}

.podium-bar {
  width: 100%;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.9);
}

.podium-slot.rank-1 .podium-bar {
  height: 110px;
  background: linear-gradient(180deg, #eab308, #ca8a04);
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
}

.podium-slot.rank-2 .podium-bar {
  height: 80px;
  background: linear-gradient(180deg, #94a3b8, #64748b);
}

.podium-slot.rank-3 .podium-bar {
  height: 60px;
  background: linear-gradient(180deg, #b45309, #78350f);
}

.victory-rewards-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  gap: 12px;
}

.victory-reward-item strong {
  display: block;
  font-size: 1.15rem;
  color: #facc15;
}

.victory-reward-item span {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.victory-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.turn-timer-dock {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.turn-timer-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
}

.turn-timer-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

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

.crow-card.special-card {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.2);
  transform: scale(1.03);
  animation: pulseCard 1.8s infinite ease-in-out;
}

@keyframes pulseCard {

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

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

body.modal-open {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}

.modal {
  background: rgba(4, 3, 8, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  overscroll-behavior: contain !important;
  overflow: hidden !important;
}

.modal-card {
  max-height: calc(100vh - 40px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 191, 36, 0.4) rgba(15, 10, 7, 0.85);
}

.crow-game {
  background: radial-gradient(circle at center, #1e1338 0%, #0d091a 70%, #07050e 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 50px rgba(168, 85, 247, 0.15) !important;
  position: relative;
  overflow: hidden;
}

.crow-table {
  background: radial-gradient(ellipse at center, rgba(147, 51, 234, 0.22) 0%, rgba(10, 8, 20, 0.6) 70%) !important;
  border: 2px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 28px !important;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  padding: 36px 20px !important;
}

.crow-draw {
  position: relative;
  box-shadow: 0 4px 0 #181028, 0 8px 0 #120b20, 0 12px 0 #0c0716, 0 16px 25px rgba(0, 0, 0, 0.7) !important;
  background: linear-gradient(135deg, #311c5e, #180d33) !important;
  border: 2px solid #a855f7 !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.crow-draw:hover:not(:disabled) {
  transform: translateY(-6px) scale(1.06) !important;
  box-shadow: 0 6px 0 #181028, 0 12px 0 #120b20, 0 16px 0 #0c0716, 0 20px 35px rgba(168, 85, 247, 0.4) !important;
}

.crow-card {
  width: 82px !important;
  height: 124px !important;
  border-radius: 16px !important;
  border: 3px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
}

.crow-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 104px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  z-index: 1;
}

.crow-card b {
  position: relative;
  z-index: 3;
  color: #fff;
  font-family: Orbitron, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  padding: 4px;
}

.crow-card span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  z-index: 3;
  font-family: Orbitron, sans-serif;
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.crow-card.red {
  background: radial-gradient(circle, #ef4444 0%, #b91c1c 100%) !important;
}

.crow-card.red span {
  color: #dc2626 !important;
}

.crow-card.blue {
  background: radial-gradient(circle, #3b82f6 0%, #1d4ed8 100%) !important;
}

.crow-card.blue span {
  color: #2563eb !important;
}

.crow-card.yellow {
  background: radial-gradient(circle, #facc15 0%, #ca8a04 100%) !important;
}

.crow-card.yellow span {
  color: #d97706 !important;
}

.crow-card.green {
  background: radial-gradient(circle, #10b981 0%, #047857 100%) !important;
}

.crow-card.green span {
  color: #059669 !important;
}

.crow-card.wild {
  background: conic-gradient(#ef4444, #3b82f6, #facc15, #10b981, #ef4444) !important;
}

.crow-card.wild::before {
  background: #111 !important;
}

.crow-card.wild span {
  color: #facc15 !important;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.8) !important;
}

.crow-hand {
  perspective: 1000px;
  gap: -15px !important;
}

.crow-hand.human .crow-card {
  margin: 0 -8px;
  transform-origin: bottom center;
}

.crow-hand.human .crow-card:hover {
  transform: translateY(-26px) scale(1.18) !important;
  z-index: 50 !important;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.4) !important;
}

.dealing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 5, 14, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

.dealing-title {
  font-family: Orbitron, sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  color: #facc15;
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.6);
  margin-bottom: 24px;
}

.flying-card {
  position: absolute;
  width: 70px;
  height: 105px;
  background: linear-gradient(135deg, #a855f7, #6b21a8);
  border: 2px solid #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
  z-index: 102;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
}

.remove-player {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #ef4444;
  font-weight: 800;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.remove-player:hover {
  background: #ef4444;
  color: #fff;
  transform: scale(1.1);
}

.lobby-rules-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(250, 204, 21, 0.25);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 16px 0;
  text-align: left;
}

.lobby-rules-title {
  font-family: Orbitron, sans-serif;
  font-size: 1rem;
  color: #facc15;
  font-weight: 800;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lobby-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.rule-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rule-toggle-item span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e2e8f0;
}

.rule-toggle-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #facc15;
  cursor: pointer;
}

.btn-rules-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(217, 119, 6, 0.1));
  border: 1px solid rgba(250, 204, 21, 0.4);
  color: #fde047;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-rules-trigger:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(217, 119, 6, 0.25));
  border-color: #facc15;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(234, 179, 8, 0.3);
}

.rules-modal-card {
  max-width: 580px;
  background: radial-gradient(circle at top, rgba(35, 20, 10, 0.98), rgba(14, 10, 8, 0.99)) !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(245, 158, 11, 0.15) !important;
  text-align: left !important;
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0 26px;
}

.rule-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 20px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.rule-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(250, 204, 21, 0.3);
  transform: translateX(3px);
}

.rule-card.active {
  border-color: rgba(250, 204, 21, 0.6);
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.08), rgba(0, 0, 0, 0.4));
}

.rule-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rule-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rule-icon {
  font-size: 1.25rem;
}

.rule-name {
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
}

.rule-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.4;
}

.switch-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #27272a;
  border-radius: 999px;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #71717a;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.switch-toggle input:checked+.switch-slider {
  background: linear-gradient(135deg, #facc15, #ea580c);
  border-color: #facc15;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.4);
}

.switch-toggle input:checked+.switch-slider:before {
  transform: translateX(24px);
  background-color: #ffffff;
}

.remove-bot,
.remove-player {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.remove-bot:hover,
.remove-player:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
  transform: scale(1.15) !important;
}

#rules-modal {
  z-index: 999999 !important;
}

#rules-modal {
  z-index: 999999 !important;
}

.game-stage-card:has(.city-monopoly-arena) {
  background: url('/assets/city-board-realistic-3d.jpg') center center / cover no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.mono-board-3d {
  width: min(960px, 91vh, 98vw) !important;
  height: min(960px, 91vh, 98vw) !important;
  container-type: inline-size;
  grid-template-columns: minmax(0, 1.3fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.3fr) !important;
  grid-template-rows: minmax(0, 1.45fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.3fr) !important;
  gap: 3px !important;
  padding: 4px !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(45, 26, 16, 0.88) 0%, rgba(20, 10, 5, 0.95) 55%, rgba(10, 5, 2, 0.98) 100%),
    url('/assets/city-board-realistic-3d.jpg') center center / cover no-repeat !important;
  border: 3.5px solid #facc15 !important;
  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.95),
    0 0 50px rgba(250, 204, 21, 0.35),
    inset 0 0 40px rgba(0, 0, 0, 0.9) !important;
  transform: rotateX(4deg) scale(0.98) translateY(-4px) !important;
  transform-origin: 50% 50% !important;
}

@media (max-width: 600px),
(max-height: 650px) {
  .mono-3d-wrapper {
    perspective: 800px !important;
  }

  .mono-board-3d {
    width: min(98vw, 86vh) !important;
    height: min(98vw, 86vh) !important;
    transform: rotateX(2deg) scale(0.99) translateY(-2px) !important;
  }
}

.ct-mono-tile {
  box-sizing: border-box !important;
  border-radius: 8px !important;
  padding: 3px 2px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(155deg, #2b180d 0%, #1c0e07 60%, #110703 100%) !important;
}

.ct-mono-tile.tile-pos-top {
  padding: 4px 3px !important;
}

.ct-mono-tile.tile-pos-top .tile-content {
  gap: 2px !important;
  padding: 3px 2px !important;
}

.ct-mono-tile.tile-pos-top .tile-name {
  font-size: clamp(0.68rem, 1.55cqi, 1.05rem) !important;
  font-weight: 900 !important;
}

.ct-mono-tile.tile-pos-top .tile-cost {
  font-size: clamp(0.56rem, 1.25cqi, 0.88rem) !important;
}

.ct-mono-tile.tile-pos-top .tile-icon-badge {
  width: clamp(26px, 4.8cqi, 38px) !important;
  height: clamp(26px, 4.8cqi, 38px) !important;
}

.ct-mono-tile.tile-pos-top .custom-tile-svg {
  width: clamp(18px, 3.5cqi, 27px) !important;
  height: clamp(18px, 3.5cqi, 27px) !important;
}

.ct-mono-tile .tile-color-bar {
  height: clamp(6px, 1.4cqi, 9px) !important;
}

.ct-mono-tile .tile-content {
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 2px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 1px !important;
}

.ct-mono-tile .tile-name {
  font-size: clamp(0.60rem, 1.38cqi, 0.98rem) !important;
  font-weight: 800 !important;
  color: #fffaf0 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 98% !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.ct-mono-tile .tile-cost {
  font-size: clamp(0.52rem, 1.18cqi, 0.84rem) !important;
  color: #fde68a !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ct-mono-tile .tile-owner {
  font-size: clamp(0.54rem, 1.18cqi, 0.80rem) !important;
  color: #38bdf8 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 96% !important;
  background: rgba(14, 165, 233, 0.22) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.2px !important;
}

.ct-mono-tile .tile-icon-badge {
  width: clamp(24px, 4.5cqi, 36px) !important;
  height: clamp(24px, 4.5cqi, 36px) !important;
  border-radius: 7px !important;
  padding: 2px !important;
  transform: translateZ(5px) !important;
}

.ct-mono-tile .custom-tile-svg {
  width: clamp(17px, 3.3cqi, 25px) !important;
  height: clamp(17px, 3.3cqi, 25px) !important;
}

.ct-mono-tile .ct-pawn {
  width: clamp(20px, 3.8cqi, 28px) !important;
  height: clamp(20px, 3.8cqi, 28px) !important;
  font-size: clamp(10px, 1.5cqi, 14px) !important;
}

.b3d-upgrade-hotel-badge {
  font-size: clamp(8px, 1.1cqi, 11px) !important;
  padding: 1px 5px !important;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

.b3d-upgrade-houses-badge {
  font-size: clamp(8px, 1.1cqi, 12px) !important;
  line-height: 1 !important;
}

.mono-center-hub {
  grid-row: 2 / 9 !important;
  grid-column: 2 / 9 !important;
  background:
    radial-gradient(circle at center, rgba(35, 18, 10, 0.65) 0%, rgba(18, 9, 4, 0.88) 70%, rgba(10, 5, 2, 0.96) 100%),
    url('/assets/city-board-realistic-3d.jpg') center center / cover no-repeat !important;
}

@media (max-width: 992px) {
  .app-container {
    padding: 16px 16px 60px !important;
  }

  .navbar {
    padding: 10px 18px !important;
    gap: 10px;
    flex-wrap: wrap;
  }

  .navbar-actions {
    gap: 6px !important;
  }

  .hero-card {
    padding: 28px 24px !important;
    min-height: auto !important;
  }

  .hero-card h1 {
    font-size: 24px !important;
  }

  .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 16px !important;
  }

  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .navbar {
    border-radius: 18px !important;
    padding: 8px 12px !important;
    flex-direction: row;
    justify-content: space-between;
  }

  .brand-subtitle {
    display: none !important;
  }

  .voice-status {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  .navbar-actions .btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  .navbar-actions .btn .lb-label {
    display: none !important;
  }

  .navbar-actions {
    display: flex;
    gap: 4px !important;
  }

  .user-badge {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

  .user-badge .username {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .category-nav {
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .category-nav::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    padding: 6px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  .games-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .game-card {
    border-radius: 12px !important;
  }

  .game-thumb {
    height: 140px !important;
  }

  .modal-card {
    width: 96% !important;
    max-width: 96% !important;
    max-height: 92vh !important;
    padding: 16px !important;
    border-radius: 16px !important;
    margin: auto !important;
  }

  .profile-modal-card {
    width: 96% !important;
    max-width: 96% !important;
  }

  .discord-profile-banner {
    height: 90px !important;
  }

  .discord-avatar-container {
    width: 72px !important;
    height: 72px !important;
    margin-top: -36px !important;
  }

  .discord-avatar-large {
    width: 72px !important;
    height: 72px !important;
  }

  .discord-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .profile-equipped-box {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .discord-profile-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .shop-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .shop-card {
    padding: 12px !important;
  }

  .shop-card-icon {
    font-size: 28px !important;
  }

  .shop-currency-bar {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center;
  }

  .quest-item {
    padding: 12px !important;
    gap: 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .game-arena-overlay {
    padding: 6px 8px !important;
  }

  .arena-header {
    padding: 6px 12px !important;
    margin-bottom: 6px !important;
  }

  .arena-title {
    font-size: 13.5px !important;
  }

  .arena-title svg {
    width: 18px !important;
    height: 18px !important;
  }

  .game-stage-card {
    padding: 6px !important;
    border-radius: 12px !important;
  }

  .crow-game {
    padding: 14px 10px !important;
    gap: 12px !important;
    border-radius: 16px !important;
  }

  .crow-head h3 {
    font-size: 1.2rem !important;
  }

  .crow-hand {
    gap: 4px !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
  }

  .crow-card {
    min-width: 52px !important;
    width: 58px !important;
    height: 84px !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
  }

  .mono-3d-wrapper {
    perspective: 1200px !important;
  }

  .mono-board-3d {
    width: min(98vw, 88vh, 680px) !important;
    height: min(98vw, 88vh, 680px) !important;
    transform: rotateX(2deg) scale(0.99) translateY(-2px) !important;
    padding: 3px !important;
    gap: 2px !important;
    border-width: 2.5px !important;
  }

  .ct-mono-tile {
    border-radius: 6px !important;
  }

  .ct-mono-tile .tile-icon-badge {
    width: clamp(14px, 3.2vw, 20px) !important;
    height: clamp(14px, 3.2vw, 20px) !important;
    padding: 0px !important;
  }

  .ct-mono-tile .custom-tile-svg {
    width: clamp(11px, 2.4vw, 15px) !important;
    height: clamp(11px, 2.4vw, 15px) !important;
  }

  .ct-mono-tile .tile-name {
    font-size: clamp(0.58rem, 2.1vw, 0.78rem) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 3px #000, 0 0 4px #000 !important;
    color: #ffffff !important;
  }

  .ct-mono-tile .tile-cost {
    font-size: clamp(0.48rem, 1.7vw, 0.65rem) !important;
    font-weight: 800 !important;
    color: #fef08a !important;
  }

  .ct-mono-tile .tile-owner {
    font-size: clamp(0.45rem, 1.5vw, 0.60rem) !important;
    padding: 0 3px !important;
  }

  .ct-mono-tile .ct-pawn {
    width: clamp(15px, 3.2vw, 20px) !important;
    height: clamp(15px, 3.2vw, 20px) !important;
    font-size: 8px !important;
  }

  .ct-center-stats {
    gap: 3px !important;
    flex-wrap: wrap !important;
  }

  .ct-player {
    padding: 2px 6px !important;
    font-size: 11px !important;
  }

  .ct-center-dice {
    font-size: 20px !important;
    padding: 4px 10px !important;
  }

  .ct-turn-banner {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
  }

  .ct-buy-banner {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  .ct-buy-banner .buy-btns {
    flex-wrap: wrap;
    gap: 4px !important;
  }

  .ct-buy-banner .btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  .ct-dice-pair {
    transform: scale(0.85);
  }
}

@media (max-width: 600px) {
  .app-container {
    padding: 8px 8px 45px !important;
  }

  .navbar {
    padding: 6px 10px !important;
    gap: 6px !important;
  }

  .brand-title {
    font-size: 15px !important;
  }

  .hero-card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }

  .hero-card h1 {
    font-size: 19px !important;
  }

  .hero-subtitle {
    font-size: 12px !important;
  }

  .stats-strip {
    gap: 8px !important;
  }

  .stat-card {
    padding: 8px 12px !important;
  }

  .stat-value {
    font-size: 16px !important;
  }

  .games-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .game-thumb {
    height: 125px !important;
  }


  .game-arena-overlay {
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .arena-card {
    border-radius: 0 !important;
    border: none !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  .arena-header {
    padding: 6px 10px !important;
    border-radius: 0 !important;
  }

  .arena-title {
    font-size: 12.5px !important;
  }

  .arena-badge-live {
    padding: 2px 7px !important;
    font-size: 10px !important;
  }

  .game-stage-card {
    border-radius: 0 !important;
    padding: 4px !important;
    overflow-y: auto !important;
  }


  .mono-3d-wrapper {
    perspective: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mono-board-3d {
    width: min(99vw, 99dvw, 480px) !important;
    height: min(87vh, 87dvh, 760px) !important;
    max-width: 100vw !important;
    max-height: 90vh !important;
    transform: none !important;
    padding: 3px !important;
    gap: 2px !important;
    grid-template-columns: minmax(0, 1.45fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.45fr) !important;
    grid-template-rows: minmax(0, 1.65fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.65fr) !important;
  }

  .ct-mono-tile {
    padding: 2px 1px !important;
    border-radius: 6px !important;
  }

  .ct-mono-tile .tile-content {
    padding: 1px !important;
    gap: 1px !important;
    justify-content: space-around !important;
  }

  .ct-mono-tile .tile-icon-badge {
    display: inline-flex !important;
    width: clamp(14px, 3.4vw, 18px) !important;
    height: clamp(14px, 3.4vw, 18px) !important;
    border-radius: 5px !important;
    padding: 0 !important;
    margin-bottom: 1px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  }

  .ct-mono-tile .custom-tile-svg {
    width: clamp(10px, 2.5vw, 14px) !important;
    height: clamp(10px, 2.5vw, 14px) !important;
    display: block !important;
  }

  .ct-mono-tile.tile-pos-top .tile-desc-val,
  .ct-mono-tile.tile-pos-bottom .tile-desc-val,
  .ct-mono-tile.corner .tile-desc-val {
    display: none !important;
  }

  .ct-mono-tile.tile-pos-top .tile-name,
  .ct-mono-tile.tile-pos-bottom .tile-name {
    font-size: clamp(0.46rem, 1.65vw, 0.60rem) !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    hyphens: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  .ct-mono-tile.tile-pos-top .tile-name .name-short,
  .ct-mono-tile.tile-pos-bottom .tile-name .name-short {
    display: inline !important;
  }

  .ct-mono-tile.tile-pos-top .tile-name .name-full,
  .ct-mono-tile.tile-pos-bottom .tile-name .name-full {
    display: none !important;
  }

  .ct-mono-tile.tile-pos-top .tile-cost,
  .ct-mono-tile.tile-pos-bottom .tile-cost {
    font-size: clamp(0.48rem, 1.5vw, 0.60rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .ct-mono-tile.tile-pos-bottom {
    padding-bottom: 2px !important;
  }

  .ct-mono-tile.tile-pos-bottom .tile-pawns {
    bottom: 0 !important;
  }

  .ct-mono-tile.tile-pos-left,
  .ct-mono-tile.tile-pos-right {
    padding: 1px 2px !important;
  }

  .ct-mono-tile.tile-pos-left .tile-content,
  .ct-mono-tile.tile-pos-right .tile-content {
    padding: 1px !important;
    gap: 1px !important;
  }

  .ct-mono-tile.tile-pos-left .tile-name,
  .ct-mono-tile.tile-pos-right .tile-name {
    font-size: clamp(0.52rem, 1.9vw, 0.68rem) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .ct-mono-tile.tile-pos-left .tile-cost,
  .ct-mono-tile.tile-pos-right .tile-cost {
    font-size: clamp(0.46rem, 1.5vw, 0.58rem) !important;
    line-height: 1 !important;
  }

  .ct-mono-tile.corner .tile-name {
    font-size: clamp(0.52rem, 1.8vw, 0.65rem) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .ct-mono-tile .tile-name {
    font-size: clamp(0.54rem, 1.9vw, 0.70rem) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.1px !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .ct-mono-tile .tile-cost {
    font-size: clamp(0.50rem, 1.6vw, 0.62rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #fef08a !important;
    white-space: nowrap !important;
  }

  .ct-mono-tile .tile-rent-val {
    display: none !important;
  }

  .ct-mono-tile .tile-desc-val {
    font-size: clamp(0.42rem, 1.3vw, 0.52rem) !important;
    line-height: 1 !important;
  }

  .mono-center-hub {
    gap: 4px !important;
    padding: 6px 4px 4px !important;
    background:
      radial-gradient(circle at center, rgba(35, 18, 10, 0.55) 0%, rgba(18, 9, 4, 0.88) 70%, rgba(10, 5, 2, 0.96) 100%),
      url('/assets/city-board-realistic-3d.jpg') center center / cover no-repeat !important;
  }

  .mono-logo-badge {
    font-size: 0.72rem !important;
    padding: 2px 8px !important;
    letter-spacing: 0.1em !important;
  }

  .mono-hub-top-bar {
    gap: 4px !important;
    justify-content: center !important;
  }

  .mono-hub-action-btns {
    gap: 3px !important;
  }

  .mono-hub-action-btns .btn-hub-pill {
    padding: 2px 6px !important;
    font-size: 0.62rem !important;
    border-radius: 6px !important;
  }

  .ct-player {
    padding: 2px 7px !important;
    font-size: 9.5px !important;
    border-width: 1px !important;
  }

  .ct-player b {
    font-size: 10px !important;
    margin-left: 3px !important;
  }

  .ct-dice-cube-real {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  .dice-pip-grid {
    grid-template-columns: repeat(3, 8px) !important;
    grid-template-rows: repeat(3, 8px) !important;
    gap: 2px !important;
  }

  .dice-pip {
    width: 6.5px !important;
    height: 6.5px !important;
  }

  .ct-dice-pair {
    transform: scale(0.95) !important;
  }

  .btn-roll-3d {
    padding: 6px 16px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
  }

  .mono-action-dock {
    margin-top: -2px !important;
  }

  .mono-feed-center {
    font-size: 0.62rem !important;
    padding: 1px 6px !important;
    max-width: 95% !important;
  }

  /* === NOVA CARDS (UNO) MOBILE FULL RESPONSIVE === */
  .crow-game.uno-round-table-mode {
    padding: 6px 4px 16px !important;
    gap: 6px !important;
    overflow-x: hidden !important;
  }

  .uno-round-table-mode .turn-timer-dock {
    margin-bottom: 2px !important;
    padding: 4px 8px !important;
  }

  .uno-round-table-mode .turn-timer-header {
    font-size: 0.72rem !important;
  }

  .uno-round-table-mode .crow-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    margin-bottom: 2px !important;
  }

  .uno-round-table-mode .crow-head h3 {
    font-size: 0.92rem !important;
    margin: 1px 0 !important;
  }

  .uno-round-table-mode .crow-head p,
  .uno-round-table-mode .crow-head .badge-tag {
    display: none !important;
  }

  .uno-round-table-mode .crow-head-right {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  .uno-round-table-mode .cards-host-pill {
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
  }

  .uno-round-table-mode .crow-turn {
    font-size: 0.70rem !important;
    padding: 2px 8px !important;
  }

  .uno-round-table-mode .crow-head-right .btn {
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
  }

  .uno-round-table-mode .uno-round-table {
    min-height: 220px !important;
    max-height: 260px !important;
    margin: 4px 0 6px !important;
  }

  .uno-round-table-mode .table-felt {
    min-height: 190px !important;
    max-height: 230px !important;
    padding: 8px !important;
    border-radius: 60px / 45px !important;
    border-width: 2.5px !important;
  }

  .uno-round-table-mode .table-center-board {
    padding: 6px 14px !important;
    gap: 12px !important;
    border-radius: 20px !important;
  }

  .uno-round-table-mode .crow-draw,
  .uno-round-table-mode .crow-discard .crow-card {
    width: 52px !important;
    height: 78px !important;
    border-radius: 7px !important;
  }

  .uno-round-table-mode .crow-draw span {
    font-size: 16px !important;
  }

  .uno-round-table-mode .crow-draw small {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }

  .uno-round-table-mode .table-seat {
    transition: transform 0.2s ease !important;
  }

  .uno-round-table-mode .table-seat.seat-top {
    top: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-left {
    top: 50% !important;
    left: 8px !important;
    transform: translateY(-50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-right {
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-top-left {
    top: 14px !important;
    left: 22% !important;
    transform: translateX(-50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-top-right {
    top: 14px !important;
    right: 22% !important;
    transform: translateX(50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-bottom-left {
    bottom: 12px !important;
    left: 8px !important;
  }

  .uno-round-table-mode .table-seat.seat-bottom-right {
    bottom: 12px !important;
    right: 8px !important;
  }

  .uno-round-table-mode .seat-player-badge {
    padding: 3px 8px 3px 4px !important;
    gap: 5px !important;
    background: rgba(20, 10, 36, 0.92) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important;
  }

  .uno-round-table-mode .btn-seat-kick-bot {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    margin-left: 2px !important;
  }

  .uno-round-table-mode .seat-avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  .uno-round-table-mode .seat-name {
    font-size: 0.68rem !important;
    max-width: 60px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .uno-round-table-mode .seat-count {
    font-size: 0.62rem !important;
  }

  .uno-round-table-mode .seat-hand-fan {
    height: 26px !important;
    margin-top: 2px !important;
  }

  .uno-round-table-mode .opponent-back-card {
    width: 16px !important;
    height: 24px !important;
    border-radius: 3px !important;
  }

  .uno-round-table-mode .crow-status {
    font-size: 0.70rem !important;
    padding: 3px 8px !important;
    margin: 2px auto !important;
    max-width: 95% !important;
  }

  .uno-round-table-mode .my-player-station {
    margin-top: 4px !important;
    padding: 8px 6px 12px !important;
    border-radius: 14px !important;
    min-height: auto !important;
  }

  .uno-round-table-mode .station-header {
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }

  .uno-round-table-mode .station-user-info {
    gap: 6px !important;
    font-size: 0.78rem !important;
  }

  .uno-round-table-mode .station-badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }

  .uno-round-table-mode .uno-actions-dock {
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  .uno-round-table-mode .btn-uno-blast {
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
  }

  .uno-round-table-mode .uno-spectator-reactions {
    padding: 2px 6px !important;
    gap: 4px !important;
  }

  .uno-round-table-mode .uno-spectator-reactions span {
    display: none !important;
  }

  .uno-round-table-mode .uno-spectator-reactions .btn-cards-react {
    padding: 2px 5px !important;
    font-size: 0.75rem !important;
  }

  .uno-round-table-mode #quick-taunt-select {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    max-width: 105px !important;
    background: #180d28 !important;
    color: #fef08a !important;
    border: 1.5px solid rgba(251, 191, 36, 0.6) !important;
  }

  .uno-round-table-mode .crow-hand {
    min-height: 110px !important;
    padding: 6px 4px 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
  }

  .uno-round-table-mode .hand-card-slot {
    margin: 0 -10px !important;
  }

  .uno-round-table-mode .hand-card-slot .crow-card {
    width: 58px !important;
    height: 86px !important;
    border-radius: 8px !important;
    font-size: 1.1rem !important;
  }
}

@media (max-width: 480px) {
  .app-container {
    padding: 6px 6px 40px !important;
  }

  .voice-status strong {
    max-width: 80px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  .shop-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    text-align: center;
    width: 100% !important;
  }

  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 14px 12px !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .arena-header {
    padding: 3px 8px !important;
    margin-bottom: 2px !important;
  }

  .mono-board-3d {
    width: min(84vh, 84dvh, 90vw) !important;
    height: min(84vh, 84dvh, 90vw) !important;
    transform: rotateX(6deg) scale(0.94) translateY(-2px) !important;
  }

  .game-stage-card {
    padding: 2px !important;
  }

  .ct-dice-cube-real {
    width: 48px !important;
    height: 48px !important;
  }
}

.oauth-blocker-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 10, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 20px;
}

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

.oauth-blocker-card {
  width: min(460px, 100%);
  background: linear-gradient(160deg, #1e131d 0%, #120b13 60%, #0d070e 100%);
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 50px rgba(239, 68, 68, 0.25);
  border-radius: 24px;
  padding: 32px 28px;
  text-align: center;
  animation: modal-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.oauth-blocker-icon {
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.3);
}

.oauth-blocker-card h2 {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.oauth-blocker-card p {
  color: #fca5a5;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 22px;
}

.oauth-blocker-reasons {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.oauth-reason-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #fed7aa;
}

.reason-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-oauth-retry {
  width: 100%;
  padding: 14px 20px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.45) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-oauth-retry:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(234, 88, 12, 0.6) !important;
}

.ct-pcash.ct-pcash-negative {
  color: #ff334b !important;
  text-shadow: 0 0 12px rgba(255, 51, 75, 0.7) !important;
  animation: debtBlink 1.4s ease-in-out infinite alternate !important;
}

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

  100% {
    transform: scale(1.08);
    opacity: 0.8;
    filter: drop-shadow(0 0 6px #ef4444);
  }
}

.ct-player.player-cooked {
  border-color: rgba(239, 68, 68, 0.8) !important;
  background: rgba(239, 68, 68, 0.15) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4) !important;
}

.ct-debt-warning-pill {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.95));
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
  animation: pulseCooked 1.2s infinite;
  text-align: center;
}

@keyframes pulseCooked {

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

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

.ct-crisis-container {
  margin: 6px auto;
  max-width: 380px;
  width: 95%;
  background: linear-gradient(135deg, rgba(35, 10, 10, 0.95), rgba(55, 14, 14, 0.92));
  border: 1.5px solid rgba(239, 68, 68, 0.7);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
  backdrop-filter: blur(12px);
  z-index: 20;
}

.ct-crisis-header {
  margin-bottom: 6px;
  text-align: center;
}

.ct-crisis-header strong {
  color: #fca5a5;
  font-size: 0.82rem;
  display: block;
  margin-bottom: 2px;
}

.ct-crisis-header p {
  color: #cbd5e1;
  font-size: 0.72rem;
  margin: 0;
}

.ct-crisis-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 100px;
  overflow-y: auto;
  padding-right: 4px;
}

.ct-crisis-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.76rem;
}

.crisis-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.crisis-item-name {
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.78rem;
}

.crisis-item-badge {
  color: #facc15;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(250, 204, 21, 0.15);
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: 4px;
  padding: 1px 6px;
}

.crisis-item-actions {
  display: flex;
  gap: 5px;
  width: 100%;
}

.crisis-item-actions .btn {
  flex: 1;
  padding: 3px 6px !important;
  font-size: 0.68rem !important;
  font-weight: 700;
  border-radius: 5px;
  white-space: nowrap;
  text-align: center;
}

.crisis-item-actions .btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #1e1b4b !important;
  border: none !important;
}

.crisis-item-actions .btn-danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  border: none !important;
}

.ct-crisis-footer {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #94a3b8;
  font-size: 0.72rem;
}

.ct-no-props {
  text-align: center;
  color: #fca5a5;
  font-size: 0.76rem;
  padding: 4px;
}

.ct-buyout-banner {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.9), rgba(15, 23, 42, 0.95)) !important;
  border: 1px solid rgba(34, 211, 238, 0.6) !important;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.4) !important;
}

.btn-buyout-exec {
  background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.mono-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-filter-props {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #fde047;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 5px 12px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-filter-props:hover {
  background: rgba(255, 215, 0, 0.18);
  border-color: #fde047;
  transform: translateY(-1px);
}

.btn-filter-props.active {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  color: #0f172a;
  border-color: #fef08a;
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.6);
}

.mono-board-3d.filter-mode .ct-mono-tile.filter-dimmed {
  opacity: 0.22;
  filter: grayscale(0.85) brightness(0.65);
  transform: scale(0.96);
  transition: all 0.3s ease;
}

.mono-board-3d.filter-mode .ct-mono-tile.filter-mine-active {
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1.04) translateZ(15px);
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.8), 0 0 45px rgba(245, 158, 11, 0.5) !important;
  border: 2px solid #facc15 !important;
  z-index: 10;
  animation: pulseMyApartments 1.6s ease-in-out infinite alternate;
}

@keyframes pulseMyApartments {
  0% {
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.6);
  }

  100% {
    box-shadow: 0 0 30px rgba(250, 204, 21, 1), 0 0 50px rgba(245, 158, 11, 0.7);
  }
}

.ct-mono-tile.is-my-property .tile-owner {
  background: rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.5);
  font-weight: 700;
}

@keyframes warmFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes warmGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 140, 40, .35);
  }

  50% {
    box-shadow: 0 0 22px 4px rgba(255, 140, 40, .25);
  }
}

@keyframes warmShine {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@keyframes emberFloat {

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

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

/* ==========================================================================
   NOVA ACTIVITIES HUB — LUXURY PRIVATE BANKING THEME (OVERRIDE BLOCK)
   ========================================================================== */
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(214, 184, 120, 0.08), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(27, 41, 64, 0.6), transparent 60%),
    linear-gradient(160deg, #0B1220 0%, #131F32 50%, #0B1220 100%) fixed !important;
  color: #F3F0E8 !important;
}

.squad-lobby {
  position: relative;
  background: linear-gradient(155deg, rgba(27, 41, 64, 0.88), rgba(19, 31, 50, 0.95)) !important;
  border: 1px solid rgba(214, 184, 120, 0.28) !important;
  border-radius: 24px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(214, 184, 120, 0.15) !important;
  backdrop-filter: blur(18px) saturate(140%);
  animation: warmFadeUp .5s ease both;
  overflow: hidden;
}

.squad-lobby::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D6B878, #E9D39B, #D6B878, transparent) !important;
  background-size: 200% 100%;
  animation: warmShine 6s linear infinite;
}

.squad-lobby h2 {
  background: linear-gradient(180deg, #FFFFFF 20%, #D6B878 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 4px 30px rgba(214, 184, 120, 0.25) !important;
  letter-spacing: .04em;
}

.lobby-kicker {
  color: #D6B878 !important;
  letter-spacing: .3em;
  text-shadow: 0 0 12px rgba(214, 184, 120, 0.4) !important;
}

.lobby-copy,
.lobby-hint {
  color: #A7B2C4 !important;
}

.lobby-summary span {
  background: rgba(27, 41, 64, 0.6) !important;
  border: 1px solid rgba(214, 184, 120, 0.25) !important;
  color: #F3F0E8 !important;
  border-radius: 999px;
  transition: transform .2s, border-color .2s;
}

.lobby-summary span:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 184, 120, 0.6) !important;
}

.squad-slot {
  background: linear-gradient(160deg, rgba(27, 41, 64, 0.75), rgba(19, 31, 50, 0.9)) !important;
  border: 1px solid rgba(214, 184, 120, 0.22) !important;
  border-radius: 18px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
  animation: warmFadeUp .45s ease both;
}

.squad-slot:not(.empty):hover {
  transform: translateY(-4px);
  border-color: rgba(214, 184, 120, 0.5) !important;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6) !important;
}

.squad-slot.empty {
  background: rgba(19, 31, 50, 0.45) !important;
  border: 1.5px dashed rgba(214, 184, 120, 0.2) !important;
  color: #7E8B9F !important;
}

.squad-slot.empty:hover {
  background: rgba(27, 41, 64, 0.35) !important;
  border-color: rgba(214, 184, 120, 0.45) !important;
  color: #F3F0E8 !important;
  transform: translateY(-2px);
}

.squad-slot.empty .empty-plus {
  font-size: 1.4rem;
  color: #D6B878 !important;
  transition: transform .3s;
}

.squad-slot.empty:hover .empty-plus {
  transform: rotate(90deg) scale(1.2);
}

.squad-avatar {
  background: linear-gradient(135deg, #1B2940, #131F32) !important;
  border: 1px solid rgba(214, 184, 120, 0.4) !important;
  border-radius: 14px;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5) !important;
}

.squad-name {
  color: #F3F0E8 !important;
}

.squad-role {
  color: #D6B878 !important;
}

.lobby-actions .btn,
.btn-rules-trigger {
  border-radius: 14px;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}

.lobby-actions .btn-glass {
  background: rgba(27, 41, 64, 0.6) !important;
  border: 1px solid rgba(214, 184, 120, 0.25) !important;
  color: #F3F0E8 !important;
}

.lobby-actions .btn-glass:not([disabled]):hover {
  background: rgba(34, 52, 82, 0.8) !important;
  border-color: rgba(214, 184, 120, 0.6) !important;
  transform: translateY(-2px);
}

.lobby-actions .btn-primary {
  background: linear-gradient(135deg, #D6B878 0%, #B98555 100%) !important;
  color: #0B1220 !important;
  font-weight: 800;
  border: none;
  box-shadow: 0 10px 24px -6px rgba(214, 184, 120, 0.35) !important;
}

.lobby-actions .btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
}

body .navbar {
  background: rgba(19, 31, 50, 0.88) !important;
  border: 1px solid rgba(214, 184, 120, 0.25) !important;
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(214, 184, 120, 0.1) !important;
}

body .navbar-actions .btn,
body .hero-actions .btn:not(.btn-primary),
body #btn-preview-all-ranks {
  background: rgba(27, 41, 64, 0.7) !important;
  border: 1px solid rgba(214, 184, 120, 0.22) !important;
  color: #F3F0E8 !important;
  border-radius: 12px;
  box-shadow: none;
  transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}

body .navbar-actions .btn:hover,
body .hero-actions .btn:not(.btn-primary):hover,
body #btn-preview-all-ranks:hover {
  background: rgba(34, 52, 82, 0.95) !important;
  border-color: rgba(214, 184, 120, 0.55) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}

body .navbar-actions .btn svg,
body .hero-actions .btn svg {
  color: #D6B878 !important;
  stroke: currentColor;
}

body .hero-actions .btn-primary {
  background: linear-gradient(135deg, #D6B878 0%, #E9D39B 50%, #B98555 100%) !important;
  color: #0B1220 !important;
  font-weight: 800;
  border: none !important;
  border-radius: 12px;
  box-shadow: 0 10px 26px -8px rgba(214, 184, 120, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

body .hero-actions .btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
}

body .hero-actions {
  gap: 10px;
}

body .hero-card {
  border: 1px solid rgba(214, 184, 120, 0.28) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(214, 184, 120, 0.12) !important;
  background:
    linear-gradient(90deg, rgba(11, 18, 32, 0.97) 0%, rgba(19, 31, 50, 0.90) 45%, rgba(19, 31, 50, 0.4) 100%),
    url('/assets/hub-arcade-3d.png') center/cover no-repeat !important;
}

body .hub-leaderboard-preview {
  background: linear-gradient(155deg, rgba(27, 41, 64, 0.88), rgba(19, 31, 50, 0.95)) !important;
  border: 1px solid rgba(214, 184, 120, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(214, 184, 120, 0.1) !important;
}

body .lb-preview-title h2 {
  background: linear-gradient(180deg, #FFFFFF 20%, #D6B878 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body .podium-mini-card {
  background: linear-gradient(160deg, rgba(27, 41, 64, 0.8), rgba(19, 31, 50, 0.92)) !important;
  border: 1px solid rgba(214, 184, 120, 0.22) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  gap: 14px;
  align-items: center;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}

body .podium-mini-card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 184, 120, 0.55) !important;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.7) !important;
}

body .podium-mini-card.rank-1 {
  border-color: rgba(214, 184, 120, 0.6) !important;
  box-shadow: 0 0 30px -14px rgba(214, 184, 120, 0.35) !important;
}

body .podium-user-avatar,
body .podium-user-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
}

body .podium-user-avatar {
  box-shadow: 0 0 0 2px rgba(214, 184, 120, 0.4) !important;
  overflow: hidden;
  flex-shrink: 0;
}

body .podium-username {
  color: #F3F0E8 !important;
  font-weight: 700;
}

body .podium-title {
  color: #D6B878 !important;
  font-size: .78rem;
}

body .podium-score {
  color: #A7B2C4 !important;
  font-size: .8rem;
}

body .category-nav .tab-btn {
  background: rgba(27, 41, 64, 0.6) !important;
  border: 1px solid rgba(214, 184, 120, 0.22) !important;
  color: #A7B2C4 !important;
  border-radius: 999px;
  transition: all .2s;
}

body .category-nav .tab-btn:hover {
  border-color: rgba(214, 184, 120, 0.5) !important;
  color: #F3F0E8 !important;
}

body .category-nav .tab-btn.active {
  background: linear-gradient(135deg, #D6B878, #B98555) !important;
  color: #0B1220 !important;
  border-color: transparent !important;
  font-weight: 800;
  box-shadow: 0 8px 22px -8px rgba(214, 184, 120, 0.4) !important;
}

body .game-card {
  border: 1px solid rgba(214, 184, 120, 0.2) !important;
  border-radius: 20px !important;
  background: linear-gradient(165deg, rgba(27, 41, 64, 0.88), rgba(19, 31, 50, 0.95)) !important;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

body .game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(214, 184, 120, 0.55) !important;
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.75) !important;
}

@keyframes rarityShift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@keyframes rarityBorder {
  0%,
  100% {
    box-shadow: 0 0 0 1px var(--r1), 0 0 18px -6px var(--r1);
  }

  50% {
    box-shadow: 0 0 0 1px var(--r2), 0 0 30px -4px var(--r2);
  }
}

.shop-card.rarity-rare {
  --r1: #38bdf8;
  --r2: #7dd3fc;
}

.shop-card.rarity-epic {
  --r1: #c084fc;
  --r2: #f0abfc;
}

.shop-card.rarity-legendary {
  --r1: #D6B878;
  --r2: #E9D39B;
}

.shop-card.rarity-mythic {
  --r1: #D66B75;
  --r2: #D6B878;
}

.shop-card.rarity-legendary .shop-card-title,
.shop-card.rarity-mythic .shop-card-title,
.shop-card.rarity-epic .shop-card-title {
  background: linear-gradient(90deg, var(--r1), #FFFFFF, var(--r2), var(--r1));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rarityShift 3s linear infinite;
  font-weight: 800;
}

.shop-card.rarity-legendary .shop-card-title,
.shop-card.rarity-mythic .shop-card-title {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--r1) 55%, transparent));
}

.shop-card.rarity-legendary,
.shop-card.rarity-mythic {
  animation: rarityBorder 2.8s ease-in-out infinite;
}

.shop-card.rarity-legendary .shop-card-badge,
.shop-card.rarity-mythic .shop-card-badge {
  background: linear-gradient(90deg, var(--r1), var(--r2), var(--r1));
  background-size: 200% auto;
  animation: rarityShift 2.5s linear infinite;
  color: #0B1220;
  border: none;
  font-weight: 800;
}

.shop-card.rarity-legendary .shop-card-icon-wrapper,
.shop-card.rarity-mythic .shop-card-icon-wrapper {
  border-color: var(--r1);
  box-shadow: 0 0 22px -6px var(--r1), inset 0 0 14px -6px var(--r2);
}

body .hero-actions #btn-random-game.btn-primary {
  background: linear-gradient(135deg, #D6B878 0%, #E9D39B 50%, #B98555 100%) !important;
  color: #0B1220 !important;
}

i[class^="ti-"],
i[class*=" ti-"] {
  font-family: "tabler-icons" !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@property --hub-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.app-container {
  position: relative;
  z-index: 1;
}

body .navbar {
  position: sticky;
  top: 12px;
  z-index: 50;
  backdrop-filter: blur(22px) saturate(160%);
}

body .logo-icon {
  background: linear-gradient(135deg, #D6B878, #B98555) !important;
  color: #0B1220 !important;
  border-radius: 14px;
  box-shadow: 0 0 20px -4px rgba(214, 184, 120, 0.4) !important;
}

body .brand-title {
  background: linear-gradient(90deg, #FFFFFF, #E9D39B, #D6B878, #FFFFFF);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShine 6s linear infinite;
  font-weight: 900;
  letter-spacing: .02em;
}

body .hero-card {
  position: relative;
  isolation: isolate;
  min-height: 380px;
  border: 1px solid rgba(214, 184, 120, 0.28) !important;
  animation: heroIn .9s cubic-bezier(.2, .8, .2, 1) both;
  overflow: hidden;
}

body .hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(214, 184, 120, 0.35) 0%, transparent 60%, rgba(214, 184, 120, 0.2) 100%);
}

body .hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 18, 32, 0.96) 0%, rgba(19, 31, 50, 0.85) 45%, rgba(19, 31, 50, 0.25) 85%, transparent 100%) !important;
}

body .hero-content {
  position: relative;
  z-index: 2;
}

body .hero-card h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.8rem) !important;
  line-height: 1.05;
  font-weight: 900;
  background: linear-gradient(100deg, #FFFFFF 0%, #F3F0E8 30%, #D6B878 70%, #E9D39B 100%) !important;
  background-size: 300% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  animation: titleShine 9s linear infinite;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
}

body .hero-card .badge-tag {
  background: rgba(27, 41, 64, 0.8) !important;
  border: 1px solid rgba(214, 184, 120, 0.45) !important;
  color: #D6B878 !important;
  letter-spacing: .2em;
  box-shadow: 0 0 14px -4px rgba(214, 184, 120, 0.3) !important;
}

body .hero-card p {
  color: #A7B2C4 !important;
  font-size: 1.05rem;
  max-width: 520px;
}

body .hero-actions #btn-random-game {
  padding: 14px 26px;
  font-size: 1rem;
}

body .score-chip {
  background: rgba(27, 41, 64, 0.75) !important;
  border: 1px solid rgba(214, 184, 120, 0.3) !important;
}

body .score-chip strong {
  color: #D6B878 !important;
  font-size: 1.1em;
}

body .games-grid {
  perspective: 1200px;
}

body .game-card {
  position: relative;
  transform-style: preserve-3d;
  background: linear-gradient(165deg, rgba(27, 41, 64, 0.88), rgba(19, 31, 50, 0.95)) !important;
  border: 1px solid rgba(214, 184, 120, 0.22) !important;
  border-radius: 22px;
  overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .18s ease-out, box-shadow .3s, border-color .3s;
  animation: cardIn .7s cubic-bezier(.2, .8, .2, 1) both;
}

body .game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(214, 184, 120, 0.12), transparent 45%);
  opacity: 0;
  transition: opacity .3s;
}

body .game-card:hover {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) scale(1.02);
  border-color: rgba(214, 184, 120, 0.6) !important;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(214, 184, 120, 0.25) !important;
}

body .game-card:hover::after {
  opacity: 1;
}

body .game-card .card-banner {
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s;
  filter: saturate(1.05);
}

body .game-card:hover .card-banner {
  transform: scale(1.06);
  filter: saturate(1.2) brightness(1.05);
}

body .game-card .card-scene-icon {
  font-size: 2rem;
  color: #D6B878 !important;
  text-shadow: 0 0 16px rgba(214, 184, 120, 0.5) !important;
  transition: transform .4s;
}

body .game-card:hover .card-scene-icon {
  transform: translateZ(40px) scale(1.2) rotate(-6deg);
}

body .game-card .card-title {
  color: #F3F0E8 !important;
  font-weight: 800;
}

body .game-card .card-title i {
  color: #D6B878 !important;
}

body .game-card .card-desc {
  color: #A7B2C4 !important;
}

body .game-card .btn-primary {
  background: linear-gradient(135deg, #D6B878, #B98555) !important;
  color: #0B1220 !important;
  border: none;
  font-weight: 800;
  border-radius: 12px;
}

body .game-card .custom-badge-tag {
  background: rgba(11, 18, 32, 0.85) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(214, 184, 120, 0.35) !important;
  color: #D6B878 !important;
}

@media (prefers-reduced-motion: reduce) {
  body .hero-card::before,
  body .hero-card h1,
  body .game-card {
    animation: none !important;
  }
}

.uno-round-table-mode {
    padding: 6px 4px 16px !important;
    gap: 6px !important;
    overflow-x: hidden !important;
  }

  .uno-round-table-mode .turn-timer-dock {
    margin-bottom: 2px !important;
    padding: 4px 8px !important;
  }

  .uno-round-table-mode .turn-timer-header {
    font-size: 0.72rem !important;
  }

  .uno-round-table-mode .crow-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    margin-bottom: 2px !important;
  }

  .uno-round-table-mode .crow-head h3 {
    font-size: 0.92rem !important;
    margin: 1px 0 !important;
  }

  .uno-round-table-mode .crow-head p,
  .uno-round-table-mode .crow-head .badge-tag {
    display: none !important;
  }

  .uno-round-table-mode .crow-head-right {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  .uno-round-table-mode .cards-host-pill {
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
  }

  .uno-round-table-mode .crow-turn {
    font-size: 0.70rem !important;
    padding: 2px 8px !important;
  }

  .uno-round-table-mode .crow-head-right .btn {
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
  }

  .uno-round-table-mode .uno-round-table {
    min-height: 220px !important;
    max-height: 260px !important;
    margin: 4px 0 6px !important;
  }

  .uno-round-table-mode .table-felt {
    min-height: 190px !important;
    max-height: 230px !important;
    padding: 8px !important;
    border-radius: 60px / 45px !important;
    border-width: 2.5px !important;
  }

  .uno-round-table-mode .table-center-board {
    padding: 6px 14px !important;
    gap: 12px !important;
    border-radius: 20px !important;
  }

  .uno-round-table-mode .crow-draw,
  .uno-round-table-mode .crow-discard .crow-card {
    width: 52px !important;
    height: 78px !important;
    border-radius: 7px !important;
  }

  .uno-round-table-mode .crow-draw span {
    font-size: 16px !important;
  }

  .uno-round-table-mode .crow-draw small {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }

  .uno-round-table-mode .table-seat {
    transition: transform 0.2s ease !important;
  }

  .uno-round-table-mode .table-seat.seat-top {
    top: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-left {
    top: 50% !important;
    left: 8px !important;
    transform: translateY(-50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-right {
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-top-left {
    top: 14px !important;
    left: 22% !important;
    transform: translateX(-50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-top-right {
    top: 14px !important;
    right: 22% !important;
    transform: translateX(50%) !important;
  }

  .uno-round-table-mode .table-seat.seat-bottom-left {
    bottom: 12px !important;
    left: 8px !important;
  }

  .uno-round-table-mode .table-seat.seat-bottom-right {
    bottom: 12px !important;
    right: 8px !important;
  }

  .uno-round-table-mode .seat-player-badge {
    padding: 3px 8px 3px 4px !important;
    gap: 5px !important;
    background: rgba(20, 10, 36, 0.92) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important;
  }

  .uno-round-table-mode .btn-seat-kick-bot {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    margin-left: 2px !important;
  }

  .uno-round-table-mode .seat-avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  .uno-round-table-mode .seat-name {
    font-size: 0.68rem !important;
    max-width: 60px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .uno-round-table-mode .seat-count {
    font-size: 0.62rem !important;
  }

  .uno-round-table-mode .seat-hand-fan {
    height: 26px !important;
    margin-top: 2px !important;
  }

  .uno-round-table-mode .opponent-back-card {
    width: 16px !important;
    height: 24px !important;
    border-radius: 3px !important;
  }

  .uno-round-table-mode .crow-status {
    font-size: 0.70rem !important;
    padding: 3px 8px !important;
    margin: 2px auto !important;
    max-width: 95% !important;
  }

  .uno-round-table-mode .my-player-station {
    margin-top: 4px !important;
    padding: 8px 6px 12px !important;
    border-radius: 14px !important;
    min-height: auto !important;
  }

  .uno-round-table-mode .station-header {
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }

  .uno-round-table-mode .station-user-info {
    gap: 6px !important;
    font-size: 0.78rem !important;
  }

  .uno-round-table-mode .station-badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }

  .uno-round-table-mode .uno-actions-dock {
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  .uno-round-table-mode .btn-uno-blast {
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
  }

  .uno-round-table-mode .uno-spectator-reactions {
    padding: 2px 6px !important;
    gap: 4px !important;
  }

  .uno-round-table-mode .uno-spectator-reactions span {
    display: none !important;
  }

  .uno-round-table-mode .uno-spectator-reactions .btn-cards-react {
    padding: 2px 5px !important;
    font-size: 0.75rem !important;
  }

  .uno-round-table-mode #quick-taunt-select {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    max-width: 105px !important;
    background: #180d28 !important;
    color: #fef08a !important;
    border: 1.5px solid rgba(251, 191, 36, 0.6) !important;
  }

  .uno-round-table-mode .crow-hand {
    min-height: 110px !important;
    padding: 6px 4px 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
  }

  .uno-round-table-mode .hand-card-slot {
    margin: 0 -10px !important;
  }

  .uno-round-table-mode .hand-card-slot .crow-card {
    width: 58px !important;
    height: 86px !important;
    border-radius: 8px !important;
    font-size: 1.1rem !important;
  }
}

@media (max-width: 480px) {
  .app-container {
    padding: 6px 6px 40px !important;
  }

  .voice-status strong {
    max-width: 80px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  .shop-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    text-align: center;
    width: 100% !important;
  }

  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 14px 12px !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .arena-header {
    padding: 3px 8px !important;
    margin-bottom: 2px !important;
  }

  .mono-board-3d {
    width: min(84vh, 84dvh, 90vw) !important;
    height: min(84vh, 84dvh, 90vw) !important;
    transform: rotateX(6deg) scale(0.94) translateY(-2px) !important;
  }

  .game-stage-card {
    padding: 2px !important;
  }

  .ct-dice-cube-real {
    width: 48px !important;
    height: 48px !important;
  }
}

.oauth-blocker-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 10, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 20px;
}

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

.oauth-blocker-card {
  width: min(460px, 100%);
  background: linear-gradient(160deg, #1e131d 0%, #120b13 60%, #0d070e 100%);
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 50px rgba(239, 68, 68, 0.25);
  border-radius: 24px;
  padding: 32px 28px;
  text-align: center;
  animation: modal-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.oauth-blocker-icon {
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.3);
}

.oauth-blocker-card h2 {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.oauth-blocker-card p {
  color: #fca5a5;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 22px;
}

.oauth-blocker-reasons {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.oauth-reason-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #fed7aa;
}

.reason-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-oauth-retry {
  width: 100%;
  padding: 14px 20px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.45) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-oauth-retry:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(234, 88, 12, 0.6) !important;
}

.ct-pcash.ct-pcash-negative {
  color: #ff334b !important;
  text-shadow: 0 0 12px rgba(255, 51, 75, 0.7) !important;
  animation: debtBlink 1.4s ease-in-out infinite alternate !important;
}

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

  100% {
    transform: scale(1.08);
    opacity: 0.8;
    filter: drop-shadow(0 0 6px #ef4444);
  }
}

.ct-player.player-cooked {
  border-color: rgba(239, 68, 68, 0.8) !important;
  background: rgba(239, 68, 68, 0.15) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4) !important;
}

.ct-debt-warning-pill {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.95));
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
  animation: pulseCooked 1.2s infinite;
  text-align: center;
}

@keyframes pulseCooked {

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

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

.ct-crisis-container {
  margin: 6px auto;
  max-width: 380px;
  width: 95%;
  background: linear-gradient(135deg, rgba(35, 10, 10, 0.95), rgba(55, 14, 14, 0.92));
  border: 1.5px solid rgba(239, 68, 68, 0.7);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
  backdrop-filter: blur(12px);
  z-index: 20;
}

.ct-crisis-header {
  margin-bottom: 6px;
  text-align: center;
}

.ct-crisis-header strong {
  color: #fca5a5;
  font-size: 0.82rem;
  display: block;
  margin-bottom: 2px;
}

.ct-crisis-header p {
  color: #cbd5e1;
  font-size: 0.72rem;
  margin: 0;
}

.ct-crisis-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 100px;
  overflow-y: auto;
  padding-right: 4px;
}

.ct-crisis-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.76rem;
}

.crisis-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.crisis-item-name {
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.78rem;
}

.crisis-item-badge {
  color: #facc15;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(250, 204, 21, 0.15);
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: 4px;
  padding: 1px 6px;
}

.crisis-item-actions {
  display: flex;
  gap: 5px;
  width: 100%;
}

.crisis-item-actions .btn {
  flex: 1;
  padding: 3px 6px !important;
  font-size: 0.68rem !important;
  font-weight: 700;
  border-radius: 5px;
  white-space: nowrap;
  text-align: center;
}

.crisis-item-actions .btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #1e1b4b !important;
  border: none !important;
}

.crisis-item-actions .btn-danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  border: none !important;
}

.ct-crisis-footer {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #94a3b8;
  font-size: 0.72rem;
}

.ct-no-props {
  text-align: center;
  color: #fca5a5;
  font-size: 0.76rem;
  padding: 4px;
}

.ct-buyout-banner {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.9), rgba(15, 23, 42, 0.95)) !important;
  border: 1px solid rgba(34, 211, 238, 0.6) !important;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.4) !important;
}

.btn-buyout-exec {
  background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.mono-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-filter-props {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #fde047;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 5px 12px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-filter-props:hover {
  background: rgba(255, 215, 0, 0.18);
  border-color: #fde047;
  transform: translateY(-1px);
}

.btn-filter-props.active {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  color: #0f172a;
  border-color: #fef08a;
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.6);
}

.mono-board-3d.filter-mode .ct-mono-tile.filter-dimmed {
  opacity: 0.22;
  filter: grayscale(0.85) brightness(0.65);
  transform: scale(0.96);
  transition: all 0.3s ease;
}

.mono-board-3d.filter-mode .ct-mono-tile.filter-mine-active {
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1.04) translateZ(15px);
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.8), 0 0 45px rgba(245, 158, 11, 0.5) !important;
  border: 2px solid #facc15 !important;
  z-index: 10;
  animation: pulseMyApartments 1.6s ease-in-out infinite alternate;
}

@keyframes pulseMyApartments {
  0% {
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.6);
  }

  100% {
    box-shadow: 0 0 30px rgba(250, 204, 21, 1), 0 0 50px rgba(245, 158, 11, 0.7);
  }
}

.ct-mono-tile.is-my-property .tile-owner {
  background: rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.5);
  font-weight: 700;
}

@keyframes warmFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes warmGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 140, 40, .35);
  }

  50% {
    box-shadow: 0 0 22px 4px rgba(255, 140, 40, .25);
  }
}

@keyframes warmShine {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@keyframes emberFloat {

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

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

/* Duplicate Hub block replaced */

.uno-round-table-mode {
  padding: 16px 20px !important;
}

.uno-round-table {
  position: relative;
  width: 100%;
  min-height: 380px;
  margin: 12px 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.table-felt {
  position: relative;
  width: 100%;
  max-width: 820px;
  min-height: 360px;
  background: radial-gradient(ellipse at center, #261642 0%, #160c29 55%, #0a0614 100%);
  border: 4px solid rgba(168, 85, 247, 0.35);
  border-radius: 120px / 80px;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.8),
    inset 0 0 20px rgba(168, 85, 247, 0.25),
    0 20px 50px -10px rgba(0, 0, 0, 0.9),
    0 0 40px -10px rgba(168, 85, 247, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

.table-center-board {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 18px 26px;
  background: rgba(10, 6, 18, 0.65);
  border: 2px dashed rgba(168, 85, 247, 0.3);
  border-radius: 36px;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6), 0 10px 25px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  z-index: 5;
}

.opponents-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.table-seat {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}

.table-seat.seat-top {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.table-seat.seat-left {
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
}

.table-seat.seat-right {
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}

.table-seat.seat-top-left {
  top: 15px;
  left: 18%;
  transform: translateX(-50%);
}

.table-seat.seat-top-right {
  top: 15px;
  right: 18%;
  transform: translateX(50%);
}

.table-seat.seat-bottom-left {
  bottom: 24px;
  left: 14px;
}

.table-seat.seat-bottom-right {
  bottom: 24px;
  right: 14px;
}

.seat-player-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(25, 15, 42, 0.88);
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  border-radius: 999px;
  padding: 5px 14px 5px 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  transition: all 0.25s ease;
}

.table-seat.is-turn .seat-player-badge {
  border-color: #fbbf24;
  background: rgba(45, 25, 10, 0.95);
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.5), 0 0 5px #fbbf24;
  transform: scale(1.08);
}

.seat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 0.85rem;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.seat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seat-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.seat-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

.seat-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #c084fc;
}

.table-seat.is-turn .seat-count {
  color: #fde047;
}

.turn-pulse-indicator {
  padding: 2px 7px;
  border-radius: 999px;
  background: #f59e0b;
  color: #1a0d05;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  animation: warmGlow 1.8s infinite;
}

.seat-hand-fan {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  margin-top: 4px;
  position: relative;
}

.opponent-back-card {
  width: 24px;
  height: 36px;
  border-radius: 4px;
  background: linear-gradient(135deg, #2a1548, #150a24);
  border: 1px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  margin-left: -14px;
  transition: transform 0.2s ease;
  position: relative;
}

.opponent-back-card:first-child {
  margin-left: 0;
}

.opponent-back-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  width: 16px;
  height: 24px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 50%;
}

.seat-extra-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fbbf24;
  margin-left: 6px;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 5px;
  border-radius: 6px;
}

.my-player-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
  padding: 10px 16px 6px;
  background: rgba(18, 11, 32, 0.6);
  border: 1.5px solid rgba(168, 85, 247, 0.2);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.my-player-station.my-turn-station {
  border-color: #fbbf24;
  background: rgba(35, 20, 8, 0.75);
  box-shadow: 0 0 35px -5px rgba(251, 191, 36, 0.35);
}

.station-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.station-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.station-badge {
  background: linear-gradient(135deg, #ff7700, #ff5500);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.station-username {
  font-weight: 800;
  font-size: 0.88rem;
  color: #fff;
}

.station-count {
  font-size: 0.76rem;
  color: #fbbf24;
  font-weight: 700;
  background: rgba(251, 191, 36, 0.15);
  padding: 2px 7px;
  border-radius: 8px;
}

.hand-card-slot {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hand-card-slot:hover {
  z-index: 50;
  transform: translateY(-16px) scale(1.12) !important;
}

.uno-actions-dock {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

@keyframes unoPulseFlame {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.7), 0 0 10px #ef4444;
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 45px rgba(245, 158, 11, 0.9), 0 0 20px #f59e0b;
  }
}

@keyframes contreUnoShake {

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

  25% {
    transform: translateX(-3px) scale(1.04);
  }

  75% {
    transform: translateX(3px) scale(1.04);
  }
}

.btn-uno-blast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 2px solid #fff;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #fff;
  z-index: 60;
}

.btn-uno-blast.btn-call-uno {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 60%, #eab308 100%);
  border-color: #fef08a;
  animation: unoPulseFlame 1.2s infinite;
}

.btn-uno-blast.btn-call-uno:hover {
  transform: scale(1.15) !important;
  filter: brightness(1.2);
}

.btn-uno-blast.btn-call-contre-uno {
  background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
  border-color: #a5f3fc;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 12px #38bdf8;
  animation: contreUnoShake 1.4s infinite;
}

.btn-uno-blast.btn-call-contre-uno:hover {
  transform: scale(1.15) !important;
  filter: brightness(1.25);
  box-shadow: 0 0 50px rgba(6, 182, 212, 1);
}

.uno-blast-icon {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
}

.uno-popup-banner {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  padding: 16px 36px;
  border-radius: 20px;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85);
  z-index: 100;
  backdrop-filter: blur(14px);
  pointer-events: none;
  animation: unoBannerEntrance 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes unoBannerEntrance {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6) rotate(-8deg);
  }

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

.uno-popup-banner.fade-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.1);
  transition: all 0.4s ease;
}

.uno-popup-banner.theme-gold {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(245, 158, 11, 0.95));
  border: 3px solid #fef08a;
  box-shadow: 0 0 50px rgba(245, 158, 11, 0.8);
}

.uno-popup-banner.theme-red {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.95), rgba(225, 29, 72, 0.95));
  border: 3px solid #fda4af;
  box-shadow: 0 0 50px rgba(225, 29, 72, 0.85);
}

.crow-game.uno-round-table-mode {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  min-height: auto !important;
  padding-bottom: 24px !important;
}

.uno-round-table-mode .uno-round-table {
  min-height: 290px !important;
  margin: 4px 0 8px !important;
}

.uno-round-table-mode .table-felt {
  min-height: 270px !important;
  max-width: 760px !important;
  padding: 16px !important;
  border-radius: 90px / 65px !important;
}

.uno-round-table-mode .table-center-board {
  padding: 12px 20px !important;
  gap: 20px !important;
}

.uno-round-table-mode .crow-draw,
.uno-round-table-mode .crow-discard .crow-card {
  width: 70px !important;
  height: 104px !important;
}

.my-player-station {
  position: relative !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 14px 20px 20px !important;
  overflow: visible !important;
  z-index: 50 !important;
  min-height: 170px !important;
}

.my-player-station .crow-hand {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  min-height: 140px !important;
  padding: 10px 10px 15px !important;
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.my-player-station .hand-card-slot {
  position: relative !important;
  margin: 0 -16px !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0.1s !important;
  display: inline-block !important;
  transform-origin: bottom center !important;
  flex-shrink: 0 !important;
}

.my-player-station .hand-card-slot:hover {
  transform: translateY(-30px) scale(1.18) !important;
  z-index: 100 !important;
}

.my-player-station .crow-card {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
}

.btn-trade-hub {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  border: 1px solid rgba(254, 240, 138, 0.5) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
  transition: all 0.2s ease !important;
}

#quick-taunt-select {
  background: #180d28 !important;
  color: #fef08a !important;
  border: 1.5px solid rgba(251, 191, 36, 0.6) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#quick-taunt-select:hover,
#quick-taunt-select:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.5) !important;
}

#quick-taunt-select option {
  background: #1a0f2c !important;
  color: #ffffff !important;
  padding: 6px 10px !important;
  font-weight: 600 !important;
}

.btn-trade-hub:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6) !important;
}

.ct-trade-banner {
  background: linear-gradient(135deg, rgba(30, 20, 15, 0.96), rgba(45, 25, 15, 0.98)) !important;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75), 0 0 25px rgba(245, 158, 11, 0.35) !important;
}

.city-trade-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 5, 3, 0.78);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tradeModalFadeIn 0.2s ease-out;
}

@keyframes tradeModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

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

.city-trade-modal-box {
  background: linear-gradient(160deg, #1f140e 0%, #130b07 100%);
  border: 2px solid rgba(245, 158, 11, 0.5);
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.25);
  color: #fffaf0;
  overflow: hidden;
}

.city-trade-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.08);
}

.trade-modal-title {
  font-family: Orbitron, sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  color: #fef08a;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-trade-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 70vh;
  overflow-y: auto;
}

.trade-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trade-form-group label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fed7aa;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trade-select,
.trade-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(10, 6, 4, 0.85);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  color: #fff;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.trade-select:focus,
.trade-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.trade-select option {
  background: #190f09;
  color: #fff;
}

.trade-form-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 6px 0;
}

.trade-form-divider::before,
.trade-form-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
}

.trade-form-divider span {
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f59e0b;
}

.city-trade-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(245, 158, 11, 0.2);
  background: rgba(10, 6, 4, 0.5);
}

.uno-direction-ring {
  position: absolute;
  inset: -10px;
  border-radius: 125px / 85px;
  border: 2px dashed rgba(168, 85, 247, 0.4);
  pointer-events: none;
  animation: rotateClockwise 25s linear infinite;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

.uno-direction-ring.reverse {
  border-color: rgba(239, 68, 68, 0.5);
  animation: rotateCounterClockwise 25s linear infinite;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounterClockwise {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.floating-seat-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  background: rgba(15, 10, 28, 0.96);
  border: 1.5px solid rgba(168, 85, 247, 0.6);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(168, 85, 247, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
}

.floating-seat-bubble.show {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.floating-seat-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(15, 10, 28, 0.96) transparent transparent;
}

.uno-color-picker-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 3, 14, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 200;
  animation: fadeInPicker 0.2s ease-out;
}

@keyframes fadeInPicker {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

.uno-color-picker-box {
  background: linear-gradient(135deg, rgba(30, 16, 50, 0.95), rgba(15, 8, 25, 0.98));
  border: 2px solid rgba(168, 85, 247, 0.5);
  border-radius: 28px;
  padding: 24px 30px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.35);
}

.uno-color-picker-box h4 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, #fed7aa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.uno-color-picker-box p {
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.uno-color-wheel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}

.color-pick-btn {
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.color-pick-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
}

.color-pick-btn.red {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: 2px solid #fca5a5;
}

.color-pick-btn.blue {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: 2px solid #93c5fd;
}

.color-pick-btn.green {
  background: linear-gradient(135deg, #10b981, #047857);
  border: 2px solid #6ee7b7;
}

.color-pick-btn.yellow {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 2px solid #fde68a;
}

.btn-seat-kick-bot {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.2s ease;
}

.btn-seat-kick-bot:hover {
  background: #ef4444;
  color: #fff;
  transform: scale(1.15);
}

.table-felt.aura-red {
  border-color: #ef4444 !important;
  box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.3), 0 0 35px rgba(239, 68, 68, 0.35) !important;
}

.table-felt.aura-blue {
  border-color: #3b82f6 !important;
  box-shadow: inset 0 0 60px rgba(59, 130, 246, 0.3), 0 0 35px rgba(59, 130, 246, 0.35) !important;
}

.table-felt.aura-green {
  border-color: #10b981 !important;
  box-shadow: inset 0 0 60px rgba(16, 185, 129, 0.3), 0 0 35px rgba(16, 185, 129, 0.35) !important;
}

.table-felt.aura-yellow {
  border-color: #f59e0b !important;
  box-shadow: inset 0 0 60px rgba(245, 158, 11, 0.3), 0 0 35px rgba(245, 158, 11, 0.35) !important;
}

@keyframes attackShake {

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

  20%,
  60% {
    transform: translateX(-8px) rotate(-2deg);
  }

  40%,
  80% {
    transform: translateX(8px) rotate(2deg);
  }
}

.attack-shake {
  animation: attackShake 0.45s ease-in-out !important;
  filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.8)) !important;
}

@keyframes attackFlash {
  0% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

.uno-rules-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 18, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  animation: fadeIn 0.2s ease-out;
}

.uno-rules-box {
  background: linear-gradient(145deg, #18112e, #0e0a1f);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-radius: 20px;
  padding: 24px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.25);
}

.rules-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rules-box-header h4 {
  margin: 0;
  color: #f3e8ff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-close-rules {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close-rules:hover {
  background: rgba(239, 68, 68, 0.6);
}

.rules-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rule-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.rule-toggle-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

.rule-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rule-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.rule-meta small {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.2;
}

.rule-toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #a855f7;
  cursor: pointer;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(251, 191, 36, 0.45), transparent),
    radial-gradient(2px 2px at 45% 75%, rgba(249, 115, 22, 0.35), transparent),
    radial-gradient(1px 1px at 75% 15%, rgba(56, 189, 248, 0.35), transparent),
    radial-gradient(2px 2px at 85% 65%, rgba(168, 85, 247, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 30% 85%, rgba(251, 191, 36, 0.35), transparent);
  background-size: 550px 550px;
  animation: ambientEmbersDrift 30s linear infinite;
  z-index: 1;
}

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

  50% {
    transform: translateY(-40px) scale(1.02);
  }

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

body .game-card {
  position: relative !important;
  border-radius: 20px !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s, border-color 0.28s !important;
  transform-style: preserve-3d !important;
  overflow: hidden !important;
}

body .game-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(115deg,
      transparent 20%,
      rgba(255, 255, 255, 0.08) 35%,
      rgba(255, 215, 0, 0.2) 48%,
      rgba(244, 63, 94, 0.2) 52%,
      rgba(56, 189, 248, 0.2) 56%,
      rgba(255, 255, 255, 0.12) 65%,
      transparent 80%);
  transform: rotate(-25deg) translateY(-100%);
  transition: transform 0.75s ease;
  pointer-events: none;
  z-index: 3;
}

body .game-card:hover::before {
  transform: rotate(-25deg) translateY(100%);
}

body .game-card:hover {
  transform: translateY(-8px) scale(1.025) !important;
  box-shadow: 0 20px 45px -10px rgba(255, 106, 0, 0.5), 0 0 30px rgba(245, 158, 11, 0.25) !important;
  border-color: rgba(251, 191, 36, 0.7) !important;
}

.crow-card {
  border-radius: 14px !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.65),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s !important;
  position: relative !important;
  overflow: hidden !important;
}

.crow-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-radius: 12px 12px 100px 100px;
  pointer-events: none;
}

.crow-card.special-card {
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(251, 191, 36, 0.45),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7) !important;
}

.my-player-station .crow-card:not([disabled]) {
  animation: playableCardFloat 2.4s ease-in-out infinite;
}

@keyframes playableCardFloat {

  0%,
  100% {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 12px rgba(34, 197, 94, 0.45);
  }

  50% {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(34, 197, 94, 0.85);
  }
}

@keyframes pulseDanger {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
    text-shadow: 0 0 10px #ef4444;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.85;
    text-shadow: 0 0 20px #ef4444, 0 0 30px #f43f5e;
  }
}

.hub-reconnect-bar {
  margin: 16px 20px 0 20px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.28) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(245, 158, 11, 0.2);
  backdrop-filter: blur(10px);
  animation: reconnectFadeIn 0.3s ease-out;
}

@keyframes reconnectFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

.hub-reconnect-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hub-reconnect-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hub-reconnect-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dc2626;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.6);
  animation: pulseBadge 1.8s ease-in-out infinite;
}

@keyframes pulseBadge {

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

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

.hub-reconnect-title {
  color: #fef3c7;
  font-size: 0.95rem;
  font-weight: 600;
}

.hub-reconnect-title strong {
  color: #fbbf24;
}

.hub-reconnect-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-hub-reconnect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #1a0f02;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-hub-reconnect:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6);
}

.btn-hub-reconnect-dismiss {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-hub-reconnect-dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.city-manage-prop-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.city-manage-prop-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.city-manage-prop-color {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.city-manage-prop-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}

.city-manage-prop-details {
  font-size: 0.76rem;
  color: #9ca3af;
  margin-top: 2px;
}

.city-manage-prop-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.city-manage-btn {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.12s ease;
}

.city-manage-btn:hover {
  transform: translateY(-1px);
}

.city-manage-btn.sell-house {
  background: #f59e0b;
  color: #1f140e;
}

.city-manage-btn.mortgage {
  background: #ef4444;
  color: #fff;
}

.city-manage-btn.unmortgage {
  background: #10b981;
  color: #fff;
}

.city-manage-btn.sell-property {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid #ef4444;
  color: #fca5a5;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  .app-container {
    padding: 10px 10px 80px !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  body .navbar {
    position: sticky;
    top: 6px;
    z-index: 100;
    margin-bottom: 14px;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .brand {
    gap: 8px;
  }

  .logo-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .logo-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .brand-title {
    font-size: 14px !important;
  }

  .brand-subtitle {
    display: none !important;
  }

  .navbar-actions {
    display: flex !important;
    align-items: center;
    gap: 4px !important;
    order: 3;
    width: 100%;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 170, 80, 0.15);
  }

  .navbar-actions .btn {
    flex: 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 4px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    min-width: 0;
  }

  .navbar-actions .btn .lb-label {
    display: inline-block !important;
    font-size: 10.5px !important;
    white-space: nowrap;
    margin-left: 3px;
  }

  .user-profile-widget {
    gap: 6px;
    margin-left: auto;
  }

  .voice-status {
    padding: 4px 8px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  .voice-status strong {
    max-width: 80px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  .user-badge {
    padding: 4px 8px !important;
    font-size: 11.5px !important;
  }

  .user-badge .username {
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .hero-card {
    min-height: auto !important;
    padding: 18px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 16px !important;
  }

  body .hero-card h1 {
    font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
    margin-bottom: 8px !important;
    line-height: 1.15 !important;
  }

  body .hero-card p {
    font-size: 0.85rem !important;
    margin-bottom: 14px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .hero-actions .btn-primary {
    grid-column: span 2;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
  }

  .hero-actions .btn {
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    justify-content: center;
  }

  .hero-meta {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.82rem;
  }

  .hub-leaderboard-preview {
    padding: 16px 12px !important;
    border-radius: 18px !important;
    margin-bottom: 16px !important;
  }

  .lb-preview-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .lb-preview-header h2 {
    font-size: 1.25rem !important;
  }

  #btn-preview-all-ranks {
    width: 100%;
    justify-content: center;
    font-size: 0.82rem !important;
  }

  .podium-mini-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .podium-mini-card {
    padding: 10px 12px !important;
  }

  .category-nav {
    display: flex;
    overflow-x: auto !important;
    white-space: nowrap;
    gap: 6px !important;
    padding: 4px 2px 10px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .category-nav::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    flex-shrink: 0;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
  }

  .games-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body .game-card {
    border-radius: 18px !important;
  }

  body .game-card .card-thumb,
  .game-thumb {
    height: 150px !important;
  }

  .card-content {
    padding: 14px 14px 16px !important;
  }

  .card-title {
    font-size: 1.15rem !important;
  }

  .card-desc {
    font-size: 0.82rem !important;
    margin-bottom: 12px !important;
  }

  .card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .card-meta .btn {
    width: 100%;
    text-align: center;
    padding: 10px 16px !important;
  }

  .modal {
    padding: 8px !important;
    align-items: flex-end;
  }

  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
    border-radius: 20px 20px 12px 12px !important;
    padding: 18px 14px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-close {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 1.4rem !important;
  }

  .lb-modal-hero {
    margin-bottom: 14px !important;
  }

  .lb-modal-hero h2 {
    font-size: 1.3rem !important;
  }

  .lb-subtitle {
    font-size: 0.78rem !important;
  }

  .lb-tabs-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  .lb-tab-btn {
    padding: 8px 6px !important;
    font-size: 0.72rem !important;
    justify-content: center;
    border-radius: 10px !important;
  }

  .lb-podium-showcase {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .podium-pillar {
    order: initial !important;
    height: auto !important;
    padding: 12px !important;
  }

  .wheel-modal-card {
    padding: 16px 10px !important;
  }

  .wheel-stage {
    max-width: 290px !important;
    margin: 10px auto !important;
  }

  .wheel-outer-ring {
    width: 280px !important;
    height: 280px !important;
    box-shadow: 0 0 0 5px #2b1810, 0 0 0 8px #f59e0b, 0 0 20px rgba(245, 158, 11, 0.4) !important;
  }

  .wheel-center-pin {
    width: 48px !important;
    height: 48px !important;
    border-width: 3px !important;
  }

  .wheel-center-pin svg {
    width: 16px !important;
    height: 16px !important;
  }

  .wheel-pointer {
    top: -14px !important;
  }

  .wheel-pointer svg {
    width: 28px !important;
    height: 35px !important;
  }

  .wheel-controls .btn-lg {
    padding: 10px 22px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
  }

  .shop-category-tabs {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .shop-tab-btn {
    flex-shrink: 0;
    padding: 6px 12px !important;
    font-size: 0.76rem !important;
  }

  .shop-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .shop-card {
    padding: 10px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: left;
  }

  .shop-card-icon {
    font-size: 24px !important;
    flex-shrink: 0;
  }

  .shop-card-info {
    flex: 1;
    min-width: 0;
  }

  .shop-card .btn {
    width: auto !important;
    padding: 6px 12px !important;
    font-size: 0.74rem !important;
  }

  .quest-item {
    padding: 10px !important;
    font-size: 0.82rem !important;
  }

  .game-arena-overlay {
    padding: 0 !important;
    background: #090605 !important;
  }

  .arena-header {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 8px 10px !important;
    gap: 6px;
  }

  .arena-header #btn-leave-game {
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
  }

  .arena-title {
    font-size: 0.82rem !important;
    letter-spacing: 0 !important;
  }

  .arena-score {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }

  .game-stage-card {
    border-radius: 0 !important;
    border: none !important;
    padding: 6px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .floating-reactions-dock {
    bottom: 12px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 380px !important;
    justify-content: space-around !important;
    padding: 4px 8px !important;
  }

  .reaction-trigger-btn {
    padding: 5px 6px !important;
    font-size: 0.72rem !important;
    gap: 3px !important;
  }

  .reaction-trigger-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .reaction-trigger-btn span {
    display: none;
  }

  .city-manage-prop-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .city-manage-prop-actions {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .city-manage-btn {
    flex: 1 !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  body .navbar {
    padding: 6px 8px !important;
  }

  .navbar-actions .btn .lb-label {
    display: none !important;
  }

  .navbar-actions .btn {
    padding: 6px 4px !important;
  }

  .wheel-stage {
    max-width: 250px !important;
  }

  .wheel-outer-ring {
    width: 240px !important;
    height: 240px !important;
  }

  .hero-actions {
    grid-template-columns: 1fr !important;
  }

  .hero-actions .btn-primary {
    grid-column: span 1;
  }
}

/* ========================================================
   GARTIC CHAIN & WEREWOLF DESIGN STYLES
   ======================================================== */

/* Gartic Chain */
.gartic-game-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  gap: 14px;
  color: #fff;
}

.gartic-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(18, 14, 32, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 20px;
  border-radius: 16px;
  gap: 12px;
}

.gartic-step-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  margin-bottom: 4px;
}

.gartic-main-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #f8fafc;
}

.gartic-subtitle {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: #94a3b8;
}

.gartic-timer-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(#ef4444 0%, #f59e0b 50%, #10b981 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}

.gartic-timer-sec {
  background: #110d22;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  color: #fef08a;
}

.gartic-progress-bar-container {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.gartic-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
  transition: width 1s linear;
}

.gartic-content-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gartic-drawing-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.gartic-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: rgba(18, 14, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 12px;
  gap: 8px;
}

.gartic-colors {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gartic-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.gartic-swatch.active {
  transform: scale(1.22);
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.gartic-tools-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gartic-brush-sizes {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 2px 4px;
}

.gartic-size-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
}

.gartic-size-btn.active {
  background: #38bdf8;
  color: #0f172a;
}

.gartic-tool-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.15s;
}

.gartic-tool-btn.active, .gartic-tool-btn:hover {
  background: rgba(56, 189, 248, 0.3);
  border-color: #38bdf8;
  color: #38bdf8;
}

.gartic-canvas-container {
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  touch-action: none;
  display: flex;
  justify-content: center;
}

#gartic-paint-canvas {
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 600 / 340;
  display: block;
}

.gartic-guessing-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  width: 100%;
}

.gartic-received-drawing-wrap {
  width: 100%;
  max-width: 580px;
  background: #fff;
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
}

.gartic-received-drawing {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.gartic-guess-input-wrap, .gartic-initial-prompt-board {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gartic-prompt-card {
  background: rgba(18, 14, 32, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.gartic-prompt-icon {
  font-size: 2.2rem;
  color: #fbbf24;
}

.gartic-text-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gartic-text-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
}

.gartic-text-input.large {
  font-size: 1.15rem;
  padding: 14px 18px;
  text-align: center;
}

.gartic-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.gartic-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.gartic-chip:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.gartic-btn-submit {
  width: 100%;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 800;
  border-radius: 12px;
}

.gartic-waiting-card {
  padding: 40px 20px;
  text-align: center;
  background: rgba(18, 14, 32, 0.7);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.gartic-waiting-spinner {
  font-size: 2.2rem;
  color: #38bdf8;
}

.gartic-players-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 12px;
}

.gartic-player-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  font-weight: 700;
}

.gartic-player-badge.submitted {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

/* Galerie finale Gartic */
.gartic-gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.gartic-gallery-header {
  text-align: center;
}

.gartic-badge-gold {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.gartic-chains-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.gartic-chain-tab.active {
  background: #38bdf8 !important;
  color: #0f172a !important;
  font-weight: 800;
}

.gartic-timeline-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gartic-timeline-card {
  background: rgba(18, 14, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gartic-timeline-card-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #94a3b8;
}

.gartic-timeline-step-title {
  font-weight: 800;
  color: #38bdf8;
}

.gartic-gallery-image {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.gartic-gallery-quote {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fef08a;
  text-align: center;
  padding: 10px;
  font-style: italic;
}

.gartic-comparison-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
  border-radius: 14px;
}

.gartic-summary-box {
  flex: 1;
  text-align: center;
}

.gartic-summary-box .summary-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 800;
}

.gartic-summary-box .summary-value {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
}

.gartic-summary-arrow {
  font-size: 1.4rem;
  color: #f59e0b;
}

.gartic-gallery-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ========================================================
   WEREWOLF (LOUP-GAROU) DESIGN STYLES
   ======================================================== */
.werewolf-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  padding: 12px;
  border-radius: 18px;
  transition: background 0.5s ease;
}

.werewolf-wrapper.is-night {
  background: radial-gradient(circle at 50% 20%, rgba(26, 16, 49, 0.95), rgba(7, 5, 14, 0.98));
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 35px rgba(91, 33, 182, 0.25);
}

.werewolf-wrapper.is-day {
  background: radial-gradient(circle at 50% 20%, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.2);
}

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

.ww-phase-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.ww-phase-badge.night {
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  color: #e9d5ff;
}

.ww-phase-badge.day {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fffbeb;
}

.ww-main-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.ww-subtitle {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: #94a3b8;
}

.ww-timer-widget .ww-timer-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fef08a;
  font-size: 0.95rem;
}

.ww-role-secret-card {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ww-role-icon {
  font-size: 1.8rem;
}

.ww-role-name {
  font-weight: 900;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ww-dead-tag {
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.ww-role-desc {
  font-size: 0.78rem;
  color: #cbd5e1;
}

.ww-village-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.ww-player-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.ww-player-card.is-clickable {
  cursor: pointer;
  border-color: rgba(56, 189, 248, 0.6);
}

.ww-player-card.is-clickable:hover {
  transform: translateY(-3px);
  background: rgba(56, 189, 248, 0.12);
  border-color: #38bdf8;
}

.ww-player-card.is-voted {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.2) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

.ww-player-card.is-dead {
  opacity: 0.45;
  filter: grayscale(1);
  pointer-events: none;
}

.ww-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: 6px;
}

.ww-avatar-img, .ww-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.ww-avatar-fallback {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
}

.ww-skull-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
}

.ww-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  display: block;
}

.ww-revealed-role {
  font-size: 0.72rem;
  font-weight: 800;
  display: block;
  margin-top: 2px;
}

.ww-hidden-role {
  font-size: 0.72rem;
  color: #64748b;
  display: block;
  margin-top: 2px;
}

.ww-vote-counter {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
}

.ww-witch-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 12px;
  border-radius: 12px;
}

.ww-village-logs {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
}

.ww-logs-header {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}

.ww-log-item {
  font-size: 0.82rem;
  color: #cbd5e1;
  padding: 3px 0;
}

.ww-gameover-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ========================================================
   WEREWOLF SLEEP & WAKE CINEMATIC ANIMATIONS
   ======================================================== */
.ww-cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ww-cinematic-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ww-cinematic-overlay.fade-out {
  opacity: 0 !important;
}

/* Mode Sleep : Le village s'endort */
.ww-cinematic-overlay.mode-sleep {
  background: radial-gradient(circle at 50% 40%, rgba(13, 8, 28, 0.98), #030108 95%);
}

.ww-eyelid-top, .ww-eyelid-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 52%;
  background: #020005;
  z-index: 10;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.ww-eyelid-top {
  top: 0;
  transform: translateY(-100%);
  border-bottom: 3px solid rgba(139, 92, 246, 0.4);
}

.ww-eyelid-bottom {
  bottom: 0;
  transform: translateY(100%);
  border-top: 3px solid rgba(139, 92, 246, 0.4);
}

.ww-cinematic-overlay.mode-sleep.is-active .ww-eyelid-top {
  transform: translateY(-20%);
}

.ww-cinematic-overlay.mode-sleep.is-active .ww-eyelid-bottom {
  transform: translateY(20%);
}

.ww-cinematic-stars {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 80px, #e9d5ff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 150px 120px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 250px 40px, #a855f7, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 320px 180px, #ffffff, rgba(0,0,0,0));
  background-size: 350px 250px;
  opacity: 0.6;
  animation: starsTwinkle 3s infinite alternate;
}

@keyframes starsTwinkle {
  from { opacity: 0.3; transform: scale(1); }
  to { opacity: 0.8; transform: scale(1.02); }
}

.ww-cinematic-center {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px;
}

.ww-moon-container {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: moonFloat 3s ease-in-out infinite alternate;
}

@keyframes moonFloat {
  from { transform: translateY(0) scale(0.95); }
  to { transform: translateY(-8px) scale(1.05); }
}

.ww-moon-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, rgba(91, 33, 182, 0.2) 60%, transparent 80%);
  filter: blur(14px);
  animation: moonPulse 2s infinite alternate;
}

@keyframes moonPulse {
  from { transform: scale(0.9); opacity: 0.6; }
  to { transform: scale(1.4); opacity: 1; }
}

.ww-moon-sphere {
  font-size: 3.8rem;
  z-index: 2;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.8));
}

.ww-cinematic-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #f1f5f9;
  letter-spacing: 0.04em;
  margin: 0;
  text-shadow: 0 0 24px rgba(147, 51, 234, 0.8);
  animation: titleDramaticEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ww-cinematic-subtitle {
  font-size: 1.05rem;
  color: #c084fc;
  font-weight: 600;
  margin: 0;
  animation: subtitleFadeIn 1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ww-cinematic-eyes-icon {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.6rem;
  margin-top: 10px;
}

.ww-cinematic-eyes-icon .sleep-z {
  font-size: 1rem;
  font-weight: 800;
  color: #fbbf24;
  animation: zzzBounce 1.5s infinite;
}

@keyframes zzzBounce {
  0% { transform: translateY(0) scale(0.8); opacity: 0.4; }
  50% { transform: translateY(-10px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-18px) scale(1.3); opacity: 0; }
}

/* Mode Wake : Le village se réveille */
.ww-cinematic-overlay.mode-wake {
  background: radial-gradient(circle at 50% 30%, rgba(245, 158, 11, 0.95), rgba(30, 20, 10, 0.98) 80%);
}

.ww-cinematic-sun-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.9) 0%, rgba(245, 158, 11, 0.4) 50%, transparent 75%);
  filter: blur(30px);
  animation: sunGlowRay 2.5s infinite alternate;
}

@keyframes sunGlowRay {
  from { transform: translate(-50%, -50%) scale(0.85); opacity: 0.7; }
  to { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.ww-sun-sphere {
  font-size: 4rem;
  animation: sunRise 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 30px rgba(245, 158, 11, 0.9));
}

@keyframes sunRise {
  from { transform: translateY(50px) scale(0.5); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.ww-cinematic-deaths-banner {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(239, 68, 68, 0.5);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fca5a5;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
  margin-top: 8px;
}

@keyframes titleDramaticEntrance {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes subtitleFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Avatars endormis pendant la nuit */
.ww-player-card.is-sleeping-avatar {
  filter: saturate(0.7) brightness(0.85);
}

.ww-sleep-badge-overlay {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 1rem;
  background: #1e1b4b;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(147, 51, 234, 0.6);
  animation: zzzBounce 2s infinite;
}

.ww-lover-badge {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: #fff;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 6px;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
  animation: heartPulse 1.8s infinite;
}

.ww-lover-heart-overlay {
  position: absolute;
  bottom: -4px;
  left: -4px;
  font-size: 1.1rem;
  animation: heartPulse 1.4s infinite;
}

@keyframes heartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.gartic-gallery-reaction-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 16px;
  border-radius: 999px;
  margin: 0 auto;
}

.reaction-label {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 700;
}

.reaction-buttons {
  display: flex;
  gap: 6px;
}

.btn-emoji-react {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.btn-emoji-react:hover {
  transform: scale(1.25);
  background: rgba(255, 255, 255, 0.2);
}

/* ========================================================
   NEON CONNECT 4 BATTLE DESIGN STYLES
   ======================================================== */
.nc-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  color: #fff;
}

.nc-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: rgba(18, 14, 32, 0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 18px;
  border-radius: 16px;
  gap: 10px;
}

.nc-player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}

.nc-player-card.is-turn {
  border-color: var(--p-color);
  box-shadow: 0 0 16px var(--p-glow);
  transform: scale(1.04);
}

.nc-avatar-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 2px;
  border: 2px solid var(--p-color);
  box-shadow: 0 0 10px var(--p-glow);
}

.nc-avatar-ring img, .nc-fallback-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.nc-fallback-avatar {
  background: var(--p-color);
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
}

.nc-player-text {
  display: flex;
  flex-direction: column;
}

.nc-player-text.right {
  text-align: right;
}

.nc-p-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nc-player-text.right .nc-p-name {
  justify-content: flex-end;
}

.nc-you-badge {
  font-size: 0.62rem;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #fff;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 900;
  letter-spacing: 0.05em;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.nc-player-token-badge {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nc-player-token-badge .nc-token {
  width: 24px;
  height: 24px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.nc-p-score {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 700;
}

.nc-timer-pill, .nc-win-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  font-weight: 800;
  font-size: 0.85rem;
}

.nc-win-pill {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
  border: none;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
  animation: winPillPulse 1.4s infinite alternate;
}

@keyframes winPillPulse {
  from { transform: scale(0.96); box-shadow: 0 0 14px rgba(16, 185, 129, 0.5); }
  to { transform: scale(1.04); box-shadow: 0 0 26px rgba(16, 185, 129, 0.8); }
}

.nc-turn-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: turnPulse 1.2s infinite alternate;
}

.nc-turn-token-mini {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

.nc-turn-token-mini.val-1 {
  background: radial-gradient(circle at 35% 35%, #7dd3fc, #0284c7 65%, #0369a1);
  border: 1px solid #bae6fd;
}

.nc-turn-token-mini.val-2 {
  background: radial-gradient(circle at 35% 35%, #fda4af, #e11d48 65%, #9f1239);
  border: 1px solid #fecdd3;
}

.nc-turn-token-mini .nc-token-inner-icon {
  font-size: 0.65rem;
}

@keyframes turnPulse {
  from { opacity: 0.5; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1.2); }
}

.nc-sec-txt {
  color: #fef08a;
  font-size: 0.9rem;
}

/* Plateau de Puissance 4 */
.nc-board-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nc-drop-arrows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  max-width: 480px;
  gap: 8px;
  padding: 0 10px;
}

.nc-col-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.2s;
}

.nc-col-btn.is-active:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-3px);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6);
}

.nc-col-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.nc-grid-frame {
  background: radial-gradient(circle at 50% 30%, #1e153b, #0b0718);
  border: 3px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(139, 92, 246, 0.3);
  border-radius: 20px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 7 / 6;
}

.nc-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  flex: 1;
}

.nc-slot {
  background: #090514;
  border-radius: 50%;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.nc-token {
  width: 86%;
  height: 86%;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nc-token.val-0 {
  background: transparent;
}

/* Jeton Joueur 1 (Cyan) */
.nc-token.val-1 {
  background: radial-gradient(circle at 35% 35%, #7dd3fc, #0284c7 65%, #0369a1);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  border: 1.5px solid #bae6fd;
}

/* Jeton Joueur 2 (Rose) */
.nc-token.val-2 {
  background: radial-gradient(circle at 35% 35%, #fda4af, #e11d48 65%, #9f1239);
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  border: 1.5px solid #fecdd3;
}

/* Animation chute de jeton */
.nc-token.is-drop-anim {
  animation: tokenDropBounce 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes tokenDropBounce {
  0% { transform: translateY(-300%) scale(0.9); opacity: 0.5; }
  75% { transform: translateY(0) scale(1.08, 0.92); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

/* Alignement gagnant étincelant */
.nc-token.is-winning {
  animation: winTokenGlow 0.8s infinite alternate;
  border-color: #fff !important;
  z-index: 5;
}

@keyframes winTokenGlow {
  from { transform: scale(1); filter: brightness(1); box-shadow: 0 0 14px #fff; }
  to { transform: scale(1.15); filter: brightness(1.4); box-shadow: 0 0 28px #fff, 0 0 45px #38bdf8; }
}

.nc-bottom-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ==========================================================
   SKINS DE JETONS PUISSANCE 4 NÉON (CUSTOM TOKEN SKINS)
========================================================== */

.nc-token-inner-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border-radius: 50%;
  pointer-events: none;
}

/* 1. Jeton Lingot Doré */
.nc-token.nc-token-skin-token_gold {
  background: radial-gradient(circle at 35% 30%, #fef08a, #eab308 55%, #854d0e 95%) !important;
  border: 2px solid #fef08a !important;
  box-shadow: 0 0 18px rgba(234, 179, 8, 0.9), inset 0 2px 6px rgba(255, 255, 255, 0.8) !important;
  animation: tokenGoldShine 2s infinite alternate;
}
.nc-token.nc-token-skin-token_gold .nc-token-inner-icon::after {
  content: '👑';
  font-size: 0.85rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

@keyframes tokenGoldShine {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.25) contrast(1.1); box-shadow: 0 0 24px rgba(250, 204, 21, 1), inset 0 2px 8px rgba(255, 255, 255, 0.9) !important; }
}

/* 2. Jeton Brasier Ardent */
.nc-token.nc-token-skin-token_fire {
  background: radial-gradient(circle at 35% 30%, #ffedd5, #f97316 45%, #b91c1c 85%, #450a0a) !important;
  border: 2px solid #fdba74 !important;
  box-shadow: 0 0 20px rgba(234, 88, 12, 0.95), inset 0 2px 6px rgba(255, 255, 255, 0.8) !important;
  animation: tokenFirePulse 1.2s infinite alternate;
}
.nc-token.nc-token-skin-token_fire .nc-token-inner-icon::after {
  content: '🔥';
  font-size: 0.9rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

@keyframes tokenFirePulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 6px #f97316); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 14px #ea580c); box-shadow: 0 0 26px rgba(249, 115, 22, 1) !important; }
}

/* 3. Jeton Matrix Cyberpunk */
.nc-token.nc-token-skin-token_cyber {
  background: radial-gradient(circle at 35% 30%, #a5f3fc, #06b6d4 50%, #0e7490 85%, #083344) !important;
  border: 2px solid #22d3ee !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.9), inset 0 2px 6px rgba(255, 255, 255, 0.8) !important;
}
.nc-token.nc-token-skin-token_cyber .nc-token-inner-icon::after {
  content: '⚡';
  font-size: 0.9rem;
  filter: drop-shadow(0 0 4px #22d3ee);
}

/* 4. Jeton Plasma Cosmique */
.nc-token.nc-token-skin-token_plasma {
  background: radial-gradient(circle at 35% 30%, #f3e8ff, #a855f7 50%, #6b21a8 85%, #3b0764) !important;
  border: 2px solid #d8b4fe !important;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.95), inset 0 2px 6px rgba(255, 255, 255, 0.8) !important;
}
.nc-token.nc-token-skin-token_plasma .nc-token-inner-icon::after {
  content: '✨';
  font-size: 0.9rem;
  filter: drop-shadow(0 0 5px #c084fc);
}

/* 5. Jeton Jade Millénaire */
.nc-token.nc-token-skin-token_emerald {
  background: radial-gradient(circle at 35% 30%, #d1fae5, #10b981 50%, #047857 85%, #022c22) !important;
  border: 2px solid #6ee7b7 !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.9), inset 0 2px 6px rgba(255, 255, 255, 0.8) !important;
}
.nc-token.nc-token-skin-token_emerald .nc-token-inner-icon::after {
  content: '🛡️';
  font-size: 0.85rem;
}

/* 6. Jeton Rubis Laser */
.nc-token.nc-token-skin-token_ruby {
  background: radial-gradient(circle at 35% 30%, #ffe4e6, #e11d48 50%, #9f1239 85%, #4c0519) !important;
  border: 2px solid #fda4af !important;
  box-shadow: 0 0 20px rgba(225, 29, 72, 0.95), inset 0 2px 6px rgba(255, 255, 255, 0.8) !important;
}
.nc-token.nc-token-skin-token_ruby .nc-token-inner-icon::after {
  content: '💎';
  font-size: 0.85rem;
}

/* SHOP PREVIEW ICONS FOR TOKENS */
.shop-card-icon-wrapper.token-preview-icon {
  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.15), rgba(15, 23, 42, 0.8));
  border-color: rgba(56, 189, 248, 0.35);
}

.nc-token-preview {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 1.4rem;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
}

.nc-token-preview.nc-token-skin-token_gold {
  background: radial-gradient(circle at 35% 30%, #fef08a, #eab308 55%, #854d0e 95%);
  border: 2px solid #fef08a;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.8);
}
.nc-token-preview.nc-token-skin-token_fire {
  background: radial-gradient(circle at 35% 30%, #ffedd5, #f97316 45%, #b91c1c 85%, #450a0a);
  border: 2px solid #fdba74;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.8);
}
.nc-token-preview.nc-token-skin-token_cyber {
  background: radial-gradient(circle at 35% 30%, #a5f3fc, #06b6d4 50%, #0e7490 85%, #083344);
  border: 2px solid #22d3ee;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.8);
}
.nc-token-preview.nc-token-skin-token_plasma {
  background: radial-gradient(circle at 35% 30%, #f3e8ff, #a855f7 50%, #6b21a8 85%, #3b0764);
  border: 2px solid #d8b4fe;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.8);
}
.nc-token-preview.nc-token-skin-token_emerald {
  background: radial-gradient(circle at 35% 30%, #d1fae5, #10b981 50%, #047857 85%, #022c22);
  border: 2px solid #6ee7b7;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.8);
}
.nc-token-preview.nc-token-skin-token_ruby {
  background: radial-gradient(circle at 35% 30%, #ffe4e6, #e11d48 50%, #9f1239 85%, #4c0519);
  border: 2px solid #fda4af;
  box-shadow: 0 0 16px rgba(225, 29, 72, 0.8);
}

/* THEMES DE PLATEAU & ARÈNE */
.shop-card-icon.theme-skin-theme_synthwave {
  background: linear-gradient(135deg, #f43f5e 0%, #a855f7 50%, #3b82f6 100%);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.6);
  color: #fff;
}
.shop-card-icon.theme-skin-theme_matrix {
  background: linear-gradient(135deg, #052e16 0%, #10b981 50%, #064e3b 100%);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.6);
  color: #a7f3d0;
}
.shop-card-icon.theme-skin-theme_cosmic {
  background: linear-gradient(135deg, #1e1b4b 0%, #6366f1 50%, #a855f7 100%);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.6);
  color: #e0e7ff;
}

/* Application en jeu sur le plateau Neon Connect */
.nc-wrapper.nc-theme-theme_synthwave .nc-board {
  background: linear-gradient(180deg, rgba(30, 10, 45, 0.95), rgba(76, 29, 149, 0.85)) !important;
  border-color: #ec4899 !important;
  box-shadow: 0 0 35px rgba(236, 72, 153, 0.5), inset 0 0 25px rgba(168, 85, 247, 0.3) !important;
}
.nc-wrapper.nc-theme-theme_matrix .nc-board {
  background: linear-gradient(180deg, rgba(5, 25, 15, 0.96), rgba(6, 78, 59, 0.88)) !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 35px rgba(16, 185, 129, 0.55), inset 0 0 25px rgba(5, 150, 105, 0.35) !important;
}
.nc-wrapper.nc-theme-theme_cosmic .nc-board {
  background: linear-gradient(180deg, rgba(15, 15, 45, 0.96), rgba(49, 46, 129, 0.88)) !important;
  border-color: #818cf8 !important;
  box-shadow: 0 0 35px rgba(129, 140, 248, 0.55), inset 0 0 25px rgba(99, 102, 241, 0.35) !important;
}

/* ANIMATIONS VICTOIRE MVP SPECTACULAIRE */
.victory-modal-card {
  animation: mvpCardPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  border: 1px solid rgba(250, 204, 21, 0.45) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 80px rgba(234, 179, 8, 0.25) !important;
}

@keyframes mvpCardPop {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.podium-slot.rank-1 .podium-avatar {
  border: 3px solid #facc15 !important;
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.75), 0 0 50px rgba(234, 179, 8, 0.35) !important;
  animation: mvpCrownPulse 2s infinite ease-in-out;
}

@keyframes mvpCrownPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.7);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 35px rgba(250, 204, 21, 0.95);
  }
}

.achieve-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.achieve-badge.unlocked {
  background: rgba(250, 204, 21, 0.08);
  border-color: rgba(250, 204, 21, 0.35);
}
.achieve-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(250, 204, 21, 0.6);
}
.achieve-badge .ach-icon {
  font-size: 1.25rem;
  color: #facc15;
}
.achieve-badge .ach-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f1f5f9;
}

/* ==========================================================
   THÈMES DE PLATEAU PUISSANCE 4 NÉON
========================================================== */

/* 1. Thème Synthwave 80s */
.nc-grid-frame.nc-board-theme-theme_synthwave {
  background: radial-gradient(circle at 50% 25%, #2c0e3a, #0d0218 80%) !important;
  border: 3px solid #f43f5e !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(244, 63, 94, 0.4), inset 0 0 20px rgba(168, 85, 247, 0.3) !important;
}
.nc-grid-frame.nc-board-theme-theme_synthwave .nc-slot {
  background: #140420 !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(244, 63, 94, 0.2) !important;
}

/* 2. Thème Matrix Cyber */
.nc-grid-frame.nc-board-theme-theme_matrix {
  background: radial-gradient(circle at 50% 30%, #032114, #010a05 85%) !important;
  border: 3px solid #10b981 !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(16, 185, 129, 0.45), inset 0 0 25px rgba(5, 150, 105, 0.25) !important;
}
.nc-grid-frame.nc-board-theme-theme_matrix .nc-slot {
  background: #020f08 !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(16, 185, 129, 0.25) !important;
}

/* 3. Thème Nébuleuse Astrale */
.nc-grid-frame.nc-board-theme-theme_cosmic {
  background: radial-gradient(circle at 50% 35%, #1e1045, #08031a 90%) !important;
  border: 3px solid #8b5cf6 !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 40px rgba(139, 92, 246, 0.5), inset 0 0 30px rgba(56, 189, 248, 0.2) !important;
}
.nc-grid-frame.nc-board-theme-theme_cosmic .nc-slot {
  background: #09031d !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(139, 92, 246, 0.25) !important;
}

/* ==========================================================
   QUICK PINGS MENU & FLOATING SPEECH BUBBLES
========================================================== */

.quick-ping-popup-menu {
  position: fixed;
  bottom: 85px;
  right: 20px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.35);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  padding: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  animation: pingMenuIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pingMenuIn {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.quick-ping-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: #f1f5f9;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.quick-ping-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateX(4px);
  color: #fff;
}

.quick-ping-btn i {
  font-size: 1.15rem;
}

/* Bulles volantes de ping en plein jeu */
.quick-ping-bubble-float {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(250, 204, 21, 0.45);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(234, 179, 8, 0.25);
  border-radius: 30px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10000;
  pointer-events: none;
  animation: pingBubblePop 3.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pingBubblePop {
  0% { opacity: 0; transform: translate(-50%, 25px) scale(0.85); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
  20% { transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(0.9); }
}

.quick-ping-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #facc15;
  object-fit: cover;
}

.quick-ping-fallback-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.quick-ping-author {
  font-size: 0.75rem;
  font-weight: 800;
  color: #facc15;
}

.quick-ping-content {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================
   MODE CINÉMA / IMMERSION MAXIMALE
========================================================== */
body.cinema-mode-active {
  overflow-x: hidden !important;
}

body.cinema-mode-active .hero-card,
body.cinema-mode-active .games-section-header,
body.cinema-mode-active .app-footer,
body.cinema-mode-active .hub-fx {
  display: none !important;
}

body.cinema-mode-active .navbar {
  margin-bottom: 8px !important;
  padding: 6px 14px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(12px) !important;
}

body.cinema-mode-active #btn-navbar-fullscreen {
  background: linear-gradient(135deg, #facc15, #f59e0b) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border: 1px solid #fef08a !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.6) !important;
}

body.cinema-mode-active #btn-navbar-fullscreen i {
  color: #0f172a !important;
}

body.cinema-mode-active .app-container {
  padding: 8px 12px 24px !important;
  max-width: 100vw !important;
  width: 100vw !important;
  margin: 0 !important;
}

body.cinema-mode-active .game-arena-overlay {
  padding: 4px 8px !important;
}

body.cinema-mode-active .arena-header {
  margin-bottom: 4px !important;
  padding: 4px 12px !important;
}

body.cinema-mode-active .nc-wrapper {
  transform: scale(1.05);
  transform-origin: center top;
}

/* Bouton d'action flottant Quitter Immersion visible même si en plein jeu */
.cinema-exit-floating-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100000;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  border: 2px solid #fff;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.85), 0 0 20px rgba(250, 204, 21, 0.7);
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cinema-exit-floating-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.9), 0 0 30px rgba(250, 204, 21, 1);
}

body.cinema-mode-active .cinema-exit-floating-btn {
  display: inline-flex !important;
}

/* ==========================================================
   ADAPTATION RESPONSIVE FLUIDE (DEMI-ÉCRAN / FENÊTRE RÉDUITE / MOBILE)
========================================================== */

/* 1. Écrans réduits ou fenêtres à moitié ouvertes (<= 880px) */
@media (max-width: 880px) {
  .app-container {
    padding: 12px 12px 50px !important;
  }
  .navbar {
    padding: 8px 14px !important;
    gap: 8px !important;
  }
  .navbar-actions .btn {
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
  }
  .hero-card {
    padding: 22px 18px !important;
    min-height: auto !important;
  }
  .hero-card h1 {
    font-size: 22px !important;
  }
  .hero-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .hero-actions .btn {
    padding: 8px 14px !important;
    font-size: 0.82rem !important;
  }
}

/* 2. Adaptation fluide du plateau Puissance 4 et Arène */
.nc-wrapper {
  width: 100% !important;
  max-width: min(92vw, 480px) !important;
  margin: 0 auto !important;
}

.nc-board-outer {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.nc-drop-arrows {
  width: 100% !important;
  max-width: 100% !important;
  gap: clamp(4px, 1.2vw, 8px) !important;
}

.nc-col-btn {
  height: clamp(28px, 6vw, 36px) !important;
  font-size: clamp(0.85rem, 2.5vw, 1.1rem) !important;
}

.nc-grid-frame {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(6px, 1.8vw, 12px) !important;
  gap: clamp(4px, 1.2vw, 8px) !important;
  aspect-ratio: 7 / 6 !important;
}

.nc-row {
  gap: clamp(4px, 1.2vw, 8px) !important;
}

.nc-bottom-bar {
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
}

.nc-bottom-bar .btn {
  padding: 8px 14px !important;
  font-size: clamp(0.75rem, 2.5vw, 0.85rem) !important;
}

/* 3. Fenêtres très étroites / Mobiles verticaux (<= 560px) */
@media (max-width: 560px) {
  .brand-title {
    font-size: 13.5px !important;
  }
  .navbar-actions .btn .lb-label {
    display: none !important;
  }
  .voice-status {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
  }
  .user-badge {
    padding: 4px 6px !important;
  }
  .nc-header-bar {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .nc-player-card {
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .nc-avatar-ring {
    width: 32px !important;
    height: 32px !important;
  }
  .nc-p-name {
    font-size: 0.8rem !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .nc-p-score {
    font-size: 0.68rem !important;
  }
  .nc-timer-pill, .nc-win-pill {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
  }
}

/* 4. Hauteur d'écran réduite (Fenêtre Discord écrasée / Paysage mobile) */
@media (max-height: 580px) {
  .arena-header {
    padding: 4px 10px !important;
    margin-bottom: 4px !important;
  }
  .nc-wrapper {
    gap: 8px !important;
  }
  .nc-header-bar {
    padding: 4px 8px !important;
  }
  .nc-col-btn {
    height: 24px !important;
  }
  .nc-grid-frame {
    max-height: 52vh !important;
    width: auto !important;
    aspect-ratio: 7 / 6 !important;
  }
  .nc-bottom-bar {
    gap: 6px !important;
  }
  .nc-bottom-bar .btn {
    padding: 4px 10px !important;
  }
}

html, body {
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh;
}

body.modal-open,
body.in-game-overlay-open {
  overflow: hidden !important;
  height: 100vh !important;
}

.game-arena-overlay {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

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

.arena-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.game-stage-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 16px 12px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 191, 36, 0.4) rgba(20, 14, 10, 0.9);
}

.squad-lobby {
  width: min(880px, 98%) !important;
  max-width: 880px !important;
  margin: auto !important;
  max-height: none !important;
  padding: clamp(20px, 3.5vh, 36px) clamp(16px, 3.5vw, 36px) !important;
  flex-shrink: 0;
  box-sizing: border-box !important;
  background: radial-gradient(circle at 50% 0%, rgba(255, 140, 20, 0.15) 0%, rgba(26, 17, 12, 0.95) 70%, rgba(14, 9, 6, 0.98) 100%) !important;
  border: 1px solid rgba(255, 160, 50, 0.3) !important;
  border-radius: 26px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 220, 160, 0.15), 0 0 45px rgba(255, 110, 0, 0.12) !important;
  backdrop-filter: blur(20px) !important;
}

.squad-lobby h2 {
  font-family: Orbitron, sans-serif !important;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, #ffffff 0%, #ffdfba 45%, #f59e0b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 4px 20px rgba(245, 158, 11, 0.3) !important;
  margin: 6px 0 10px !important;
}

.squad-lobby .lobby-copy {
  color: #c9b1a2 !important;
  font-size: clamp(0.82rem, 1.4vw, 0.92rem) !important;
  max-width: 600px !important;
  margin: 0 auto 18px !important;
  line-height: 1.5 !important;
}

.squad-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin: 18px 0 !important;
}

@media (max-width: 768px) {
  .squad-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

.squad-slot {
  background: linear-gradient(165deg, rgba(42, 28, 20, 0.75) 0%, rgba(20, 13, 9, 0.88) 100%) !important;
  border: 1px solid rgba(255, 160, 50, 0.22) !important;
  border-radius: 18px !important;
  padding: 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  min-height: 140px !important;
  box-sizing: border-box !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.squad-slot:not(.empty):hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 180, 70, 0.6) !important;
  box-shadow: 0 14px 32px rgba(255, 120, 20, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.squad-slot.empty {
  background: rgba(22, 15, 11, 0.4) !important;
  border: 1.5px dashed rgba(255, 170, 80, 0.22) !important;
  color: #a88d7b !important;
  cursor: pointer !important;
}

.squad-slot.empty:hover {
  background: rgba(255, 140, 20, 0.08) !important;
  border-color: rgba(255, 180, 80, 0.6) !important;
  color: #ffdfba !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
}

.squad-slot.empty .empty-plus {
  font-size: 1.6rem !important;
  color: #f59e0b !important;
  margin-bottom: 6px !important;
  transition: transform 0.25s !important;
  font-weight: 900 !important;
}

.squad-slot.empty:hover .empty-plus {
  transform: rotate(90deg) scale(1.2) !important;
  color: #fbbf24 !important;
}

.squad-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  margin: 0 auto 10px !important;
  box-shadow: 0 6px 18px rgba(255, 110, 0, 0.35) !important;
  border: 2px solid rgba(255, 200, 100, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
}

.squad-name {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #fffaf0 !important;
  margin-bottom: 3px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.squad-role {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #ffb86c !important;
}

.lobby-summary {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 12px 0 16px !important;
  flex-wrap: wrap !important;
}

.lobby-summary span {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 160, 50, 0.25) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  color: #fde68a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Modale Règles & Aide améliorée */
.howto-modal-card {
  width: min(720px, 96%) !important;
  max-width: 720px !important;
  text-align: left !important;
  padding: 24px 28px !important;
}

.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.howto-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 170, 80, 0.2);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.2s, border-color 0.2s;
}

.howto-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 190, 110, 0.5);
  background: rgba(255, 255, 255, 0.07);
}

.howto-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff7700, #ffb703);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #140d08;
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.howto-card-title {
  font-weight: 800;
  font-size: 0.92rem;
  color: #fffaf0;
}

.howto-card-desc {
  font-size: 0.78rem;
  color: #bfa597;
  line-height: 1.4;
  margin: 0 !important;
}

.howto-tips {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #bae6fd;
  font-size: 0.82rem;
}

/* ========================================================
   MODE PERFORMANCE & HUB COMPACT ADAPTATIF
   ======================================================== */
body.performance-mode .hub-fx,
body.performance-mode .aurora,
body.performance-mode .grain,
body.performance-mode .spot {
  display: none !important;
}

body.performance-mode * {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.performance-mode .floating-reactions-dock,
body.performance-mode .modal-card,
body.performance-mode .quick-ping-popup-menu {
  background: #111422 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.compact-hub-mode .games-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}

body.compact-hub-mode .game-card {
  padding: 10px !important;
}

body.compact-hub-mode .game-card-banner {
  height: 90px !important;
}

body.compact-hub-mode .hub-header {
  padding: 8px 16px !important;
}

body.compact-hub-mode .hub-container {
  padding: 10px 14px !important;
}

.quick-ping-popup-menu {
  position: fixed;
  bottom: 82px;
  right: 24px;
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 10005;
  width: auto;
  min-width: 200px;
  max-width: 260px;
  animation: pingMenuIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pingMenuIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.quick-ping-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 10px;
  color: #f1f5f9;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.quick-ping-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  transform: translateX(3px);
}

.quick-ping-bubble-float {
  position: fixed;
  bottom: 86px;
  right: 24px;
  width: auto !important;
  height: auto !important;
  max-width: 300px;
  min-width: 170px;
  box-sizing: border-box;
  z-index: 10010;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 30px;
  padding: 8px 14px;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  animation: pingBubblePop 3.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pingBubblePop {
  0% { opacity: 0; transform: translateY(16px) scale(0.9); }
  12% { opacity: 1; transform: translateY(0) scale(1.02); }
  20% { transform: translateY(0) scale(1); }
  82% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(0.92); }
}

.quick-ping-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #38bdf8;
  flex-shrink: 0;
  display: block;
}

.quick-ping-fallback-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.quick-ping-author {
  font-size: 0.68rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.quick-ping-content {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
}

/* DUEL COMPARISON CARDS */
.duel-compare-box {
  transition: all 0.25s ease;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 27, 75, 0.5)) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.duel-compare-versus-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(15, 23, 42, 0.8) 50%, rgba(244, 63, 94, 0.12) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px;
  animation: duelFadeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

@keyframes duelFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.duel-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.duel-avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid #38bdf8;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
  background: #0f172a;
}

.duel-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duel-vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.25rem;
  color: #facc15;
  text-shadow: 0 0 14px rgba(250, 204, 21, 0.7);
  letter-spacing: 0.05em;
}

.duel-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 8px;
}

.duel-stat-row strong {
  color: #fff;
  font-family: Orbitron, Inter, sans-serif;
  letter-spacing: 0.03em;
}

/* ========================================================
   1. WORD BOMB : Live Typing Bubble
   ======================================================== */
.wb-live-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.4);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 9999px;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
  margin-bottom: 8px;
  animation: wbLiveTypingPulse 1.2s infinite ease-in-out;
}
.wb-live-typing-bubble .typing-dots {
  color: #ef4444;
  font-size: 0.9rem;
  animation: wbDotsBounce 1s infinite;
}
.wb-live-typing-bubble .typing-text {
  font-family: monospace;
  font-weight: 800;
  font-size: 0.95rem;
  color: #f8fafc;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
@keyframes wbLiveTypingPulse {
  0%, 100% { transform: scale(1); border-color: rgba(239, 68, 68, 0.4); }
  50% { transform: scale(1.04); border-color: rgba(239, 68, 68, 0.8); }
}
@keyframes wbDotsBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ========================================================
   2. WEREWOLF : Accusations & Gallows Dramatic Verdict
   ======================================================== */
.ww-player-card.is-accused {
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5) !important;
  animation: wwAccusedPulse 1.5s infinite;
}
@keyframes wwAccusedPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(239, 68, 68, 0.4); }
  50% { transform: scale(1.03); box-shadow: 0 0 24px rgba(239, 68, 68, 0.8); }
}
.ww-accused-pointer-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6);
  z-index: 5;
  animation: wwAccuseBounce 0.8s infinite alternate;
}
@keyframes wwAccuseBounce {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}
.ww-accused-by-names {
  font-size: 0.65rem;
  color: #f87171;
  font-weight: 700;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Gallows Overlay Cinématique */
.ww-cinematic-overlay.mode-gallows {
  background: radial-gradient(circle at center, rgba(30, 10, 15, 0.96) 0%, rgba(5, 5, 10, 0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.ww-gallows-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 440px;
  padding: 24px;
}
.ww-gallows-noose {
  font-size: 3rem;
  color: #ef4444;
  text-shadow: 0 0 30px rgba(239, 68, 68, 0.8);
  animation: wwNooseSway 2s ease-in-out infinite alternate;
}
@keyframes wwNooseSway {
  from { transform: rotate(-8deg); }
  to { transform: rotate(8deg); }
}
.ww-gallows-title {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #fca5a5;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}
.ww-gallows-victim-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffffff;
}
.ww-gallows-card-flipper {
  width: 180px;
  height: 240px;
  perspective: 1000px;
  margin: 12px 0;
}
.ww-gallows-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.ww-gallows-card-flipper.is-flipped .ww-gallows-card-inner {
  transform: rotateY(180deg);
}
.ww-gallows-card-front, .ww-gallows-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.15);
}
.ww-gallows-card-front {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #94a3b8;
  font-size: 2.5rem;
  gap: 12px;
}
.ww-gallows-card-front span {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
}
.ww-gallows-card-back {
  background: linear-gradient(135deg, #18181b, #09090b);
  transform: rotateY(180deg);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  gap: 10px;
}
.ww-gallows-role-icon {
  font-size: 3.2rem;
}
.ww-gallows-role-name {
  font-size: 1.2rem;
  font-weight: 900;
}
.ww-gallows-role-team {
  font-size: 0.8rem;
  font-weight: 700;
  color: #cbd5e1;
}
.ww-gallows-quote {
  font-style: italic;
  font-size: 0.85rem;
  color: #94a3b8;
}

/* ========================================================
   3. GARTIC CHAIN : Drawing Preview & 5s Timelapse Replay
   ======================================================== */
.gartic-drawing-preview-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.gartic-gallery-canvas-replay {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.gartic-replay-btn {
  margin-top: 8px;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #38bdf8 !important;
  transition: all 0.2s ease;
}
.gartic-replay-btn:hover {
  background: rgba(56, 189, 248, 0.2) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

/* ========================================================
   4. NEON CONNECT 4 : Special Moves & Frozen Column
   ======================================================== */
.nc-powers-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 27, 75, 0.8));
  border: 1px solid rgba(250, 204, 21, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(250, 204, 21, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 16px;
  border-radius: 14px;
  margin-bottom: 14px;
  width: 100%;
  max-width: 580px;
  flex-wrap: wrap;
}
.nc-powers-label {
  font-size: 0.78rem;
  font-weight: 900;
  color: #facc15;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}
.nc-powers-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nc-powers-buttons .btn {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.nc-powers-buttons .btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}
.nc-col-btn.is-frozen-col {
  background: rgba(56, 189, 248, 0.3) !important;
  border-color: #38bdf8 !important;
  color: #bae6fd !important;
  cursor: not-allowed !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5) !important;
  animation: ncFrozenPulse 1.2s infinite alternate;
}
@keyframes ncFrozenPulse {
  from { opacity: 0.7; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.02); }
}
.nc-slot.is-frozen-slot {
  position: relative;
}
.nc-slot.is-frozen-slot::before {
  content: '❄️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  z-index: 10;
  pointer-events: none;
  opacity: 0.85;
}

/* ========================================================
   5. CROW CARDS : Floating Random Panic Buttons (UNO & Contre-UNO)
   ======================================================== */
.btn-uno-blast.is-floating-panic {
  position: fixed !important;
  top: var(--rand-top, 50%) !important;
  left: var(--rand-left, 50%) !important;
  transform: translate(-50%, -50%) scale(1.15) !important;
  z-index: 10005 !important;
  animation: unoPanicShake 0.45s infinite alternate cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.95), 0 0 70px rgba(245, 158, 11, 0.75), 0 10px 30px rgba(0, 0, 0, 0.9) !important;
  border: 3px solid #facc15 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}
@keyframes unoPanicShake {
  0% { transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); filter: drop-shadow(0 0 12px #ef4444); }
  50% { transform: translate(-50%, -50%) scale(1.22) rotate(4deg); filter: drop-shadow(0 0 28px #f59e0b); }
  100% { transform: translate(-50%, -50%) scale(1.12) rotate(-2deg); filter: drop-shadow(0 0 18px #ec4899); }
}

/* ========================================================
   6. WEREWOLF : Role Claiming & Bluff Selector
   ======================================================== */
.ww-claimed-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(126, 34, 206, 0.45));
  border: 1px solid rgba(192, 132, 252, 0.65);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
  color: #f3e8ff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.ww-claim-role-wrap {
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.ww-claim-role-select {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
  border: 1.5px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  max-width: 160px;
  outline: none;
  transition: all 0.2s ease;
}
.ww-claim-role-select:hover, .ww-claim-role-select:focus {
  border-color: #c084fc;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.5);
  color: #fff;
}

/* ========================================================
   7. GARTIC CHAIN : Oscars Voting Bar
   ======================================================== */
.gartic-oscars-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(250, 204, 21, 0.3);
  padding: 8px 14px;
  border-radius: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.oscars-title {
  font-size: 0.8rem;
  font-weight: 900;
  color: #facc15;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.oscars-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.oscar-btn {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 4px 10px !important;
}
.oscar-btn:hover {
  background: rgba(250, 204, 21, 0.2) !important;
  border-color: #facc15 !important;
}

/* ========================================================
   8. NEON CONNECT 4 : Spectator Betting Bar
   ======================================================== */
.nc-spectator-bet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 27, 75, 0.7));
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 16px;
  border-radius: 14px;
  margin-top: 12px;
  width: 100%;
  max-width: 620px;
  flex-wrap: wrap;
}
.nc-bet-label {
  font-size: 0.78rem;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
.nc-bet-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nc-bet-btn {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
}
.nc-bet-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
.nc-bet-pill {
  background: linear-gradient(135deg, #facc15, #eab308);
  color: #0f172a;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 0.68rem;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}
.nc-bet-vs {
  font-size: 0.8rem;
  font-weight: 900;
  color: #facc15;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}


/* === Visual Polish & Protection Enhancements === */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

body {
  background: radial-gradient(circle at 50% 0%, #1f140d 0%, #0c0806 70%, #060403 100%) !important;
}

.navbar {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: rgba(23, 17, 13, 0.85) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 106, 0, 0.1) !important;
  border: 1px solid rgba(255, 119, 0, 0.25) !important;
}

.game-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(77, 54, 39, 0.5) !important;
}

.game-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  border-color: rgba(255, 119, 0, 0.6) !important;
  box-shadow: 0 16px 36px -10px rgba(255, 106, 0, 0.25), 0 0 20px rgba(255, 106, 0, 0.15) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #ff7700 0%, #ea580c 50%, #c2410c 100%) !important;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.45) !important;
  transition: all 0.25s ease !important;
}

.btn-primary:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(234, 88, 12, 0.65) !important;
}


/* ==========================================================================
   CITY TYCOON — LUXURY REAL ESTATE EDITION (CSS 3D GRAND MASTER)
   ========================================================================== */

:root {
  --lux-midnight: #101827;
  --lux-slate-deep: #1B2638;
  --lux-dark-navy: #0B111B;
  --lux-gold-champagne: #D6B878;
  --lux-gold-light: #EAD7A0;
  --lux-ivory: #F3F0E8;
  --lux-soft-white: #E9EDF4;
  --lux-copper: #B98254;
  --lux-emerald: #55B895;
  --lux-crimson: #C96B6B;
}

.lux-city-stage-viewport {
  width: 100%;
  max-width: 1380px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  color: var(--lux-soft-white);
}

/* === TOP EXECUTIVE NAVIGATION BAR === */
.lux-executive-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(27, 38, 56, 0.85) 0%, rgba(16, 24, 39, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(214, 184, 120, 0.3);
  border-radius: 16px;
  padding: 8px 16px;
  box-shadow: 0 10px 30px rgba(11, 17, 27, 0.7), inset 0 1px 0 rgba(234, 215, 160, 0.2);
  margin-bottom: 8px;
  flex-shrink: 0;
  z-index: 100;
}

.lux-brand-shield {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lux-shield-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--lux-gold-champagne), var(--lux-copper));
  display: grid;
  place-items: center;
  color: var(--lux-dark-navy);
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.lux-shield-text {
  display: flex;
  flex-direction: column;
}

.lux-shield-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--lux-gold-champagne);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.lux-shield-subtitle {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #94a3b8;
}

.lux-header-roster-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  max-width: 58%;
  scrollbar-width: thin;
  padding: 2px 4px;
}

.lux-player-roster-card {
  display: flex;
  flex-direction: column;
  background: rgba(16, 24, 39, 0.75);
  border: 1px solid rgba(214, 184, 120, 0.2);
  border-radius: 12px;
  padding: 6px 12px;
  min-width: 145px;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.lux-player-roster-card.turn-spotlight {
  background: linear-gradient(145deg, rgba(27, 38, 56, 0.95), rgba(16, 24, 39, 0.98));
  border-color: var(--lux-gold-champagne);
  box-shadow: 0 0 16px rgba(214, 184, 120, 0.35), 0 6px 16px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

.lux-player-roster-card.me-indicator {
  border-left: 3px solid var(--lux-gold-champagne);
}

.lux-player-roster-card.cooked-state {
  border-color: var(--lux-crimson);
  background: rgba(201, 107, 107, 0.15);
}

.lux-pcard-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lux-pcard-avatar-pod {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background: var(--lux-slate-deep);
  border: 1.5px solid rgba(214, 184, 120, 0.4);
  display: grid;
  place-items: center;
}

.lux-pod-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.lux-pod-letter {
  font-weight: 800;
  font-size: 11px;
  color: var(--lux-gold-champagne);
}

.lux-active-glow-ring {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lux-emerald);
  box-shadow: 0 0 8px var(--lux-emerald);
  animation: pulse-beacon 1.2s infinite;
}

.lux-pcard-identity {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lux-pcard-username {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--lux-ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lux-you-badge {
  font-size: 0.58rem;
  background: rgba(214, 184, 120, 0.25);
  border: 1px solid rgba(214, 184, 120, 0.5);
  color: var(--lux-gold-light);
  padding: 0 4px;
  border-radius: 3px;
}

.lux-pcard-subdata {
  display: flex;
  gap: 6px;
  font-size: 0.64rem;
  color: #94a3b8;
}

.lux-pcard-liquidity {
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--lux-gold-light);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.lux-pcard-liquidity.negative-cash {
  color: var(--lux-crimson);
}

.currency-symbol {
  color: var(--lux-gold-champagne);
  font-size: 0.75rem;
}

.lux-turn-banner-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, var(--lux-gold-champagne), var(--lux-gold-light));
  color: var(--lux-dark-navy);
  font-size: 0.55rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.lux-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lux-header-btn-cluster {
  display: flex;
  gap: 6px;
}

.lux-header-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(16, 24, 39, 0.7);
  border: 1px solid rgba(214, 184, 120, 0.3);
  color: var(--lux-ivory);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.lux-header-action-btn:hover {
  background: rgba(27, 38, 56, 0.9);
  border-color: var(--lux-gold-champagne);
  color: var(--lux-gold-light);
  transform: translateY(-1px);
}

.lux-header-action-btn.active {
  background: rgba(214, 184, 120, 0.2);
  border-color: var(--lux-gold-champagne);
  color: var(--lux-gold-light);
}

.lux-header-action-btn.primary {
  background: linear-gradient(135deg, var(--lux-gold-champagne), var(--lux-copper));
  color: var(--lux-dark-navy);
  border: none;
  font-weight: 800;
}

.lux-header-action-btn.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* === MAIN ARENA LAYOUT (BOARD + SIDE WALLET) === */
.lux-stage-main-arena {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-height: 0;
  position: relative;
}

.lux-board-perspective-frame {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  perspective-origin: 50% 46%;
  min-width: 0;
}

.lux-board-pedestal {
  width: min(880px, 84vh, 92vw);
  height: min(880px, 84vh, 92vw);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.35fr);
  grid-template-rows: minmax(0, 1.45fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.35fr);
  gap: 3.5px;
  padding: 6px;
  background:
    radial-gradient(circle at 50% 30%, rgba(27, 38, 56, 0.92) 0%, rgba(16, 24, 39, 0.98) 65%, rgba(11, 17, 27, 1) 100%);
  border: 2px solid rgba(214, 184, 120, 0.45);
  border-radius: 20px;
  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.95),
    0 0 45px rgba(214, 184, 120, 0.15),
    inset 0 0 50px rgba(0, 0, 0, 0.8),
    inset 0 1px 2px rgba(234, 215, 160, 0.25);
  transform: rotateX(8deg) scale(0.97) translateY(-2px);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-sizing: border-box;
}

.lux-board-pedestal:hover {
  transform: rotateX(5deg) scale(0.98) translateY(-2px);
}

/* === LUXURY BOARD TILES === */
.lux-board-tile {
  background: linear-gradient(155deg, rgba(27, 38, 56, 0.95) 0%, rgba(16, 24, 39, 0.98) 70%, rgba(11, 17, 27, 1) 100%);
  border: 1px solid rgba(214, 184, 120, 0.18);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  transform-style: preserve-3d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(234, 215, 160, 0.08);
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
  cursor: pointer;
  transform: translateZ(8px);
}

.lux-board-tile:hover {
  transform: translateZ(24px) translateY(-4px);
  border-color: var(--lux-gold-champagne);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.75), 0 0 18px rgba(214, 184, 120, 0.25);
  z-index: 40;
}

.lux-board-tile.corner-tile {
  background: linear-gradient(155deg, #243247 0%, #151f2e 70%, #0d141e 100%);
  border: 1.5px solid rgba(214, 184, 120, 0.35);
}

.lux-board-tile.is-acquired {
  border-color: rgba(214, 184, 120, 0.5);
}

.lux-board-tile.is-mine {
  border-color: var(--lux-gold-champagne);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 12px rgba(214, 184, 120, 0.3);
}

.lux-board-tile.is-mortgaged {
  opacity: 0.6;
  filter: grayscale(60%);
}

.lux-board-tile.filter-mine-highlight {
  box-shadow: 0 0 24px var(--lux-gold-champagne), 0 8px 18px rgba(0, 0, 0, 0.8) !important;
  border-color: var(--lux-gold-champagne) !important;
  transform: translateZ(26px) scale(1.04) !important;
  z-index: 45;
}

.lux-board-tile.filter-dimmed {
  opacity: 0.3;
  filter: blur(0.5px) grayscale(40%);
}

.lux-tile-header-ribbon {
  height: 8px;
  width: 100%;
  flex-shrink: 0;
  border-radius: 9px 9px 0 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.lux-tile-content-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 2px 3px;
  text-align: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.lux-tile-icon-emblem {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  transform: translateZ(6px);
  padding: 2px;
}

.lux-tile-icon-emblem svg {
  width: 17px;
  height: 17px;
  display: block;
}

.lux-tile-typography {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 98%;
}

.lux-tile-title {
  font-size: clamp(0.56rem, 1.25cqi, 0.84rem);
  font-weight: 800;
  color: var(--lux-ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.lux-tag-price {
  font-size: clamp(0.5rem, 1.1cqi, 0.72rem);
  color: var(--lux-gold-light);
  font-weight: 700;
  display: flex;
  gap: 4px;
  align-items: baseline;
  white-space: nowrap;
}

.lux-tag-price .rent {
  color: #94a3b8;
  font-size: 0.86em;
}

.lux-tag-bonus {
  font-size: 0.65rem;
  color: var(--lux-emerald);
  font-weight: 800;
}

.lux-tag-desc {
  font-size: 0.58rem;
  color: #94a3b8;
}

.lux-tag-mortgaged {
  color: var(--lux-crimson);
  font-weight: 800;
  font-size: 0.58rem;
}

.lux-tile-owner-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(16, 24, 39, 0.85);
  border: 1px solid rgba(214, 184, 120, 0.4);
  border-radius: 4px;
  padding: 1px 4px;
  max-width: 94%;
}

.lux-tile-owner-chip.mine {
  border-color: var(--lux-gold-champagne);
  background: rgba(214, 184, 120, 0.2);
}

.lux-owner-avatar {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.lux-owner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.lux-owner-name {
  font-size: clamp(0.48rem, 1cqi, 0.65rem);
  color: var(--lux-gold-champagne);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lux-mortgage-stripe {
  position: absolute;
  top: 50%;
  left: -15%;
  right: -15%;
  background: var(--lux-crimson);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 900;
  text-align: center;
  transform: translateY(-50%) rotate(-18deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  z-index: 20;
  letter-spacing: 0.08em;
}

/* === LUXURY 3D BUILDINGS === */
.lux-residences-row {
  display: flex;
  gap: 2px;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%) translateZ(14px);
  z-index: 15;
}

.lux-residence-unit {
  width: 10px;
  height: 13px;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border: 1px solid var(--res-col, var(--lux-gold-champagne));
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

.lux-res-mansard {
  position: absolute;
  top: -3px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: var(--res-col, var(--lux-gold-champagne));
  border-radius: 2px 2px 0 0;
}

.lux-res-facade {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  padding: 1px;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.lux-res-wins {
  display: flex;
  gap: 1.5px;
}

.win.lit {
  width: 3px;
  height: 2.5px;
  background: var(--lux-gold-light);
  box-shadow: 0 0 2px var(--lux-gold-champagne);
}

.lux-res-door {
  width: 3px;
  height: 4px;
  background: #0f172a;
}

.lux-bldg-hotel {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) translateZ(20px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lux-hotel-crown {
  color: var(--lux-gold-champagne);
  font-size: 9px;
  line-height: 1;
  filter: drop-shadow(0 0 4px var(--lux-gold-champagne));
}

.lux-hotel-spire {
  width: 2px;
  height: 3px;
  background: var(--lux-gold-champagne);
}

.lux-hotel-roof {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid var(--lux-gold-champagne);
  border-top-width: 2px;
  padding: 1px 4px;
  border-radius: 3px 3px 0 0;
}

.lux-hotel-sign {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 6.5px;
  font-weight: 900;
  color: var(--lux-gold-light);
  letter-spacing: 0.6px;
}

.lux-hotel-penthouse, .lux-hotel-body {
  width: 20px;
  background: #1e293b;
  border: 1px solid rgba(214, 184, 120, 0.4);
  padding: 1px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lux-win-grid {
  display: flex;
  justify-content: space-evenly;
}

.lux-hotel-portico {
  width: 22px;
  height: 5px;
  background: #0f172a;
  border: 1px solid var(--lux-gold-champagne);
  border-top: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 2px;
}

.lux-pillar {
  width: 2px;
  height: 4px;
  background: var(--lux-gold-champagne);
}

.lux-entrance {
  width: 5px;
  height: 4px;
  background: var(--lux-gold-light);
  box-shadow: 0 0 4px var(--lux-gold-champagne);
}

/* === LUXURY BOARD PAWNS === */
.lux-tile-pawns-rack {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: flex;
  gap: 3px;
  z-index: 30;
}

.lux-board-pawn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--lux-gold-champagne);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 8px rgba(214, 184, 120, 0.4);
  transform: translateZ(16px);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.lux-board-pawn.is-active-turn {
  transform: translateZ(26px) scale(1.15);
  border-color: var(--lux-gold-light);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.85), 0 0 16px var(--lux-gold-champagne);
  animation: pawn-pulse 1.2s infinite alternate;
}

.lux-pawn-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.lux-pawn-initial {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}

.lux-pawn-beacon {
  position: absolute;
  top: -6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lux-gold-light);
  box-shadow: 0 0 6px var(--lux-gold-champagne);
}

/* === CENTRAL PLAZA ROTUNDA === */
.lux-center-rotunda {
  grid-row: 2 / 9;
  grid-column: 2 / 9;
  background:
    radial-gradient(circle at center, rgba(27, 38, 56, 0.75) 0%, rgba(16, 24, 39, 0.94) 75%, rgba(11, 17, 27, 0.99) 100%),
    url('/assets/city-board-realistic-3d.jpg') center center / cover no-repeat;
  border: 1.5px solid rgba(214, 184, 120, 0.35);
  border-radius: 16px;
  padding: 8px;
  transform: translateZ(16px);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(214, 184, 120, 0.15);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 50;
}

.lux-rotunda-inlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.lux-rotunda-crest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lux-crest-wreath {
  font-size: 16px;
  color: var(--lux-gold-champagne);
  filter: drop-shadow(0 0 6px var(--lux-gold-champagne));
}

.lux-rotunda-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--lux-gold-champagne);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.lux-rotunda-round-counter {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
}

/* === CSS 3D DICE ARENA === */
.lux-dice-arena-pod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  perspective: 600px;
}

.lux-dice-pair-container {
  display: flex;
  gap: 16px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lux-dice-pair-container:hover {
  transform: scale(1.08) translateZ(12px);
}

.lux-3d-die-cube {
  width: 44px;
  height: 44px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(25deg);
  transition: transform 0.4s ease;
}

.lux-dice-pair-container.rolling .lux-3d-die-cube {
  animation: die-tumble 0.15s infinite alternate ease-in-out;
}

@keyframes die-tumble {
  0% { transform: rotateX(-50deg) rotateY(60deg) rotateZ(20deg) scale(1.1); }
  50% { transform: rotateX(40deg) rotateY(-40deg) rotateZ(-30deg) scale(1.15); }
  100% { transform: rotateX(20deg) rotateY(30deg) rotateZ(45deg) scale(1.05); }
}

.lux-die-face {
  position: absolute;
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  border: 1.5px solid var(--lux-gold-champagne);
  border-radius: 9px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 4px;
  box-sizing: border-box;
}

.face-front  { transform: rotateY(0deg) translateZ(22px); }
.face-back   { transform: rotateY(180deg) translateZ(22px); }
.face-top    { transform: rotateX(90deg) translateZ(22px); }
.face-bottom { transform: rotateX(-90deg) translateZ(22px); }
.face-left   { transform: rotateY(-90deg) translateZ(22px); }
.face-right  { transform: rotateY(90deg) translateZ(22px); }

.lux-die-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--lux-copper) 0%, var(--lux-dark-navy) 100%);
  align-self: center;
  justify-self: center;
}

.pip-center       { grid-area: 2 / 2; }
.pip-top-left     { grid-area: 1 / 1; }
.pip-top-right    { grid-area: 1 / 3; }
.pip-mid-left     { grid-area: 2 / 1; }
.pip-mid-right    { grid-area: 2 / 3; }
.pip-bottom-left  { grid-area: 3 / 1; }
.pip-bottom-right { grid-area: 3 / 3; }

.lux-dice-total-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--lux-gold-light);
  background: rgba(16, 24, 39, 0.8);
  border: 1px solid rgba(214, 184, 120, 0.3);
  padding: 2px 10px;
  border-radius: 999px;
}

/* === LUXURY ACTION DOCK & BUTTONS === */
.lux-action-dock-rack {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 60;
}

.lux-action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(16, 24, 39, 0.95);
  border: 1.5px solid var(--lux-gold-champagne);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
  width: 90%;
  max-width: 480px;
}

.lux-action-panel.buy-mode {
  border-color: var(--lux-gold-champagne);
}

.lux-action-panel.upgrade-mode {
  border-color: var(--lux-emerald);
}

.lux-action-panel.prison-mode {
  border-color: var(--lux-copper);
}

.lux-action-panel.trade-mode {
  border-color: var(--lux-gold-light);
}

.action-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.action-kicker {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.action-kicker.acquire {
  background: rgba(214, 184, 120, 0.2);
  color: var(--lux-gold-champagne);
}

.action-kicker.upgrade {
  background: rgba(85, 184, 149, 0.2);
  color: var(--lux-emerald);
}

.action-kicker.prison {
  background: rgba(185, 130, 84, 0.2);
  color: var(--lux-copper);
}

.action-kicker.trade {
  background: rgba(234, 215, 160, 0.2);
  color: var(--lux-gold-light);
}

.action-headline {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--lux-ivory);
}

.action-cost {
  font-size: 0.72rem;
  color: #94a3b8;
}

.action-buttons-rack {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.btn-gold {
  background: linear-gradient(135deg, var(--lux-gold-champagne) 0%, var(--lux-copper) 100%) !important;
  color: var(--lux-dark-navy) !important;
  font-weight: 800 !important;
  border: none !important;
}

.btn-emerald {
  background: linear-gradient(135deg, var(--lux-emerald) 0%, #3d8c70 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border: none !important;
}

.btn-champagne-outline {
  background: transparent !important;
  border: 1.5px solid var(--lux-gold-champagne) !important;
  color: var(--lux-gold-light) !important;
  font-weight: 700 !important;
}

.btn-champagne-outline:hover {
  background: rgba(214, 184, 120, 0.15) !important;
}

.btn-crimson-outline {
  background: transparent !important;
  border: 1.5px solid var(--lux-crimson) !important;
  color: #fca5a5 !important;
}

.lux-grand-roll-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 10px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lux-gold-champagne) 0%, var(--lux-copper) 100%);
  border: 1.5px solid var(--lux-gold-light);
  color: var(--lux-dark-navy);
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(185, 130, 84, 0.4), 0 0 20px rgba(214, 184, 120, 0.3);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateZ(28px);
}

.lux-grand-roll-button:hover:not(:disabled) {
  transform: translateZ(34px) scale(1.05);
  box-shadow: 0 14px 30px rgba(185, 130, 84, 0.5), 0 0 25px rgba(214, 184, 120, 0.5);
}

.roll-emblem {
  font-size: 20px;
}

.roll-copy {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.roll-copy strong {
  font-size: 0.92rem;
  letter-spacing: 0.05em;
}

.roll-copy small {
  font-size: 0.65rem;
  opacity: 0.8;
}

.lux-activity-journal-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 24, 39, 0.7);
  border: 1px solid rgba(214, 184, 120, 0.15);
  border-radius: 999px;
  padding: 3px 12px;
  max-width: 92%;
  overflow: hidden;
}

.journal-icon {
  color: var(--lux-gold-champagne);
  font-size: 12px;
  flex-shrink: 0;
}

.journal-line {
  font-size: 0.72rem;
  color: var(--lux-ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === 3D LEATHER WALLET & BANKNOTES (PORTEFEUILLE 3D) === */
.lux-wallet-side-column {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lux-3d-leather-wallet {
  width: 100%;
  background: linear-gradient(145deg, #162032 0%, #0d1522 100%);
  border: 2px solid var(--lux-gold-champagne);
  border-radius: 16px;
  padding: 14px;
  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.7),
    inset 0 2px 4px rgba(234, 215, 160, 0.2),
    inset 0 -2px 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.lux-3d-leather-wallet:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--lux-gold-light);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(214, 184, 120, 0.25);
}

.lux-wallet-stitching {
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(214, 184, 120, 0.35);
  border-radius: 12px;
  pointer-events: none;
}

.lux-wallet-crest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.lux-crest-clasp {
  width: 14px;
  height: 8px;
  background: linear-gradient(180deg, var(--lux-gold-light), var(--lux-copper));
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.lux-crest-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--lux-gold-champagne);
}

.lux-wallet-money-fan {
  display: flex;
  justify-content: center;
  height: 54px;
  position: relative;
  margin-bottom: 10px;
}

.lux-banknote {
  width: 62px;
  height: 38px;
  border-radius: 4px;
  position: absolute;
  top: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--rot)) translateX(var(--tx));
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 5px;
  box-sizing: border-box;
  font-size: 9px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  transition: transform 0.2s ease;
}

.lux-3d-leather-wallet:hover .lux-banknote {
  transform: rotate(var(--rot)) translateX(var(--tx)) translateY(-4px);
}

.lux-banknote.note-gold {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  border-color: #fef08a;
  z-index: 10;
}

.lux-banknote.note-teal {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  border-color: #99f6e4;
  z-index: 9;
}

.lux-banknote.note-copper {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  border-color: #fed7aa;
  z-index: 8;
}

.lux-banknote.note-slate {
  background: linear-gradient(135deg, #475569 0%, #64748b 100%);
  border-color: #cbd5e1;
  z-index: 7;
}

.lux-wallet-balance-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  background: rgba(11, 17, 27, 0.7);
  border: 1px solid rgba(214, 184, 120, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
}

.balance-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
}

.balance-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--lux-gold-light);
}

.balance-amount.deficit {
  color: var(--lux-crimson);
}

.wallet-networth {
  font-size: 0.68rem;
  color: #cbd5e1;
  margin-top: 2px;
}

.wallet-networth strong {
  color: var(--lux-emerald);
}

/* === LUXURY MODALS (PROPERTY DEEDS, BILATERAL TRADES, WEALTH MANAGEMENT) === */
.lux-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 17, 27, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: 16px;
}

.lux-modal-window {
  width: 100%;
  max-width: 580px;
  background: linear-gradient(165deg, #1B2638 0%, #101827 100%);
  border: 1.5px solid var(--lux-gold-champagne);
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(214, 184, 120, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lux-modal-window.bilateral-trade-window {
  max-width: 680px;
}

.lux-mwindow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(214, 184, 120, 0.2);
}

.mheader-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mheader-crest {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(214, 184, 120, 0.2);
  color: var(--lux-gold-champagne);
  display: grid;
  place-items: center;
  font-size: 16px;
}

.mheader-text h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--lux-ivory);
}

.mheader-text small {
  font-size: 0.68rem;
  color: #94a3b8;
}

.lux-modal-xbtn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

.lux-modal-xbtn:hover {
  color: #fff;
  border-color: #fff;
}

/* Bilateral Trade Grid */
.lux-trade-bilateral-grid {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  padding: 18px;
  gap: 12px;
  align-items: center;
}

.lux-trade-column {
  background: rgba(16, 24, 39, 0.8);
  border: 1px solid rgba(214, 184, 120, 0.2);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.column-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--lux-gold-champagne);
  border-bottom: 1px solid rgba(214, 184, 120, 0.2);
  padding-bottom: 4px;
}

.trade-player-banner {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
}

.trade-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trade-input-group label {
  font-size: 0.72rem;
  color: #cbd5e1;
}

.input-with-currency {
  position: relative;
  display: flex;
  align-items: center;
}

.curr-sign {
  position: absolute;
  left: 10px;
  color: var(--lux-gold-champagne);
}

.lux-num-input {
  width: 100%;
  background: rgba(11, 17, 27, 0.8);
  border: 1px solid rgba(214, 184, 120, 0.25);
  border-radius: 8px;
  color: var(--lux-ivory);
  padding: 6px 10px 6px 28px;
  font-size: 0.85rem;
  outline: none;
}

.lux-select-field {
  width: 100%;
  background: rgba(11, 17, 27, 0.8);
  border: 1px solid rgba(214, 184, 120, 0.25);
  border-radius: 8px;
  color: var(--lux-ivory);
  padding: 6px 10px;
  font-size: 0.82rem;
  outline: none;
}

.lux-trade-separator {
  display: grid;
  place-items: center;
}

.exchange-sphere {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(214, 184, 120, 0.2);
  border: 1.5px solid var(--lux-gold-champagne);
  color: var(--lux-gold-light);
  display: grid;
  place-items: center;
  font-size: 16px;
}

/* Wealth Quad Summary */
.lux-wealth-quad-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 18px;
  background: rgba(16, 24, 39, 0.6);
  border-bottom: 1px solid rgba(214, 184, 120, 0.15);
}

.wealth-metric-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(11, 17, 27, 0.6);
  border: 1px solid rgba(214, 184, 120, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
}

.wealth-metric-card.highlight {
  border-color: var(--lux-gold-champagne);
}

.metric-title {
  font-size: 0.62rem;
  color: #94a3b8;
}

.metric-val {
  font-size: 0.88rem;
  color: var(--lux-ivory);
}

.metric-val.gold { color: var(--lux-gold-light); }
.metric-val.emerald { color: var(--lux-emerald); }
.metric-val.net { color: var(--lux-gold-champagne); font-weight: 800; }

.lux-portfolio-assets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  max-height: 360px;
  overflow-y: auto;
}

.lux-estate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(16, 24, 39, 0.8);
  border: 1px solid rgba(214, 184, 120, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  gap: 12px;
}

.estate-main-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.estate-color-ribbon {
  width: 10px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
}

.estate-meta {
  display: flex;
  flex-direction: column;
}

.estate-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--lux-ivory);
}

.status-mortgaged-pill {
  font-size: 0.62rem;
  background: rgba(201, 107, 107, 0.2);
  border: 1px solid var(--lux-crimson);
  color: #fca5a5;
  padding: 1px 5px;
  border-radius: 4px;
}

.estate-subtext {
  font-size: 0.72rem;
  color: #94a3b8;
}

.estate-actions-cluster {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.btn-warning-soft {
  background: rgba(185, 130, 84, 0.25) !important;
  border: 1px solid var(--lux-copper) !important;
  color: #fed7aa !important;
}

.btn-amber-soft {
  background: rgba(214, 184, 120, 0.2) !important;
  border: 1px solid var(--lux-gold-champagne) !important;
  color: var(--lux-gold-light) !important;
}

.btn-emerald-soft {
  background: rgba(85, 184, 149, 0.2) !important;
  border: 1px solid var(--lux-emerald) !important;
  color: #a7f3d0 !important;
}

.btn-crimson-soft {
  background: rgba(201, 107, 107, 0.2) !important;
  border: 1px solid var(--lux-crimson) !important;
  color: #fca5a5 !important;
}

.lux-mwindow-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(214, 184, 120, 0.15);
}

.liquidation-note {
  font-size: 0.72rem;
  color: #94a3b8;
}

/* Property Deed Inspection Card */
.lux-deed-card {
  width: 100%;
  max-width: 380px;
  background: #1B2638;
  border: 2px solid var(--lux-gold-champagne);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}

.lux-deed-header {
  padding: 12px;
  text-align: center;
  color: var(--lux-dark-navy);
}

.deed-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.deed-name {
  margin: 2px 0 0;
  font-size: 1.1rem;
  font-weight: 900;
}

.lux-deed-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deed-illustration-frame {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.deed-rent-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  background: rgba(16, 24, 39, 0.7);
  border: 1px solid rgba(214, 184, 120, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
}

.rent-line {
  display: flex;
  justify-content: space-between;
  color: #cbd5e1;
}

.rent-line.current {
  color: var(--lux-gold-light);
  font-weight: 800;
}

.deed-costs-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  text-align: center;
  background: rgba(16, 24, 39, 0.5);
  padding: 6px;
  border-radius: 8px;
}

.cost-item small {
  display: block;
  font-size: 0.58rem;
  color: #94a3b8;
}

.cost-item strong {
  font-size: 0.78rem;
  color: var(--lux-ivory);
}

.deed-owner-status {
  text-align: center;
  font-size: 0.72rem;
  color: #94a3b8;
}

.lux-deed-footer {
  padding: 10px;
  display: flex;
  justify-content: center;
  background: rgba(16, 24, 39, 0.9);
  border-top: 1px solid rgba(214, 184, 120, 0.2);
}

/* === RESPONSIVE OVERRIDES === */
@media (max-width: 992px) {
  .lux-stage-main-arena {
    flex-direction: column;
    align-items: center;
  }
  .lux-wallet-side-column {
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 600px) {
  .lux-board-pedestal {
    width: min(98vw, 84vh);
    height: min(98vw, 84vh);
    transform: rotateX(4deg) scale(0.99) translateY(-1px);
    border-radius: 14px;
    padding: 4px;
  }
  .lux-header-roster-scroll {
    max-width: 100%;
    order: 3;
    width: 100%;
  }
}

/* ==========================================================================
   PHASE 2 LUXURY VISUAL POLISH & EMBEDDED WALLET ARCHITECTURE
   ========================================================================== */

/* Main Arena Centering and Layout Fixes */
.lux-stage-main-arena {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.lux-board-perspective-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  perspective-origin: 50% 46%;
  flex: 0 0 auto;
}

.lux-board-pedestal {
  width: min(840px, 80vh, 88vw);
  height: min(840px, 80vh, 88vw);
}

.lux-wallet-side-column {
  width: 270px;
  flex: 0 0 270px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Enhanced Rotunda Centerpiece with City Asset Overview */
.lux-rotunda-crest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lux-rotunda-city-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 24, 39, 0.85);
  border: 1px solid rgba(214, 184, 120, 0.3);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  color: var(--lux-soft-white);
  margin-top: 3px;
}

.cstat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cstat-item i {
  color: var(--lux-gold-champagne);
}

.cstat-sep {
  color: #64748b;
}

/* Realistic Banknotes with Filigree, Dual Values & Seals */
.lux-banknote {
  width: 66px;
  height: 40px;
  border-radius: 4px;
  position: absolute;
  top: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transform: rotate(var(--rot)) translateX(var(--tx));
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 5px;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: rgba(255, 255, 255, 0.95);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.note-filigree {
  position: absolute;
  inset: 2px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  pointer-events: none;
}

.note-top-val {
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.note-center-seal {
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0.85;
}

.note-bottom-val {
  font-size: 7.5px;
  font-weight: 900;
  text-align: right;
  line-height: 1;
}

.clasp-screw {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lux-copper);
  display: block;
  margin: 2px auto 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* 3D True Architectural Buildings with Pediment, Spire, Balconies & Pillars */
.lux-3d-bldg-hotel {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) translateZ(22px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.8));
}

.lux-hotel-pediment {
  background: linear-gradient(135deg, var(--lux-gold-champagne), var(--lux-copper));
  color: var(--lux-dark-navy);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.lux-hotel-spire {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -1px;
}

.spire-needle {
  width: 2px;
  height: 4px;
  background: var(--lux-gold-champagne);
}

.spire-beacon {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lux-crimson);
  box-shadow: 0 0 6px var(--lux-crimson), 0 0 12px var(--lux-crimson);
  animation: beacon-pulse 1s infinite alternate;
}

.lux-hotel-cornice {
  width: 24px;
  height: 2px;
  border-radius: 1px;
}

.lux-hotel-penthouse-level {
  width: 22px;
  background: #1B2638;
  border: 1px solid rgba(214, 184, 120, 0.4);
  padding: 1px 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lux-balcony-railing {
  height: 2px;
  border-bottom: 1px solid var(--lux-gold-champagne);
  margin-bottom: 1px;
}

.lux-hotel-mid-level {
  width: 22px;
  background: #101827;
  border: 1px solid rgba(214, 184, 120, 0.4);
  border-top: none;
  padding: 1.5px 2px;
  display: flex;
  flex-direction: column;
  gap: 1.5px;
}

.lux-win-row {
  display: flex;
  justify-content: space-evenly;
}

.w-pane.lit {
  width: 3px;
  height: 3px;
  background: var(--lux-gold-light);
  box-shadow: 0 0 2px var(--lux-gold-champagne);
  border-radius: 0.5px;
}

.lux-hotel-ground-portico {
  width: 24px;
  height: 6px;
  background: #0B111B;
  border: 1px solid var(--lux-gold-champagne);
  border-top: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 2px;
  box-sizing: border-box;
}

.lux-marble-pillar {
  width: 2px;
  height: 5px;
  background: var(--lux-gold-champagne);
}

.lux-gold-doorway {
  width: 6px;
  height: 5px;
  background: var(--lux-gold-light);
  box-shadow: 0 0 4px var(--lux-gold-champagne);
}

.lux-bldg-foundation {
  width: 26px;
  height: 2px;
  background: #334155;
  border-radius: 1px;
}

/* 3D Residence Blocks */
.lux-residences-ensemble {
  display: flex;
  gap: 2px;
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%) translateZ(14px);
  z-index: 15;
}

.lux-3d-residence-block {
  width: 10px;
  height: 14px;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border: 1px solid var(--bldg-theme, var(--lux-gold-champagne));
  border-radius: 2px;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.res-mansard-roof {
  position: absolute;
  top: -3px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: var(--bldg-theme, var(--lux-gold-champagne));
  border-radius: 2px 2px 0 0;
}

.res-balcony-tier {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--lux-gold-champagne);
}

.res-facade-main {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  padding: 1px;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.res-win-pair {
  display: flex;
  gap: 1.5px;
}

.res-oak-door {
  width: 3px;
  height: 4px;
  background: #0f172a;
  border-radius: 0.5px;
}

.res-stone-base {
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 1.5px;
  background: #475569;
}

/* Bilateral Trade Balance Indicator & Preview Box */
.trade-party-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 17, 27, 0.7);
  border: 1px solid rgba(214, 184, 120, 0.2);
  border-radius: 8px;
  padding: 6px 10px;
}

.party-avatar-pod {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--lux-gold-champagne);
  display: grid;
  place-items: center;
  background: #1B2638;
  overflow: hidden;
  flex-shrink: 0;
}

.pod-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pod-char {
  font-weight: 800;
  color: var(--lux-gold-champagne);
}

.party-meta {
  display: flex;
  flex-direction: column;
}

.party-cash {
  font-size: 0.68rem;
  color: #94a3b8;
}

.gold-c {
  color: var(--lux-gold-light);
}

.trade-balance-pill {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 6px;
  white-space: nowrap;
}

.trade-balance-pill.fair {
  background: rgba(85, 184, 149, 0.2);
  color: var(--lux-emerald);
  border-color: var(--lux-emerald);
}

.trade-balance-pill.generous {
  background: rgba(214, 184, 120, 0.25);
  color: var(--lux-gold-light);
  border-color: var(--lux-gold-champagne);
}

.trade-balance-pill.low {
  background: rgba(201, 107, 107, 0.2);
  color: var(--lux-crimson);
  border-color: var(--lux-crimson);
}

.target-property-preview-card {
  min-height: 48px;
  background: rgba(11, 17, 27, 0.6);
  border: 1px dashed rgba(214, 184, 120, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.empty-note {
  font-size: 0.68rem;
  color: #64748b;
  font-style: italic;
}

.preview-deed-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.preview-ribbon {
  width: 8px;
  height: 28px;
  border-radius: 3px;
  flex-shrink: 0;
}

.preview-info {
  display: flex;
  flex-direction: column;
}

.preview-info strong {
  font-size: 0.8rem;
  color: var(--lux-ivory);
}

.preview-info small {
  font-size: 0.68rem;
  color: #94a3b8;
}

/* Wealth Management Property Asset Cards Grid */
.lux-portfolio-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 16px 18px;
  max-height: 420px;
  overflow-y: auto;
}

.lux-property-asset-card {
  background: rgba(16, 24, 39, 0.85);
  border: 1px solid rgba(214, 184, 120, 0.25);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lux-property-asset-card:hover {
  transform: translateY(-2px);
  border-color: var(--lux-gold-champagne);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(214, 184, 120, 0.2);
}

.lux-property-asset-card.is-mortgaged {
  opacity: 0.7;
}

.asset-card-banner {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--lux-dark-navy);
}

.asset-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.asset-mortgage-badge {
  font-size: 0.6rem;
  font-weight: 900;
  background: var(--lux-crimson);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
}

.asset-card-visual {
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: rgba(11, 17, 27, 0.4);
}

.asset-card-metrics {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
  background: rgba(11, 17, 27, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.metric-line {
  display: flex;
  justify-content: space-between;
  color: #94a3b8;
}

.metric-line strong {
  color: var(--lux-ivory);
}

.metric-line strong.emerald {
  color: var(--lux-emerald);
}

.asset-card-action-bar {
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  background: rgba(16, 24, 39, 0.95);
  border-top: 1px solid rgba(214, 184, 120, 0.15);
  flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .lux-stage-main-arena {
    flex-direction: column;
    align-items: center;
  }
  .lux-wallet-side-column {
    width: 100%;
    max-width: 520px;
  }
}

/* ==========================================================================
   CITY TYCOON — PHASE 3 : LUXURY VISUAL POLISH (PRESTIGE MASTERWORK)
   ========================================================================== */

/* 1. Main Stage & Board Pedestal Multilayer Architectural Raised Effect */
.lux-stage-main-arena {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 8px 16px;
  box-sizing: border-box;
}

.lux-board-perspective-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
  perspective-origin: 50% 48%;
  flex: 1 1 auto;
}

.lux-board-pedestal {
  width: min(890px, 86vh, 90vw);
  height: min(890px, 86vh, 90vw);
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.38fr);
  grid-template-rows: minmax(0, 1.48fr) repeat(7, minmax(0, 1fr)) minmax(0, 1.38fr);
  gap: 4px;
  padding: 8px;
  background:
    radial-gradient(circle at 50% 30%, rgba(27, 38, 56, 0.96) 0%, rgba(16, 24, 39, 0.99) 65%, rgba(11, 17, 27, 1) 100%);
  border: 2.5px solid var(--lux-gold-champagne);
  border-radius: 22px;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.95),
    0 18px 45px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(214, 184, 120, 0.22),
    inset 0 0 60px rgba(0, 0, 0, 0.85),
    inset 0 2px 4px rgba(234, 215, 160, 0.4),
    inset 0 -2px 8px rgba(0, 0, 0, 0.7);
  transform: rotateX(7deg) scale(0.98) translateY(-2px);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}

.lux-board-pedestal::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  border: 1px solid rgba(214, 184, 120, 0.25);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transform: translateZ(-10px);
}

.lux-board-pedestal:hover {
  transform: rotateX(4deg) scale(0.99) translateY(-2px);
}

/* 2. Tiles Refinement & Dynamic Text Wrapping */
.lux-board-tile {
  background: linear-gradient(155deg, rgba(27, 38, 56, 0.98) 0%, rgba(16, 24, 39, 0.99) 70%, rgba(11, 17, 27, 1) 100%);
  border: 1.5px solid rgba(214, 184, 120, 0.2);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  transform-style: preserve-3d;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(234, 215, 160, 0.12);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  user-select: none;
  cursor: pointer;
  transform: translateZ(10px);
}

.lux-board-tile:hover {
  transform: translateZ(24px) scale(1.04);
  border-color: var(--lux-gold-light);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.8), 0 0 18px rgba(214, 184, 120, 0.35);
  z-index: 40;
}

.lux-tile-title {
  font-size: clamp(0.55rem, 1.15cqi, 0.8rem);
  font-weight: 800;
  color: var(--lux-ivory);
  white-space: normal;
  text-align: center;
  line-height: 1.12;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  max-width: 100%;
  word-break: normal;
}

/* 3. True 3D Architectural CSS Buildings & Facades */

/* Level 0: Empty Lot Architectural Pedestal */
.lux-3d-bldg-empty-lot {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) translateZ(12px);
  z-index: 15;
  width: 28px;
  height: 10px;
  pointer-events: none;
}

.lot-architectural-pedestal {
  width: 100%;
  height: 100%;
  border: 1px dashed var(--bldg-theme, var(--lux-gold-champagne));
  background: rgba(214, 184, 120, 0.08);
  border-radius: 2px;
  position: relative;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
}

.lot-survey-grid {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, var(--bldg-theme, #D6B878) 10%, transparent 20%);
  background-size: 6px 6px;
  opacity: 0.4;
}

.lot-peg {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  background: var(--lux-gold-light);
  border-radius: 50%;
  box-shadow: 0 0 3px var(--lux-gold-champagne);
}
.lot-peg.cp-tl { top: -1px; left: -1px; }
.lot-peg.cp-tr { top: -1px; right: -1px; }
.lot-peg.cp-bl { bottom: -1px; left: -1px; }
.lot-peg.cp-br { bottom: -1px; right: -1px; }

/* Level 1: Petite Résidence (Pavilion) */
.lux-3d-bldg-pavilion {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) translateZ(20px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.85));
}

.pavilion-gabled-roof {
  width: 20px;
  height: 6px;
  background: linear-gradient(135deg, var(--bldg-theme, #8B4513) 0%, #1f293d 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-bottom: 1.5px solid var(--lux-gold-champagne);
  position: relative;
}

.roof-dormer {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 3px;
  background: var(--lux-ivory);
  border-radius: 1px;
}

.pavilion-facade {
  width: 18px;
  height: 14px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(214, 184, 120, 0.4);
  border-top: none;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 1px 2px;
  box-sizing: border-box;
}

.pavilion-win-single {
  width: 5px;
  height: 6px;
  margin-bottom: 3px;
}

.pavilion-oak-door {
  width: 5px;
  height: 8px;
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
  border: 0.5px solid #d97706;
  border-radius: 1px 1px 0 0;
}

.pavilion-stone-foundation {
  width: 20px;
  height: 2px;
  background: #334155;
  border-radius: 0 0 2px 2px;
}

/* Level 2: Résidence Intermédiaire */
.lux-3d-bldg-residence {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) translateZ(24px);
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.88));
}

.res-mansard-roof {
  width: 22px;
  height: 7px;
  background: linear-gradient(180deg, #334155 0%, var(--bldg-theme, #1B2638) 100%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  border-bottom: 1.5px solid var(--lux-gold-champagne);
  position: relative;
}

.roof-cresting {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--lux-gold-light);
}

.res-upper-floor {
  width: 20px;
  height: 9px;
  background: #1e293b;
  border-left: 1px solid rgba(214, 184, 120, 0.3);
  border-right: 1px solid rgba(214, 184, 120, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.res-cornice-band {
  width: 22px;
  height: 1.5px;
  background: var(--lux-gold-champagne);
}

.res-ground-floor {
  width: 20px;
  height: 10px;
  background: #0f172a;
  border-left: 1px solid rgba(214, 184, 120, 0.3);
  border-right: 1px solid rgba(214, 184, 120, 0.3);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 1px;
}

.res-rusticated-plinth {
  width: 22px;
  height: 3px;
  background: #475569;
  border-radius: 0 0 2px 2px;
}

/* Level 3: Grande Résidence de Maître */
.lux-3d-bldg-mansion {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) translateZ(28px);
  z-index: 28;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.9));
}

.mansion-hipped-roof {
  width: 24px;
  height: 7px;
  background: linear-gradient(135deg, #1e293b 0%, #090d16 100%);
  border-top: 1.5px solid var(--lux-copper);
  position: relative;
}

.roof-copper-finial {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 3px;
  background: var(--lux-gold-light);
}

.mansion-floor {
  width: 22px;
  background: #1B2638;
  border-left: 1px solid rgba(214, 184, 120, 0.4);
  border-right: 1px solid rgba(214, 184, 120, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.mansion-floor.attic { height: 8px; }
.mansion-floor.piano-nobile { height: 9px; }

.mansion-balcony-stone {
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--lux-gold-champagne), var(--lux-gold-light), var(--lux-gold-champagne));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.mansion-ground {
  width: 22px;
  height: 10px;
  background: #0B111B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  border-left: 1px solid rgba(214, 184, 120, 0.4);
  border-right: 1px solid rgba(214, 184, 120, 0.4);
}

.mansion-col-pillar {
  width: 2px;
  height: 100%;
  background: var(--lux-ivory);
}

.mansion-arch-portal {
  width: 7px;
  height: 9px;
  background: #451a03;
  border: 1px solid var(--lux-gold-champagne);
  border-radius: 4px 4px 0 0;
}

.mansion-granite-plinth {
  width: 24px;
  height: 3px;
  background: #334155;
  border-radius: 0 0 2px 2px;
}

/* Level 4: Immeuble de Prestige Haussmannien */
.lux-3d-bldg-immeuble {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) translateZ(32px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.95));
}

.imm-zinc-roof {
  width: 26px;
  height: 8px;
  background: linear-gradient(180deg, #64748b 0%, #334155 100%);
  border-bottom: 1.5px solid var(--lux-gold-champagne);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imm-attic-oeil-de-boeuf {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lux-gold-light);
  border: 1px solid #1e293b;
}

.imm-floor {
  width: 24px;
  background: #1B2638;
  border-left: 1px solid rgba(214, 184, 120, 0.4);
  border-right: 1px solid rgba(214, 184, 120, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.imm-floor.penthouse { height: 8px; }
.imm-floor.mid { height: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.imm-floor.piano { height: 9px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

.imm-iron-balcony {
  position: absolute;
  bottom: 0;
  left: -1px;
  width: 26px;
  height: 2px;
  background: var(--lux-gold-champagne);
}

.imm-col-pilaster {
  width: 1.5px;
  height: 100%;
  background: rgba(234, 215, 160, 0.4);
}

.imm-vestibule {
  width: 24px;
  height: 10px;
  background: #0B111B;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 2px;
  border-left: 1px solid rgba(214, 184, 120, 0.4);
  border-right: 1px solid rgba(214, 184, 120, 0.4);
}

.imm-stone-pier {
  width: 3px;
  height: 100%;
  background: #475569;
}

.imm-double-glass-entry {
  width: 10px;
  height: 8px;
  background: rgba(85, 184, 149, 0.3);
  border: 1px solid var(--lux-gold-champagne);
  border-radius: 2px 2px 0 0;
}

.imm-marble-base {
  width: 26px;
  height: 3px;
  background: #1e293b;
  border-radius: 0 0 3px 3px;
}

/* Common Window Styling */
.w-pane {
  display: inline-block;
  width: 3.5px;
  height: 4.5px;
  background: #475569;
  border-radius: 0.5px;
}

.w-pane.lit {
  background: #fde047;
  box-shadow: 0 0 4px #facc15, 0 0 8px rgba(250, 204, 21, 0.6);
}

.win-trio, .lux-win-row, .res-win-row {
  display: flex;
  gap: 2px;
  align-items: center;
}

/* 4. Luxury Wallet Metrics & Animations */
.lux-wallet-metrics-deck {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(11, 17, 27, 0.85);
  border: 1px solid rgba(214, 184, 120, 0.25);
  border-radius: 10px;
  padding: 8px 10px;
}

.wallet-metric-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wallet-metric-strip.primary-cash {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 4px;
}

.wallet-metric-strip .metric-head {
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wallet-metric-strip .metric-number {
  font-size: 1.05rem;
  font-weight: 800;
}

.wallet-metric-strip .metric-number.net-c {
  color: var(--lux-gold-champagne);
  font-size: 0.95rem;
}

.wallet-metrics-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 5px;
}

.duo-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.duo-title {
  font-size: 0.56rem;
  color: #64748b;
  text-transform: uppercase;
}

.duo-val {
  font-size: 0.74rem;
  color: var(--lux-ivory);
}

.duo-val.emerald {
  color: var(--lux-emerald);
}

.lux-wallet-action-cue {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--lux-gold-light);
  text-align: center;
  margin-top: 6px;
  opacity: 0.85;
}

/* Wallet cash pulse animation on transactions */
.lux-3d-leather-wallet.cash-pulse-up {
  animation: pulse-gain 0.8s ease;
}

.lux-3d-leather-wallet.cash-pulse-down {
  animation: pulse-loss 0.8s ease;
}

@keyframes pulse-gain {
  0% { box-shadow: 0 0 0 rgba(85, 184, 149, 0); }
  50% { box-shadow: 0 0 30px rgba(85, 184, 149, 0.7); border-color: var(--lux-emerald); }
  100% { box-shadow: 0 16px 35px rgba(0, 0, 0, 0.7); }
}

@keyframes pulse-loss {
  0% { box-shadow: 0 0 0 rgba(201, 107, 107, 0); }
  50% { box-shadow: 0 0 30px rgba(201, 107, 107, 0.7); border-color: var(--lux-crimson); }
  100% { box-shadow: 0 16px 35px rgba(0, 0, 0, 0.7); }
}

/* 5. 3D CSS Dice Six-Face Perspective Rotations */
.lux-3d-die-cube.show-face-1 { transform: rotateX(0deg) rotateY(0deg); }
.lux-3d-die-cube.show-face-6 { transform: rotateY(180deg); }
.lux-3d-die-cube.show-face-2 { transform: rotateX(-90deg); }
.lux-3d-die-cube.show-face-5 { transform: rotateX(90deg); }
.lux-3d-die-cube.show-face-3 { transform: rotateY(90deg); }
.lux-3d-die-cube.show-face-4 { transform: rotateY(-90deg); }

/* 6. Rotunda Central Plaza Quad & Active Turn Indicators */
.rotunda-brand-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.rotunda-tagline {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--lux-gold-light);
  font-weight: 800;
  opacity: 0.85;
}

.rotunda-active-player-dock {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 17, 27, 0.8);
  border: 1px solid rgba(214, 184, 120, 0.25);
  border-radius: 999px;
  padding: 3px 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.dock-turn-num {
  font-size: 0.62rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.08em;
}

.dock-player-pill {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dock-player-pill.is-me-turn .active-turn-name {
  color: var(--lux-gold-champagne);
}

.active-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lux-emerald);
  box-shadow: 0 0 6px var(--lux-emerald);
  animation: beacon-pulse 1s infinite alternate;
}

.active-turn-label {
  font-size: 0.62rem;
  color: #64748b;
}

.active-turn-name {
  font-size: 0.72rem;
  color: var(--lux-ivory);
}

.lux-rotunda-city-stats-quad {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.64rem;
  color: #cbd5e1;
  background: rgba(16, 24, 39, 0.6);
  border: 1px solid rgba(214, 184, 120, 0.12);
  border-radius: 8px;
  padding: 3px 10px;
}

.cstat-quad-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cstat-quad-item.highlight-palace {
  color: var(--lux-gold-light);
}

.cstat-quad-item i {
  color: var(--lux-gold-champagne);
}

/* 7. Bilateral Trade Modal Non-Overlapping Layout */
.lux-trade-bilateral-grid {
  display: grid;
  grid-template-columns: 1fr 140px 1fr !important;
  padding: 18px;
  gap: 14px;
  align-items: stretch;
}

.lux-trade-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 4px;
}

.trade-status-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.trade-status-caption {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #94a3b8;
}

.trade-balance-pill {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  margin-top: 0;
}

.trade-balance-pill.neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.trade-ratio-subtext {
  font-size: 0.58rem;
  color: #64748b;
  text-align: center;
  max-width: 120px;
  line-height: 1.2;
}

.trade-card-preview-slot {
  min-height: 48px;
  background: rgba(11, 17, 27, 0.6);
  border: 1px dashed rgba(214, 184, 120, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

/* 8. Asset Portfolio Management Cards Polish */
.asset-color-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}

.asset-card-banner {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1.5px solid var(--band-col, var(--lux-gold-champagne));
  color: var(--lux-ivory);
}

.asset-card-action-bar {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(11, 17, 27, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}

.asset-card-action-bar .btn {
  flex: 1 1 auto;
  min-width: 80px;
  font-size: 0.65rem;
  padding: 4px 6px;
}

/* ==========================================================================
   CITY TYCOON — PHASE 4 : ULTRA PREMIUM 3D MINIATURE DIORAMA & FINISHING
   ========================================================================== */

/* 1. Miniature 3D City Diorama in Central Plaza */
.lux-central-3d-city-diorama {
  width: 100%;
  max-width: 320px;
  height: 94px;
  position: relative;
  perspective: 700px;
  perspective-origin: 50% 80%;
  margin: 2px auto 6px auto;
  transform-style: preserve-3d;
  user-select: none;
  pointer-events: none;
}

.diorama-ground-plane {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at center, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1px solid rgba(214, 184, 120, 0.3);
  border-radius: 12px;
  position: relative;
  transform: rotateX(25deg);
  transform-style: preserve-3d;
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 20px rgba(0, 0, 0, 0.85),
    inset 0 1px 2px rgba(234, 215, 160, 0.2);
}

/* Diorama Miniature Avenues & Roads */
.diorama-avenue {
  position: absolute;
  background: #0B111B;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
}

.diorama-avenue.ave-horizontal {
  top: 50%;
  left: 0;
  width: 100%;
  height: 16px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(214, 184, 120, 0.15);
  border-bottom: 1px solid rgba(214, 184, 120, 0.15);
}

.diorama-avenue.ave-vertical {
  top: 0;
  left: 50%;
  width: 16px;
  height: 100%;
  transform: translateX(-50%);
  border-left: 1px solid rgba(214, 184, 120, 0.15);
  border-right: 1px solid rgba(214, 184, 120, 0.15);
}

.avenue-marking-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--lux-gold-champagne), var(--lux-gold-champagne) 4px, transparent 4px, transparent 8px);
  opacity: 0.5;
}

.ave-vertical .avenue-marking-line {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: repeating-linear-gradient(180deg, var(--lux-gold-champagne), var(--lux-gold-champagne) 4px, transparent 4px, transparent 8px);
}

/* Central Roundabout Basin & Fountain */
.diorama-central-rotunda-island {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(6px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1e293b;
  border: 1.5px solid var(--lux-gold-champagne);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
  display: grid;
  place-items: center;
  z-index: 20;
}

.rotunda-water-basin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #38bdf8 0%, #0284c7 100%);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5), 0 0 6px rgba(56, 189, 248, 0.6);
  position: relative;
}

.rotunda-water-spray {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 5px #ffffff;
  animation: beacon-pulse 1.2s infinite alternate;
}

.rotunda-gold-obelisk {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) translateZ(8px);
  width: 2px;
  height: 6px;
  background: linear-gradient(180deg, var(--lux-gold-light), var(--lux-copper));
  box-shadow: 0 0 4px var(--lux-gold-champagne);
}

/* 4 City Quadrants */
.diorama-quadrant {
  position: absolute;
  width: 42%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.quad-nw { top: 4px; left: 6px; }
.quad-ne { top: 4px; right: 6px; }
.quad-sw { bottom: 4px; left: 6px; }
.quad-se { bottom: 4px; right: 6px; }

/* Miniature Greenery, Lawns & Trees */
.mini-park-lawn {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, #15803d 0%, #14532d 100%);
  border: 1px solid rgba(85, 184, 149, 0.4);
  border-radius: 4px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.mini-tree {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4ade80 0%, #166534 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  transform: translateZ(4px);
}

.mini-flower-bed {
  width: 6px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f43f5e, #fbbf24);
  box-shadow: 0 0 3px rgba(244, 63, 94, 0.5);
}

/* Miniature Streetlamps with Glow */
.mini-streetlamp {
  width: 2px;
  height: 6px;
  background: var(--lux-gold-champagne);
  position: relative;
  transform: translateZ(5px);
  margin-left: 4px;
}

.mini-streetlamp::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fde047;
  box-shadow: 0 0 6px #facc15, 0 0 10px rgba(250, 204, 21, 0.8);
}

/* Miniature Buildings in Diorama */
.mini-3d-building {
  position: relative;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.9));
  transform: translateZ(10px);
}

.mini-bldg-body {
  background: #1e293b;
  border: 0.5px solid rgba(214, 184, 120, 0.3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  padding: 1.5px;
  box-sizing: border-box;
}

.mini-win.lit {
  width: 2.5px;
  height: 3.5px;
  background: #fef08a;
  box-shadow: 0 0 2px #facc15;
}

/* Palace Tower */
.bldg-palace-tower .mini-bldg-body {
  width: 16px;
  height: 22px;
  background: linear-gradient(180deg, #1e293b, #0f172a);
}
.bldg-palace-tower .mini-bldg-roof {
  width: 18px;
  height: 6px;
  background: linear-gradient(135deg, var(--lux-gold-champagne), var(--lux-copper));
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  position: relative;
}
.mini-beacon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: var(--lux-crimson);
  box-shadow: 0 0 4px var(--lux-crimson);
}

/* Haussmann Block */
.bldg-haussmann-block .mini-bldg-body {
  width: 20px;
  height: 18px;
  background: #334155;
}
.bldg-haussmann-block .mini-bldg-roof.mansard {
  width: 22px;
  height: 5px;
  background: #475569;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  border-bottom: 1px solid var(--lux-gold-champagne);
}

/* Modern Glass Tower */
.bldg-modern-glass .mini-bldg-body.glass {
  width: 14px;
  height: 24px;
  background: linear-gradient(180deg, rgba(85, 184, 149, 0.4), rgba(15, 23, 42, 0.9));
  border: 0.5px solid var(--lux-emerald);
}
.bldg-modern-glass .mini-bldg-roof.spire {
  width: 14px;
  height: 5px;
  background: var(--lux-emerald);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Luxury Villa */
.bldg-luxury-villa .mini-bldg-body {
  width: 16px;
  height: 12px;
  background: #1e293b;
}
.bldg-luxury-villa .mini-bldg-roof.villa {
  width: 18px;
  height: 4px;
  background: #b45309;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 2. Trade Modal Mini Banknotes Fan & 3D Building Thumbnails */
.trade-cash-notes-fan {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(11, 17, 27, 0.7);
  border: 1px solid rgba(214, 184, 120, 0.2);
  border-radius: 6px;
}

.trade-mini-note {
  font-size: 7.5px;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 2px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  border: 0.5px solid rgba(255, 255, 255, 0.4);
}

.trade-mini-note.note-gold { background: linear-gradient(135deg, #b8860b, #d4af37); color: #000; }
.trade-mini-note.note-teal { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.trade-mini-note.note-copper { background: linear-gradient(135deg, #b45309, #d97706); }

.cash-val-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--lux-gold-light);
  margin-left: auto;
}

.preview-bldg-thumbnail {
  width: 32px;
  height: 36px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.preview-bldg-thumbnail .lux-3d-bldg-pavilion,
.preview-bldg-thumbnail .lux-3d-bldg-residence,
.preview-bldg-thumbnail .lux-3d-bldg-mansion,
.preview-bldg-thumbnail .lux-3d-bldg-immeuble,
.preview-bldg-thumbnail .lux-3d-bldg-hotel {
  transform: scale(0.65) translateZ(5px);
  position: static;
}

/* ==========================================================================
   CITY TYCOON — FINAL QA & PRECISION REFINEMENT
   ========================================================================== */

/* 1. Wallet Layout & Amount Wrapping Fix */
.lux-wallet-side-column {
  width: 290px !important;
  flex: 0 0 290px !important;
}

.wallet-metric-strip .metric-number {
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}

.wallet-metric-strip .metric-number small {
  font-size: 0.68em !important;
  font-weight: 700 !important;
}

.wallet-metric-strip .metric-head {
  white-space: nowrap !important;
  font-size: 0.62rem !important;
}

/* 2. Tiles Text & Visual Hierarchy Fix (Mozart, Rue de la Paix, etc.) */
.lux-tile-content-box {
  padding: 1px 2px !important;
  justify-content: space-between !important;
  overflow: visible !important;
}

.lux-tile-typography {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 1px !important;
  margin: 1px 0 !important;
}

.lux-tile-title {
  font-size: clamp(0.52rem, 1.05cqi, 0.72rem) !important;
  line-height: 1.08 !important;
  word-break: break-word !important;
  hyphens: auto !important;
  margin-bottom: 1px !important;
}

.lux-tag-price {
  font-size: clamp(0.48rem, 0.95cqi, 0.65rem) !important;
  line-height: 1 !important;
}

.lux-tile-icon-emblem {
  width: 20px !important;
  height: 20px !important;
  margin: 1px 0 !important;
}

.lux-tile-icon-emblem svg {
  width: 14px !important;
  height: 14px !important;
}

/* 3. Central 3D Diorama Polish & Empty Space Reduction */
.lux-center-rotunda {
  padding: 6px 10px !important;
}

.lux-central-3d-city-diorama {
  max-width: 380px !important;
  height: 110px !important;
  margin: 0 auto 4px auto !important;
}

.diorama-ground-plane {
  transform: rotateX(28deg) !important;
}

/* 4. Asset Portfolio Management Cards Spacing */
.lux-property-asset-card {
  border-radius: 10px !important;
}

.asset-card-banner {
  padding: 6px 10px !important;
}

.asset-card-title {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

.asset-card-metrics {
  padding: 6px 10px !important;
  gap: 3px !important;
  font-size: 0.7rem !important;
}

.asset-card-action-bar {
  padding: 6px 8px !important;
  gap: 4px !important;
}

.asset-card-action-bar .btn {
  font-size: 0.62rem !important;
  padding: 3px 5px !important;
}

/* Responsive safeguards */
@media (max-width: 1200px) {
  .lux-wallet-side-column {
    width: 260px !important;
    flex: 0 0 260px !important;
  }
}

@media (max-width: 900px) {
  .lux-stage-main-arena {
    flex-direction: column !important;
    align-items: center !important;
  }
  .lux-wallet-side-column {
    width: 100% !important;
    max-width: 480px !important;
    flex: auto !important;
  }
}

/* ==========================================================================
   PHASE 6: LUXURY DESIGN SYSTEM — GLOBAL HARMONIZATION & SPECIFICITY SHIELD
   ========================================================================== */

/* 1. Global Arena & Stage Harmonization for City Tycoon */
.game-arena-overlay[data-game="city_tycoon"] {
  background: radial-gradient(circle at 50% 20%, #131F32 0%, #0B1220 85%) !important;
  padding: 8px 12px !important;
}

.game-arena-overlay[data-game="city_tycoon"]:before,
.game-arena-overlay[data-game="city_tycoon"]:after {
  display: none !important;
}

.game-arena-overlay[data-game="city_tycoon"] .arena-header {
  background: rgba(19, 31, 50, 0.85) !important;
  border: 1px solid rgba(214, 184, 120, 0.3) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(233, 211, 155, 0.15) !important;
}

.game-arena-overlay[data-game="city_tycoon"] .arena-title {
  color: var(--lux-gold-champagne) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 15px rgba(214, 184, 120, 0.3) !important;
}

.game-arena-overlay[data-game="city_tycoon"] .arena-score {
  background: rgba(214, 184, 120, 0.12) !important;
  border-color: rgba(214, 184, 120, 0.35) !important;
  color: var(--lux-gold-light) !important;
}

.game-arena-overlay[data-game="city_tycoon"] .btn-glass,
.game-arena-overlay[data-game="city_tycoon"] #btn-leave-game {
  background: rgba(19, 31, 50, 0.7) !important;
  border: 1px solid rgba(214, 184, 120, 0.3) !important;
  color: var(--lux-ivory) !important;
  transition: all 0.2s ease !important;
}

.game-arena-overlay[data-game="city_tycoon"] .btn-glass:hover,
.game-arena-overlay[data-game="city_tycoon"] #btn-leave-game:hover {
  background: rgba(214, 184, 120, 0.15) !important;
  border-color: var(--lux-gold-champagne) !important;
  color: var(--lux-gold-light) !important;
  transform: translateY(-1px) !important;
}

.game-arena-overlay[data-game="city_tycoon"] .game-stage-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.game-arena-overlay[data-game="city_tycoon"] .game-stage-card:before,
.game-arena-overlay[data-game="city_tycoon"] .game-stage-card:after {
  display: none !important;
}

/* 2. Unified Modal Scrim & Window Hierarchy */
.lux-modal-scrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  background: rgba(11, 18, 32, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  animation: luxFadeIn 0.2s ease !important;
}

@keyframes luxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lux-modal-window {
  background: radial-gradient(circle at 50% 10%, #1B2940 0%, #131F32 60%, #0B1220 100%) !important;
  border: 1.5px solid var(--lux-gold-champagne) !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(214, 184, 120, 0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important;
  width: 100% !important;
  overflow: hidden !important;
}

.lux-mwindow-header {
  background: rgba(11, 18, 32, 0.6) !important;
  border-bottom: 1px solid rgba(214, 184, 120, 0.25) !important;
  padding: 14px 20px !important;
}

.lux-modal-xbtn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(214, 184, 120, 0.25) !important;
  color: var(--lux-ivory) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.lux-modal-xbtn:hover {
  background: rgba(214, 184, 120, 0.2) !important;
  border-color: var(--lux-gold-champagne) !important;
  color: var(--lux-gold-light) !important;
}

.lux-mwindow-footer {
  background: rgba(11, 18, 32, 0.7) !important;
  border-top: 1px solid rgba(214, 184, 120, 0.2) !important;
  padding: 12px 20px !important;
}

/* 3. Button Styles Harmonization */
.btn-gold {
  background: linear-gradient(135deg, var(--lux-gold-champagne) 0%, var(--lux-copper) 100%) !important;
  border: 1.5px solid var(--lux-gold-light) !important;
  color: var(--lux-dark-navy) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 4px 15px rgba(185, 130, 84, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-gold:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(185, 130, 84, 0.5), 0 0 15px rgba(214, 184, 120, 0.4) !important;
}

.btn-champagne-outline {
  background: rgba(19, 31, 50, 0.6) !important;
  border: 1.5px solid var(--lux-gold-champagne) !important;
  color: var(--lux-gold-light) !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.btn-champagne-outline:hover:not(:disabled) {
  background: rgba(214, 184, 120, 0.15) !important;
  border-color: var(--lux-gold-light) !important;
  transform: translateY(-1px) !important;
}

.btn-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1.5px solid #6ee7b7 !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* 4. Scrollbar Refinement */
.lux-city-stage-viewport::-webkit-scrollbar,
.lux-portfolio-cards-grid::-webkit-scrollbar,
.lux-header-roster-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.lux-city-stage-viewport::-webkit-scrollbar-track,
.lux-portfolio-cards-grid::-webkit-scrollbar-track,
.lux-header-roster-scroll::-webkit-scrollbar-track {
  background: rgba(11, 18, 32, 0.6);
  border-radius: 999px;
}

.lux-city-stage-viewport::-webkit-scrollbar-thumb,
.lux-portfolio-cards-grid::-webkit-scrollbar-thumb,
.lux-header-roster-scroll::-webkit-scrollbar-thumb {
  background: rgba(214, 184, 120, 0.35);
  border-radius: 999px;
  border: 1px solid rgba(233, 211, 155, 0.2);
}

.lux-city-stage-viewport::-webkit-scrollbar-thumb:hover,
.lux-portfolio-cards-grid::-webkit-scrollbar-thumb:hover,
.lux-header-roster-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--lux-gold-champagne);
}

/* ==========================================================================
   PHASE 7: REVOLUTIONARY LUXURY RESPONSIVE ARCHITECTURE (MOBILE, TABLET & DESKTOP)
   ========================================================================== */

/* --- 1. TABLET & COMPACT DESKTOP (769px - 1100px) --- */
@media (max-width: 1100px) {
  .lux-stage-main-arena {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .lux-board-perspective-frame {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .lux-wallet-side-column {
    width: 100% !important;
    max-width: 580px !important;
    flex: auto !important;
    margin: 0 auto !important;
  }
}

/* --- 2. TABLET PORTRAIT & SMALL SCREENS (481px - 768px) --- */
@media (max-width: 768px) {
  .lux-city-stage-viewport {
    padding: 6px !important;
    gap: 8px !important;
  }
  
  /* Executive Header Refinements */
  .lux-executive-header {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }
  .lux-header-roster-scroll {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }
  .lux-header-actions-deck {
    width: 100% !important;
    justify-content: space-between !important;
    display: flex !important;
    gap: 6px !important;
  }
  .lux-header-action-btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    font-size: 0.72rem !important;
  }

  /* Board size adjustment */
  .lux-board-pedestal {
    width: min(94vw, 560px) !important;
    height: min(94vw, 560px) !important;
    transform: rotateX(2deg) translateY(0) !important;
    gap: 2.5px !important;
    padding: 4px !important;
  }
  .lux-central-3d-city-diorama {
    max-width: 240px !important;
    height: 68px !important;
  }
  .lux-rotunda-title {
    font-size: 0.78rem !important;
  }
  .rotunda-tagline {
    font-size: 0.5rem !important;
  }
  .lux-rotunda-city-stats-quad {
    gap: 4px !important;
  }
  .cstat-quad-item {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }
}

/* --- 3. SMARTPHONE ULTRA-FIT & COMPACT MOBILE (<= 480px) --- */
@media (max-width: 480px) {
  /* Viewport Reset */
  .lux-city-stage-viewport {
    padding: 3px 2px !important;
    gap: 6px !important;
    overflow-x: hidden !important;
  }

  /* Header Optimization */
  .lux-executive-header {
    padding: 6px 8px !important;
    gap: 6px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
  }
  .lux-brand-shield {
    gap: 6px !important;
  }
  .lux-shield-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
    border-radius: 5px !important;
  }
  .lux-shield-title {
    font-size: 0.78rem !important;
    letter-spacing: 0.06em !important;
  }
  .lux-shield-subtitle {
    font-size: 0.5rem !important;
  }
  .lux-pcard-executive {
    padding: 4px 6px !important;
    gap: 5px !important;
  }
  .lux-pod-avatar {
    width: 22px !important;
    height: 22px !important;
  }
  .lux-pcard-username {
    font-size: 0.68rem !important;
  }
  .lux-cash-pill {
    font-size: 0.65rem !important;
    padding: 1px 4px !important;
  }

  .lux-header-actions-deck {
    display: flex !important;
    width: 100% !important;
    gap: 4px !important;
  }
  .lux-header-action-btn {
    padding: 5px 4px !important;
    font-size: 0.65rem !important;
    gap: 3px !important;
  }
  .lux-header-action-btn span {
    font-size: 0.62rem !important;
  }

  /* 2D Flat & Crisp Projection for Maximum Mobile Board Legibility */
  .lux-board-perspective-frame {
    perspective: none !important;
    width: 100% !important;
  }
  .lux-board-pedestal {
    width: 98vw !important;
    height: 98vw !important;
    max-width: 375px !important;
    max-height: 375px !important;
    transform: none !important; /* No distortion/blur on mobile */
    gap: 2px !important;
    padding: 3px !important;
    border-width: 1.5px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.6) !important;
  }

  /* Tile Typography & Hierarchy: No Overlaps, Perfect Contrast */
  .lux-board-tile {
    border-radius: 6px !important;
    transform: none !important;
  }
  .lux-board-tile:hover {
    transform: none !important;
  }
  .lux-tile-header-ribbon {
    height: 5px !important;
    border-radius: 5px 5px 0 0 !important;
  }
  .lux-tile-content-box {
    padding: 1px !important;
    justify-content: space-between !important;
  }
  .lux-tile-icon-emblem {
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
    transform: none !important;
    padding: 1px !important;
  }
  .lux-tile-icon-emblem svg {
    width: 12px !important;
    height: 12px !important;
  }
  .lux-tile-typography {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .lux-tile-title {
    font-size: 0.52rem !important;
    line-height: 1.05 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .lux-tag-price {
    font-size: 0.50rem !important;
    line-height: 1 !important;
  }
  .lux-tag-price .rent {
    display: none !important; /* Save space on tiny tiles */
  }
  .lux-tag-mortgaged {
    font-size: 0.44rem !important;
    padding: 0 1px !important;
  }
  .lux-tag-desc {
    font-size: 0.46rem !important;
    line-height: 1 !important;
  }
  .lux-tile-owner-chip {
    padding: 0 2px !important;
    height: 10px !important;
  }
  .lux-owner-name {
    display: none !important;
  }
  .lux-board-pawn {
    width: 15px !important;
    height: 15px !important;
    border-width: 1.5px !important;
    transform: none !important;
  }
  .lux-pawn-beacon {
    display: none !important;
  }

  /* Central Rotunda on Small Screens: Compact, Elegant & High Density */
  .lux-center-rotunda {
    padding: 4px !important;
    transform: none !important;
    border-radius: 10px !important;
  }
  .lux-rotunda-inlay {
    gap: 2px !important;
    justify-content: space-around !important;
  }
  .rotunda-brand-emblem {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .lux-crest-wreath {
    font-size: 11px !important;
  }
  .lux-rotunda-title {
    font-size: 0.68rem !important;
    letter-spacing: 0.06em !important;
  }
  .rotunda-tagline {
    display: none !important;
  }
  
  .rotunda-active-player-dock {
    padding: 2px 6px !important;
    gap: 4px !important;
  }
  .dock-turn-num {
    font-size: 0.52rem !important;
  }
  .dock-player-pill {
    padding: 1px 5px !important;
  }
  .active-turn-label {
    display: none !important;
  }
  .active-turn-name {
    font-size: 0.62rem !important;
  }
  
  .lux-rotunda-city-stats-quad {
    display: none !important; /* Hide secondary stats in mini center to leave full room for action & dice */
  }

  /* Compact 3D Miniature City Diorama */
  .lux-central-3d-city-diorama {
    width: 100% !important;
    max-width: 180px !important;
    height: 48px !important;
  }
  .rotunda-water-basin {
    width: 22px !important;
    height: 22px !important;
  }
  .rotunda-gold-obelisk {
    height: 16px !important;
    width: 4px !important;
  }
  .mini-3d-building {
    transform: scale(0.7) !important;
  }

  /* Dice Arena Pod */
  .lux-dice-arena-pod {
    gap: 3px !important;
  }
  .lux-dice-pair-container {
    gap: 10px !important;
  }
  .lux-3d-die-cube {
    width: 32px !important;
    height: 32px !important;
    transform: rotateX(-15deg) rotateY(20deg) !important;
  }
  .lux-die-face {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
  }
  .lux-die-pip {
    width: 6px !important;
    height: 6px !important;
  }
  .lux-dice-total-tag {
    font-size: 0.65rem !important;
    padding: 1px 6px !important;
  }

  /* Action Dock */
  .lux-action-dock-rack {
    width: 100% !important;
  }
  .lux-action-panel {
    padding: 4px 6px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }
  .lux-action-headline {
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
  }
  .action-buttons-rack {
    gap: 4px !important;
  }
  .lux-btn-confirm, .lux-btn-pass {
    padding: 4px 8px !important;
    font-size: 0.68rem !important;
  }

  /* Journal ticker */
  .lux-activity-journal-ticker {
    padding: 2px 6px !important;
    font-size: 0.58rem !important;
    max-width: 100% !important;
  }

  /* Integrated Leather Wallet - Perfectly Fitted & Never Cut Off */
  .lux-wallet-side-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: auto !important;
  }
  .lux-3d-leather-wallet {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .wallet-flap-crease {
    display: none !important;
  }
  .lux-wallet-total-display {
    padding: 6px 10px !important;
  }
  .lux-wallet-total-display .lbl {
    font-size: 0.58rem !important;
  }
  .lux-wallet-total-display .val {
    font-size: 1.15rem !important;
  }
  .lux-banknotes-stack {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .lux-banknote {
    width: 68px !important;
    height: 34px !important;
    font-size: 0.62rem !important;
    transform: none !important;
  }
  .lux-portfolio-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 6px !important;
    max-height: 200px !important;
  }
  .lux-asset-item-card {
    padding: 6px !important;
  }
  .asset-card-title {
    font-size: 0.68rem !important;
  }
  .asset-card-action-bar .btn {
    font-size: 0.58rem !important;
    padding: 2px 4px !important;
  }

  /* Modals: Clean Scrollable Viewports, Zero Cutoff */
  .lux-modal-scrim {
    padding: 8px !important;
  }
  .lux-modal-window {
    max-height: 94vh !important;
    width: 100% !important;
    border-radius: 14px !important;
  }
  .lux-mwindow-header {
    padding: 8px 12px !important;
  }
  .mheader-title h4 {
    font-size: 0.82rem !important;
  }
  .mheader-title small {
    font-size: 0.60rem !important;
  }
  .lux-mwindow-footer {
    padding: 8px 12px !important;
  }
  
  .lux-trade-bilateral-grid {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  .lux-trade-column {
    padding: 8px !important;
    gap: 6px !important;
  }
  .lux-trade-separator {
    transform: rotate(90deg) !important;
    margin: 2px 0 !important;
  }
  .exchange-sphere {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
  }
  
  .lux-wealth-quad-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .wealth-metric-card {
    padding: 6px 8px !important;
  }
  .metric-val {
    font-size: 0.8rem !important;
  }
  .lux-portfolio-assets-list {
    padding: 8px 10px !important;
    max-height: 280px !important;
    gap: 6px !important;
  }
  .lux-estate-row {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  .estate-actions-cluster {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }
  .estate-actions-cluster .btn {
    font-size: 0.62rem !important;
    padding: 3px 6px !important;
  }
}

/* ==========================================================================
   NOVA ACTIVITIES HUB — SPECIFIC LUXURY FINISHES & ADAPTIVE STYLING
   ========================================================================== */

/* Navbar refinements */
.navbar {
  background: rgba(19, 31, 50, 0.92) !important;
  border: 1px solid rgba(214, 184, 120, 0.28) !important;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(214, 184, 120, 0.12) !important;
  backdrop-filter: blur(20px) !important;
}

.brand-title {
  color: #F3F0E8 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.brand-subtitle {
  color: #A7B2C4 !important;
}

.logo-icon {
  background: linear-gradient(135deg, #D6B878 0%, #B98555 100%) !important;
  color: #0B1220 !important;
  box-shadow: 0 4px 16px rgba(214, 184, 120, 0.35) !important;
  border: 1px solid rgba(233, 211, 155, 0.6) !important;
}

/* User profile widget in navbar */
.user-badge {
  background: #1B2940 !important;
  border: 1px solid rgba(214, 184, 120, 0.28) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease;
}

.user-badge:hover {
  background: #223452 !important;
  border-color: rgba(214, 184, 120, 0.6) !important;
  cursor: pointer;
}

.username {
  color: #F3F0E8 !important;
}

.navbar-level-tag {
  background: linear-gradient(135deg, #D6B878, #B98555) !important;
  color: #0B1220 !important;
  box-shadow: 0 0 10px rgba(214, 184, 120, 0.35) !important;
  font-weight: 800 !important;
}

.navbar-xp-fill {
  background: linear-gradient(90deg, #D6B878, #36B894) !important;
}

.voice-status {
  background: rgba(54, 184, 148, 0.12) !important;
  color: #36B894 !important;
  border: 1px solid rgba(54, 184, 148, 0.3) !important;
}

.voice-status .dot {
  background-color: #36B894 !important;
  box-shadow: 0 0 8px rgba(54, 184, 148, 0.8) !important;
}

/* Hub navigation buttons */
.btn-quests, .btn-wheel, .btn-shop, .btn-leaderboard, .btn-settings, .btn-cinema {
  background: rgba(27, 41, 64, 0.85) !important;
  border: 1px solid rgba(214, 184, 120, 0.22) !important;
  color: #F3F0E8 !important;
}

.btn-quests:hover, .btn-wheel:hover, .btn-shop:hover, .btn-leaderboard:hover, .btn-settings:hover, .btn-cinema:hover {
  background: #223452 !important;
  border-color: #D6B878 !important;
  color: #FFFFFF !important;
}

/* Modals general styling */
.modal-card {
  background: linear-gradient(155deg, #1B2940 0%, #131F32 100%) !important;
  border: 1px solid rgba(214, 184, 120, 0.35) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(214, 184, 120, 0.15) !important;
  color: #F3F0E8 !important;
}

.modal-card h2, .modal-card h3 {
  color: #F3F0E8 !important;
}

.modal-close {
  background: rgba(27, 41, 64, 0.8) !important;
  border: 1px solid rgba(214, 184, 120, 0.3) !important;
  color: #D6B878 !important;
}

.modal-close:hover {
  background: #223452 !important;
  border-color: #D6B878 !important;
  color: #FFFFFF !important;
}

.badge-tag.gold {
  background: rgba(214, 184, 120, 0.12) !important;
  color: #D6B878 !important;
  border: 1px solid rgba(214, 184, 120, 0.35) !important;
}

.lb-modal-hero .badge-tag {
  background: rgba(214, 184, 120, 0.15) !important;
  color: #D6B878 !important;
  border: 1px solid rgba(214, 184, 120, 0.4) !important;
}

.lb-tab-btn {
  background: rgba(27, 41, 64, 0.6) !important;
  border: 1px solid rgba(214, 184, 120, 0.2) !important;
  color: #A7B2C4 !important;
}

.lb-tab-btn.active {
  background: linear-gradient(135deg, #D6B878, #B98555) !important;
  color: #0B1220 !important;
  font-weight: 800 !important;
  border-color: transparent !important;
}

.lb-item {
  background: rgba(27, 41, 64, 0.65) !important;
  border: 1px solid rgba(214, 184, 120, 0.18) !important;
  color: #F3F0E8 !important;
}

.lb-item:hover {
  background: rgba(34, 52, 82, 0.85) !important;
  border-color: rgba(214, 184, 120, 0.45) !important;
}

.lb-item.current-user-rank {
  background: rgba(214, 184, 120, 0.14) !important;
  border: 1px solid rgba(214, 184, 120, 0.6) !important;
}

.profile-modal-card {
  background: #131F32 !important;
  border: 1px solid rgba(214, 184, 120, 0.3) !important;
}

/* ==========================================================================
   NOVA ACTIVITIES HUB — RESPONSIVE MOBILE & MODAL LUXURY REFINEMENTS
   ========================================================================== */

/* 1. Global App Container on Mobile */
@media (max-width: 768px) {
  .app-container {
    padding: 10px 12px 60px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 2. Compact Multi-row Navbar */
  body .navbar,
  .navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 16px !important;
  }

  .brand {
    order: 1 !important;
    gap: 8px !important;
    flex: 0 1 auto !important;
  }

  .brand-title {
    font-size: 0.95rem !important;
  }

  .brand-subtitle {
    display: none !important;
  }

  .logo-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .logo-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* User profile widget placed next to brand on line 1 */
  .user-profile-widget {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
  }

  .voice-status {
    padding: 4px 8px !important;
    font-size: 0.68rem !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .voice-status strong {
    max-width: 75px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

  .user-badge {
    padding: 3px 8px 3px 3px !important;
    gap: 6px !important;
  }

  .avatar-circle {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }

  .username {
    font-size: 0.75rem !important;
    max-width: 68px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .navbar-level-tag {
    font-size: 0.58rem !important;
    padding: 1px 4px !important;
  }

  .navbar-xp-bar {
    width: 60px !important;
    height: 3px !important;
  }

  /* Navbar Actions line 2 */
  .navbar-actions {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(214, 184, 120, 0.12) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .navbar-actions::-webkit-scrollbar {
    display: none !important;
  }

  .navbar-actions .btn {
    flex: 1 1 auto !important;
    padding: 6px 6px !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    justify-content: center !important;
    min-width: 38px !important;
  }

  .navbar-actions .btn .lb-label {
    display: none !important;
  }

  /* Hero Section adjustments */
  body .hero-card {
    min-height: auto !important;
    padding: 22px 18px !important;
    border-radius: 18px !important;
    margin-bottom: 18px !important;
  }

  body .hero-card h1 {
    font-size: 1.6rem !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }

  body .hero-card p {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .hero-actions .btn-primary {
    grid-column: span 2 !important;
    padding: 12px !important;
  }

  .hero-actions .btn {
    font-size: 0.8rem !important;
    padding: 9px 12px !important;
  }

  /* Podium / Panthéon on mobile */
  .hub-leaderboard-preview {
    padding: 16px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 18px !important;
  }

  .lb-preview-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .podium-mini-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Games Grid on mobile */
  .games-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .game-card {
    border-radius: 16px !important;
  }
}

@media (max-width: 390px) {
  body .navbar,
  .navbar {
    padding: 8px 10px !important;
  }

  .brand-title {
    font-size: 0.88rem !important;
  }

  .voice-status {
    padding: 3px 6px !important;
    font-size: 0.62rem !important;
  }

  .voice-status strong {
    max-width: 60px !important;
  }

  .username {
    max-width: 55px !important;
  }

  .navbar-actions .btn {
    padding: 5px 4px !important;
  }

  body .hero-card h1 {
    font-size: 1.45rem !important;
  }
}

/* 3. Modal Perfect Positioning & Close Button */
.modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(27, 41, 64, 0.9) !important;
  border: 1px solid rgba(214, 184, 120, 0.45) !important;
  color: #D6B878 !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.2s ease !important;
}

.modal-close:hover {
  background: #223452 !important;
  border-color: #E9D39B !important;
  color: #FFFFFF !important;
  transform: scale(1.08) !important;
}

/* Modal Responsiveness & Vertical Scrolling */
.modal-card {
  position: relative !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(214, 184, 120, 0.35) transparent !important;
  border-radius: 20px !important;
}

.modal-card::-webkit-scrollbar {
  width: 6px !important;
}

.modal-card::-webkit-scrollbar-thumb {
  background: rgba(214, 184, 120, 0.4) !important;
  border-radius: 6px !important;
}

@media (max-width: 600px) {
  .modal-card {
    width: 95vw !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    padding: 24px 14px 18px !important;
    border-radius: 18px !important;
  }

  .modal-close {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 1.25rem !important;
  }
}

/* 4. Boutique (Shop Modal) Grid & Tab Responsiveness */
.shop-modal-card {
  max-width: 820px !important;
  width: min(820px, 95vw) !important;
  padding: 28px 24px 20px !important;
}

.shop-category-tabs {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 6px !important;
  margin-bottom: 16px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.shop-category-tabs::-webkit-scrollbar {
  display: none !important;
}

.shop-tab-btn {
  flex-shrink: 0 !important;
  padding: 7px 16px !important;
  font-size: 0.82rem !important;
  border-radius: 999px !important;
}

.shop-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  max-height: 58vh !important;
  overflow-y: auto !important;
  padding: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(214, 184, 120, 0.35) transparent !important;
}

@media (max-width: 600px) {
  .shop-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-height: 52vh !important;
  }
}

/* 5. Daily Wheel (Roue Quotidienne) Centering & Sizing */
.wheel-modal-card {
  max-width: 520px !important;
  width: min(520px, 94vw) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 20px 22px !important;
}

.wheel-stage {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  margin: 16px auto !important;
}

.wheel-outer-ring {
  position: relative !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 6px #0B1220, 0 0 0 9px #D6B878, 0 0 30px rgba(214, 184, 120, 0.35) !important;
}

.wheel-pointer {
  position: absolute !important;
  top: -16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 15 !important;
}

.wheel-controls {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 14px !important;
}

.wheel-controls .btn-lg {
  max-width: 320px !important;
  width: 100% !important;
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

@media (max-width: 480px) {
  .wheel-stage {
    max-width: 250px !important;
  }
  .wheel-outer-ring {
    width: 240px !important;
    height: 240px !important;
  }
  .wheel-pointer {
    top: -12px !important;
  }
  .wheel-pointer svg {
    width: 24px !important;
    height: 30px !important;
  }
}

/* 6. Leaderboard Modal (Classements) Alignment & Avatars */
.leaderboard-modal-card {
  width: min(840px, 96vw) !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 28px 24px 20px !important;
}

.lb-tabs-container {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  margin-bottom: 14px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.lb-tabs-container::-webkit-scrollbar {
  display: none !important;
}

.lb-tab-btn {
  flex-shrink: 0 !important;
  padding: 8px 14px !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
}

.lb-podium-showcase {
  margin-bottom: 14px !important;
}

.podium-pillar {
  background: linear-gradient(160deg, rgba(27, 41, 64, 0.9), rgba(19, 31, 50, 0.98)) !important;
  border: 1px solid rgba(214, 184, 120, 0.25) !important;
  border-radius: 16px !important;
  padding: 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

.pillar-avatar,
.lb-player-av {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1B2940 !important;
  border: 2px solid rgba(214, 184, 120, 0.4) !important;
  flex-shrink: 0 !important;
}

.pillar-avatar img,
.lb-player-av img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.letter-av {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #1B2940, #131F32) !important;
  color: #D6B878 !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  border-radius: 50% !important;
}

.lb-list-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  overflow-y: auto !important;
  max-height: 44vh !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(214, 184, 120, 0.35) transparent !important;
  padding-right: 4px !important;
}

.lb-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  background: rgba(27, 41, 64, 0.6) !important;
  border: 1px solid rgba(214, 184, 120, 0.18) !important;
}

.lb-player-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.lb-player-name {
  color: #F3F0E8 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.lb-stats-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.lb-stat-val.gold {
  color: #D6B878 !important;
  font-weight: 800 !important;
}

@media (max-width: 600px) {
  .leaderboard-modal-card {
    padding: 22px 12px 14px !important;
  }

  .lb-podium-showcase {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .podium-pillar {
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
  }

  .pillar-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .lb-player-av {
    width: 34px !important;
    height: 34px !important;
  }

  .lb-stats-group {
    gap: 8px !important;
  }

  .lb-stat-val {
    font-size: 0.82rem !important;
  }

  .lb-stat-label {
    display: none !important;
  }
}

/* ==========================================================================
   NOVA ACTIVITIES HUB — FINAL LUXURY POLISH (WHEEL, SHOP & RESPONSIVE)
   ========================================================================== */

/* 1. Daily Wheel Metallic Luxury Center Pin & Outer Ring */
.wheel-outer-ring {
  box-shadow: 0 0 0 6px #0B1220, 0 0 0 9px #D6B878, 0 0 35px rgba(214, 184, 120, 0.45) !important;
}

.wheel-center-pin {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #E9D39B 0%, #D6B878 50%, #B98555 100%) !important;
  border: 4px solid #F3F0E8 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 25px rgba(214, 184, 120, 0.6) !important;
}

.wheel-center-pin .pin-inner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B2940, #0B1220);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214, 184, 120, 0.4);
}

.wheel-center-pin .pin-inner svg {
  fill: #D6B878 !important;
}

/* 2. Shop Cards Luxury Refinements */
.shop-card {
  background: #17263B !important;
  border: 1px solid rgba(214, 184, 120, 0.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(214, 184, 120, 0.1) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.shop-card:hover {
  background: #1B2940 !important;
  border-color: rgba(214, 184, 120, 0.7) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 0 22px rgba(214, 184, 120, 0.3) !important;
  transform: translateY(-4px) !important;
}

.shop-card.equipped {
  border-color: #36B894 !important;
  background: rgba(54, 184, 148, 0.12) !important;
  box-shadow: 0 0 22px rgba(54, 184, 148, 0.35) !important;
}

.shop-card-title {
  color: #F3F0E8 !important;
  font-weight: 800 !important;
}

.shop-card-type-tag {
  background: rgba(27, 41, 64, 0.8) !important;
  border: 1px solid rgba(214, 184, 120, 0.3) !important;
  color: #D6B878 !important;
}

.shop-card-desc {
  color: #A7B2C4 !important;
}

.shop-card-price {
  color: #D6B878 !important;
  font-weight: 800 !important;
}

.shop-card-price.unlocked {
  color: #36B894 !important;
}

.shop-card-icon-wrapper {
  background: #1B2940 !important;
  border: 1px solid rgba(214, 184, 120, 0.35) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Navigation & Responsive Perfection across all resolutions */
@media (max-width: 932px) and (min-width: 420px) {
  .navbar-actions .btn {
    padding: 6px 8px !important;
    font-size: 0.76rem !important;
  }
}

@media (max-width: 430px) {
  body .navbar,
  .navbar {
    padding: 8px 10px !important;
  }

  .brand-title {
    font-size: 0.90rem !important;
  }

  .voice-status {
    padding: 3px 6px !important;
    font-size: 0.64rem !important;
  }

  .voice-status strong {
    max-width: 70px !important;
  }

  .username {
    max-width: 60px !important;
  }

  .navbar-actions .btn {
    padding: 5px 4px !important;
    font-size: 0.70rem !important;
  }

  .hero-actions .btn {
    font-size: 0.78rem !important;
  }
}

/* ==========================================================================
   NOVA ACTIVITIES — DERNIÈRES RETOUCHES VISUELLES PRODUCTION
   ========================================================================== */

/* 1. Bouton de la Roue quotidienne : Dégradé Or Champagne Luxury */
#btn-spin-wheel,
.wheel-controls #btn-spin-wheel {
  background: linear-gradient(135deg, #E9D39B 0%, #D6B878 50%, #B98555 100%) !important;
  color: #0B1220 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(243, 240, 232, 0.4) !important;
  box-shadow: 0 8px 24px -4px rgba(214, 184, 120, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
}

#btn-spin-wheel:hover:not(:disabled),
.wheel-controls #btn-spin-wheel:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 12px 28px -4px rgba(214, 184, 120, 0.6) !important;
}

#btn-spin-wheel:disabled,
.wheel-controls #btn-spin-wheel:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(0.2) !important;
}

/* 2. En-tête mobile ultra-optimisé (360px & 390px) */
@media (max-width: 480px) {
  body .navbar,
  .navbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  /* Ligne 1 : Marque à gauche, Profil complet à droite */
  .brand {
    width: auto !important;
    gap: 8px !important;
  }

  .brand-title {
    font-size: 0.92rem !important;
    white-space: nowrap !important;
  }

  .logo-icon {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  /* Ligne 1 bis : Widget profil utilisateur et statut vocal organisés */
  .user-profile-widget {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .voice-status {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
    gap: 6px !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    border-radius: 999px !important;
  }

  .voice-status strong {
    max-width: 95px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: middle !important;
    font-weight: 700 !important;
  }

  .user-badge {
    flex: 0 0 auto !important;
    padding: 3px 10px 3px 3px !important;
    gap: 7px !important;
    border-radius: 999px !important;
  }

  .user-badge .username {
    max-width: 85px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
  }

  .navbar-level-tag {
    font-size: 0.60rem !important;
    padding: 1px 5px !important;
  }

  .navbar-xp-bar {
    width: 70px !important;
    height: 3px !important;
  }

  /* Ligne 2 : Les six boutons de navigation accessibles sans débordement */
  .navbar-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(214, 184, 120, 0.15) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .navbar-actions::-webkit-scrollbar {
    display: none !important;
  }

  .navbar-actions .btn {
    flex: 1 1 0 !important;
    min-width: 36px !important;
    padding: 7px 4px !important;
    font-size: 0.75rem !important;
    border-radius: 9px !important;
    justify-content: center !important;
  }

  .navbar-actions .btn .lb-label {
    display: none !important;
  }
}

@media (max-width: 375px) {
  .voice-status strong {
    max-width: 75px !important;
  }
  .user-badge .username {
    max-width: 70px !important;
  }
  .navbar-actions .btn {
    padding: 6px 3px !important;
  }
}

/* ==========================================================================
   NOVA ACTIVITIES — CORRECTION FINALE EN-TÊTE MOBILE (DÉDIÉ & SANS TRONCATURE)
   ========================================================================== */

@media (max-width: 480px) {
  body .navbar,
  .navbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  /* RANGÉE 1 : Logo & Nom de la plateforme à gauche, Profil utilisateur complet à droite */
  .brand {
    width: auto !important;
    gap: 8px !important;
  }

  .brand-title {
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
  }

  .logo-icon {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  .user-profile-widget {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  /* RANGÉE 1.5 : Profil utilisateur placé sur la même ligne que la marque grâce à un container flex */
  .navbar-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  /* RANGÉE 2 : Statut Vocal DÉDIÉ sur sa propre ligne avec pleine largeur */
  .voice-status {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 12px !important;
    font-size: 0.74rem !important;
    gap: 6px !important;
    white-space: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 10px !important;
    line-height: 1.3 !important;
  }

  .voice-status .dot {
    flex-shrink: 0 !important;
  }

  .voice-status strong,
  #current-channel {
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    display: inline !important;
    font-weight: 700 !important;
  }

  /* Profil utilisateur complet sans troncature */
  .user-badge {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
  }

  .avatar-circle {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }

  .user-meta-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .user-meta-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .username,
  #user-name {
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #F3F0E8 !important;
  }

  .navbar-level-tag {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    flex-shrink: 0 !important;
  }

  .navbar-xp-bar {
    width: 100% !important;
    max-width: 160px !important;
    height: 4px !important;
    margin-top: 3px !important;
  }

  /* RANGÉE 3 : Six boutons de navigation accessibles sans débordement horizontal */
  .navbar-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(214, 184, 120, 0.18) !important;
    overflow: visible !important;
  }

  .navbar-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 2px !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    justify-content: center !important;
  }

  .navbar-actions .btn .lb-label {
    display: none !important;
  }
}

/* ==========================================================================
   CORRECTIONS FINALES AUDIT — NOTIFICATIONS SÉCURISÉES & TABLETTE OPTIMISÉE
   ========================================================================== */

/* 1. Notifications repositionnées et non-bloquantes */
.game-toast,
#game-toast-popup {
  position: fixed !important;
  top: auto !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  background: rgba(27, 41, 64, 0.95) !important;
  border: 1px solid rgba(214, 184, 120, 0.45) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(214, 184, 120, 0.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #F3F0E8 !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  z-index: 100000 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 90vw !important;
  white-space: normal !important;
  text-align: center !important;
}

.game-toast.show,
#game-toast-popup.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: none !important;
}

/* Sur mobile, notification bien au-dessus de la zone tactile basse */
@media (max-width: 600px) {
  .game-toast,
  #game-toast-popup {
    bottom: 20px !important;
    padding: 8px 16px !important;
    font-size: 0.78rem !important;
    border-radius: 12px !important;
    line-height: 1.35 !important;
  }
}

/* 2. Format Tablette & Desktop Compact (largeurs de 481px à 1100px : 768px, 820px, 1024px) */
@media (min-width: 481px) and (max-width: 1100px) {
  body .navbar,
  .navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
  }

  .brand {
    order: 1 !important;
    flex: 0 0 auto !important;
    gap: 10px !important;
  }

  .brand-title {
    font-size: 1.05rem !important;
    white-space: nowrap !important;
  }

  .brand-subtitle {
    display: block !important;
    font-size: 0.7rem !important;
    color: #A7B2C4 !important;
  }

  /* Profil utilisateur et statut vocal sur ligne 1 à droite */
  .user-profile-widget {
    order: 2 !important;
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    max-width: 60% !important;
  }

  /* Statut vocal sans troncature */
  .voice-status {
    padding: 6px 12px !important;
    font-size: 0.76rem !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    background: rgba(54, 184, 148, 0.15) !important;
    border: 1px solid rgba(54, 184, 148, 0.35) !important;
    color: #36B894 !important;
    flex-shrink: 0 !important;
  }

  .voice-status strong,
  #current-channel {
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    display: inline !important;
    font-weight: 700 !important;
  }

  /* Badge profil avec pseudo complet */
  .user-badge {
    padding: 4px 12px 4px 5px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    background: rgba(27, 41, 64, 0.8) !important;
    border: 1px solid rgba(214, 184, 120, 0.25) !important;
  }

  .avatar-circle {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }

  .user-meta-top {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .username,
  #user-name {
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #F3F0E8 !important;
  }

  .navbar-level-tag {
    font-size: 0.65rem !important;
    padding: 1px 6px !important;
  }

  .navbar-xp-bar {
    width: 80px !important;
    height: 3px !important;
  }

  /* Rangée 2 : Les six boutons de navigation accessibles avec libellés */
  .navbar-actions {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(214, 184, 120, 0.15) !important;
    overflow: visible !important;
  }

  .navbar-actions .btn {
    flex: 1 1 0 !important;
    padding: 8px 6px !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }

  .navbar-actions .btn .lb-label {
    display: inline-block !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    margin-left: 4px !important;
  }
}