* {
  user-select: none;
  box-sizing: border-box;
}

:root {
  --char-ani: 20s;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.background {
  width: 100vw;
  height: 100vh;
  background-color: #0f3051;
  background-image: url('images/bg.webp');
  background-size: contain;
  background-position: center;
  background-repeat: repeat-x;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.selection-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.selection-logo {
  position: absolute;
  top: 30.463vh;
  width: 36.111vh;
  height: 10.185vh;
  background-image: url('images/logo.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 120;
}

.selection-container {
  position: absolute;
  top: 33.796vh;
  display: flex;
  gap: 5.556vh;
}

.selection-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

.white-square {
  width: 38.889vh;
  height: 38.889vh;
  background: white;
  border-radius: 1vh;
  outline: 1px solid rgba(0, 0, 0, 0.2);
  outline-offset: 0;
  box-shadow: 0 0.37vh 0.463vh rgba(0, 0, 0, 0.3); /* Тень вниз */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.3s ease, outline-color 0.3s ease;
}

.square-image {
  width: 37.037vh;
  height: 37.037vh;
  border-radius: 0.5vh;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: center;
}

.arcade-bg { background-image: url('images/arcade.webp'); }
.tactics-bg { background-image: url('images/tactics.webp'); }

.version-label {
  position: absolute;
  bottom: 1.667vh;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 3.519vh;
  color: white;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px 1px 0 rgba(0,0,0,0.5), 1px 1px 0 rgba(0,0,0,0.5);
}

.version-desc {
  margin-top: 1.389vh;
  width: 31.111vh;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 600;
  font-size: 2.037vh;
  color: #95c0f5;
  line-height: 1.2;
}

.selection-item:hover { transform: scale(1.02); }
.selection-item:hover .white-square { 
  box-shadow: 0 0 2.5vh rgba(0, 212, 255, 0.7), 0 0.37vh 0.463vh rgba(0, 0, 0, 0.3); 
  outline-color: rgba(0, 212, 255, 0.8);
}

.top-background { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 35.468vh; aspect-ratio: 1920 / 371; background-image: url('images/top_back.webp'); background-size: contain; background-repeat: no-repeat; z-index: 1; animation: animation-top-background var(--char-ani) ease-in-out infinite; }
.front-battlefield { position: absolute; top: 31.166vh; left: 50%; transform: translateX(-50%); height: 60.707vh; aspect-ratio: 1920 / 635; background-image: url('images/field.webp'); background-size: contain; background-repeat: no-repeat; z-index: 50; }
.char-cripps { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 53.154vh; aspect-ratio: 520 / 556; background-image: url('images/cripps.webp'); background-size: contain; z-index: 20; animation: cripps var(--char-ani) ease-in-out infinite; }
.char-scienist { position: absolute; top: 7.265vh; left: 50%; transform: translateX(44.52%); height: 42.734vh; aspect-ratio: 275 / 447; background-image: url('images/scienist.webp'); background-size: contain; z-index: 15; animation: scienist var(--char-ani) ease-in-out infinite; }
.char-girl { position: absolute; top: 7.265vh; left: 50%; transform: translateX(-186%); height: 42.734vh; aspect-ratio: 201 / 447; background-image: url('images/btch.webp'); background-size: contain; z-index: 15; animation: girl var(--char-ani) ease-in-out infinite; }
.char-dog { position: absolute; top: 35.468vh; left: 50%; transform: translateX(-280%); height: 17.686vh; aspect-ratio: 118 / 185; background-image: url('images/dog.webp'); background-size: contain; z-index: 25; animation: dog var(--char-ani) ease-in-out infinite; }

.sol-base { position: absolute; left: 50%; aspect-ratio: 238 / 378; background-image: url('images/soldier.webp'); background-size: contain; background-repeat: no-repeat; }
.sol-1 { top: 10vh; transform: translateX(-128%); height: 36.137vh; filter: brightness(0.7) contrast(0.9) sepia(1) hue-rotate(140deg) saturate(150%); z-index: 5; animation: sol1 var(--char-ani) ease-in-out infinite; }
.sol-2 { top: 9vh; transform: translateX(11%); height: 34vh; filter: brightness(0.7) contrast(0.9) sepia(1) hue-rotate(140deg) saturate(150%); z-index: 5; animation: sol2 var(--char-ani) ease-in-out infinite; }
.sol-3 { top: 17.5vh; transform: translateX(-234%); height: 33vh; filter: brightness(0.55) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(150%); z-index: 5; animation: sol3 var(--char-ani) ease-in-out infinite; }
.sol-4 { top: 17.5vh; transform: translateX(144%); height: 33vh; filter: brightness(0.55) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(150%); z-index: 5; animation: sol4 var(--char-ani) ease-in-out infinite; }
.sol-5 { top: 19vh; transform: translateX(-334%); height: 33vh; filter: brightness(0.85) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(150%); z-index: 5; animation: sol5 var(--char-ani) ease-in-out infinite; }
.sol-6 { top: 19vh; transform: translateX(244%); height: 33vh; filter: brightness(0.85) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(150%); z-index: 5; animation: sol6 var(--char-ani) ease-in-out infinite; }
.sol-7 { top: 19vh; transform: translateX(-414%); height: 33vh; filter: brightness(0.9) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%); z-index: 5; animation: sol7 var(--char-ani) ease-in-out infinite; }
.sol-8 { top: 19.8vh; transform: translateX(334%); height: 32vh; filter: brightness(0.9) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%); z-index: 5; animation: sol8 var(--char-ani) ease-in-out infinite; }
.sol-9 { top: 20vh; transform: translateX(-293%); height: 30vh; filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%); z-index: 4; animation: sol9 var(--char-ani) ease-in-out infinite; }
.sol-10 { top: 20vh; transform: translateX(234%); height: 30vh; filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%); z-index: 4; animation: sol10 var(--char-ani) ease-in-out infinite; }
.sol-11 { top: 21vh; transform: translateX(-433%); height: 28vh; filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.6); z-index: 3; animation: sol11 var(--char-ani) ease-in-out infinite; }
.sol-12 { top: 21vh; transform: translateX(334%); height: 28vh; filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.6); z-index: 3; animation: sol12 var(--char-ani) ease-in-out infinite; }
.sol-13 { top: 21vh; transform: translateX(-370%); height: 26vh; filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.5); z-index: 2; animation: sol13 var(--char-ani) ease-in-out infinite; }
.sol-14 { top: 21vh; transform: translateX(234%); height: 26vh; filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.5); z-index: 2; animation: sol14 var(--char-ani) ease-in-out infinite; }
.sol-15 { top: 22vh; transform: translateX(-543%); height: 27vh; filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.3); z-index: 2; animation: sol15 var(--char-ani) ease-in-out infinite; }
.sol-16 { top: 22vh; transform: translateX(454%); height: 27vh; filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.3); z-index: 2; animation: sol16 var(--char-ani) ease-in-out infinite; }

