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

body {
  background: #0a0a0f;
  overflow: hidden;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

canvas {
  display: block;
  width: 100%;
  max-width: 1280px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  touch-action: none;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.screen {
  pointer-events: all;
  text-align: center;
  padding: 40px 50px;
  max-width: 700px;
  width: 90%;
  position: relative;
  max-height: 95vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen::-webkit-scrollbar { width: 6px; }
.screen::-webkit-scrollbar-track { background: transparent; }
.screen::-webkit-scrollbar-thumb { background: #333344; border-radius: 3px; }

/* ===== TITLES ===== */
.title {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(24px, 6vw, 64px);
  font-weight: 900;
  color: #ff2222;
  text-transform: uppercase;
  letter-spacing: clamp(4px, 1.5vw, 8px);
  margin-bottom: 16px;
  text-shadow: 0 0 30px rgba(255, 34, 34, 0.5), 0 0 60px rgba(255, 34, 34, 0.2);
  animation: flicker 3s infinite alternate;
  word-break: break-word;
}

.main-title {
  font-size: clamp(28px, 7vw, 72px);
  letter-spacing: clamp(4px, 2vw, 10px);
  margin-bottom: 12px;
}

.gameover-title {
  animation: glitch 0.3s infinite alternate;
}

@keyframes flicker {
  0%, 90%, 100% { opacity: 1; }
  91% { opacity: 0.8; }
  92% { opacity: 1; }
  93% { opacity: 0.7; }
  94% { opacity: 1; }
}

@keyframes glitch {
  0% { transform: translate(0); text-shadow: 0 0 30px rgba(255, 34, 34, 0.5); }
  25% { transform: translate(-2px, 1px); text-shadow: 2px 0 #ff2222, -2px 0 #7722aa; }
  50% { transform: translate(1px, -1px); text-shadow: -1px 0 #ff2222, 1px 0 #7722aa; }
  75% { transform: translate(-1px, 0px); text-shadow: 0 0 30px rgba(255, 34, 34, 0.5); }
  100% { transform: translate(0); }
}

.subtitle {
  font-size: clamp(11px, 2vw, 18px);
  color: #888899;
  margin-bottom: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 10px;
}

.main-subtitle {
  margin-bottom: 40px;
  color: #666677;
}

/* ===== MAIN MENU ===== */
.main-menu-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 30px 20px;
}

.main-menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.menu-gold-bar {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(12px, 2vw, 16px);
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  text-transform: uppercase;
  pointer-events: none;
  padding: 6px 12px;
  background: rgba(10, 10, 15, 0.8);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 8px;
}

.gold-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 35%, #ffe44d, #cc9900);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.main-menu-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 480px;
  width: 100%;
}

.main-menu-buttons .btn-multiplayer-main {
  grid-column: span 2;
}

/* ===== MAIN MENU BUTTONS ===== */
.btn-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 16px;
  min-height: 100px;
  background: rgba(15, 15, 25, 0.92);
  border: 2px solid #333344;
  border-radius: 14px;
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.btn-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transition: left 0.5s ease;
}

.btn-main:hover::before {
  left: 100%;
}

.btn-main:active {
  transform: scale(0.96) !important;
  transition: transform 0.1s;
}

.btn-main-icon {
  font-size: 26px;
  line-height: 1;
}

.btn-main-label {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(11px, 1.8vw, 16px);
  font-weight: 700;
  letter-spacing: clamp(1px, 0.5vw, 3px);
  text-transform: uppercase;
}

/* PLAY button */
.btn-play {
  border-color: #ff2222;
  color: #ff2222;
  text-shadow: 0 0 10px rgba(255, 34, 34, 0.3);
  box-shadow: 0 0 15px rgba(255, 34, 34, 0.1), inset 0 0 20px rgba(255, 34, 34, 0.05);
}
.btn-play:hover {
  background: rgba(255, 34, 34, 0.12);
  border-color: #ff4444;
  box-shadow: 0 0 30px rgba(255, 34, 34, 0.3), inset 0 0 30px rgba(255, 34, 34, 0.08);
  transform: scale(1.03);
  color: #ff4444;
}

/* INSTRUCTIONS button */
.btn-instructions {
  border-color: #888899;
  color: #aaaabb;
  text-shadow: 0 0 8px rgba(136, 136, 153, 0.2);
}
.btn-instructions:hover {
  background: rgba(136, 136, 153, 0.1);
  border-color: #aaaacc;
  box-shadow: 0 0 25px rgba(136, 136, 153, 0.2), inset 0 0 25px rgba(136, 136, 153, 0.05);
  transform: scale(1.03);
  color: #ccccdd;
}

/* SHOP button */
.btn-shop-main {
  border-color: #ffd700;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.1), inset 0 0 20px rgba(255, 215, 0, 0.03);
}
.btn-shop-main:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: #ffdd33;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(255, 215, 0, 0.06);
  transform: scale(1.03);
  color: #ffdd33;
}

/* ACHIEVEMENTS button */
.btn-achievements-main {
  border-color: #88ccff;
  color: #88ccff;
  text-shadow: 0 0 10px rgba(136, 204, 255, 0.3);
  box-shadow: 0 0 15px rgba(136, 204, 255, 0.1), inset 0 0 20px rgba(136, 204, 255, 0.03);
}
.btn-achievements-main:hover {
  background: rgba(136, 204, 255, 0.1);
  border-color: #aaddff;
  box-shadow: 0 0 30px rgba(136, 204, 255, 0.3), inset 0 0 30px rgba(136, 204, 255, 0.06);
  transform: scale(1.03);
  color: #aaddff;
}

/* ===== GENERIC BUTTONS ===== */
.btn {
  background: #1a1a2a;
  color: #ccaa44;
  border: 2px solid #ccaa44;
  padding: 14px 36px;
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 14px;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}

.btn:hover {
  background: #ccaa44;
  color: #0a0a0f;
  box-shadow: 0 0 25px rgba(204, 170, 68, 0.4);
}

.btn:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}

.btn-secondary {
  border-color: #555566;
  color: #888899;
  padding: 12px 28px;
  font-size: clamp(11px, 1.5vw, 14px);
}

.btn-secondary:hover {
  background: #555566;
  color: #0a0a0f;
  box-shadow: 0 0 18px rgba(85, 85, 102, 0.3);
}

.btn-back {
  border-color: #555566;
  color: #888899;
  padding: 12px 36px;
  font-size: clamp(12px, 1.6vw, 15px);
  margin-top: 20px;
  display: inline-block;
  border-radius: 10px;
  min-height: 48px;
}

.btn-back:hover {
  background: #555566;
  color: #eeeeff;
  box-shadow: 0 0 20px rgba(85, 85, 102, 0.35);
}

/* ===== INSTRUCTIONS SCREEN ===== */
.instructions-title {
  font-size: clamp(20px, 5vw, 42px) !important;
  color: #aaaacc !important;
  text-shadow: 0 0 25px rgba(170, 170, 204, 0.3), 0 0 50px rgba(170, 170, 204, 0.1) !important;
}

.instructions-content {
  text-align: left;
  max-width: 500px;
  margin: 0 auto 20px;
}

.instruction-group {
  margin-bottom: 20px;
}

.instruction-heading {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #ccaa44;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2a3a;
}

.instruction-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.key-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  background: rgba(20, 20, 35, 0.9);
  border: 1px solid #555566;
  border-radius: 6px;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #ccccdd;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 2px 0 #333344;
}

