/* ============================================================
   Навигация, отряды, рация — зимний стиль EFL
   ============================================================ */

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(143, 208, 238, 0.07), transparent 60%),
    var(--ink);
}

.boot {
  color: var(--acid);
  background: #04070b;
}

/* ---------- снег ---------- */
.snow,
.snow::before,
.snow::after {
  position: fixed;
  z-index: 3;
  inset: -100px 0 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(226, 245, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 140px 80px, rgba(226, 245, 255, 0.55), transparent),
    radial-gradient(2.5px 2.5px at 260px 160px, rgba(226, 245, 255, 0.5), transparent),
    radial-gradient(1px 1px at 330px 40px, rgba(226, 245, 255, 0.6), transparent),
    radial-gradient(2px 2px at 90px 230px, rgba(226, 245, 255, 0.45), transparent);
  background-size: 360px 280px;
  animation: snowfall 18s linear infinite;
}

.snow::before {
  content: "";
  inset: 0;
  opacity: 0.6;
  background-size: 520px 420px;
  animation-duration: 28s;
  filter: blur(0.6px);
}

.snow::after {
  content: "";
  inset: 0;
  opacity: 0.35;
  background-size: 240px 200px;
  animation-duration: 11s;
}

@keyframes snowfall {
  from { background-position: 0 0; }
  to { background-position: 60px 840px; }
}

/* ---------- топбар ---------- */
.topbar {
  gap: 24px;
  border-bottom-color: var(--line);
  background: linear-gradient(to bottom, rgba(4, 8, 13, 0.9), transparent);
}

.topbar.is-scrolled {
  background: rgba(5, 10, 16, 0.88);
}

.topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(226, 245, 255, 0.35), transparent);
}

.brand__mark {
  border-color: var(--acid);
  color: var(--ice);
  background: linear-gradient(160deg, rgba(143, 208, 238, 0.22), transparent);
  box-shadow: 0 0 18px rgba(143, 208, 238, 0.18);
}

.nav {
  display: flex;
  gap: 4px;
  margin-right: auto;
  margin-left: clamp(20px, 4vw, 60px);
}

.nav a {
  position: relative;
  padding: 10px 12px;
  color: rgba(228, 238, 245, 0.6);
  font: 500 11px var(--mono);
  letter-spacing: 1.4px;
  transition: color 0.2s;
}

.nav a::after {
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  height: 1px;
  content: "";
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}

.nav a:hover,
.nav a.is-current {
  color: var(--ice);
}

.nav a:hover::after,
.nav a.is-current::after {
  transform: scaleX(1);
}

.operator {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  color: var(--ice);
  background: rgba(13, 20, 28, 0.6);
  font: 500 10px var(--mono);
  letter-spacing: 1.2px;
  white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: border-color 0.2s, background 0.2s;
}

.operator i {
  width: 7px;
  height: 7px;
  background: var(--fog);
  transform: rotate(45deg);
}

.operator:hover {
  border-color: var(--acid);
  background: rgba(143, 208, 238, 0.1);
}

.operator.is-in[data-squad="BEAR"] i { background: var(--bear); box-shadow: 0 0 10px var(--bear); }
.operator.is-in[data-squad="USEC"] i { background: var(--usec); box-shadow: 0 0 10px var(--usec); }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex;
  min-height: 54px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid var(--line-2);
  color: var(--ice);
  background: rgba(13, 20, 28, 0.55);
  font: 600 14px var(--display);
  letter-spacing: 1.6px;
  cursor: crosshair;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.btn i {
  font-style: normal;
}

.btn small {
  color: var(--fog);
  font: 9px var(--mono);
  letter-spacing: 1px;
}

.btn:hover {
  border-color: var(--acid);
  background: rgba(143, 208, 238, 0.12);
  transform: translateY(-2px);
}

