/* =============================================
   PIXEL CONQUEST - STYLES
   Version: 0.7.0
   ============================================= */

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

body { 
  font-family: 'Press Start 2P', monospace; 
  background: #0a0a0f; 
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

/* =============================================
   ANIMATIONS - Basic
   ============================================= */

@keyframes pulse { 
  0%, 100% { opacity: 1; } 
  50% { opacity: 0.7; } 
}

@keyframes unreadPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

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

@keyframes glitch {
  0%, 100% { text-shadow: 2px 0 #ff3b3b, -2px 0 #3bff5b; }
  25% { text-shadow: -2px 0 #ff3b3b, 2px 0 #3b8bff; }
  50% { text-shadow: 2px 0 #3b8bff, -2px 0 #ff3b3b; }
  75% { text-shadow: -2px 0 #3bff5b, 2px 0 #3b8bff; }
}

@keyframes blink { 
  0%, 100% { opacity: 1; } 
  50% { opacity: 0; } 
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px currentColor; }
  50% { box-shadow: 0 0 40px currentColor; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes nukeCharge {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* =============================================
   ANIMATIONS - Game Actions
   ============================================= */

/* EXPAND - Ripple burst effect */
@keyframes expandRipple {
  0% { 
    transform: scale(0.5); 
    opacity: 1;
    box-shadow: 0 0 0 0 currentColor;
  }
  50% { 
    transform: scale(1.5); 
    opacity: 0.8;
    box-shadow: 0 0 20px 10px currentColor;
  }
  100% { 
    transform: scale(1); 
    opacity: 1;
    box-shadow: 0 0 5px 2px currentColor;
  }
}

@keyframes expandPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* UPGRADE - Level up glow burst */
@keyframes upgradeGlow {
  0% { 
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  25% { 
    filter: brightness(2) saturate(1.5);
    transform: scale(1.1);
  }
  50% { 
    filter: brightness(3) saturate(2);
    transform: scale(1.15);
    box-shadow: 0 0 50px 20px gold;
  }
  75% { 
    filter: brightness(2) saturate(1.5);
    transform: scale(1.1);
  }
  100% { 
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
}

@keyframes levelUpText {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-30px) scale(1.5); opacity: 1; }
  100% { transform: translateY(-60px) scale(1); opacity: 0; }
}

@keyframes starBurst {
  0% { transform: rotate(0deg) scale(0); opacity: 1; }
  50% { transform: rotate(180deg) scale(1.5); opacity: 1; }
  100% { transform: rotate(360deg) scale(0); opacity: 0; }
}

/* BUILD - Construction effect */
@keyframes buildPulse {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.05);
    filter: brightness(1.3);
  }
}

@keyframes constructionShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes hammerSwing {
  0%, 100% { transform: rotate(-20deg); }
  50% { transform: rotate(20deg); }
}

/* NUKE - Explosion effect */
@keyframes nukeExplosion {
  0% { 
    transform: scale(0);
    opacity: 1;
    filter: brightness(1);
  }
  20% { 
    transform: scale(0.5);
    opacity: 1;
    filter: brightness(5) hue-rotate(0deg);
  }
  40% { 
    transform: scale(2);
    opacity: 0.9;
    filter: brightness(10) hue-rotate(30deg);
  }
  60% { 
    transform: scale(3);
    opacity: 0.7;
    filter: brightness(5) hue-rotate(60deg);
  }
  100% { 
    transform: scale(5);
    opacity: 0;
    filter: brightness(1) hue-rotate(0deg);
  }
}

@keyframes nukeShockwave {
  0% { 
    transform: scale(0);
    border-width: 10px;
    opacity: 1;
  }
  100% { 
    transform: scale(4);
    border-width: 2px;
    opacity: 0;
  }
}

@keyframes nukeFlash {
  0% { opacity: 0; }
  10% { opacity: 1; background: white; }
  20% { opacity: 0.8; background: yellow; }
  40% { opacity: 0.5; background: orange; }
  100% { opacity: 0; }
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10px, -5px); }
  20% { transform: translate(10px, 5px); }
  30% { transform: translate(-8px, 8px); }
  40% { transform: translate(8px, -8px); }
  50% { transform: translate(-5px, 5px); }
  60% { transform: translate(5px, -5px); }
  70% { transform: translate(-3px, 3px); }
  80% { transform: translate(3px, -3px); }
  90% { transform: translate(-1px, 1px); }
}

@keyframes mushroomCloud {
  0% { 
    transform: scaleY(0) scaleX(0.5);
    opacity: 0;
  }
  30% { 
    transform: scaleY(1.5) scaleX(0.8);
    opacity: 1;
  }
  60% { 
    transform: scaleY(1.2) scaleX(1.5);
    opacity: 0.8;
  }
  100% { 
    transform: scaleY(1) scaleX(2);
    opacity: 0;
  }
}

/* FORTIFY/ATTACK - Pixel combat */
@keyframes fortifyShield {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(100, 200, 255, 0.8); }
  50% { transform: scale(1.2); box-shadow: 0 0 20px 10px rgba(100, 200, 255, 0.4); }
  100% { transform: scale(1); box-shadow: 0 0 5px 2px rgba(100, 200, 255, 0.2); }
}

@keyframes attackSlash {
  0% { transform: translateX(-20px) rotate(-45deg); opacity: 0; }
  50% { transform: translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(20px) rotate(45deg); opacity: 0; }
}

@keyframes damageFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.3) sepia(1) hue-rotate(-50deg); }
}