.instruction-text {
  font-size: clamp(11px, 1.5vw, 14px);
  color: #888899;
  letter-spacing: 1px;
}

.instruction-objective {
  font-size: clamp(12px, 1.6vw, 15px);
  color: #ff6644;
  letter-spacing: 1px;
  line-height: 1.8;
  text-shadow: 0 0 8px rgba(255, 102, 68, 0.2);
}

/* ===== DEPLOYMENT ZONE ===== */
.deployment-title {
  font-size: clamp(20px, 5vw, 42px) !important;
  color: #33ff66 !important;
  text-shadow: 0 0 25px rgba(51, 255, 102, 0.35), 0 0 50px rgba(51, 255, 102, 0.12) !important;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px auto 24px;
  max-width: 380px;
}

.level-btn {
  width: 72px;
  height: 72px;
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: 26px;
  font-weight: 900;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  letter-spacing: 1px;
  justify-self: center;
  -webkit-tap-highlight-color: transparent;
  min-width: 60px;
  min-height: 60px;
}

.level-btn.unlocked {
  background: linear-gradient(135deg, #0a2e0a, #0d3d0d);
  color: #33ff66;
  border: 2px solid #33ff66;
  box-shadow: 0 0 15px rgba(51, 255, 102, 0.25), inset 0 0 10px rgba(51, 255, 102, 0.08);
  text-shadow: 0 0 10px rgba(51, 255, 102, 0.6);
}

.level-btn.unlocked:hover {
  background: linear-gradient(135deg, #0d3d0d, #117711);
  box-shadow: 0 0 30px rgba(51, 255, 102, 0.5), inset 0 0 15px rgba(51, 255, 102, 0.15);
  transform: scale(1.1);
  color: #55ff88;
}

.level-btn.unlocked:active {
  transform: scale(0.96);
}

.level-btn.locked {
  background: #151518;
  color: #333340;
  border: 2px solid #2a2a33;
  cursor: not-allowed;
  box-shadow: none;
  text-shadow: none;
}

.level-btn.locked::after {
  content: '🔒';
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 12px;
  opacity: 0.4;
}

.btn-reset {
  background: transparent;
  color: #553333;
  border: 1px solid #332222;
  padding: 8px 20px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
  border-radius: 6px;
  min-height: 40px;
}

.btn-reset:hover {
  color: #ff4444;
  border-color: #ff4444;
}

/* ===== STATS ===== */
.stats {
  margin: 20px 0;
}

.stat-kills {
  font-family: 'Orbitron', monospace;
  font-size: clamp(16px, 3vw, 28px);
  font-weight: 700;
  color: #ccaa44;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.stat-time {
  font-size: clamp(12px, 2vw, 18px);
  color: #888899;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.stat-best {
  font-size: clamp(12px, 1.8vw, 16px);
  color: #666677;
  letter-spacing: 2px;
}

.footer-link {
  margin-top: 30px;
}

.footer-link a {
  color: #444455;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 1px;
}

.footer-link a:hover {
  color: #666677;
}

/* ===== CLASS COLORS (for instructions) ===== */
.class-sgt { color: #5588ff !important; font-weight: bold; }
.class-eng { color: #eedd44 !important; font-weight: bold; }
.class-med { color: #44eedd !important; font-weight: bold; }
.class-hvy { color: #aa4444 !important; font-weight: bold; }

/* ===== VICTORY ===== */
.victory-title {
  color: #44ff44 !important;
  text-shadow: 0 0 30px rgba(68, 255, 68, 0.5), 0 0 60px rgba(68, 255, 68, 0.2) !important;
  animation: flicker 3s infinite alternate !important;
}

.unlock-msg {
  font-family: 'Orbitron', monospace;
  font-size: clamp(13px, 2.5vw, 20px);
  font-weight: 700;
  color: #ffdd44;
  letter-spacing: 3px;
  margin: 14px 0 20px;
  text-shadow: 0 0 12px rgba(255, 221, 68, 0.5);
  animation: flicker 2s infinite alternate;
}

/* ===== SHOP STYLES ===== */
.shop-title {
  font-size: clamp(20px, 5vw, 42px) !important;
  color: #ffd700 !important;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 60px rgba(255, 215, 0, 0.15) !important;
}

.shop-gold-display {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  margin-bottom: 20px;
  padding: 8px 16px;
  background: rgba(10, 10, 15, 0.6);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 8px;
  display: inline-block;
}

.shop-sections {
  text-align: left;
  margin-bottom: 20px;
}

.shop-section {
  margin-bottom: 18px;
}

.shop-section-title {
  font-family: 'Orbitron', monospace;
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 700;
  color: #ccaa44;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
  border-bottom: 1px solid #333344;
  padding-bottom: 6px;
}

.shop-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 15, 25, 0.92);
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s;
  gap: 10px;
  flex-wrap: wrap;
}

.shop-item:hover {
  border-color: #555566;
}

.shop-item-info {
  flex: 1;
  min-width: 120px;
}

.shop-item-name {
  font-size: clamp(10px, 1.5vw, 12px);
  color: #ccccdd;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.shop-item-desc {
  font-size: 10px;
  color: #666677;
  margin-top: 3px;
}

.shop-item-level {
  font-size: 10px;
  color: #888899;
  margin-top: 3px;
}

.shop-item-level .level-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid #555566;
  border-radius: 2px;
  margin-right: 3px;
  vertical-align: middle;
}

.shop-item-level .level-pip.filled {
  background: #44ff44;
  border-color: #44ff44;
  box-shadow: 0 0 4px rgba(68,255,68,0.4);
}

.shop-buy-btn {
  background: #1a1a2a;
  color: #ffd700;
  border: 1px solid #ffd700;
  padding: 8px 14px;
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
  min-width: 90px;
  min-height: 40px;
  text-align: center;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}

.shop-buy-btn:hover:not(:disabled) {
  background: #ffd700;
  color: #0a0a0f;
  box-shadow: 0 0 15px rgba(255,215,0,0.4);
}

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

.shop-buy-btn:disabled {
  color: #444455;
  border-color: #333344;
  cursor: not-allowed;
  opacity: 0.6;
}

.shop-buy-btn.purchased {
  color: #44ff44;
  border-color: #44ff44;
  cursor: default;
}

.shop-buy-btn.purchased:hover {
  background: #1a1a2a;
  color: #44ff44;
  box-shadow: none;
}

/* ===== ACHIEVEMENTS BUTTON ===== */
.btn-achievements {
  border-color: #88ccff;
  color: #88ccff;
  text-shadow: 0 0 10px rgba(136,204,255,0.3);
  margin-left: 10px;
}

.btn-achievements:hover {
  background: #88ccff;
  color: #0a0a0f;
  box-shadow: 0 0 24px rgba(136,204,255,0.5);
}

/* ===== ACHIEVEMENTS SCREEN ===== */
.achievements-title {
  font-size: clamp(20px, 5vw, 42px) !important;
  color: #88ccff !important;
  text-shadow: 0 0 30px rgba(136,204,255,0.4), 0 0 60px rgba(136,204,255,0.15) !important;
}

.achievements-progress {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 700;
  color: #88ccff;
  letter-spacing: 3px;
  margin-bottom: 16px;
  text-shadow: 0 0 8px rgba(136,204,255,0.3);
}

.achievements-list {
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 16px;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

.achievements-list::-webkit-scrollbar { width: 6px; }
.achievements-list::-webkit-scrollbar-track { background: transparent; }
.achievements-list::-webkit-scrollbar-thumb { background: #333344; border-radius: 3px; }

.ach-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  background: rgba(15,15,25,0.92);
  transition: border-color 0.2s;
}

.ach-item.unlocked {
  border-color: #44ff44;
  background: rgba(20,40,20,0.9);
}

.ach-item-icon {
  font-size: 20px;
  margin-right: 10px;
  min-width: 28px;
  text-align: center;
}

.ach-item-info {
  flex: 1;
}

.ach-item-name {
  font-size: clamp(10px, 1.5vw, 12px);
  color: #ccccdd;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ach-item.unlocked .ach-item-name {
  color: #44ff44;
}

.ach-item-desc {
  font-size: 10px;
  color: #666677;
  margin-top: 3px;
}

.ach-item-progress {
  font-size: 10px;
  color: #888899;
  margin-top: 3px;
}

.ach-item-progress .ach-bar {
  display: inline-block;
  width: 60px;
  height: 5px;
  background: #111122;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.ach-item-progress .ach-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #44ff44;
  transition: width 0.3s;
}

/* ===== ACHIEVEMENT POPUP ===== */
.achievement-popup {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  background: rgba(10,20,10,0.95);
  border: 2px solid #44ff44;
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 25px rgba(68,255,68,0.3);
  animation: achPopupIn 0.3s ease-out;
  pointer-events: none;
  max-width: 90vw;
}

.achievement-popup.hiding {
  animation: achPopupOut 0.3s ease-in forwards;
}

@keyframes achPopupIn {
  0% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes achPopupOut {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.ach-popup-icon {
  font-size: 24px;
}

.ach-popup-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: #88cc88;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ach-popup-name {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #44ff44;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(68,255,68,0.4);
}

/* ===== MULTIPLAYER STATUS ===== */
.mp-status {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 6px;
  background: rgba(10, 10, 15, 0.8);
  border: 1px solid #333344;
  color: #555566;
  pointer-events: none;
  transition: all 0.4s ease;
  white-space: nowrap;
}

.mp-status.connected {
  color: #44ff44;
  border-color: rgba(68, 255, 68, 0.3);
  text-shadow: 0 0 8px rgba(68, 255, 68, 0.4);
}

.mp-status.full {
  color: #ff4444;
  border-color: rgba(255, 68, 68, 0.3);
  text-shadow: 0 0 8px rgba(255, 68, 68, 0.4);
}

/* ===== MULTIPLAYER BUTTON ===== */
.btn-multiplayer-main {
  border-color: #ff6622;
  color: #ff6622;
  text-shadow: 0 0 10px rgba(255, 102, 34, 0.3);
  box-shadow: 0 0 15px rgba(255, 102, 34, 0.1), inset 0 0 20px rgba(255, 102, 34, 0.05);
}
.btn-multiplayer-main:hover {
  background: rgba(255, 102, 34, 0.12);
  border-color: #ff8844;
  box-shadow: 0 0 30px rgba(255, 102, 34, 0.3), inset 0 0 30px rgba(255, 102, 34, 0.08);
  transform: scale(1.03);
  color: #ff8844;
}

/* ===== MULTIPLAYER MENU ===== */
.mp-menu-title {
  font-size: clamp(20px, 5vw, 48px) !important;
  color: #ff6622 !important;
  text-shadow: 0 0 30px rgba(255,102,34,0.4), 0 0 60px rgba(255,102,34,0.15) !important;
}

.mp-menu-options {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 16px 0 24px;
  flex-wrap: wrap;
}

.mp-menu-options .btn-main {
  min-width: 180px;
  flex: 1;
  max-width: 240px;
}

.btn-mp-create {
  border-color: #44ff66 !important;
  color: #44ff66 !important;
  text-shadow: 0 0 10px rgba(68,255,102,0.3) !important;
  box-shadow: 0 0 15px rgba(68,255,102,0.1), inset 0 0 20px rgba(68,255,102,0.05) !important;
}
.btn-mp-create:hover {
  background: rgba(68,255,102,0.12) !important;
  border-color: #66ff88 !important;
  box-shadow: 0 0 30px rgba(68,255,102,0.3), inset 0 0 30px rgba(68,255,102,0.08) !important;
  transform: scale(1.03);
  color: #66ff88 !important;
}

.btn-mp-join {
  border-color: #4488ff !important;
  color: #4488ff !important;
  text-shadow: 0 0 10px rgba(68,136,255,0.3) !important;
  box-shadow: 0 0 15px rgba(68,136,255,0.1), inset 0 0 20px rgba(68,136,255,0.05) !important;
}
.btn-mp-join:hover {
  background: rgba(68,136,255,0.12) !important;
  border-color: #66aaff !important;
  box-shadow: 0 0 30px rgba(68,136,255,0.3), inset 0 0 30px rgba(68,136,255,0.08) !important;
  transform: scale(1.03);
  color: #66aaff !important;
}

.mp-join-input-area {
  margin: 16px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mp-code-label {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #888899;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.mp-code-input {
  background: rgba(10,10,20,0.9);
  border: 2px solid #4488ff;
  color: #eeeeff;
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 900;
  letter-spacing: clamp(4px, 1.5vw, 10px);
  text-align: center;
  padding: 12px 16px;
  width: 220px;
  max-width: 90%;
  border-radius: 10px;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  min-height: 48px;
}

.mp-code-input:focus {
  border-color: #66aaff;
  box-shadow: 0 0 20px rgba(68,136,255,0.3);
}

.mp-code-input::placeholder {
  color: #333344;
  letter-spacing: 10px;
}

.btn-mp-confirm {
  background: #1a1a2a;
  color: #4488ff;
  border: 2px solid #4488ff;
  padding: 12px 30px;
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 10px;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.btn-mp-confirm:hover {
  background: #4488ff;
  color: #0a0a0f;
  box-shadow: 0 0 25px rgba(68,136,255,0.4);
}

.mp-join-error {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #ff4444;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255,68,68,0.3);
}

.mp-connecting {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: #ccaa44;
  letter-spacing: 3px;
  animation: flicker 1.5s infinite alternate;
  margin: 16px 0;
}

/* ===== LOBBY SCREEN ===== */
.lobby-title {
  font-size: clamp(20px, 5vw, 48px) !important;
  color: #ff6622 !important;
  text-shadow: 0 0 30px rgba(255,102,34,0.4), 0 0 60px rgba(255,102,34,0.15) !important;
}

.lan-indicator {
  color: #44cc44;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 6px auto 2px auto;
  text-align: center;
  padding: 4px 12px;
  background: rgba(68, 204, 68, 0.08);
  border: 1px solid rgba(68, 204, 68, 0.25);
  border-radius: 4px;
  display: inline-block;
  animation: lanPulse 3s ease-in-out infinite;
}

@keyframes lanPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; text-shadow: 0 0 6px rgba(68, 204, 68, 0.5); }
}

.lobby-room-code-display {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(12px, 2vw, 14px);
  color: #888899;
  letter-spacing: 3px;
  margin-bottom: 8px;
}

.lobby-code-value {
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 900;
  color: #ffdd44;
  letter-spacing: clamp(4px, 1vw, 8px);
  text-shadow: 0 0 12px rgba(255,221,68,0.5);
}

.lobby-subtitle {
  margin-bottom: 16px !important;
}

.lobby-players-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px auto 20px;
  max-width: 480px;
  width: 100%;
}

.lobby-player-slot {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: rgba(15,15,25,0.92);
  border: 2px solid #2a2a3a;
  border-radius: 10px;
  transition: all 0.3s;
  gap: 12px;
}

.lobby-player-slot.is-self {
  border-color: #ccaa44;
  box-shadow: 0 0 10px rgba(204,170,68,0.15);
}

.lobby-player-slot.is-ready {
  border-color: #44ff44;
  background: rgba(20,40,20,0.9);
  box-shadow: 0 0 12px rgba(68,255,68,0.15);
}

.lobby-player-slot.empty-slot {
  border-style: dashed;
  border-color: #222233;
  opacity: 0.4;
}

.lobby-player-number {
  font-family: 'Orbitron', monospace;
  font-size: 16px;
  font-weight: 900;
  color: #555566;
  min-width: 28px;
}

.lobby-player-slot.is-ready .lobby-player-number {
  color: #44ff44;
}

.lobby-player-class-icon {
  font-size: 20px;
  min-width: 28px;
  text-align: center;
}

.lobby-player-info {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.lobby-player-name {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 700;
  color: #ccccdd;
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-player-class {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #888899;
  letter-spacing: 1px;
}

.lobby-player-status {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.lobby-player-status.status-ready {
  color: #44ff44;
  background: rgba(68,255,68,0.1);
  border: 1px solid rgba(68,255,68,0.3);
  text-shadow: 0 0 6px rgba(68,255,68,0.4);
}

.lobby-player-status.status-not-ready {
  color: #ff6644;
  background: rgba(255,102,68,0.1);
  border: 1px solid rgba(255,102,68,0.2);
}

.lobby-player-status.status-host {
  color: #ffdd44;
  background: rgba(255,221,68,0.1);
  border: 1px solid rgba(255,221,68,0.2);
}

.lobby-player-status.status-empty {
  color: #333344;
}

.lobby-class-select {
  margin: 12px auto 16px;
  max-width: 480px;
  width: 100%;
}

.lobby-class-label {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #888899;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.lobby-class-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.lobby-class-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: rgba(15,15,25,0.92);
  border: 2px solid #333344;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s;
  font-family: 'Share Tech Mono', monospace;
  -webkit-tap-highlight-color: transparent;
  min-height: 60px;
}

.lobby-class-btn:hover {
  transform: scale(1.05);
}

.lobby-class-btn:active {
  transform: scale(0.95);
}

.lobby-class-btn .lc-icon {
  font-size: 20px;
}

.lobby-class-btn .lc-name {
  font-size: clamp(7px, 1.2vw, 9px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.class-sgt-btn { color: #5588ff; }
.class-sgt-btn:hover, .class-sgt-btn.selected { border-color: #5588ff; background: rgba(85,136,255,0.12); box-shadow: 0 0 15px rgba(85,136,255,0.2); }
.class-eng-btn { color: #eedd44; }
.class-eng-btn:hover, .class-eng-btn.selected { border-color: #eedd44; background: rgba(238,221,68,0.12); box-shadow: 0 0 15px rgba(238,221,68,0.2); }
.class-med-btn { color: #44eedd; }
.class-med-btn:hover, .class-med-btn.selected { border-color: #44eedd; background: rgba(68,238,221,0.12); box-shadow: 0 0 15px rgba(68,238,221,0.2); }
.class-hvy-btn { color: #aa4444; }
.class-hvy-btn:hover, .class-hvy-btn.selected { border-color: #aa4444; background: rgba(170,68,68,0.12); box-shadow: 0 0 15px rgba(170,68,68,0.2); }

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

.btn-lobby-ready {
  background: #1a1a2a;
  color: #44ff44;
  border: 2px solid #44ff44;
  padding: 12px 34px;
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 10px;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.btn-lobby-ready:hover {
  background: rgba(68,255,68,0.15);
  box-shadow: 0 0 25px rgba(68,255,68,0.3);
}

.btn-lobby-ready:active {
  transform: scale(0.95);
}

.btn-lobby-ready.is-ready {
  background: #44ff44;
  color: #0a0a0f;
  box-shadow: 0 0 25px rgba(68,255,68,0.4);
}

.btn-lobby-start {
  background: #1a1a2a;
  color: #ff2222;
  border: 2px solid #ff2222;
  padding: 12px 34px;
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 10px;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.btn-lobby-start:hover:not(:disabled) {
  background: rgba(255,34,34,0.15);
  box-shadow: 0 0 25px rgba(255,34,34,0.3);
}

.btn-lobby-start:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-lobby-start.all-ready {
  animation: pulseGlow 1.5s infinite;
  border-color: #ff4444;
  color: #ff4444;
  text-shadow: 0 0 10px rgba(255,68,68,0.5);
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(255,34,34,0.2); }
  50% { box-shadow: 0 0 35px rgba(255,34,34,0.5); }
}

.lobby-status-msg {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #666677;
  letter-spacing: 2px;
  min-height: 18px;
  margin: 4px 0;
}

/* ================================================== */
/* ===== MOBILE TOUCH CONTROLS ===== */
/* ================================================== */

#touch-controls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

.joystick-zone {
  position: absolute;
  bottom: 20px;
  width: 150px;
  height: 150px;
  pointer-events: all;
  touch-action: none;
}

.joystick-left {
  left: 20px;
}

.joystick-right {
  right: 20px;
}

.joystick-base {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40,40,60,0.5) 0%, rgba(20,20,35,0.7) 100%);
  border: 2px solid rgba(100,100,140,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 15px rgba(0,0,0,0.3);
  position: relative;
}

.joystick-stick {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(80,80,120,0.9), rgba(50,50,80,0.9));
  border: 2px solid rgba(140,140,180,0.5);
  box-shadow: 0 0 12px rgba(100,100,180,0.3), 0 4px 8px rgba(0,0,0,0.4);
  position: absolute;
  transition: none;
  will-change: transform;
}

.joystick-stick.active {
  border-color: rgba(68,255,68,0.6);
  box-shadow: 0 0 16px rgba(68,255,68,0.3), 0 4px 8px rgba(0,0,0,0.4);
}

/* Touch Action Buttons */
.touch-action-btn {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(25,25,40,0.8);
  border: 2px solid rgba(100,100,140,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 10px rgba(0,0,0,0.4), inset 0 0 8px rgba(0,0,0,0.2);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.touch-action-btn:active,
.touch-action-btn.pressed {
  background: rgba(60,60,90,0.9);
  border-color: rgba(68,255,68,0.6);
  box-shadow: 0 0 18px rgba(68,255,68,0.3), inset 0 0 8px rgba(68,255,68,0.1);
}

.touch-btn-label {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(200,200,220,0.8);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(200,200,220,0.3);
  pointer-events: none;
  text-align: center;
  line-height: 1.1;
}

/* DASH button - bottom left, above joystick */
.touch-btn-dash {
  bottom: 180px;
  left: 35px;
  border-color: rgba(100,170,255,0.5);
}
.touch-btn-dash:active, .touch-btn-dash.pressed {
  border-color: rgba(100,170,255,0.8);
  box-shadow: 0 0 18px rgba(100,170,255,0.4);
}
.touch-btn-dash .touch-btn-label { color: rgba(100,170,255,0.8); }

/* ABILITY 1 (Q: Medic Heal) - right side, upper */
.touch-btn-ability1 {
  bottom: 240px;
  right: 110px;
  border-color: rgba(68,238,221,0.5);
}
.touch-btn-ability1:active, .touch-btn-ability1.pressed {
  border-color: rgba(68,238,221,0.8);
  box-shadow: 0 0 18px rgba(68,238,221,0.4);
}
.touch-btn-ability1 .touch-btn-label { color: rgba(68,238,221,0.8); }

/* ABILITY 2 (E: Engineer Repair) - right side, mid */
.touch-btn-ability2 {
  bottom: 180px;
  right: 160px;
  border-color: rgba(238,221,68,0.5);
}
.touch-btn-ability2:active, .touch-btn-ability2.pressed {
  border-color: rgba(238,221,68,0.8);
  box-shadow: 0 0 18px rgba(238,221,68,0.4);
}
.touch-btn-ability2 .touch-btn-label { color: rgba(238,221,68,0.8); }

/* SPECIAL (Right-click weapon) - right side */
.touch-btn-special {
  bottom: 180px;
  right: 35px;
  border-color: rgba(255,102,34,0.5);
}
.touch-btn-special:active, .touch-btn-special.pressed {
  border-color: rgba(255,102,34,0.8);
  box-shadow: 0 0 18px rgba(255,102,34,0.4);
}
.touch-btn-special .touch-btn-label { color: rgba(255,102,34,0.8); }

/* MELEE / SPACE (Heavy melee) - left side, above dash */
.touch-btn-melee {
  bottom: 180px;
  left: 110px;
  border-color: rgba(170,68,68,0.5);
}
.touch-btn-melee:active, .touch-btn-melee.pressed {
  border-color: rgba(170,68,68,0.8);
  box-shadow: 0 0 18px rgba(170,68,68,0.4);
}
.touch-btn-melee .touch-btn-label { color: rgba(170,68,68,0.8); }

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablets and small desktops */
@media (max-width: 768px) {
  .screen {
    padding: 24px 18px;
    max-width: 95%;
  }

  .main-menu-screen {
    min-height: auto;
    padding: 20px 14px;
  }

  .main-menu-buttons {
    gap: 12px;
    max-width: 400px;
  }

  .btn-main {
    padding: 18px 14px;
    min-height: 88px;
    border-radius: 12px;
  }

  .lobby-class-buttons {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .lobby-class-btn {
    padding: 10px 4px;
    min-height: 54px;
  }

  .mp-menu-options .btn-main {
    min-width: 160px;
  }

  .level-grid {
    gap: 10px;
  }

  .level-btn {
    width: 64px;
    height: 64px;
    font-size: 22px;
  }

  .shop-item {
    padding: 10px 12px;
  }
}

/* Mobile phones */
@media (max-width: 520px) {
  .main-menu-buttons {
    grid-template-columns: 1fr;
    max-width: 300px;
    gap: 10px;
  }
  .main-menu-buttons .btn-multiplayer-main {
    grid-column: span 1;
  }
  .btn-main {
    flex-direction: row;
    min-height: auto;
    padding: 16px 18px;
    gap: 14px;
    border-radius: 12px;
  }
  .btn-main-icon { font-size: 22px; }
  .btn-main-label { text-align: left; }

  .level-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 280px;
  }
  .level-btn {
    width: 56px;
    height: 56px;
    font-size: 20px;
    border-radius: 10px;
  }
  .screen {
    padding: 20px 14px;
  }
  .lobby-class-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .lobby-class-btn {
    flex-direction: row;
    padding: 10px 12px;
    gap: 8px;
  }
  .lobby-class-btn .lc-name {
    font-size: 9px;
  }
  .mp-menu-options {
    flex-direction: column;
    align-items: center;
  }
  .mp-menu-options .btn-main {
    width: 100%;
    max-width: 300px;
    flex-direction: row;
  }
  .btn {
    padding: 12px 24px;
    border-radius: 10px;
  }
  .btn-back {
    padding: 12px 28px;
  }
  .btn-lobby-ready, .btn-lobby-start {
    padding: 12px 28px;
    font-size: 14px;
  }

  .shop-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .shop-buy-btn {
    width: 100%;
  }

  .joystick-zone {
    width: 130px;
    height: 130px;
    bottom: 14px;
  }
  .joystick-left { left: 12px; }
  .joystick-right { right: 12px; }
  .joystick-stick {
    width: 48px;
    height: 48px;
  }
  .touch-action-btn {
    width: 50px;
    height: 50px;
  }
  .touch-btn-label {
    font-size: 9px;
  }
  .touch-btn-dash { bottom: 154px; left: 24px; }
  .touch-btn-melee { bottom: 154px; left: 94px; }
  .touch-btn-ability1 { bottom: 210px; right: 94px; }
  .touch-btn-ability2 { bottom: 154px; right: 140px; }
  .touch-btn-special { bottom: 154px; right: 24px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .title {
    font-size: clamp(20px, 6vw, 32px);
    letter-spacing: 2px;
  }
  .main-title {
    font-size: clamp(22px, 7vw, 36px);
    letter-spacing: 3px;
  }
  .screen {
    padding: 16px 10px;
  }
  .main-menu-buttons {
    max-width: 260px;
    gap: 8px;
  }
  .btn-main {
    padding: 14px 14px;
  }
  .lobby-player-slot {
    padding: 8px 10px;
    gap: 8px;
  }
  .level-grid {
    max-width: 240px;
    gap: 8px;
  }
  .level-btn {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
}

/* Landscape mobile — tighten joysticks */
@media (max-height: 450px) and (orientation: landscape) {
  .joystick-zone {
    width: 110px;
    height: 110px;
    bottom: 10px;
  }
  .joystick-left { left: 10px; }
  .joystick-right { right: 10px; }
  .joystick-stick {
    width: 42px;
    height: 42px;
  }
  .touch-action-btn {
    width: 44px;
    height: 44px;
  }
  .touch-btn-label { font-size: 8px; }
  .touch-btn-dash { bottom: 130px; left: 18px; }
  .touch-btn-melee { bottom: 130px; left: 78px; }
  .touch-btn-ability1 { bottom: 180px; right: 78px; }
  .touch-btn-ability2 { bottom: 130px; right: 118px; }
  .touch-btn-special { bottom: 130px; right: 18px; }

  .screen {
    padding: 12px 14px;
    max-height: 98vh;
  }
}