.btn--primary {
  border-color: transparent;
  color: #04121c;
  background: linear-gradient(180deg, #e2f5ff, #8fd0ee);
  box-shadow: 0 10px 30px rgba(143, 208, 238, 0.2), inset 0 1px 0 #fff;
}

.btn--primary:hover {
  background: linear-gradient(180deg, #fff, #a6dcf3);
  box-shadow: 0 14px 40px rgba(143, 208, 238, 0.35);
}

.btn--ghost:hover small {
  color: var(--ice);
}

.btn--wide {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero__title {
  color: var(--ice);
  text-shadow: 0 0 40px rgba(143, 208, 238, 0.15);
}

.hero__place {
  -webkit-text-stroke-color: var(--ice);
}

.ticker {
  color: #04121c;
  background: linear-gradient(90deg, #8fd0ee, #e2f5ff 50%, #8fd0ee);
}

.cta {
  color: #04121c;
  background: linear-gradient(180deg, #e2f5ff, #8fd0ee);
}

.cta:hover {
  box-shadow: 7px 7px 0 var(--signal);
}

.toast {
  color: #04121c;
  background: linear-gradient(180deg, #e2f5ff, #8fd0ee);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ---------- отряды ---------- */
.squads__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}

.squads__note {
  max-width: 330px;
  margin: 0;
  color: var(--fog);
  font: 11px/1.7 var(--mono);
  letter-spacing: 0.4px;
}

.factions {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}

.factions.is-shaking {
  animation: shake 0.45s;
}

.factions__vs {
  display: grid;
  place-items: center;
  color: rgba(228, 238, 245, 0.25);
  font: 600 clamp(28px, 4vw, 54px) var(--display);
  letter-spacing: -1px;
}

.faction {
  --tone: var(--usec);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 26px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  color: var(--paper);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--tone) 12%, transparent), transparent 55%),
    var(--panel);
  text-align: left;
  cursor: crosshair;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: transform 0.3s, border-color 0.3s, opacity 0.3s, filter 0.3s;
}

.faction--bear {
  --tone: var(--bear);
}

.faction::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--tone) 5%, transparent) 14px 15px);
}

.faction::after {
  position: absolute;
  top: 14px;
  right: 18px;
  content: "ВЫБРАТЬ";
  color: color-mix(in srgb, var(--tone) 70%, transparent);
  font: 9px var(--mono);
  letter-spacing: 2px;
}

.faction:hover {
  border-color: color-mix(in srgb, var(--tone) 60%, transparent);
  transform: translateY(-4px);
}

.faction.is-selected {
  border-color: var(--tone);
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--tone) 18%, transparent);
}

.faction.is-selected::after {
  content: "✓ ТВОЙ ОТРЯД";
  color: var(--tone);
}

.faction.is-dimmed {
  opacity: 0.45;
  filter: grayscale(0.7);
}

.faction__emblem {
  grid-row: span 2;
  width: clamp(120px, 13vw, 170px);
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--tone) 35%, transparent)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
  transition: transform 0.4s cubic-bezier(.2,.8,.3,1);
}

.faction:hover .faction__emblem,
.faction.is-selected .faction__emblem {
  transform: rotate(-6deg) scale(1.04);
}

.faction__emblem::before {
  display: block;
  aspect-ratio: 778 / 896;
  content: "";
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 55%, #fff), var(--tone) 45%, color-mix(in srgb, var(--tone) 60%, #000));
  -webkit-mask: var(--emblem) center / contain no-repeat;
  mask: var(--emblem) center / contain no-repeat;
}

.faction__emblem--bear {
  --emblem: url("assets/factions/bear.webp");
}

.faction__emblem--usec {
  --emblem: url("assets/factions/usec.webp");
}

.faction__emblem--usec::before {
  aspect-ratio: 719 / 896;
}

.faction__body {
  display: block;
}