.vechicle-submarine { position: absolute; top: 60.611vh; left: 50%; transform: translateX(117.227%); height: 18.546vh; aspect-ratio: 398 / 194; background-image: url('images/submarine.webp'); background-size: contain; z-index: 55; animation: wave-submarine 6.5s ease-in-out infinite; }
.vechicle-copter1 { position: absolute; top: 40.057vh; left: 50%; transform: translateX(-387.227%); height: 7.934vh; aspect-ratio: 143 / 83; background-image: url('images/copter1.webp'); background-size: contain; z-index: 55; animation: hover-copter-1 6s ease-in-out infinite; }
.vechicle-copter2 { position: absolute; top: 38.623vh; left: 50%; transform: translateX(152.227%); height: 9.369vh; aspect-ratio: 157 / 98; background-image: url('images/copter2.webp'); background-size: contain; z-index: 55; animation: hover-copter-2 5s ease-in-out infinite; }
.vechicle-aircraft { position: absolute; top: 52.39vh; left: 50%; transform: translateX(-232.227%); height: 10.038vh; aspect-ratio: 221 / 105; background-image: url('images/aircraft.webp'); background-size: contain; z-index: 51; }
.vechicle-fighter { position: absolute; top: 57.361vh; left: 50%; transform: translateX(-222.227%); height: 21.797vh; aspect-ratio: 401 / 228; background-image: url('images/fighter.webp'); background-size: contain; z-index: 53; animation: loop-fighter 4s ease-in-out infinite; }
.vechicle-rocket { position: absolute; top: 62.428vh; left: 50%; transform: translateX(-242.227%); height: 12.237vh; aspect-ratio: 273 / 129; background-image: url('images/rocket.webp'); background-size: contain; z-index: 52; animation: loop-rocket 5.5s ease-in-out infinite; }

#particles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

.bottom-line1 { position: fixed; bottom: 0; left: 0; width: 100%; height: 13.383vh; background-color: rgba(16, 36, 61, 0.5); z-index: 50; display: flex; flex-direction: column; align-items: center; }
.logos-wrapper { display: flex; gap: 30px; margin-top: 10px; }
.bottom-logo1 { height: 9.177vh; aspect-ratio: 147 / 96; background-image: url('images/logo-astralax.webp'); background-size: contain; }
.bottom-logo2 { height: 9.177vh; aspect-ratio: 161 / 96; background-image: url('images/logo-fmod.webp'); background-size: contain; }
.bottom-line2 { position: absolute; bottom: 0; left: 0; width: 100%; height: 4.206vh; background-color: #10243d; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 1.35vh; color: #567dae; text-align: center; line-height: 4.206vh; }

.language-selector { position: fixed; top: 20px; right: 20px; z-index: 999; }
.current-flag { width: 42px; height: 36px; cursor: pointer; background-size: cover; }
.language-dropdown { position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.7); border-radius: 9px; padding: 3px; display: none; flex-direction: column; gap: 5px; }
.language-option { display: flex; align-items: center; height: 40px; padding: 0 20px 0 3px; color: #ffa800; cursor: pointer; border-radius: 7px; transition: background 0.2s, color 0.2s; }
.language-option:hover { background: rgba(255, 255, 255, 0.1); color: white; }
.language-option .flag { width: 42px; height: 36px; background-size: cover; flex-shrink: 0; }
.language-option span { margin-left: 10px; }