/* MESSAGE BANNER ANIMATIONS */
@keyframes messagePop {
  0% { transform: translateY(-100%); opacity: 0; }
  20% { transform: translateY(10%); opacity: 1; }
  40% { transform: translateY(-5%); }
  60% { transform: translateY(2%); }
  80% { transform: translateY(-1%); }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes successGlow {
  0%, 100% { 
    box-shadow: 0 0 10px rgba(59, 255, 91, 0.5);
    border-color: #3bff5b;
  }
  50% { 
    box-shadow: 0 0 30px rgba(59, 255, 91, 0.8);
    border-color: #7fff9b;
  }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes slideDown {
  0% { 
    opacity: 0; 
    transform: translateX(-50%) translateY(-20px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(-50%) translateY(0); 
  }
}

/* =============================================
   ANIMATION UTILITY CLASSES
   ============================================= */

.animate-expand { animation: expandPop 0.4s ease-out; }
.animate-upgrade { animation: upgradeGlow 0.8s ease-in-out; }
.animate-build { animation: buildPulse 0.5s ease-in-out; }
.animate-nuke { animation: screenShake 0.5s ease-in-out; }
.animate-fortify { animation: fortifyShield 0.5s ease-out; }
.animate-attack { animation: damageFlash 0.3s ease-in-out; }
.animate-message-success { animation: messagePop 0.5s ease-out, successGlow 1s ease-in-out infinite; }
.animate-message-error { animation: messagePop 0.3s ease-out, errorShake 0.5s ease-in-out; }
}

/* =============================================
   FACTION COLORS
   ============================================= */

.text-machine { color: #ff3b3b; }
.text-cyborg { color: #3bff5b; }
.text-human { color: #3b8bff; }
.text-gold { color: #ffbb3b; }

.bg-machine { background: #2a0a0a; }
.bg-cyborg { background: #0a2a0a; }
.bg-human { background: #0a1a2a; }

.glow-machine { text-shadow: 0 0 10px #ff6b6b; }
.glow-cyborg { text-shadow: 0 0 10px #6bff8b; }
.glow-human { text-shadow: 0 0 10px #6ba8ff; }

/* =============================================
   SCROLLBAR STYLING
   ============================================= */

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

::-webkit-scrollbar-track {
  background: #0a0a0f;
}

::-webkit-scrollbar-thumb {
  background: #2a2a4f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3a3a6f;
}

/* =============================================
   BUTTON HOVER EFFECTS
   ============================================= */

button {
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

/* =============================================
   INPUT STYLING
   ============================================= */

input {
  -webkit-tap-highlight-color: transparent;
}

input::placeholder {
  color: #555;
}

/* =============================================
   MOBILE RESPONSIVENESS
   ============================================= */

@media (max-width: 768px) {
  body {
    font-size: 12px;
  }
  
  button:hover:not(:disabled) {
    transform: none;
    filter: brightness(1.05);
  }
  
  /* Improve touch targets */
  button, input {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 10px;
  }
}

/* =============================================
   CANVAS STYLING
   ============================================= */

canvas {
  touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

.no-select {
  -webkit-user-select: none;
  user-select: none;
}

/* =============================================
   V1.0 UI OVERHAUL - MOBILE FLOATING ACTION BAR
   ============================================= */

/* Floating Action Bar Container */
.mobile-fab {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.98) 0%, rgba(15, 15, 26, 0.99) 100%);
  border-top: 2px solid #2a2a4f;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* FAB Action Buttons Row */
.fab-actions {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

/* FAB Action Button */
.fab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 8px;
  border: 2px solid;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.35rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: visible;
  min-height: 60px;
}

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

.fab-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fab-btn-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.fab-btn-label {
  font-size: 0.28rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* FAB Button Variants */
.fab-btn-expand {
  background: linear-gradient(180deg, #1a3a1a 0%, #0f2a0f 100%);
  border-color: #3bff5b;
  color: #3bff5b;
}

.fab-btn-upgrade {
  background: linear-gradient(180deg, #3a3a1a 0%, #2a2a0f 100%);
  border-color: #ffbb3b;
  color: #ffbb3b;
}

.fab-btn-build {
  background: linear-gradient(180deg, #1a1a3a 0%, #0f0f2a 100%);
  border-color: #8b5bff;
  color: #8b5bff;
}

.fab-btn-nuke {
  background: linear-gradient(180deg, #3a1a1a 0%, #2a0f0f 100%);
  border-color: #ff5b5b;
  color: #ff5b5b;
}

.fab-btn-nuke:not(.fab-btn-ready) {
  border-color: #444;
  color: #666;
  background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
}

/* Cooldown Ring Animation */
.fab-cooldown-ring {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 10px;
  border: 3px solid transparent;
  pointer-events: none;
}

.fab-cooldown-ring.active {
  animation: cooldownPulse 1s ease-in-out infinite;
}

@keyframes cooldownPulse {
  0%, 100% { border-color: rgba(255, 255, 255, 0.2); }
  50% { border-color: rgba(255, 255, 255, 0.5); }
}

/* FAB Quick Info Row */
.fab-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}

.fab-cooldown-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.4rem;
  color: #888;
}

.fab-cooldown-number {
  font-size: 0.6rem;
  font-weight: bold;
  min-width: 20px;
  text-align: center;
}

/* =============================================
   V1.0 UI - COMPACT MOBILE HEADER
   ============================================= */

.mobile-header-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(10, 10, 15, 0.95);
  border-bottom: 2px solid #2a2a4f;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

.mobile-header-faction {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-header-faction-icon {
  font-size: 1.2rem;
}

.mobile-header-faction-name {
  font-size: 0.45rem;
  font-weight: bold;
  text-shadow: 0 0 8px currentColor;
}

.mobile-header-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-header-cycle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.35rem;
}

.mobile-header-cycle.day {
  background: rgba(255, 224, 102, 0.15);
  border: 1px solid #ffbb3b;
  color: #ffe066;
}

.mobile-header-cycle.night {
  background: rgba(107, 75, 255, 0.15);
  border: 1px solid #6b4bff;
  color: #b8a8ff;
}

.mobile-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-header-menu-btn {
  background: transparent;
  border: 2px solid #4a4a6f;
  border-radius: 6px;
  padding: 6px 8px;
  color: #888;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.mobile-header-menu-btn:active {
  background: rgba(255, 255, 255, 0.1);
}

/* =============================================
   V1.0 UI - SETTINGS DRAWER
   ============================================= */

.settings-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  animation: fadeIn 0.2s ease-out;
}

.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: linear-gradient(180deg, #0f0f1a 0%, #0a0a0f 100%);
  border-left: 2px solid #2a2a4f;
  z-index: 2001;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease-out;
  overflow-y: auto;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.settings-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 2px solid #2a2a4f;
  background: rgba(15, 15, 26, 0.8);
}

.settings-drawer-title {
  font-size: 0.55rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-drawer-close {
  background: transparent;
  border: 1px solid #666;
  border-radius: 4px;
  color: #888;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.8rem;
}

.settings-drawer-section {
  padding: 12px 16px;
  border-bottom: 1px solid #1a1a2f;
}

.settings-drawer-section-title {
  font-size: 0.35rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.settings-drawer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.settings-drawer-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-drawer-item-icon {
  font-size: 1rem;
  width: 28px;
  text-align: center;
}

.settings-drawer-item-label {
  font-size: 0.4rem;
  color: #ccc;
}

.settings-drawer-item-sublabel {
  font-size: 0.3rem;
  color: #666;
  margin-top: 2px;
}

.settings-toggle {
  background: #333;
  border: none;
  border-radius: 12px;
  width: 44px;
  height: 24px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.settings-toggle.on {
  background: #3bff5b;
}

.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.settings-toggle.on::after {
  transform: translateX(20px);
}

.settings-link-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid #2a2a4f;
  border-radius: 6px;
  color: #ccc;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.4rem;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.settings-link-btn:active {
  background: rgba(255, 255, 255, 0.1);
}

/* =============================================
   V1.0 UI - TERRITORY BAR (MOBILE)
   ============================================= */

.territory-bar-mobile {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: #1a1a2f;
}

.territory-bar-segment {
  height: 100%;
  transition: width 0.5s ease;
}

/* =============================================
   V1.0 UI - QUICK STATS STRIP
   ============================================= */

.quick-stats-strip {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 8px;
  background: rgba(15, 15, 26, 0.9);
  border-bottom: 1px solid #2a2a4f;
}

.quick-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.35rem;
}

.quick-stat-icon {
  font-size: 0.6rem;
}

.quick-stat-value {
  font-weight: bold;
}

/* =============================================
   V1.0 UI - IMPROVED LANDING SCREEN
   ============================================= */

/* Animated Background */
.landing-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0a0a0f 0%, #0f0a1a 25%, #0a0f1a 50%, #0a1a0f 75%, #0a0a0f 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  z-index: -2;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Particle Container */
.landing-particles {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.6;
  animation: particleFloat 8s ease-in-out infinite;
}

.particle.red { background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; }
.particle.green { background: #3bff5b; box-shadow: 0 0 10px #3bff5b; }
.particle.blue { background: #3b8bff; box-shadow: 0 0 10px #3b8bff; }

@keyframes particleFloat {
  0%, 100% { 
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-20px) translateX(10px) scale(1.2);
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-40px) translateX(-5px) scale(1);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-20px) translateX(-10px) scale(0.8);
    opacity: 0.7;
  }
}

/* Landing Title */
.landing-title {
  font-size: clamp(1.2rem, 6vw, 2.5rem);
  text-align: center;
  color: #fff;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 187, 59, 0.3),
    0 0 30px rgba(255, 187, 59, 0.2);
  letter-spacing: 4px;
  margin-bottom: 8px;
  animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% { 
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.5),
      0 0 20px rgba(255, 187, 59, 0.3),
      0 0 30px rgba(255, 187, 59, 0.2);
  }
  50% { 
    text-shadow: 
      0 0 15px rgba(255, 255, 255, 0.7),
      0 0 30px rgba(255, 187, 59, 0.5),
      0 0 45px rgba(255, 187, 59, 0.3);
  }
}

/* Faction Cards - Improved */
.faction-card-v2 {
  background: linear-gradient(180deg, rgba(15, 15, 26, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
  border: 3px solid;
  border-radius: 12px;
  padding: 20px;
  width: 140px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.faction-card-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, currentColor, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.faction-card-v2:hover::before,
.faction-card-v2.selected::before {
  opacity: 0.15;
}

.faction-card-v2.selected {
  transform: scale(1.05);
  box-shadow: 0 0 30px currentColor;
}

.faction-card-v2.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.faction-card-icon {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 10px currentColor);
}

.faction-card-name {
  font-size: 0.55rem;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.faction-card-ability {
  font-size: 0.35rem;
  text-align: center;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  margin-bottom: 8px;
}

.faction-card-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.35rem;
  color: #888;
}

/* =============================================
   V1.0 UI - MOBILE MAP FULLSCREEN
   ============================================= */

.mobile-game-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile */
  overflow: hidden;
  position: relative;
}

.mobile-map-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 90px; /* Space for FAB */
}

.mobile-map-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Info Drawer */
.mobile-info-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 95px; /* Above FAB - increased to avoid overlap */
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.98) 0%, rgba(15, 15, 26, 0.98) 100%);
  border-top: 2px solid #2a2a4f;
  border-radius: 16px 16px 0 0;
  max-height: 50vh;
  transform: translateY(calc(100% - 50px)); /* Show more when collapsed */
  transition: transform 0.3s ease, bottom 0.2s ease;
  z-index: 500;
  pointer-events: auto;
}

/* When keyboard is open, drawer moves up */
.mobile-info-drawer.keyboard-open {
  bottom: 0;
  max-height: 50vh;
  border-radius: 0;
  position: fixed;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* iOS safe area */
}

/* When keyboard open and expanded, take more space */
.mobile-info-drawer.keyboard-open.expanded {
  max-height: 70vh;
  transform: translateY(0);
}

/* Ensure drawer content scrolls properly with keyboard */
.mobile-info-drawer.keyboard-open .mobile-info-drawer-content {
  max-height: calc(70vh - 120px);
  padding-bottom: 80px; /* More space for input + safe area */
}

.mobile-info-drawer.expanded {
  transform: translateY(0);
}

.mobile-info-drawer-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  cursor: pointer;
  min-height: 44px; /* iOS minimum tap target */
}

.mobile-info-drawer-handle-bar {
  width: 50px;
  height: 5px;
  background: #4a4a6f;
  border-radius: 3px;
}

.mobile-info-drawer-tabs {
  display: flex;
  border-bottom: 1px solid #2a2a4f;
}

.mobile-info-drawer-tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: #666;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.35rem;
  cursor: pointer;
  position: relative;
}

.mobile-info-drawer-tab.active {
  color: #fff;
}

.mobile-info-drawer-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: currentColor;
}

.mobile-info-drawer-content {
  padding: 12px;
  max-height: calc(50vh - 80px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Chat input sticky at bottom when keyboard open */
.mobile-chat-input-container {
  display: flex;
  gap: 8px;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 8px)); /* Safe area for iOS */
  border-top: 1px solid #2a2a4f;
  background: #0f0f1a;
  margin: auto -12px -12px -12px;
  margin-top: 8px;
  position: sticky;
  bottom: 0;
  z-index: 10;
  /* Ensure it stays visible */
  flex-shrink: 0;
}

/* When keyboard is open, make input more prominent */
.mobile-info-drawer.keyboard-open .mobile-chat-input-container {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 8px));
  background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2f 100%);
  border-top: 2px solid #3a3a5f;
}

.mobile-chat-input-container input {
  flex: 1;
  padding: 8px 10px;
  background: #1a1a2f;
  border: 1px solid #2a2a4f;
  border-radius: 4px;
  color: #fff;
  font-size: 16px; /* Prevents iOS zoom on focus */
  font-family: inherit;
  outline: none;
}

.mobile-chat-input-container input:focus {
  border-color: #4a4a8f;
}

.mobile-chat-input-container button {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 0.4rem;
  font-family: inherit;
  cursor: pointer;
  font-weight: bold;
}

/* =============================================
   V1.0 UI - ZOOM CONTROLS (MOBILE)
   ============================================= */

.mobile-zoom-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 50;
}

.mobile-zoom-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(15, 15, 26, 0.9);
  border: 2px solid #4a4a6f;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-zoom-btn:active {
  background: rgba(59, 255, 91, 0.2);
  border-color: #3bff5b;
}

/* =============================================
   V1.0 UI - AUTO-EXPAND INDICATOR
   ============================================= */

.auto-expand-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(59, 255, 91, 0.15);
  border: 1px solid #3bff5b;
  border-radius: 12px;
  font-size: 0.35rem;
  color: #3bff5b;
}

.auto-expand-indicator.inactive {
  background: rgba(102, 102, 102, 0.15);
  border-color: #666;
  color: #666;
}

/* =============================================
   V1.0 UI - DESKTOP HEADER & SETTINGS
   ============================================= */

/* Desktop Header V2 */
.desktop-header-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 15px;
  flex-wrap: wrap;
}

.desktop-header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.desktop-header-faction {
  display: flex;
  align-items: center;
  gap: 10px;
}

.desktop-header-faction-icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 10px currentColor);
}