.faction__body small {
  display: block;
  color: color-mix(in srgb, var(--tone) 75%, #fff);
  font: 9px var(--mono);
  letter-spacing: 1.6px;
}

.faction__body strong {
  display: block;
  margin: 6px 0 12px;
  color: var(--ice);
  font: 600 clamp(48px, 6vw, 84px)/0.9 var(--display);
  letter-spacing: -0.02em;
}

.faction__body > span {
  display: block;
  max-width: 380px;
  color: var(--fog);
  font-size: 13px;
  line-height: 1.6;
}

.faction__count {
  align-self: end;
  color: var(--fog);
  font: 10px var(--mono);
  letter-spacing: 1.4px;
}

.faction__count b {
  color: var(--tone);
  font: 600 26px var(--display);
}

.faction__roster {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 6px;
  min-height: 26px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.faction__roster:empty::before {
  content: "ПОКА ПУСТО";
  color: rgba(132, 150, 166, 0.6);
  font: 9px var(--mono);
  letter-spacing: 1.4px;
}

.faction__roster i {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  color: var(--paper);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  font: normal 10px var(--mono);
  letter-spacing: 0.6px;
}

.faction__roster i.is-me {
  border-color: var(--tone);
  color: #04121c;
  background: var(--tone);
}

/* ---------- форма вступления ---------- */
.enlist {
  max-width: 620px;
  margin: 40px auto 0;
  border: 1px solid var(--line-2);
  background: var(--panel);
  backdrop-filter: blur(8px);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.enlist__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.enlist__tabs button {
  padding: 16px;
  border: 0;
  color: var(--fog);
  background: transparent;
  font: 500 11px var(--mono);
  letter-spacing: 1.6px;
  cursor: crosshair;
}

.enlist__tabs button.is-active {
  color: var(--ice);
  box-shadow: inset 0 -2px 0 var(--acid);
  background: rgba(143, 208, 238, 0.06);
}

.enlist__form {
  display: grid;
  gap: 16px;
  padding: 26px;
}

.enlist__form[hidden],
.enlist__tabs[hidden] {
  display: none;
}

.enlist__squad {
  padding: 12px 14px;
  border: 1px dashed var(--line-2);
  color: var(--fog);
  font: 10px var(--mono);
  letter-spacing: 1.4px;
}

.enlist__squad b {
  color: var(--ice);
}

.enlist__squad span {
  color: rgba(132, 150, 166, 0.7);
}

.enlist__squad[data-squad="BEAR"] { border-color: var(--bear); }
.enlist__squad[data-squad="BEAR"] b { color: var(--bear); }
.enlist__squad[data-squad="USEC"] { border-color: var(--usec); }
.enlist__squad[data-squad="USEC"] b { color: var(--usec); }

.field {
  display: grid;
  gap: 8px;
}

.field span {
  color: var(--fog);
  font: 9px var(--mono);
  letter-spacing: 1.6px;
}

.field input,
.radio__lock input,
.radio__compose input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line-2);
  outline: none;
  color: var(--ice);
  background: rgba(4, 8, 13, 0.7);
  font: 500 15px var(--mono);
  letter-spacing: 1px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input::placeholder,
.radio__lock input::placeholder,
.radio__compose input::placeholder {
  color: rgba(132, 150, 166, 0.5);
}

.field input:focus,
.radio__lock input:focus,
.radio__compose input:focus {
  border-color: var(--acid);
  box-shadow: 0 0 0 3px rgba(143, 208, 238, 0.12);
}

.enlist__error {
  min-height: 14px;
  margin: 0;
  color: var(--signal);
  font: 10px var(--mono);
  letter-spacing: 1px;
}

.enlist__done {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
  padding: 26px;
}

.enlist__done[hidden] {
  display: none;
}

.enlist__done-copy p {
  margin: 0 0 16px;
  color: var(--fog);
  font-size: 14px;
  line-height: 1.6;
}

.enlist__done-copy a {
  color: var(--ice);
  border-bottom: 1px solid var(--acid);
}

.dogtag {
  --tone: var(--usec);
  position: relative;
  display: grid;
  width: 230px;
  gap: 6px;
  padding: 22px 22px 18px 34px;
  border-radius: 18px 18px 18px 18px / 26px;
  color: #10161c;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 40%),
    linear-gradient(160deg, #cfd9e0, #8e9ba6 60%, #b9c4cc);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 #fff, inset 0 -2px 6px rgba(0, 0, 0, 0.25);
  transform: rotate(-4deg);
}

.enlist__done[data-squad="BEAR"] .dogtag { --tone: var(--bear); }

.dogtag::before {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 10px;
  height: 10px;
  content: "";
  border-radius: 50%;
  background: #4a5560;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%);
}

.dogtag small,
.dogtag i {
  font: normal 8px var(--mono);
  letter-spacing: 1.4px;
  opacity: 0.7;
}

.dogtag strong {
  font: 700 26px/1 var(--mono);
  letter-spacing: 1px;
  word-break: break-all;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dogtag span {
  padding-left: 8px;
  border-left: 3px solid var(--tone);
  font: 700 8px/1.4 var(--mono);
  letter-spacing: 0.8px;
}

/* ---------- рация ---------- */
.radio-fab {
  position: fixed;
  z-index: 70;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--line-2);
  color: var(--paper);
  background: linear-gradient(180deg, rgba(20, 31, 43, 0.96), rgba(7, 12, 18, 0.98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(226, 245, 255, 0.08);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: crosshair;
  transition: transform 0.35s cubic-bezier(.2,.8,.3,1), opacity 0.25s;
}

.radio-fab:hover {
  transform: translateY(-2px);
  border-color: var(--acid);
}

.radio-is-open .radio-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.radio-fab__led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
  animation: pulse 1.4s infinite;
}

.radio-fab[data-state="open"] .radio-fab__led {
  background: #5fd39a;
  box-shadow: 0 0 10px #5fd39a;
}

.radio-fab__label {
  display: grid;
  text-align: left;
}

.radio-fab__label b {
  font: 600 16px/1 var(--display);
  letter-spacing: 2px;
}

.radio-fab__label small {
  margin-top: 4px;
  color: var(--fog);
  font: 8px var(--mono);
  letter-spacing: 1.2px;
}

.radio-fab__unread {
  min-width: 22px;
  padding: 3px 6px;
  color: #04121c;
  background: var(--signal);
  font: 700 10px var(--mono);
  font-style: normal;
  text-align: center;
}

.radio-dock {
  position: fixed;
  z-index: 80;
  top: 84px;
  right: 18px;
  bottom: 18px;
  width: min(440px, calc(100vw - 36px));
  backdrop-filter: blur(18px);
  visibility: hidden;
  opacity: 0;
  transform: translateX(calc(100% + 40px));
  transition: transform 0.45s cubic-bezier(.16,.8,.3,1), opacity 0.3s, visibility 0s 0.45s;
}

.radio-is-open .radio-dock {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: transform 0.45s cubic-bezier(.16,.8,.3,1), opacity 0.3s;
}

.radio__close {
  margin: -4px -6px -4px 4px;
  padding: 4px 8px;
  border: 1px solid transparent;
  color: var(--fog);
  background: none;
  font: 12px var(--mono);
  cursor: crosshair;
}

.radio__close:hover {
  border-color: var(--line-2);
  color: var(--ice);
}

.radio__set {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background:
    linear-gradient(rgba(143, 208, 238, 0.03) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(180deg, rgba(16, 25, 35, 0.95), rgba(7, 12, 18, 0.97));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(226, 245, 255, 0.08);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.radio__set.is-jammed {
  animation: shake 0.45s;
}

.radio__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--fog);
  background: rgba(4, 8, 13, 0.6);
  font: 10px var(--mono);
  letter-spacing: 1.4px;
}

.radio__top > span:first-child {
  margin-right: auto;
}

.radio__top b {
  color: var(--ice);
  font-weight: 500;
}

.radio__top i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
  animation: pulse 1.4s infinite;
}

.radio__set[data-state="open"] .radio__top i {
  background: #5fd39a;
  box-shadow: 0 0 10px #5fd39a;
}

.radio__set[data-state="open"] #radioStatus {
  color: #5fd39a;
}

.radio__lock {
  display: none;
  grid-row: 2 / 4;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
}

.radio__lock b {
  color: var(--ice);
  font: 600 clamp(24px, 3vw, 34px) var(--display);
  letter-spacing: 1px;
}

.radio__lock p {
  margin: 0;
  color: var(--fog);
  font: 11px var(--mono);
}

.radio__lock input {
  max-width: 320px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 4px;
}

.radio__set[data-state="guest"] .radio__lock--guest,
.radio__set[data-state="code"] .radio__lock--code {
  display: grid;
}

.radio__set:not([data-state="open"]) .radio__feed,
.radio__set:not([data-state="open"]) .radio__compose {
  display: none;
}

.radio__set:not([data-state="open"])::after {
  position: absolute;
  inset: 48px 0 0;
  z-index: -1;
  content: "8f2a 91c0 77de 0b13 e4a9 5c2f d901 33ab 6e7c f0a2 1b9d 4c58 a7e3 02fd 9b61 c84e 5d0a e2b7 7f39 146c b05e 8ad2 3f97 61c4 da08 2e5b 97f1 0c6a e83d 54b2 a91f 7d0e 3c86 f26b 08d4 b7a9 61e3 9c2f 4d70 e15a";
  overflow: hidden;
  padding: 30px;
  color: rgba(143, 208, 238, 0.06);
  font: 22px/1.6 var(--mono);
  letter-spacing: 6px;
  word-spacing: 14px;
}

.radio__feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 208, 238, 0.3) transparent;
}

