html, body { margin:0; overflow:hidden; background:#000; color:white; font-family:monospace; touch-action: none; }
:root { --ui-scale: 1; }
#ui { position:absolute; top:10px; left:10px; font-size:16px; display:none; z-index:100; transform: scale(var(--ui-scale)); transform-origin: top left; }
#message { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--ui-scale)); transform-origin: center; font-size:32px; text-align:center; display:none; z-index:100; background:rgba(0,0,0,0.9); padding:40px; border-radius:10px; max-width:800px; }

button { font-size:20px; margin:10px; padding:10px 20px; cursor:pointer; background:#222; color:#0f0; border:2px solid #0f0; border-radius:5px; }
button:hover { background:#0f0; color:#000; }
#upgradeMenu { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--ui-scale)); transform-origin: center; background:rgba(0,0,0,0.95); padding:30px; border:3px solid #0f0; display:none; z-index:99; max-width:1200px; width:95vw; border-radius:10px; }
.upgrade-option { background:#222; margin:10px 0; padding:15px; cursor:pointer; border:2px solid #555; border-radius:5px; }
.upgrade-option:hover { border-color:#0f0; background:#333; }
.upgrade-option.maxed { opacity:0.5; cursor:not-allowed; border-color:#333; }
.upgrade-card { border-color:#0f0; }
.upgrade-card:hover { border-color:#0f0; }
#mainMenu { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--ui-scale)); transform-origin: center; text-align:center; z-index:101; }
#mainMenu h1 { font-size:80px; color:#0f0; text-shadow: 0 0 20px #0f0, 0 0 40px #0f0; margin-bottom:50px; letter-spacing:10px; }
.menu-buttons { display:flex; flex-direction:column; gap:0; }
.menu-buttons > * { margin-bottom:18px; }
.menu-buttons > :last-child { margin-bottom:0; }
#mainMenu .menu-buttons button { margin: 0; }
#lanPanel { margin-top: 18px; display: none; flex-direction: column; align-items: center; gap: 10px; }
#lanToggleBtn { width: auto; margin: 0; display: inline-flex; justify-content: center; }
#lanPanel input {
  width: min(360px, 82vw);
  padding: 10px 12px;
  border: 2px solid #0f0;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 16px;
  outline: none;
}
#lanPanel input:focus { border-color: #66ddff; }
#lanPanel button { width: min(360px, 82vw); margin: 0; }
#lanStatus { min-height: 20px; font-size: 14px; color: #66ddff; }
#lanHud { display: none; color: #66ddff; }
#weaponSelect { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--ui-scale)); transform-origin: center; background:rgba(0,0,0,0.95); padding:40px; border:3px solid gold; display:none; z-index:101; max-width:1400px; width:95vw; max-height:90vh; overflow:hidden; border-radius:10px; }
.weapon-card { background:#222; margin:15px 0; padding:25px; cursor:pointer; border:3px solid #555; border-radius:10px; transition:all 0.3s; }
.weapon-card:hover { border-color:gold; background:#333; transform: translateY(-2px); }
.weapon-card h3 { color:#0f0; margin-top:0; font-size:28px; }
.weapon-card p { color:#aaa; font-size:16px; line-height:1.6; }
.weapon-card .stats { color:#0f0; font-size:14px; margin-top:10px; }

#pauseMenu {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(var(--ui-scale));
  transform-origin: center;
  background: rgba(0,0,0,0.95);
  padding: 30px 40px;
  border: 3px solid #0f0;
  display: none;
  z-index: 102;
  max-width: 700px;
  width: 90vw;
  border-radius: 10px;
  text-align: center;
}
.pause-title { font-size: 36px; margin: 0 0 20px; color: #0f0; }
.pause-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pause-actions button { margin: 0; }
.settings-panel { margin-top: 20px; text-align: left; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.settings-row label { flex: 1 1 auto; }
.settings-row input[type="range"] { flex: 0 0 220px; }
.settings-value { min-width: 60px; text-align: right; }
.ui-button { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 12px; font-size: 14px; }

/* Мобильные джойстики */
#joystickContainer {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(100, 100, 100, 0.3);
  border: 2px solid #555;
  display: none; /* По умолчанию скрыт */
  z-index: 90;
}
#joystickKnob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  border-radius: 50%;
  background: rgba(0, 255, 0, 0.6);
  border: 2px solid #0f0;
  pointer-events: none;
}


/* Кнопка ИГРАТЬ */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.h-screen { height: 100vh; }
.relative { position: relative; }
.group:hover .group-hover\:translate-x-1\.5 { transform: translateX(0.375rem); }
.group:hover .group-hover\:text-emerald-300 { color: #6ee7b7; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.inline-block { display: inline-block; }
.p-px { padding: 1px; }
.font-semibold { font-weight: 600; }
.leading-6 { line-height: 1.5rem; }
.text-white { color: white; }
.bg-neutral-900 { background-color: #171117; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.cursor-pointer { cursor: pointer; }
.rounded-2xl { border-radius: 1rem; }
.shadow-emerald-900 { box-shadow: 0 0 0 1px #064e3b; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.hover\:scale-105:hover { transform: scale(1.05); }
.active\:scale-95:active { transform: scale(0.95); }
.hover\:shadow-emerald-600:hover { box-shadow: 0 0 0 1px #059669; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-emerald-500 { --tw-gradient-from: #10b981; --tw-gradient-to: rgba(16, 185, 129, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-cyan-500 { --tw-gradient-to: rgba(6, 182, 212, 0); --tw-gradient-stops: var(--tw-gradient-from), #06b6d4, var(--tw-gradient-to); }
.to-sky-600 { --tw-gradient-to: #0284c7; }
.p-\[2px\] { padding: 2px; }
.opacity-0 { opacity: 0; }
.duration-500 { transition-duration: 500ms; }
.z-10 { z-index: 10; }
.block { display: block; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.bg-neutral-950 { background-color: #0a0a0a; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
/* Кнопки управления для мобильных устройств */
#buttonControls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: none; /* По умолчанию скрыт */
  z-index: 90;
}
#buttonControls .button-row {
  display: flex;
  justify-content: center;
}
#buttonControls button {
  width: 60px;
  height: 60px;
  margin: 5px;
  font-size: 24px;
  border-radius: 10px;
  background: rgba(50, 50, 50, 0.6);
  border: 2px solid #555;
  color: white;
  touch-action: none;
}
/* Horizontal layout for weapon and upgrade selection */
#weaponSelect .weapon-row {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  padding-bottom: 6px;
}
#weaponSelect .weapon-row::-webkit-scrollbar { display: none; }
.weapon-card {
  flex: 0 0 240px;
  margin: 0;
}
.upgrade-card {
  flex: 0 0 220px;
}
#upgradeMenu .upgrade-row {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
#upgradeMenu .upgrade-row::-webkit-scrollbar { display: none; }
.upgrade-option {
  flex: 0 0 260px;
}
/* Responsive adjustments for mobile devices: shrink fonts and elements on smaller screens */
@media (max-width: 768px) {
  #ui { font-size: 14px; }
  #message { font-size: 24px; padding: 20px; max-width: 90%; }
  #upgradeMenu, #weaponSelect, #pauseMenu { font-size: 14px; max-width: 90%; }
  #mainMenu h1 { font-size: 60px; }
  button { font-size: 16px; padding: 8px 16px; }
  #buttonControls button { width: 50px; height: 50px; font-size: 20px; }
  .weapon-card h3 { font-size: 24px; }
  .weapon-card p { font-size: 14px; }
  #lanPanel input, #lanPanel button { width: min(300px, 86vw); font-size: 14px; }
}
@media (max-width: 480px) {
  #ui { font-size: 12px; }
  #message { font-size: 20px; padding: 15px; max-width: 95%; }
  #upgradeMenu, #weaponSelect, #pauseMenu { font-size: 12px; max-width: 95%; }
  #mainMenu h1 { font-size: 40px; }
  button { font-size: 14px; padding: 6px 12px; }
  #buttonControls button { width: 40px; height: 40px; font-size: 16px; }
  .weapon-card h3 { font-size: 20px; }
  .weapon-card p { font-size: 12px; }
  .pause-actions { flex-direction: column; align-items: stretch; }
  .pause-actions button { width: 100%; }
  .settings-panel { max-height: 55vh; overflow-y: auto; padding-right: 4px; }
  .settings-row { flex-direction: column; align-items: stretch; }
  .settings-row input[type="range"] { flex: none; width: 100%; }
  .settings-value { text-align: left; min-width: 0; }
  #lanPanel input, #lanPanel button { width: min(260px, 88vw); font-size: 13px; }
  #lanStatus { font-size: 12px; }
}