.desktop-header-faction-info h1 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 2px;
}

.desktop-header-faction-sub {
  font-size: 0.45rem;
  color: #888;
  margin-top: 4px;
}

.desktop-header-center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.desktop-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Desktop Status Indicators */
.desktop-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.45rem;
  border: 2px solid;
  transition: all 0.3s ease;
}

.desktop-status-badge-icon {
  font-size: 1rem;
}

/* Territory Stats Desktop */
.desktop-territory-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #0f0f1a;
  border: 2px solid #2a2a4f;
  border-radius: 8px;
}

.desktop-territory-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.desktop-territory-item.leader {
  background: rgba(255, 255, 255, 0.1);
}

.desktop-territory-item.player {
  border: 2px solid currentColor;
}

.desktop-territory-icon {
  font-size: 0.8rem;
}

.desktop-territory-pct {
  font-size: 0.5rem;
  font-weight: bold;
}

.desktop-territory-online {
  font-size: 0.4rem;
  color: #3bff5b;
  margin-left: 4px;
}

/* Settings Dropdown (Desktop) */
.settings-dropdown-container {
  position: relative;
}

.settings-dropdown-trigger {
  background: #1a1a2f;
  border: 2px solid #4a4a6f;
  border-radius: 8px;
  padding: 10px 14px;
  color: #aaa;
  font-size: 0.5rem;
  font-family: 'Press Start 2P', monospace;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.settings-dropdown-trigger:hover {
  border-color: #6a6a8f;
  color: #fff;
}

.settings-dropdown-trigger.open {
  border-color: #3bff5b;
  color: #3bff5b;
}

.settings-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: linear-gradient(180deg, #1a1a2f 0%, #0f0f1a 100%);
  border: 2px solid #2a2a4f;
  border-radius: 10px;
  min-width: 240px;
  z-index: 1000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: dropdownSlide 0.2s ease-out;
  overflow: hidden;
}

@keyframes dropdownSlide {
  from { 
    opacity: 0;
    transform: translateY(-10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-dropdown-section {
  padding: 10px 0;
  border-bottom: 1px solid #2a2a4f;
}

.settings-dropdown-section:last-child {
  border-bottom: none;
}

.settings-dropdown-section-title {
  font-size: 0.3rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 14px;
  margin-bottom: 6px;
}

.settings-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.settings-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.settings-dropdown-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-dropdown-item-icon {
  font-size: 0.9rem;
  width: 24px;
  text-align: center;
}

.settings-dropdown-item-label {
  font-size: 0.4rem;
  color: #ccc;
}

.settings-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #ccc;
  text-decoration: none;
  font-size: 0.4rem;
  transition: all 0.2s ease;
}

.settings-dropdown-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* Mini Toggle for Desktop */
.mini-toggle {
  background: #333;
  border: none;
  border-radius: 10px;
  width: 36px;
  height: 20px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mini-toggle.on {
  background: #3bff5b;
}

.mini-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.mini-toggle.on::after {
  transform: translateX(16px);
}

/* Primary Action Buttons (Desktop) */
.desktop-primary-btn {
  background: #1a1a2f;
  border: 2px solid;
  border-radius: 8px;
  padding: 10px 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.desktop-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.desktop-primary-btn.leaderboard {
  border-color: #ffbb3b;
  color: #ffbb3b;
}

.desktop-primary-btn.account {
  border-color: #8b5bff;
  color: #8b5bff;
}

.desktop-primary-btn.account.signed-in {
  border-color: #3bff5b;
  color: #3bff5b;
  background: #1a2f1a;
}

/* =============================================
   TOAST NOTIFICATION SYSTEM
   ============================================= */

.toast-container {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 90vw;
  width: 400px;
}

@media (max-width: 768px) {
  .toast-container {
    top: 60px;
    width: calc(100vw - 20px);
  }
}

.toast {
  background: linear-gradient(180deg, rgba(20, 20, 35, 0.98) 0%, rgba(15, 15, 26, 0.98) 100%);
  border: 2px solid;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.4rem;
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: toastSlideIn 0.3s ease, toastFadeOut 0.3s ease forwards;
  animation-delay: 0s, var(--toast-duration, 5s);
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.toast-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
  line-height: 1.4;
}

.toast-close {
  background: transparent;
  border: none;
  color: #666;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.toast-close:hover {
  color: #fff;
}

/* Toast variants */
.toast.radio-tower {
  border-color: #9b59b6;
  background: linear-gradient(180deg, rgba(75, 30, 90, 0.95) 0%, rgba(40, 15, 50, 0.95) 100%);
}

.toast.factory {
  border-color: #f1c40f;
  background: linear-gradient(180deg, rgba(90, 75, 20, 0.95) 0%, rgba(50, 40, 10, 0.95) 100%);
}

.toast.meteor {
  border-color: #e74c3c;
  background: linear-gradient(180deg, rgba(90, 30, 30, 0.95) 0%, rgba(50, 15, 15, 0.95) 100%);
}

.toast.success {
  border-color: #3bff5b;
  background: linear-gradient(180deg, rgba(30, 90, 40, 0.95) 0%, rgba(15, 50, 20, 0.95) 100%);
}

.toast.info {
  border-color: #3498db;
  background: linear-gradient(180deg, rgba(30, 60, 90, 0.95) 0%, rgba(15, 30, 50, 0.95) 100%);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Pulse glow animation for chat expand button */
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(59, 255, 91, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(59, 255, 91, 0.5), 0 0 35px rgba(59, 255, 91, 0.2);
    transform: scale(1.02);
  }
}