.radio__feed:empty::before {
  margin: auto;
  content: "СООБЩЕНИЙ ПОКА НЕТ";
  color: rgba(132, 150, 166, 0.6);
  font: 10px var(--mono);
  letter-spacing: 1.4px;
}

.msg {
  --tone: var(--usec);
  max-width: 82%;
  padding: 10px 14px 12px;
  border-left: 2px solid var(--tone);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 10%, transparent), rgba(13, 20, 28, 0.6));
}

.msg--bear {
  --tone: var(--bear);
}

.msg--mine {
  align-self: flex-end;
  border-right: 2px solid var(--tone);
  border-left: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--tone) 14%, transparent), rgba(13, 20, 28, 0.6));
}

.msg--fresh {
  animation: msg-in 0.35s cubic-bezier(.2,.8,.3,1);
}

.msg__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font: 9px var(--mono);
  letter-spacing: 1px;
}

.msg__head b {
  color: var(--tone);
  font: 600 12px var(--mono);
}

.msg__head span {
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  color: color-mix(in srgb, var(--tone) 80%, #fff);
  font-size: 8px;
}

.msg__head time {
  margin-left: auto;
  color: rgba(132, 150, 166, 0.7);
}

.msg p {
  margin: 0;
  color: var(--paper);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.msg--broken p {
  color: rgba(132, 150, 166, 0.6);
  font: 11px var(--mono);
  letter-spacing: 2px;
}

.radio__compose {
  display: grid;
  grid-template-columns: 1fr auto;
  border-top: 1px solid var(--line);
  background: rgba(4, 8, 13, 0.7);
}

.radio__compose input {
  border: 0;
  background: transparent;
}

.radio__compose input:focus {
  box-shadow: none;
}

.radio__compose button {
  padding: 0 24px;
  border: 0;
  color: #04121c;
  background: linear-gradient(180deg, #e2f5ff, #8fd0ee);
  font: 600 13px var(--display);
  letter-spacing: 1.6px;
  cursor: crosshair;
}

/* ---------- снаряжение ---------- */
.gear-list__dl {
  padding: 9px 12px;
  border: 1px solid var(--acid);
  color: #04121c;
  background: linear-gradient(180deg, #e2f5ff, #8fd0ee);
  font: 600 9px var(--mono);
  letter-spacing: 1px;
  white-space: nowrap;
}

@keyframes shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .topbar__right { margin-left: auto; }
}

@media (max-width: 850px) {
  .factions { grid-template-columns: 1fr; }
  .factions__vs { padding: 4px 0; }
  .squads__head { display: block; }
  .squads__note { margin-top: 24px; }
}

@media (max-width: 520px) {
  .topbar__right { gap: 10px; }
  .operator { padding: 8px 10px; font-size: 8px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .sound { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .faction { grid-template-columns: 1fr; padding: 24px 20px; }
  .faction__emblem { grid-row: auto; width: 120px; }
  .enlist__done { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .msg { max-width: 92%; }
  .radio-fab { right: 14px; bottom: 14px; }
  .radio-dock { inset: 0; width: auto; }
  .radio-dock .radio__set { clip-path: none; border: 0; }
  .radio-is-open { overflow: hidden; }
  .gear-list li > .gear-list__dl { display: inline-block; grid-column: 2; justify-self: start; }
}