html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0f14;
  background: var(--bg, #0b0f14);
  color: #e5e7eb;
  color: var(--text, #e5e7eb);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
 }

 @media (min-width: 1401px), (min-height: 821px) {
   #hud:not(.lbPinned) #stats,
   #hud:not(.lbPinned) #help {
     display: block;
   }
 }

 html {
   color-scheme: dark;
 }

 .langToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.42);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  -webkit-tap-highlight-color: transparent;
 }

 .langToggle:hover {
  background: var(--btn2);
 }

 .langToggle:active {
   transform: translateY(1px);
 }

 .langToggle:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 /* H19: кнопка языка живёт в футере карточки меню, а не поверх её угла.
    Позиционирование задаёт .menuFooterActions, здесь остаётся только z-слой
    на случай, если элемент когда-нибудь снова окажется вне карточки. */
 .langToggleGlobal {
  position: relative;
  z-index: var(--z-lang);
 }

 :root {
   --bg: #0b0f14;
   --text: #e5e7eb;
   --muted: rgba(229, 231, 235, 0.84);
   --muted2: rgba(229, 231, 235, 0.60);
   --hud-brightness: 1;
   --hud-contrast: 1;
   --hud-panel-alpha: 0.82;
   --accent: rgba(255, 45, 85, 0.98);
   --accent2: rgba(96, 165, 250, 0.85);
   --grid: rgba(255,255,255,0.040);
   --panel: rgba(0, 0, 0, 0.46);
   --panel2: rgba(0, 0, 0, 0.36);
   --border: rgba(255, 255, 255, 0.12);
   --border2: rgba(255, 255, 255, 0.10);
   --btn: rgba(255, 255, 255, 0.07);
   --btn2: rgba(255, 255, 255, 0.11);
   --focus: rgba(96, 165, 250, 0.85);
   --fs-11: 11px;
   --fs-12: 12px;
   --fs-13: 13px;
   --fs-14: 14px;
   --fs-16: 16px;
   --fs-18: 18px;
   --fs-20: 20px;
   --fs-22: 22px;
   --lh-tight: 1.15;
   --lh-body: 1.35;
   --r-sm: 10px;
   --r-md: 12px;
   --r-tab: 14px;
   --r-lg: 16px;
   --pad-sm: 8px;
   --pad-md: 10px;
   --pad-lg: 12px;
   --shadow-float: 0 12px 28px rgba(0,0,0,0.35);
   --shadow-float-strong: 0 18px 60px rgba(0, 0, 0, 0.55);
   --control-h: 40px;
   --z-game: 0;
   --z-hud: 10;
   --z-minimap: 10;
   --z-killfeed: 11;
   --z-right: 12;
   --z-top: 13;
   --z-chat: 14;
   --z-toasts: 20;
   --z-overlay: 50;
   --z-modal: 60;
   --z-modal2: 65;
   --z-toasts-top: 70;
   --z-lang: 1000;
   /* Слои «сочности»: вспышка поверх HUD и чата, но ниже оверлеев (50) */
   --z-fx: 16;
   --z-banner: 22;
   /* Лестница редкости. Цвет живёт ТОЛЬКО в UI магазина, но не в самом предмете */
   --tier-base: #6b7280;
   --tier-common: #8fa3b8;
   --tier-rare: #35c4f0;
   --tier-epic: #a855f7;
   --tier-legendary: #f5a524;
   --tier-mythic: #ff3d71;
   --gold: #f5c542;
   --sa-top: env(safe-area-inset-top, 0px);
   --sa-right: env(safe-area-inset-right, 0px);
   --sa-bottom: env(safe-area-inset-bottom, 0px);
   --sa-left: env(safe-area-inset-left, 0px);
 }

 html[data-theme],
 html[data-theme="light"] {
   --bg: #0b0f14;
   --text: #e5e7eb;
   --muted: rgba(229, 231, 235, 0.84);
   --muted2: rgba(229, 231, 235, 0.60);
   --hud-brightness: 1;
   --hud-contrast: 1;
   --hud-panel-alpha: 0.82;
   --panel: rgba(0, 0, 0, 0.46);
   --panel2: rgba(0, 0, 0, 0.36);
   --border: rgba(255, 255, 255, 0.12);
   --border2: rgba(255, 255, 255, 0.10);
   --btn: rgba(255, 255, 255, 0.07);
   --btn2: rgba(255, 255, 255, 0.11);
   --focus: rgba(96, 165, 250, 0.85);
   --fs-11: 11px;
   --fs-12: 12px;
   --fs-13: 13px;
   --fs-14: 14px;
   --fs-16: 16px;
   --fs-18: 18px;
   --fs-20: 20px;
   --fs-22: 22px;
   --lh-tight: 1.15;
   --lh-body: 1.35;
   --r-sm: 10px;
   --r-md: 12px;
   --r-tab: 14px;
   --r-lg: 16px;
   --pad-sm: 8px;
   --pad-md: 10px;
   --pad-lg: 12px;
   --shadow-float: 0 12px 28px rgba(0,0,0,0.35);
   --shadow-float-strong: 0 18px 60px rgba(0, 0, 0, 0.55);
   --control-h: 40px;
   --z-game: 0;
   --z-hud: 10;
   --z-minimap: 10;
   --z-killfeed: 11;
   --z-right: 12;
   --z-top: 13;
   --z-chat: 14;
   --z-toasts: 20;
   --z-overlay: 50;
   --z-modal: 60;
   --z-modal2: 65;
   --z-toasts-top: 70;
   --z-lang: 1000;
 }

 *, *::before, *::after {
   box-sizing: border-box;
 }

 button,
 [role="button"],
 input,
 select,
 textarea,
 summary,
 .roomRow {
   min-height: var(--control-h);
 }

 .iconBtn {
   min-width: var(--control-h);
   min-height: var(--control-h);
 }

 button:focus-visible,
 [role="button"]:focus-visible,
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible,
 summary:focus-visible,
 .roomRow:focus-visible {
   outline: none;
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .overlay {
   position: fixed;
   inset: 0;
   z-index: var(--z-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: calc(12px + var(--sa-top)) calc(12px + var(--sa-right)) calc(12px + var(--sa-bottom)) calc(12px + var(--sa-left));
   background: radial-gradient(1200px 600px at 50% 40%, rgba(255, 45, 85, 0.16), transparent 60%),
     rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(8px);
 }

 body.overlayActive #hud,
 body.overlayActive #topHud,
 body.overlayActive #rightSidebar,
 body.overlayActive #chat {
   display: none !important;
 }

 /* Тосты — единственный канал обратной связи магазина: держим их поверх оверлеев */
 body.overlayActive #eventToasts {
   z-index: var(--z-toasts-top);
 }

 .overlay.hidden {
   display: none;
 }

 .hidden {
  display: none !important;
 }

 @keyframes overlayCardIn {
   from {
     opacity: 0;
     transform: translateY(8px) scale(0.985);
   }
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }

 .overlay .card {
   animation: overlayCardIn 180ms ease-out both;
   width: min(920px, calc(100vw - 24px));
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   background: var(--panel);
   padding: 18px;
   max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom));
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }

 .menuHeader {
   margin-bottom: 14px;
 }

 /* --- H15. Счётчик онлайна в шапке меню ------------------------------------
    Цифру пишет client.js в #menuOnlineCount (та же, что считает updateRoomsStats). */
 .menuHeaderTop {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px;
 }

 .menuOnline {
   display: inline-flex;
   align-items: baseline;
   gap: 7px;
   padding: 4px 12px;
   margin-bottom: 10px;
   border-radius: 999px;
   border: 1px solid color-mix(in srgb, #34d399 42%, var(--border2));
   background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(0, 0, 0, 0.22));
   font-size: var(--fs-12);
   color: var(--muted);
   white-space: nowrap;
 }

 .menuOnlineDot {
   width: 8px;
   height: 8px;
   border-radius: 999px;
   background: #34d399;
   box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
   align-self: center;
   flex: 0 0 auto;
   animation: onlinePulse 2.2s ease-out infinite;
 }

 @keyframes onlinePulse {
   0% {
     box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
   }
   70% {
     box-shadow: 0 0 0 7px rgba(52, 211, 153, 0);
   }
   100% {
     box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
   }
 }

 .menuOnlineCount {
   font-size: var(--fs-16);
   font-weight: 900;
   font-variant-numeric: tabular-nums;
   color: rgba(255, 255, 255, 0.96);
 }

 .menuOnlineLabel {
   font-weight: 700;
 }

 /* --- H8. Три шага правил — постоянно, а не одноразовым онбордингом --------- */
 .menuHowTo {
   counter-reset: howto;
   list-style: none;
   margin: 0;
   padding: var(--pad-md);
   display: grid;
   gap: 8px;
   border-radius: var(--r-tab);
   border: 1px solid color-mix(in srgb, var(--accent2) 22%, var(--border2));
   background: linear-gradient(180deg, rgba(96, 165, 250, 0.08), rgba(0, 0, 0, 0.16));
 }

 .menuHowToStep {
   display: grid;
   grid-template-columns: auto auto 1fr;
   align-items: center;
   gap: 9px;
   font-size: var(--fs-13);
   font-weight: 700;
   line-height: 1.25;
   color: rgba(255, 255, 255, 0.92);
 }

 .menuHowToStep::before {
   counter-increment: howto;
   content: counter(howto);
   width: 20px;
   height: 20px;
   border-radius: 999px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: var(--fs-11);
   font-weight: 900;
   font-variant-numeric: tabular-nums;
   color: rgba(255, 255, 255, 0.96);
   border: 1px solid color-mix(in srgb, var(--accent2) 45%, var(--border2));
   background: rgba(96, 165, 250, 0.18);
   flex: 0 0 auto;
 }

 .menuHowToIcon {
   font-size: var(--fs-14);
   line-height: 1;
 }

 .menuHowToIcon img.emoji {
   width: 16px;
   height: 16px;
 }

 .menuHowToText {
   min-width: 0;
 }

 /* --- H6. Панель комнат — закрытый аккордеон ------------------------------- */
 .roomsDetails > .roomsDetailsSummary {
   list-style: none;
   cursor: pointer;
   user-select: none;
   display: flex;
   align-items: center;
   gap: 8px;
   min-height: var(--control-h);
   margin: calc(var(--pad-lg) * -1);
   padding: var(--pad-lg);
   border-radius: var(--r-lg);
 }

 .roomsDetails > .roomsDetailsSummary::-webkit-details-marker {
   display: none;
 }

 .roomsDetails[open] > .roomsDetailsSummary {
   margin-bottom: 0;
   border-bottom: 1px solid var(--border2);
   border-radius: var(--r-lg) var(--r-lg) 0 0;
 }

 .roomsDetailsHint {
   font-size: var(--fs-12);
   color: var(--muted2);
   font-weight: 700;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .roomsDetailsChevron {
   margin-left: auto;
   flex: 0 0 auto;
   color: var(--muted);
   transition: transform 140ms ease;
 }

 .roomsDetails[open] > .roomsDetailsSummary .roomsDetailsChevron {
   transform: rotate(180deg);
 }

 .roomsDetailsBody {
   margin-top: var(--pad-lg);
 }

 /* Заголовок переехал в <summary>, в шапке остались только действия */
 .roomsHeaderActionsOnly {
   justify-content: flex-start;
 }

 /* --- H19. Футер карточки меню --------------------------------------------- */
 .menuFooterActions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--pad-md);
   margin-top: var(--pad-lg);
   padding-top: var(--pad-md);
   border-top: 1px solid var(--border2);
 }

 .menuGrid {
   display: grid;
   grid-template-columns: 1.25fr 0.95fr;
   gap: var(--pad-lg);
   align-items: start;
 }

 .menuPanel {
   border: 1px solid var(--border2);
   border-radius: var(--r-lg);
   background: rgba(0, 0, 0, 0.18);
   padding: var(--pad-lg);
 }

 .menuPanelPrimary {
   border-color: color-mix(in srgb, rgba(255, 45, 85, 0.35) 55%, var(--border2));
   background: linear-gradient(180deg, rgba(255, 45, 85, 0.10), rgba(0, 0, 0, 0.18));
 }

 .menuPanelHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
 }

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

 .roomsToolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
 }

 .roomsStats {
   font-size: var(--fs-12);
   color: var(--muted);
 }

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

 .roomsSearchWrap {
   position: relative;
   display: flex;
   align-items: center;
   min-width: 0;
 }

 .roomsSearchWrap input {
   padding-right: 42px;
 }

 .roomsSearchWrap .iconBtn {
   position: absolute;
   right: 6px;
   width: var(--control-h);
   height: var(--control-h);
   min-height: var(--control-h);
 }

 .roomsControls input,
 .roomsControls select {
   padding: 8px 10px;
   border-radius: var(--r-md);
   border: 1px solid var(--border);
   background: var(--panel2);
   color: var(--text);
   outline: none;
   min-height: var(--control-h);
 }

 .roomsControls input {
   width: 170px;
 }

 .roomsControls input:focus-visible,
 .roomsControls select:focus-visible {
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .roomsCreate {
   margin-top: 10px;
   padding: var(--pad-md);
   border-radius: var(--r-tab);
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(0, 0, 0, 0.18);
 }

 .roomsCreate.hidden {
   display: none;
 }

 .roomsCreateActions {
   display: flex;
   align-items: center;
   justify-content: stretch;
   margin-top: 8px;
 }

 .roomsCreateActions > * {
   width: 100%;
 }

 .menuOnboarding {
   padding: var(--pad-md);
   border-radius: var(--r-tab);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.14);
   display: grid;
   gap: 4px;
 }

 .menuOnboardingTitle {
   font-weight: 900;
   font-size: var(--fs-12);
 }

 .menuOnboardingDesc {
   font-size: var(--fs-12);
   color: var(--muted);
   line-height: 1.25;
 }

 .skeletonLine {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  background-size: 220% 100%;
  animation: shimmer 1200ms ease-in-out infinite;
 }

 .skeletonBlock {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  background-size: 220% 100%;
  animation: shimmer 1200ms ease-in-out infinite;
 }

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

 .btnPrimary.isLoading,
 .btnSecondary.isLoading,
 .btnGhost.isLoading {
   opacity: 0.9;
   cursor: progress;
 }

 .btnPrimary.isLoading::before,
 .btnSecondary.isLoading::before,
 .btnGhost.isLoading::before {
   content: '';
   width: 12px;
   height: 12px;
   border-radius: 999px;
   border: 2px solid rgba(255, 255, 255, 0.32);
   border-top-color: rgba(255, 255, 255, 0.92);
   display: inline-block;
   vertical-align: -2px;
   margin-right: 8px;
   animation: spin 700ms linear infinite;
 }

 @keyframes spin {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
 }

 .roomsEmpty {
   padding: var(--pad-lg);
   border-radius: var(--r-tab);
   border: 1px dashed rgba(255, 255, 255, 0.12);
   background: rgba(0, 0, 0, 0.14);
   display: grid;
   gap: 8px;
 }

 .roomsEmptyTitle {
   font-weight: 700;
 }

 .roomsEmptyDesc {
   color: var(--muted);
   font-weight: 600;
   line-height: 1.25;
 }

 .roomsEmptyActions {
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: flex-start;
 }

 .roomRow {
   display: grid;
   gap: 6px;
   padding: 10px 10px;
   border-radius: var(--r-md);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.14);
   cursor: pointer;
   outline: none;
 }

 .roomRowTop {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
 }

 .roomRowLeft {
   display: flex;
   align-items: baseline;
   gap: 8px;
   min-width: 0;
 }

 .roomRowTitle {
   font-weight: 700;
   font-size: var(--fs-13);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .roomRowMeta {
   font-size: var(--fs-12);
   color: var(--muted);
   font-variant-numeric: tabular-nums;
   flex: 0 0 auto;
 }

 .roomRowSub {
   font-size: var(--fs-12);
   color: var(--muted2);
   line-height: 1.25;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .roomRow:hover {
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.14);
 }

 .roomRow:focus-visible {
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .roomRow.selected {
   border-color: rgba(96, 165, 250, 0.55);
   box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
 }

 .roomRowJoin {
   flex: 0 0 auto;
   min-height: 36px;
 }

 /* H14: список скроллится и на десктопе — иначе карточка растёт и «Играть» уезжает */
 #roomsList {
   max-height: min(340px, 40dvh);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }

 /* H9: скелетон-строка размером с .roomRow — client.js рисует её на время загрузки */
 .roomsSkeleton {
   display: grid;
   gap: 6px;
 }

 .roomsSkeletonRow {
   display: grid;
   gap: 8px;
   padding: 10px;
   min-height: var(--control-h);
   border-radius: var(--r-md);
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(0, 0, 0, 0.14);
 }

 .roomsSkeletonRow .skeletonLine {
   height: 13px;
 }

 .roomsSkeletonRow .skeletonLine.isTitle {
   width: 56%;
 }

 .roomsSkeletonRow .skeletonLine.isSub {
   height: 11px;
   width: 82%;
   opacity: 0.7;
 }

 .menuPanelTitle {
   font-weight: 800;
   font-size: var(--fs-14);
 }

 .cosmeticsStyleTitle {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .cosmeticsStyleTitle .iconBtn {
   width: 32px;
   height: 32px;
   font-size: 14px;
 }

 .cosmeticsGrid {
   display: grid;
   grid-template-columns: 1.25fr 0.95fr;
   gap: var(--pad-lg);
   align-items: start;
 }

 .cosmeticsStoreBar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-top: 10px;
 }

 /* Статус магазина (успех/ошибка/подсказка) */
 .cosmeticsStatus {
   margin-top: 10px;
   padding: 8px 10px;
   border-radius: var(--r-md);
   border: 1px solid var(--border2);
   background: rgba(0, 0, 0, 0.22);
   color: var(--muted);
   font-size: var(--fs-12);
   font-weight: 700;
   line-height: 1.3;
 }

 .cosmeticsStatus:empty {
   display: none;
 }

 .cosmeticsStatus.isError {
   border-color: rgba(255, 92, 138, 0.45);
   background: rgba(255, 45, 85, 0.14);
   color: rgba(255, 196, 216, 0.96);
 }

 .cosmeticsStatus.isSuccess {
   border-color: rgba(52, 211, 153, 0.45);
   background: rgba(52, 211, 153, 0.14);
   color: rgba(197, 255, 229, 0.96);
 }

 .cosmeticsStatus.isInfo {
   border-color: color-mix(in srgb, var(--accent2) 32%, var(--border2));
   background: rgba(96, 165, 250, 0.10);
   color: rgba(219, 234, 254, 0.94);
 }

 .cosmeticsFilters {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }

 /* C16: компактная высота задаётся переменной, а не селектором (0,2,0), —
    мобильный/тач-контекст поднимает её до 44px без гонки специфичностей. */
 .cosmeticsFilters .btnGhost {
   min-height: var(--filter-btn-h, 36px);
 }

 .cosmeticsFilters .btnGhost.isActive {
   border-color: color-mix(in srgb, var(--accent2) 55%, var(--border2));
   background: linear-gradient(180deg, rgba(96, 165, 250, 0.14), rgba(0, 0, 0, 0.18));
 }

 .cosmeticsTabs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 10px;
 }

 .cosmeticsEarnStyle {
   margin-top: 10px;
   padding: 10px 10px;
   border-radius: var(--r-md);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.14);
   font-size: var(--fs-12);
   color: var(--muted);
   line-height: 1.25;
 }

 .cosmeticsEarnStyle b {
   color: rgba(255, 255, 255, 0.90);
 }

 .cosmeticsEarnStyle .row {
   display: flex;
   gap: 8px;
   align-items: baseline;
   justify-content: space-between;
 }

 .cosmeticsEarnStyle .row .k {
   font-weight: 800;
   color: rgba(255, 255, 255, 0.82);
 }

 .cosmeticsTabBtn {
   padding: 8px 10px;
   border-radius: var(--r-tab);
   border: 1px solid var(--border2);
   background: rgba(0, 0, 0, 0.18);
   color: var(--text);
   cursor: pointer;
   font-size: var(--fs-13);
 }

 .cosmeticsTabBtn:disabled {
  opacity: 0.75;
  cursor: progress;
 }

 .cosmeticsTabBtn[aria-selected="true"] {
   border-color: color-mix(in srgb, var(--accent2) 55%, var(--border2));
   background: linear-gradient(180deg, rgba(96, 165, 250, 0.14), rgba(0, 0, 0, 0.18));
 }

 .cosmeticsItems {
   margin-top: 10px;
   display: grid;
   gap: 8px;
 }

 .cosmeticsItem {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 10px 10px;
   border-radius: var(--r-md);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.14);
 }

 .cosmeticsItemPreview {
   position: relative;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.22);
   overflow: hidden;
   flex: 0 0 auto;
 }

 .cosmeticsItemPreview canvas {
   width: 100%;
   height: 100%;
   display: block;
 }

 .cosmeticsItem.isSelected {
   border-color: rgba(96, 165, 250, 0.55);
   box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
 }

 .cosmeticsItemLeft {
   display: grid;
   gap: 2px;
   /* C10: без этого grid-колонка не даёт ellipsis работать и карточка разъезжается */
   min-width: 0;
 }

 .cosmeticsItemTitle {
   font-weight: 800;
   font-size: var(--fs-13);
 }

 .cosmeticsItemSub {
   font-size: var(--fs-12);
   color: var(--muted);
 }

/* Короткое «где это видно» — закрывает вопрос «за что я плачу». */
 .cosmeticsItemWhere {
   font-size: var(--fs-11, 11px);
   line-height: 1.35;
   color: rgba(229, 231, 235, 0.55);
 }

 .cosmeticsItem:focus-visible {
   outline: 2px solid rgba(96, 165, 250, 0.75);
   outline-offset: 2px;
 }

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

 .cosmeticsPrice {
   font-size: var(--fs-12);
   color: var(--muted);
 }

 .cosmeticsPrice .num {
   font-variant-numeric: tabular-nums;
   font-weight: 900;
   color: rgba(255, 255, 255, 0.88);
 }

 .cosmeticsPrice .sep {
   opacity: 0.7;
 }

 .cosmeticsItemSub.isBlocked {
   color: rgba(255, 140, 200, 0.92);
 }

/* ==========================================================================
   D11. Лестница редкости в магазине.
   Цвет тира живёт ТОЛЬКО здесь — в полоске карточки, бейдже и цвете цены.
   В самом предмете (превью, канвас) он не появляется: иначе игрок читает
   «фиолетовый = дорогой», а не «предмет интересный».
   client.js вешает модификатор тира и на .cosmeticsItem, и на .tierBadge.
   ========================================================================== */

 .tierBase {
   --tier-color: var(--tier-base);
 }
 .tierCommon {
   --tier-color: var(--tier-common);
 }
 .tierRare {
   --tier-color: var(--tier-rare);
 }
 .tierEpic {
   --tier-color: var(--tier-epic);
 }
 .tierLegendary {
   --tier-color: var(--tier-legendary);
 }
 .tierMythic {
   --tier-color: var(--tier-mythic);
 }

 .tierBadge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   /* .cosmeticsItemLeft — grid, поэтому без justify-self бейдж растянется на строку */
   justify-self: start;
   width: fit-content;
   padding: 1px 7px;
   border-radius: 999px;
   font-size: var(--fs-11);
   font-weight: 900;
   letter-spacing: 0.4px;
   text-transform: uppercase;
   line-height: 1.6;
   white-space: nowrap;
   color: var(--tier-color, var(--tier-base));
   border: 1px solid color-mix(in srgb, var(--tier-color, var(--tier-base)) 55%, transparent);
   background: color-mix(in srgb, var(--tier-color, var(--tier-base)) 16%, rgba(0, 0, 0, 0.35));
 }

 /* Разделители групп тиров в списке (текст вставляет client.js) */
 .tierDivider {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 8px 2px 0;
   font-size: var(--fs-11);
   font-weight: 900;
   letter-spacing: 0.4px;
   text-transform: uppercase;
   color: var(--tier-color, var(--muted2));
 }

 .tierDivider::after {
   content: '';
   flex: 1;
   height: 1px;
   background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color, var(--border)) 50%, transparent), transparent);
 }

 .tierDivider:first-child {
   margin-top: 0;
 }

 /* Шапка категории: «Куплено 3 / 8 · до конца ветки 1355 ✨» */
 .cosmeticsCatSummary {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 6px 10px;
   padding: 7px 10px;
   border-radius: var(--r-md);
   border: 1px solid var(--border2);
   background: rgba(0, 0, 0, 0.20);
   font-size: var(--fs-12);
   font-weight: 700;
   color: var(--muted);
   font-variant-numeric: tabular-nums;
 }

 .cosmeticsCatSummary b,
 .cosmeticsCatSummary .num {
   color: rgba(255, 255, 255, 0.92);
   font-weight: 900;
 }

 /* --- Полоса тира и цвет цены ---------------------------------------------- */
 .cosmeticsItem {
   position: relative;
   border-left-width: 4px;
   border-left-color: var(--tier-color, rgba(255, 255, 255, 0.10));
 }

 .cosmeticsItem .cosmeticsPrice .num {
   color: var(--tier-color, rgba(255, 255, 255, 0.88));
 }

 /* Legendary: внутреннее свечение карточки (background-image, чтобы не
    конфликтовать с box-shadow состояний .isSelected/.isEquipped) */
 .cosmeticsItem.tierLegendary {
   background-image: radial-gradient(130% 120% at 0% 50%, color-mix(in srgb, var(--tier-legendary) 18%, transparent), transparent 62%);
 }

 /* Mythic: анимированная градиентная рамка (переиспользует @keyframes shimmer)
    + «дыхание» 6с */
 .cosmeticsItem.tierMythic {
   border-color: transparent;
   animation: tierBreathe 6s ease-in-out infinite;
 }

 .cosmeticsItem.tierMythic::before {
   content: '';
   position: absolute;
   /* растягиваем на область рамки (1px сверху/справа/снизу, 4px — полоса тира) */
   inset: -1px -1px -1px -4px;
   border-radius: inherit;
   padding: 1px 1px 1px 4px;
   background: linear-gradient(90deg, var(--tier-mythic), var(--tier-epic), var(--tier-legendary), var(--tier-mythic));
   background-size: 220% 100%;
   animation: shimmer 2600ms linear infinite;
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   pointer-events: none;
 }

 @keyframes tierBreathe {
   0%,
   100% {
     filter: brightness(1);
   }
   50% {
     filter: brightness(1.14);
   }
 }

 /* --- Три состояния карточки ------------------------------------------------
    Порядок важен: .isEquipped объявлен последним и перебивает .isOwned. */
 .cosmeticsItem.isLocked {
   background-color: rgba(0, 0, 0, 0.26);
 }

 .cosmeticsItem.isLocked .cosmeticsItemTitle {
   color: rgba(255, 255, 255, 0.80);
 }

 /* Превью НЕ глушим в серость: именно оно — мотивация купить */
 .cosmeticsItem.isLocked .cosmeticsItemPreview::after {
   content: '🔒';
   position: absolute;
   right: 1px;
   bottom: 0;
   padding: 1px 3px;
   border-radius: 6px;
   font-size: 10px;
   line-height: 1.2;
   background: rgba(0, 0, 0, 0.66);
   color: rgba(255, 255, 255, 0.94);
   pointer-events: none;
 }

 .cosmeticsItem.isOwned {
   background-color: rgba(52, 211, 153, 0.07);
   border-top-color: rgba(52, 211, 153, 0.22);
   border-right-color: rgba(52, 211, 153, 0.22);
   border-bottom-color: rgba(52, 211, 153, 0.22);
 }

 .cosmeticsItem.isOwned .cosmeticsItemTitle::before {
   content: '✓ ';
   color: #34d399;
   font-weight: 900;
 }

 .cosmeticsItem.isEquipped {
   background-color: rgba(96, 165, 250, 0.14);
   border-top-color: color-mix(in srgb, var(--accent2) 62%, transparent);
   border-right-color: color-mix(in srgb, var(--accent2) 62%, transparent);
   border-bottom-color: color-mix(in srgb, var(--accent2) 62%, transparent);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent2) 26%, transparent);
 }

 .cosmeticsItem.isEquipped .cosmeticsItemTitle::before {
   content: '★ ';
   color: var(--accent2);
   font-weight: 900;
 }

 /* --- Прогресс до покупки на заблокированном товаре ------------------------- */
 .cosmeticsItemProgress {
   position: relative;
   height: 5px;
   margin-top: 5px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(0, 0, 0, 0.30);
   overflow: hidden;
 }

 /* Ширину заливки client.js задаёт инлайном на единственном дочернем элементе */
 .cosmeticsItemProgress > * {
   display: block;
   height: 100%;
   width: 0%;
   max-width: 100%;
   border-radius: 999px;
   background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color, var(--accent2)) 85%, transparent), color-mix(in srgb, var(--tier-color, var(--accent2)) 35%, transparent));
   transition: width 260ms ease;
 }

 /* --- Контракт п.4: подсветка числа во время count-up ----------------------- */
 .counting {
   display: inline-block;
   color: var(--gold);
   text-shadow: 0 0 10px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent);
   transform: scale(1.08);
   transition: transform 140ms ease, text-shadow 140ms ease, color 140ms ease;
 }

 .cosmeticsPreviewWrap {
   margin-top: 10px;
   border-radius: var(--r-lg);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: radial-gradient(600px 280px at 50% 35%, rgba(96, 165, 250, 0.10), rgba(0, 0, 0, 0.22));
   overflow: hidden;
 }

 #cosmeticsPreview {
   width: 100%;
   /* Пропорция задаётся здесь, а не атрибутами width/height: их значение теперь
      выставляет JS под devicePixelRatio (иначе превью мылится на retina). */
   aspect-ratio: 420 / 260;
   height: auto;
   display: block;
 }

 .menuPanelBody {
   display: grid;
   gap: 10px;
   margin-top: 10px;
 }

 .menuActions {
   display: flex;
   justify-content: flex-start;
   gap: var(--pad-md);
   flex-wrap: wrap;
 }

 /* H4: «Играть» — отдельной строкой и доминирует, «Косметика» — ниже и второстепенна */
 .menuActionsStacked {
   flex-direction: column;
   align-items: stretch;
 }

 .btnPlay {
   min-height: 56px;
   font-size: var(--fs-18);
   font-weight: 900;
   letter-spacing: 0.3px;
   border-radius: var(--r-lg);
   border-color: rgba(255, 45, 85, 0.55);
   background: linear-gradient(135deg, rgba(255, 45, 85, 0.72), rgba(96, 165, 250, 0.34));
   box-shadow: 0 10px 30px rgba(255, 45, 85, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.20);
 }

 .btnPlay:hover {
   filter: brightness(1.08);
   box-shadow: 0 14px 36px rgba(255, 45, 85, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.24);
 }

 .btnPlay:disabled {
   box-shadow: none;
 }

 .btnMenuSecondary {
   font-weight: 700;
   color: var(--muted);
 }

 .menuPanelPrimary .menuActions {
   justify-content: stretch;
 }

 .menuPanelPrimary .menuActions > * {
   width: 100%;
 }

 .menuPanelBody input {
   flex: 1;
   padding: var(--pad-md) var(--pad-lg);
   border-radius: var(--r-md);
   border: 1px solid var(--border);
   background: var(--panel2);
   color: var(--text);
   outline: none;
   min-height: var(--control-h);
   min-width: 0;
 }

 /* Пресет эффектов (#fxPresetSelect) и любые другие select в панелях настроек */
 .menuPanelBody select {
   flex: 1;
   min-width: 0;
   padding: var(--pad-sm) var(--pad-md);
   border-radius: var(--r-md);
   border: 1px solid var(--border);
   background: var(--panel2);
   color: var(--text);
   outline: none;
   min-height: var(--control-h);
   cursor: pointer;
 }

 .menuPanelBody input:focus-visible,
 .menuPanelBody select:focus-visible {
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .btnPrimary,
 .btnSecondary,
 .btnGhost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
 }

 .btnPrimary {
  padding: var(--pad-md) 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 45, 85, 0.35);
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.42), rgba(96, 165, 250, 0.20));
  color: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  min-height: var(--control-h);
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
 }

 .btnPrimary:hover {
   filter: brightness(1.06);
 }

 .btnPrimary:active {
   transform: translateY(1px);
 }

 .btnPrimary:focus-visible {
   outline: none;
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .btnPrimary:disabled {
   opacity: 0.55;
   cursor: not-allowed;
   filter: saturate(0.75);
 }

 .btnPrimary:disabled:hover,
 .btnPrimary:disabled:active {
   transform: none;
   filter: saturate(0.75);
 }

 .fieldError {
   font-size: var(--fs-12);
   font-weight: 700;
   color: rgba(255, 140, 200, 0.92);
   min-height: 16px;
 }

 .btnSecondary {
  padding: var(--pad-md) 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--btn);
  color: var(--text);
  cursor: pointer;
  min-height: var(--control-h);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
 }

 .btnSecondary:hover {
  background: var(--btn2);
 }

 .btnSecondary:active {
  transform: translateY(1px);
 }

 .btnSecondary:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .btnSecondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
 }

 .btnGhost {
   padding: 8px 10px;
   border-radius: var(--r-md);
   border: 1px solid var(--border);
   background: rgba(255, 255, 255, 0.06);
   color: var(--text);
   cursor: pointer;
   min-height: var(--control-h);
   transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
 }

 .btnGhost:disabled {
   opacity: 0.55;
   cursor: not-allowed;
 }

 .btnGhost:disabled:hover,
 .btnGhost:disabled:active {
   transform: none;
 }

 .btnGhost:hover {
   background: var(--btn2);
 }

 .btnGhost:active {
   transform: translateY(1px);
 }

 .btnGhost:focus-visible {
   outline: none;
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .iconBtn {
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
 }

 .iconBtn:hover {
  background: var(--btn2);
 }

 .iconBtn:active {
  transform: translateY(1px);
 }

 .iconBtn:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .iconBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
 }

 @media (max-width: 720px) {
   .overlay .card {
     width: min(560px, calc(100vw - 24px));
     padding: var(--pad-lg);
   }

   .menuGrid {
     grid-template-columns: 1fr;
   }

   .cosmeticsGrid {
     grid-template-columns: 1fr;
   }

   .menuPanel {
     padding: 12px;
   }

   .roomsToolbar {
     flex-direction: column;
     align-items: stretch;
   }

   .roomsControls {
     width: 100%;
     flex-direction: column;
     align-items: stretch;
   }

   .roomsSearchWrap {
     width: 100%;
   }

   /* H12: хит-зона не уменьшается на мобильном, компактнее только сама иконка */
   .roomsSearchWrap .iconBtn {
     width: var(--control-h);
     height: var(--control-h);
     min-height: var(--control-h);
     font-size: 14px;
   }

   .roomsControls input,
   .roomsControls select {
     font-size: 16px;
     width: 100%;
     max-width: 100%;
     min-width: 0;
   }

   /* C16: тач-цели не меньше 44px (в т.ч. фильтры/вкладки магазина и вторичные кнопки) */
   .cosmeticsFilters {
     --filter-btn-h: 44px;
   }

   .btnPrimary,
   .btnGhost,
   .btnSecondary,
   .cosmeticsFilters .btnGhost,
   .cosmeticsTabBtn,
   #roomsList button {
     min-height: 44px;
   }

   #roomsList {
     max-height: min(320px, 46dvh);
   }

   /* H11: действия панели комнат — отдельной строкой под заголовком */
   .menuPanelHeader > .roomsHeaderActions {
     width: 100%;
     flex-wrap: wrap;
     justify-content: flex-start;
   }

   .menuPanelHeader > .roomsHeaderActions > * {
     flex: 1 1 auto;
   }

   .roomRowTop {
     align-items: flex-start;
   }

   .roomRowLeft {
     flex-wrap: wrap;
   }

   .roomsControls input {
     width: auto;
     flex: 1;
     min-width: 0;
   }

   .roomsControls select {
     flex: 1;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

   button,
   input,
   select {
     touch-action: manipulation;
   }

   input,
   select {
     font-size: 16px;
   }
 }

 /* H7: заголовок оверлея — верхний уровень иерархии */
 .overlayTitle {
   font-weight: 900;
   font-size: clamp(32px, 7vw, 56px);
   line-height: 1.05;
   letter-spacing: -0.5px;
   margin-bottom: 8px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 45, 85, 0.92) 55%, rgba(96, 165, 250, 0.92));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
 }

 .overlayKicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 2px 8px;
   border-radius: 999px;
   border: 1px solid var(--border2);
   background: rgba(255, 255, 255, 0.06);
   font-size: var(--fs-12);
   color: var(--muted);
   margin-bottom: 10px;
 }

 .overlaySub {
   opacity: 0.8;
   margin-bottom: 14px;
   font-size: var(--fs-13);
 }

 .overlayHint {
   margin-top: 10px;
   font-size: var(--fs-12);
   color: var(--muted);
 }

 .overlayRow {
   display: flex;
   gap: 10px;
 }

 .fieldInline {
   display: flex;
   align-items: center;
   gap: 10px;
   flex: 1;
   min-width: 0;
 }

 .fieldHint {
  margin-top: -6px;
  font-size: var(--fs-12);
  color: var(--muted);
  line-height: 1.25;
 }

 .settingsGroupTitle {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
 }

 .settingsFooterActions {
  margin-top: var(--pad-lg);
  gap: var(--pad-md);
 }

 .settingsFooterActions > * {
  flex: 1;
 }

 .menuPanelBody input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: color-mix(in srgb, var(--accent2) 70%, rgba(255,255,255,0.25));
 }

 .menuPanelBody input[type="range"] {
  flex: 1;
  min-width: 120px;
 }

 .menuPanelBody input[type="range"]:focus-visible {
  outline: none;
 }

 .menuPanelBody input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
 }

 .menuPanelBody input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, rgba(96,165,250,0.65), rgba(255,45,85,0.38));
 }

 .menuPanelBody input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .menuPanelBody input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
 }

 .menuPanelBody input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, rgba(96,165,250,0.65), rgba(255,45,85,0.38));
 }

 body {
  --hud-filter: brightness(var(--hud-brightness)) contrast(var(--hud-contrast));
 }

 .fieldLabel {
   font-size: var(--fs-13);
   font-weight: 800;
   line-height: 1;
   color: var(--muted);
   flex: 0 0 auto;
 }

 .overlayRow input {
   flex: 1;
   padding: var(--pad-md) var(--pad-lg);
   border-radius: var(--r-md);
   border: 1px solid var(--border);
   background: var(--panel2);
   color: var(--text);
   outline: none;
 }

 .overlayRow input:focus-visible {
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .overlayRow button {
   padding: var(--pad-md) 14px;
   border-radius: var(--r-md);
   border: 1px solid var(--border);
   background: var(--btn);
   color: var(--text);
   cursor: pointer;
   transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
 }

 .overlayRow button:hover {
   background: var(--btn2);
 }

 .overlayRow button:active {
   transform: translateY(1px);
 }

 .overlayRow button:focus-visible {
   outline: none;
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .toast {
   position: fixed;
   left: 50%;
   bottom: calc(16px + var(--sa-bottom));
   transform: translateX(-50%);
   z-index: var(--z-modal);
   width: min(640px, calc(100vw - 24px));
   pointer-events: none;
   display: none;
 }

 .deathOverlay,
 .matchOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12px + var(--sa-top)) calc(12px + var(--sa-right)) calc(12px + var(--sa-bottom)) calc(12px + var(--sa-left));
  background: radial-gradient(1200px 600px at 50% 40%, rgba(255, 45, 85, 0.16), transparent 60%), rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
 }

 .deathOverlay {
  z-index: var(--z-modal);
 }

 .matchOverlay {
  z-index: var(--z-modal2);
 }

 .toastCard {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom));
  overflow: auto;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, rgba(255, 45, 85, 0.35) 55%, var(--border2));
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.12), rgba(0, 0, 0, 0.45));
  box-shadow: var(--shadow-float-strong);
  display: flex;
  gap: 12px;
  padding: var(--pad-lg);
  animation: deathIn 220ms ease;
 }

 .toastIcon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-tab);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
 }

 .toastBody {
  flex: 1;
  min-width: 0;
 }

 .matchCard {
   width: min(760px, calc(100vw - 24px));
   max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom));
   overflow: hidden;
   border-radius: var(--r-lg);
   border: 1px solid color-mix(in srgb, rgba(96, 165, 250, 0.35) 55%, var(--border2));
   background: linear-gradient(135deg, rgba(96, 165, 250, 0.14), rgba(0, 0, 0, 0.45));
   box-shadow: var(--shadow-float-strong);
   animation: deathIn 220ms ease;
   display: flex;
   flex-direction: column;
   min-width: 0;
 }

 .matchHeader {
   padding: var(--pad-lg) var(--pad-lg) var(--pad-md);
 }

 .matchTitle {
   font-size: 18px;
   font-weight: 900;
   letter-spacing: 0.2px;
   margin-bottom: 6px;
 }

 .matchSub {
   font-size: 13px;
   color: rgba(229, 231, 235, 0.80);
 }

 .matchResults {
  padding: 0 var(--pad-lg) var(--pad-lg);
  overflow: hidden;
  max-height: calc(100dvh - 220px - var(--sa-top) - var(--sa-bottom));
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
 }

 .matchSummary {
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.18);
  padding: var(--pad-lg);
 }

 .matchSummaryTop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
 }

 .matchResultPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
 }

 .matchResultWin {
  border-color: color-mix(in srgb, var(--accent2) 55%, rgba(255,255,255,0.12));
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--accent2) 10%, transparent);
 }

 .matchResultLose {
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.12));
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--accent) 10%, transparent);
 }

 .matchKpiGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
 }

 .matchKpi {
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.16);
  min-width: 0;
 }

 .matchKpiLabel {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
 }

 .matchKpiValue {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
 }

 .matchKpiOf {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted2);
 }

 .matchMiniGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
 }

 .matchMini {
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.14);
  min-width: 0;
 }

 .matchMiniLabel {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
 }

 .matchMiniValue {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

 .matchMiniReward .matchMiniValue {
  color: rgba(229, 231, 235, 0.92);
 }

 .matchNextGap {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(229, 231, 235, 0.86);
 }

 .matchNextActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pad-md);
  margin-top: 12px;
 }

 .matchNextActions > * {
  min-height: var(--control-h);
  width: 100%;
 }

 .matchTableWrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.14);
 }

 .matchTable thead th {
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(6px);
 }

 @media (max-width: 520px) {
  .matchKpiGrid {
    grid-template-columns: 1fr;
  }

  .matchMiniGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .matchNextActions {
    grid-template-columns: 1fr;
  }
 }

 .toastSub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
 }

 .deathReason {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.86);
   margin-bottom: 6px;
   font-weight: 700;
 }

 .deathOverlay .toastTitle {
   font-size: 18px;
   letter-spacing: 0.2px;
 }

 .deathOverlay .toastSub {
   color: rgba(229, 231, 235, 0.80);
 }

 .deathStats {
   display: grid;
   gap: 10px;
   margin: 10px 0 10px;
 }

 .deathStatsGrid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }

 .deathStat {
   padding: 8px 10px;
   border-radius: var(--r-md);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.18);
 }

 .deathStatLabel {
   font-size: 11px;
   font-weight: 800;
   color: var(--muted);
   margin-bottom: 2px;
 }

 .deathStatValue {
   font-size: 14px;
   font-weight: 900;
   color: var(--text);
   font-variant-numeric: tabular-nums;
 }

 .deathStatPrimary .deathStatLabel {
   text-transform: uppercase;
   letter-spacing: 0.4px;
 }

 .deathStatPrimary .deathStatValue {
   font-size: 20px;
   letter-spacing: 0.2px;
 }

 .deathYou {
   padding: var(--pad-md);
   border-radius: var(--r-md);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.20);
 }

 .deathYouTitle {
   font-size: 11px;
   font-weight: 900;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: 6px;
 }

 .deathYouRow {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 10px;
 }

 .deathYouRow .num {
   font-variant-numeric: tabular-nums;
   font-weight: 900;
 }

 .deathTop {
   border-radius: var(--r-md);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.18);
   overflow: hidden;
 }

 .deathTopTitle {
   padding: 8px 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   font-size: 11px;
   font-weight: 900;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   color: var(--muted);
 }

 .deathTop table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
 }

 .deathTop td {
   padding: 7px 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   font-size: 12px;
   white-space: nowrap;
 }

 .deathTop tr:last-child td {
   border-bottom: none;
 }

 .deathTop td.num {
   text-align: right;
   font-variant-numeric: tabular-nums;
 }

 .deathTop td.name {
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .deathTop tr.me td {
   background: rgba(255, 255, 255, 0.06);
 }

 .deathTop tr.top1 td {
   background: rgba(255, 45, 85, 0.12);
 }

 .toastRow {
   display: flex;
   gap: 8px;
 }

 .toastRow .fieldInline {
   flex: 1;
 }

 .toastRow input {
   flex: 1;
   padding: var(--pad-md) var(--pad-lg);
   border-radius: var(--r-md);
   border: 1px solid var(--border);
   background: var(--panel2);
   color: var(--text);
   outline: none;
 }

 .toastRow input:focus-visible {
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .toastRow button:not(.btnPrimary):not(.btnGhost) {
   padding: var(--pad-md) var(--pad-lg);
   border-radius: var(--r-md);
   border: 1px solid var(--border);
   background: var(--btn);
   color: var(--text);
   cursor: pointer;
   transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
 }

 .toastRow button:not(.btnPrimary):not(.btnGhost):hover {
   background: var(--btn2);
 }

 .toastRow button:not(.btnPrimary):not(.btnGhost):active {
   transform: translateY(1px);
 }

 .toastRow button:not(.btnPrimary):not(.btnGhost):focus-visible {
   outline: none;
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

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

 @keyframes deathIn {
   from {
     opacity: 0;
     transform: translateY(10px) scale(0.985);
   }
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .deathOverlay .toastCard {
     animation: none;
   }
   .btnPrimary.isLoading::before,
   .btnSecondary.isLoading::before,
   .btnGhost.isLoading::before,
   .skeletonLine,
   .skeletonBlock {
    animation: none;
   }
   *,
   *::before,
   *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
   }
 }

 #game {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
 }

/* ==========================================================================
   Слои «сочности». Разметку создаёт index.html, содержимое и классы .isOn —
   client.js. Все три слоя не перехватывают клики.
   ========================================================================== */

 /* Контракт п.1: полноэкранные вспышки. background задаёт JS инлайном. */
 #fxFlash {
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
  will-change: opacity;
 }

 #fxFlash.isOn {
  opacity: 1;
 }

 /* Контракт п.2: боевой чип (киллы + комбо) слева-снизу, над очередью тостов. */
 #hudCombo {
  position: fixed;
  left: calc(12px + var(--sa-left));
  bottom: calc(12px + var(--sa-bottom));
  z-index: var(--z-toasts);
  display: none;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border2));
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.26), rgba(0, 0, 0, 0.52));
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(10px);
  font-size: var(--fs-13);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  filter: var(--hud-filter);
 }

 #hudCombo.isOn {
  display: inline-flex;
  animation: comboPop 220ms cubic-bezier(0.16, 1.6, 0.3, 1) both;
 }

 @keyframes comboPop {
  0% {
   opacity: 0;
   transform: scale(0.82);
  }
  60% {
   transform: scale(1.06);
  }
  100% {
   opacity: 1;
   transform: scale(1);
  }
 }

 .hudComboIcon {
  font-size: var(--fs-14);
  line-height: 1;
 }

 .hudComboValue {
  font-size: var(--fs-16);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.98);
 }

 .hudComboLabel {
  font-size: var(--fs-11);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted2);
 }

 /* Пока чип виден, очередь тостов уезжает выше, чтобы не накладываться */
 body:has(#hudCombo.isOn) #eventToasts {
  bottom: calc(12px + var(--sa-bottom) + 46px);
 }

 /* Контракт п.3: центральный слой крупных событий, отдельно от очереди тостов. */
 #bigBanner {
  position: fixed;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  z-index: var(--z-banner);
  display: none;
  max-width: min(760px, calc(100vw - 32px));
  text-align: center;
  line-height: var(--lh-tight);
  /* color и text-shadow наследуются вниз — на них работают модификаторы */
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.30), 0 6px 26px rgba(0, 0, 0, 0.70);
  pointer-events: none;
 }

 /* Структура, которую собирает client.js: .bigBannerInner > иконка, заголовок, подпись */
 .bigBannerInner {
  display: grid;
  justify-items: center;
  gap: 4px;
 }

 .bigBannerIcon {
  font-size: clamp(30px, 7vw, 56px);
  line-height: 1;
 }

 .bigBannerIcon img.emoji {
  width: clamp(30px, 7vw, 56px);
  height: clamp(30px, 7vw, 56px);
 }

 .bigBannerTitle {
  font-size: clamp(26px, 6vw, 52px);
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: var(--lh-tight);
 }

 #bigBanner.isOn {
  display: block;
  animation: bannerIn 420ms cubic-bezier(0.16, 1.5, 0.3, 1) both;
 }

 @keyframes bannerIn {
  0% {
   opacity: 0;
   transform: translate(-50%, -50%) scale(1.6);
  }
  100% {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
  }
 }

 #bigBanner.bannerJackpot {
  color: var(--gold);
  text-shadow: 0 0 26px color-mix(in srgb, var(--gold) 62%, transparent), 0 6px 26px rgba(0, 0, 0, 0.72);
 }

 #bigBanner.bannerDanger {
  color: rgba(255, 138, 176, 0.98);
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 62%, transparent), 0 6px 26px rgba(0, 0, 0, 0.72);
 }

 .bigBannerSub {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-14);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: none;
  color: var(--muted);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
 }

 #hud {
  position: fixed;
  left: calc(12px + var(--sa-left));
  top: calc(12px + var(--sa-top));
  z-index: var(--z-hud);
  padding: var(--pad-lg);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.10), rgba(0, 0, 0, 0.40));
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-float-strong);
  filter: var(--hud-filter);
  min-width: 260px;
  max-width: min(340px, calc(100vw - 24px - var(--sa-left) - var(--sa-right)));
  max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
 }

 /* I7: во время матча левый HUD — компактный ряд иконок с автоскрытием.
    Лучший угол экрана не должен занимать заголовок игры и название комнаты. */
 body.inGame #hud:not(.lbPinned) {
  min-width: 0;
  width: auto;
  padding: 6px;
  border-color: color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, rgba(0, 0, 0, 0.40) 70%, transparent);
  box-shadow: none;
  opacity: 0.42;
  transition: opacity 160ms ease, box-shadow 160ms ease, background 160ms ease;
 }

 body.inGame #hud:not(.lbPinned):hover,
 body.inGame #hud:not(.lbPinned):focus-within {
  opacity: 1;
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.10), rgba(0, 0, 0, 0.40));
  box-shadow: var(--shadow-float-strong);
 }

 body.inGame #hud:not(.lbPinned) .hudTop {
  margin-bottom: 0;
  flex-wrap: nowrap;
  gap: 6px;
 }

 body.inGame #hud:not(.lbPinned) .hudActions {
  flex-wrap: nowrap;
  gap: 6px;
 }

 /* Заголовок «Змейки» во время матча не нужен, название комнаты — сильно ужато */
 body.inGame #hud:not(.lbPinned) #title {
  display: none;
 }

 body.inGame #hud:not(.lbPinned) #roomInfo {
  font-size: var(--fs-11);
  opacity: 0.6;
  max-width: 108px;
 }

 body.inGame #hud:not(.lbPinned) .hudMid,
 body.inGame #hud:not(.lbPinned) #help {
  display: none !important;
 }

 .hudTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
 }

 .hudBrand {
  min-width: 0;
 }

 .hudActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
 }

 .hudMid {
  display: grid;
  gap: 10px;
 }

 #nameRow {
  display: flex;
  align-items: center;
  gap: 8px;
 }

 #nameRow input {
  flex: 1;
  min-width: 0;
 }

 #nameInput {
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  outline: none;
 }

 #nameBtn {
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  min-height: var(--control-h);
 }

 #nameBtn:active {
  transform: translateY(1px);
 }

 #stats {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
 }

 #stats table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
 }

 #stats thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10);
 }

 #stats td,
 #stats th {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

 #stats th.rank,
 #stats td.rank {
  width: 34px;
  text-align: right;
 }

 #stats td.num,
 #stats th.num {
  text-align: right;
 }

 #stats tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.03);
 }

 #stats tbody tr:hover td {
  background: rgba(255, 255, 255, 0.06);
 }

 #stats tbody tr.me td {
  background: rgba(96, 165, 250, 0.12);
 }

 #stats tbody tr.lbNear td {
  background: rgba(255, 255, 255, 0.045);
 }

 #stats tr:last-child td {
  border-bottom: none;
 }

 #help {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: var(--muted);
 }

 #title {
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }

 #roomInfo {
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }

 #topHud {
  position: fixed;
  left: 50%;
  top: calc(12px + var(--sa-top));
  transform: translateX(-50%);
  z-index: var(--z-top);
  width: min(560px, calc(100vw - 24px - var(--sa-left) - var(--sa-right)));
  padding: var(--pad-md) var(--pad-lg);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--panel) calc(var(--hud-panel-alpha) * 100%), transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-float);
  pointer-events: none;
  filter: var(--hud-filter);
 }

 @media (max-width: 900px) {
  #topHud {
   width: min(460px, calc(100vw - 24px - var(--sa-left) - var(--sa-right)));
  }
 }

 #topHud[aria-hidden="true"] {
  display: none;
 }

 .topHudRow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 6px;
 }

 .topHudZone {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
 }

 .topHudLabel {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted2);
 }

 .topHudValue {
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
 }

 .topHudSub {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted2);
  font-variant-numeric: tabular-nums;
 }

 .topHudRight {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  justify-items: end;
  gap: 6px 10px;
  min-width: 0;
 }

 .topHudTime {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.90);
  text-align: right;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

 .topHudKills {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
 }

 .topHudContract {
  grid-column: 1 / -1;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
 }

 .topHudBar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
 }

 .topHudBarFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 45, 85, 0.85), rgba(96, 165, 250, 0.55));
  transition: width 220ms ease;
 }

 #metaHud {
  padding: var(--pad-sm) var(--pad-md);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--panel) calc(var(--hud-panel-alpha) * 100%), transparent);
  backdrop-filter: blur(10px);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
  filter: var(--hud-filter);
 }

 .metaSection {
  display: grid;
  gap: 6px;
 }

 #metaHud .metaSection:first-child {
  padding: 10px 10px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--focus) 28%, rgba(255, 255, 255, 0.10));
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.10), rgba(0, 0, 0, 0.18));
 }

 #metaHud .metaSection:first-child .metaSectionTitle {
  color: rgba(255, 255, 255, 0.88);
 }

 .metaSection + .metaSection {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .metaSectionTitle {
   font-size: 12px;
   font-weight: 900;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   color: var(--muted);
 }

 .metaRow {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
 }

 .metaRowProgress {
  position: relative;
  padding: 6px 8px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
 }

 .metaRowProgress::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, rgba(255, 45, 85, 0.28), rgba(96, 165, 250, 0.18));
 }

 .metaRowProgress > * {
  position: relative;
 }

 .metaLabel {
   color: var(--muted);
   font-weight: 700;
 }

 .metaValue {
   color: var(--text);
   font-variant-numeric: tabular-nums;
   font-weight: 800;
   white-space: pre-line;
 }

 .metaDetails {
  margin-top: 8px;
 }

 .metaDetailsSummary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 7px 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.14);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  text-transform: uppercase;
 }

 .metaDetailsSummary::-webkit-details-marker {
   display: none;
 }

 .metaDetails[open] > .metaDetailsSummary {
   border-color: color-mix(in srgb, var(--focus) 45%, rgba(255,255,255,0.10));
   background: rgba(0, 0, 0, 0.18);
 }

 .metaDetails > .metaSection {
  margin-top: 8px;
 }

 /* I12: позиционирование отсюда удалено — killfeed живёт в #rightSidebar,
    и правило `#rightSidebar #killfeed { position: relative }` его полностью
    перекрывало. Осталась только раскладка содержимого. */
 #killfeed {
   display: grid;
   gap: 6px;
   pointer-events: none;
 }

 .killLine {
   padding: 7px 9px;
   border-radius: var(--r-md);
   border: 1px solid var(--border2);
   background: color-mix(in srgb, var(--panel) 85%, rgba(0,0,0,0.15));
   backdrop-filter: blur(10px);
   font-size: 13px;
   line-height: 1.35;
 }

 #eventToasts {
  position: fixed;
  left: calc(12px + var(--sa-left));
  bottom: calc(12px + var(--sa-bottom));
  transform: none;
  z-index: var(--z-toasts);
  width: min(420px, calc(100vw - 24px - var(--sa-left) - var(--sa-right)));
  display: grid;
  gap: 8px;
  pointer-events: none;
 }

 /* I8: на мобильном камера центрирует игрока, поэтому верхние по центру тосты
    висели прямо над головой змейки. Уводим их вниз, над чатом, и оставляем два. */
 @media (max-width: 720px) {
  #eventToasts {
   left: calc(8px + var(--sa-left));
   right: calc(8px + var(--sa-right));
   top: auto;
   bottom: calc(8px + var(--sa-bottom) + 52px);
   transform: none;
   width: auto;
   gap: 6px;
   justify-items: stretch;
  }

  /* тосты добавляются через prepend — свежие идут первыми */
  #eventToasts > .eventToast:nth-child(n + 3) {
   display: none;
  }

  .eventToast {
   padding: var(--pad-sm) var(--pad-md);
   gap: 8px;
   border-radius: var(--r-md);
  }

  .eventToastIcon {
   width: 26px;
   height: 26px;
   font-size: 14px;
   flex: 0 0 auto;
  }

  .eventToastText {
   font-size: var(--fs-12);
  }

  .eventToastSub {
   font-size: var(--fs-11);
  }

  /* Боевой чип — в тот же нижний стек, тосты идут над ним */
  #hudCombo {
   left: calc(8px + var(--sa-left));
   bottom: calc(8px + var(--sa-bottom));
   padding: 4px 10px;
   font-size: var(--fs-12);
  }

  /* Развёрнутый чат занимает до 40dvh — поднимаем стек над ним */
  body:has(#chat:not(.collapsed)) #eventToasts {
   bottom: calc(8px + var(--sa-bottom) + 40dvh + 8px);
  }
 }

 .eventToast {
  display: flex;
  gap: 10px;
  padding: var(--pad-md);
  border-radius: var(--r-lg);
  border: 1px solid var(--border2);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  max-width: 100%;
  word-break: break-word;
 }

 .eventToastAction {
   cursor: pointer;
 }

 .eventToastAction:focus-visible {
   outline: 2px solid var(--focus);
   outline-offset: 2px;
 }

 .tabBadge {
   margin-left: 8px;
   min-width: 18px;
   height: 18px;
   padding: 0 6px;
   border-radius: 999px;
   background: rgba(255, 45, 85, 0.9);
   color: #fff;
   font-size: 12px;
   font-weight: 900;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
 }

 .tabBadge.hidden {
   display: none;
 }

 .eventToastBig {
   border-color: color-mix(in srgb, rgba(255, 45, 85, 0.35) 55%, var(--border2));
   background: linear-gradient(135deg, rgba(255, 45, 85, 0.12), rgba(0, 0, 0, 0.45));
 }

 .eventToastIcon {
   width: 34px;
   height: 34px;
   border-radius: var(--r-tab);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.22);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
 }

 .eventToastText {
   font-size: 13px;
   font-weight: 800;
   color: var(--text);
 }

 .eventToastSub {
   font-size: 12px;
   font-weight: 700;
   color: var(--muted);
 }

 #chat {
  position: fixed;
  right: calc(12px + var(--sa-right));
  bottom: calc(12px + var(--sa-bottom));
  z-index: var(--z-chat);
  width: min(420px, calc(100vw - 24px));
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--panel) calc(var(--hud-panel-alpha) * 100%), transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom));
  filter: var(--hud-filter);
 }

 #chatHeader {
   padding: var(--pad-md);
   font-size: 13px;
   color: var(--muted);
   user-select: none;
   cursor: pointer;
   border-bottom: 1px solid var(--border2);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
 }

 #chatHeaderLeft {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
 }

 #chatHeaderTitle {
  color: rgba(255, 255, 255, 0.90);
  font-weight: 900;
 }

 .chatHeaderStatus {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
 }

 #chatHeaderRight {
  display: flex;
  align-items: center;
  gap: 8px;
 }

 .chatCollapseBtn {
  width: var(--control-h);
  height: var(--control-h);
  font-size: 14px;
 }

 #chatLog {
  height: auto;
  flex: 1;
  min-height: 140px;
  max-height: var(--chat-log-max, 320px);
  overflow-y: auto;
  padding: var(--pad-md);
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  -webkit-overflow-scrolling: touch;
 }

 #chat.chatEmpty #chatLog {
  min-height: 80px;
 }

 .chatLine {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.14);
 }

 .chatLine + .chatLine {
  margin-top: 8px;
 }

 .chatMeta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
 }

 .chatName {
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
 }

 .chatTime {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(229, 231, 235, 0.62);
 }

 .chatText {
  color: rgba(255, 255, 255, 0.86);
  word-break: break-word;
 }

 .chatLine.me {
  border-color: color-mix(in srgb, var(--focus) 24%, rgba(255, 255, 255, 0.08));
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(0, 0, 0, 0.16));
 }

 #chatForm {
   display: flex;
   gap: 8px;
   padding: var(--pad-md);
   border-top: 1px solid var(--border2);
 }

 #emojiBtn {
   padding: 8px 10px;
   border-radius: var(--r-sm);
   border: 1px solid var(--border);
   background: var(--btn);
 }

 #chatInputWrap {
   flex: 1;
   position: relative;
   border-radius: var(--r-sm);
   border: 1px solid var(--border);
   background: var(--panel2);
 }

 #chatInput {
   width: 100%;
   padding: 8px 10px;
   border-radius: var(--r-sm);
   border: none;
   background: transparent;
   color: var(--text);
   outline: none;
   resize: none;
   min-height: 36px;
   line-height: 1.35;
 }

 #chatInput:focus-visible {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 #chatBtn {
   width: 36px;
   height: 36px;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 #chatBtn:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 45, 85, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
 }

 .badge.hidden {
  display: none;
 }

 #rightInfo .rightDetailsSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
 }

 #rightInfo .rightDetailsSummary .badge {
  flex: 0 0 auto;
 }

 .rightEmpty {
  padding: 10px 10px 12px;
  display: grid;
  gap: 4px;
 }

 .rightEmptyTitle {
  font-size: 12px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.86);
 }

 .rightEmptyDesc {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
 }

 .rightEmpty.hidden {
  display: none;
 }

 #emojiPanel {
  display: none;
  padding: 8px 8px 10px;
  border-top: 1px solid var(--border2);
  max-height: 210px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
 }

 #chat.collapsed #chatLog,
 #chat.collapsed #chatForm,
 #chat.collapsed #emojiPanel {
  display: none;
}

#chat.collapsed {
  min-height: 0;
}

#minimap {
  width: auto;
  max-width: 100%;
  height: 150px;
  display: block;
  margin: 0 auto;
  border-radius: var(--r-tab);
  background: transparent;
  pointer-events: none;
}

#minimapPanel {
  position: relative;
  width: 100%;
}

.minimapExpandBtn {
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: var(--r-sm);
  pointer-events: auto;
}

.minimapLegend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(10px);
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

.minimapLegend[aria-hidden="true"] {
  display: none;
}

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

.minimapLegendSwatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.10);
}

.minimapLegendSwatch.isYou {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.35);
}

.minimapLegendSwatch.isView {
  background: rgba(96, 165, 250, 0.70);
  border-color: rgba(0, 0, 0, 0.35);
}

.minimapLegendSwatch.isZone {
  background: rgba(255, 45, 85, 0.62);
  border-color: rgba(0, 0, 0, 0.35);
}

.minimapLegendText {
  font-weight: 800;
}

#minimapOverlay {
  z-index: var(--z-modal);
}

.minimapOverlayCard {
  width: min(960px, calc(100vw - 24px));
  padding: var(--pad-lg);
}

.minimapOverlayHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.minimapOverlayTitle {
  font-weight: 900;
  letter-spacing: 0.2px;
}

#minimapOverlayCanvas {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom) - 92px);
  border-radius: var(--r-md);
  border: 1px solid var(--border2);
  background: rgba(0, 0, 0, 0.12);
  image-rendering: pixelated;
}

#rightSidebar {
  position: fixed;
  right: calc(12px + var(--sa-right));
  top: calc(12px + var(--sa-top));
  z-index: var(--z-right);
  width: clamp(240px, 18vw, 320px);
  display: grid;
  gap: 10px;
  pointer-events: auto;
  max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom));
 }

 @media (min-width: 1800px) {
  #rightSidebar {
   width: clamp(240px, 16vw, 300px);
  }
 }

 @media (min-width: 1600px) {
  #rightSidebar {
   max-height: min(calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom)), 860px);
  }
 }

 @media (max-width: 900px) {
  #rightSidebar {
   top: calc(12px + var(--sa-top) + 104px);
  }
 }

 #rightInfo {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom) - 170px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
 }

 @media (min-width: 721px) {
  #rightInfo {
   padding-bottom: 52px;
  }
 }

 @media (min-width: 1600px) {
  #rightInfo {
   max-height: min(calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom) - 170px), 620px);
  }
 }

 #rightInfo .rightDetails {
  border-radius: var(--r-tab);
  border: 1px solid var(--border2);
  background: color-mix(in srgb, var(--panel) calc(var(--hud-panel-alpha) * 100%), transparent);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(10px);
  overflow: hidden;
  filter: var(--hud-filter);
 }

 #rightInfo .rightDetailsSummary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
 }

 #rightInfo .rightDetailsSummary::-webkit-details-marker {
  display: none;
 }

 #rightInfo .rightDetails[open] > .rightDetailsSummary {
  background: rgba(0, 0, 0, 0.10);
 }

 #rightInfo .rightDetails > #metaHud,
 #rightInfo .rightDetails > #teamHud {
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 8px 10px 10px;
 }

 #rightInfo > #teamHud:empty,
 #rightInfo > #metaHud:empty,
 #rightInfo > #perf:empty,
 #rightInfo > #killfeed:empty {
  display: none;
 }

 #rightInfo.rightInfoPulse #metaHud {
  border-color: color-mix(in srgb, var(--focus) 42%, var(--border2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent), var(--shadow-float);
 }

 #rightSidebar #teamHud {
  padding: var(--pad-sm) var(--pad-md);
  border-radius: var(--r-tab);
  border: 1px solid var(--border2);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(10px);
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
 }

 #rightSidebar #minimap,
 #rightSidebar #metaHud,
 #rightSidebar #teamHud,
 #rightSidebar #perf,
 #rightSidebar #killfeed {
  position: relative;
  right: auto;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
 }

 #rightSidebar #metaHud,
 #rightSidebar #teamHud,
 #rightSidebar #perf,
 #rightSidebar #killfeed {
  padding: var(--pad-sm) var(--pad-md);
 }

 #rightSidebar #minimap,
 #rightSidebar #metaHud,
 #rightSidebar #teamHud,
 #rightSidebar #perf,
 #rightSidebar #killfeed {
  border-radius: var(--r-tab);
  border: 1px solid var(--border2);
  background: color-mix(in srgb, var(--panel) calc(var(--hud-panel-alpha) * 100%), transparent);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(10px);
  filter: var(--hud-filter);
 }

 #rightSidebar #minimap {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
 }

 #rightSidebar #metaHud {
   min-width: 0;
 }

 #perf {
   position: fixed;
   right: calc(12px + var(--sa-right));
   top: calc(174px + var(--sa-top));
   z-index: var(--z-hud);
   padding: var(--pad-sm) var(--pad-md);
   border: 1px solid var(--border2);
   border-radius: var(--r-md);
   background: color-mix(in srgb, var(--panel) calc(var(--hud-panel-alpha) * 100%), transparent);
   backdrop-filter: blur(10px);
   box-shadow: var(--shadow-float);
   font-size: 12px;
   line-height: 1.35;
   white-space: normal;
   min-width: 160px;
   opacity: 0.82;
   filter: var(--hud-filter);
 }

 #perf .perfRow {
  margin-top: 2px;
 }

 #perf .perfRow:first-child {
  margin-top: 0;
 }

 #perf.perfCompact {
  min-width: 132px;
  font-size: 11px;
  opacity: 0.76;
 }

 #rightSidebar #perf {
   min-width: 0;
 }

#emojiPanel.open {
  display: block;
}

 #emojiPanelTop {
   position: absolute;
   top: 8px;
   right: 8px;
   left: auto;
   width: 34px;
   height: 34px;
   display: block;
   padding: 0;
   pointer-events: none;
 }

 #emojiCloseBtn {
   margin-left: 0;
   width: var(--control-h);
   height: var(--control-h);
   border-radius: var(--r-sm);
   border: 1px solid var(--border);
   background: var(--btn);
   color: var(--text);
   cursor: pointer;
   transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
   pointer-events: auto;
 }

 #emojiCloseBtn:hover {
   background: var(--btn2);
 }

 #emojiCloseBtn:active {
   transform: translateY(1px);
 }

 #emojiCloseBtn:focus-visible {
   outline: none;
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

 .emojiRow {
   display: grid;
   grid-template-columns: repeat(auto-fill, var(--control-h));
   gap: 6px;
   padding: 0 42px 8px 2px;
 }

 #emojiRecent button {
   width: var(--control-h);
   height: var(--control-h);
 }

 #emojiGrid {
   display: grid;
   grid-template-columns: repeat(8, minmax(0, 1fr));
   gap: 6px;
   padding: 0 42px 2px 2px;
 }

 #emojiGrid button,
 #emojiRecent button {
   width: 100%;
   aspect-ratio: 1;
   border-radius: 10px;
   border: 1px solid var(--border2);
   background: color-mix(in srgb, var(--btn) 70%, transparent);
   color: var(--text);
   cursor: pointer;
   font-size: 18px;
   transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
 }

 #emojiGrid button:hover,
 #emojiRecent button:hover {
   background: color-mix(in srgb, var(--btn2) 80%, transparent);
 }

 #emojiGrid button:active,
 #emojiRecent button:active {
   transform: translateY(1px);
 }

 #emojiGrid button:focus-visible,
 #emojiRecent button:focus-visible {
   outline: none;
   border-color: var(--focus);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
 }

img.emoji {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  image-rendering: auto;
}

#emojiBtn img.emoji {
  width: 18px;
  height: 18px;
}

#emojiPanel img.emoji {
  width: 20px;
  height: 20px;
}

 /* ==========================================================================
    I1. Мобильная раскладка HUD.
    Было: #hud (min-width 180) слева и центрированный #topHud (359px на 375px)
    физически накладывались, #topHud с z-index 13 накрывал выход и настройки,
    правая панель 200px съедала 53% ширины. Стало — три непересекающиеся зоны:
      строка 1 слева  — ряд иконок #hud,
      строка 1 справа — только миникарта (до 520px её нет вовсе),
      строка 2        — однострочный #topHud во всю оставшуюся ширину,
      низ             — тосты и свёрнутый в кнопку чат.
    ========================================================================== */
 @media (max-width: 720px) {
   /* --- строка 1, слева: только иконки --- */
   #hud {
     left: calc(8px + var(--sa-left));
     top: calc(8px + var(--sa-top));
     min-width: 0;
     width: auto;
     padding: 4px;
     max-width: calc(100vw - 16px - var(--sa-left) - var(--sa-right));
     max-height: none;
     overflow: visible;
   }

   body.inGame #hud:not(.lbPinned) {
     padding: 4px;
     border-color: transparent;
     background: transparent;
     backdrop-filter: none;
     box-shadow: none;
     /* на тач-устройстве нет hover — держим читаемыми, но ненавязчивыми */
     opacity: 0.86;
   }

   body.inGame #hud:not(.lbPinned) .hudBrand {
     display: none;
   }

   .hudActions {
     flex-wrap: nowrap;
     gap: 6px;
   }

   /* единая высота 44px: #leaveBtn ниже уже поднят до 44, остальные держим в ряд */
   .hudActions .iconBtn {
     width: 44px;
     height: 44px;
     min-width: 44px;
     min-height: 44px;
     background: color-mix(in srgb, var(--panel) 88%, transparent);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow-float);
   }

   /* --- строка 2: #topHud прижат влево и однострочный.
      Смещение = 8 (отступ) + 54 (высота ряда иконок) + 6 (зазор). --- */
   #topHud {
     left: calc(8px + var(--sa-left));
     right: auto;
     top: calc(8px + var(--sa-top) + 60px);
     transform: none;
     width: auto;
     max-width: calc(100vw - 16px - var(--sa-left) - var(--sa-right) - 158px);
     padding: 6px 10px;
   }

   .topHudRow {
     grid-template-columns: auto 1fr;
     align-items: center;
     column-gap: 10px;
     row-gap: 0;
   }

   .topHudValue {
     font-size: var(--fs-16);
   }

   .topHudRight {
     grid-template-columns: auto auto;
     align-items: center;
     gap: 0 8px;
   }

   .topHudTime {
     grid-column: auto;
     font-size: var(--fs-12);
   }

   /* длинный текст контракта в одну строку не помещается — он есть в правой панели */
   .topHudContract {
     display: none;
   }

   .topHudBar {
     margin-top: 5px;
     height: 4px;
   }

   #metaHud {
     display: none;
   }

   #hud:not(.lbPinned) #stats,
   #hud:not(.lbPinned) #help {
     display: none;
   }

   #title {
     margin-bottom: 4px;
   }

   #roomInfo {
     margin-bottom: 6px;
   }

   /* --- низ: чат сворачивается в компактную кнопку --- */
   #chat.collapsed {
     left: auto;
     right: calc(8px + var(--sa-right));
     width: auto;
     max-width: 60vw;
     border-radius: 999px;
   }

   #chat.collapsed #chatHeader {
     border-bottom: none;
     padding: 0 14px;
     gap: 8px;
   }

   /* в свёрнутой «кнопке» остаются только заголовок и счётчик непрочитанных */
   #chat.collapsed .chatHeaderStatus {
     display: none;
   }

   #chat {
     left: calc(8px + var(--sa-left));
     right: calc(8px + var(--sa-right));
     bottom: calc(8px + var(--sa-bottom));
     width: auto;
     max-height: 40dvh;
     display: flex;
     flex-direction: column;
   }

   #chatHeader {
     min-height: 44px;
     padding: 12px;
   }

   #chatHeaderHint {
     display: none;
   }

   #chatLog {
     height: auto;
     flex: 1;
     min-height: 120px;
   }

   #emojiPanel {
     max-height: 170px;
   }

   #chatInput,
   #emojiCloseBtn {
     font-size: 16px;
   }

   #chatBtn,
   #emojiBtn,
   #leaveBtn {
     min-height: 44px;
   }

   #chatBtn {
     width: 44px;
     padding: 0;
     font-size: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }

   #chatBtn::before {
     content: '➤';
     font-size: 18px;
     line-height: 1;
     color: var(--text);
   }

   /* --- строка 1, справа: от правой панели остаётся только миникарта --- */
   #rightSidebar {
     right: calc(8px + var(--sa-right));
     top: calc(8px + var(--sa-top));
     width: 150px;
     gap: 8px;
   }

   #rightInfo {
     display: none;
   }

   #perf {
     display: none;
   }

   #killfeed {
     display: none;
   }

   #minimap {
     width: auto;
     max-width: 100%;
     height: 96px;
     margin: 0 auto;
   }

   .minimapLegend {
     display: none;
   }

   .deathOverlay {
     padding: calc(12px + var(--sa-top)) calc(12px + var(--sa-right)) calc(12px + var(--sa-bottom)) calc(12px + var(--sa-left));
   }

   .deathOverlay .toastCard {
     width: min(560px, 100%);
   }
 }

 @media (max-width: 520px) {
   #minimap {
     display: none;
   }

   /* I1: миникарты здесь нет, а больше в правой панели ничего не осталось —
      убираем её целиком и отдаём ширину игровому полю. */
   #rightSidebar {
     display: none;
   }

   #topHud {
     max-width: calc(100vw - 16px - var(--sa-left) - var(--sa-right));
   }

   /* --- C10. Карточка товара на 375px -------------------------------------
      flex без wrap + grid без min-width разъезжались: 44px превью, заголовок,
      цена и кнопка не помещались в ~270px. */
   .cosmeticsItem {
     flex-wrap: wrap;
     row-gap: 8px;
   }

   /* flex-basis: 0 — иначе длинный заголовок задаёт базу шире доступной
      ширины и левая часть срывается под превью, теряя строку по высоте */
   .cosmeticsItemLeft {
     min-width: 0;
     flex: 1 1 0;
   }

   .cosmeticsItemTitle,
   .cosmeticsItemSub {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

   .cosmeticsItemRight {
     flex: 1 0 100%;
     justify-content: space-between;
     gap: 10px;
   }

   .cosmeticsItemRight > button {
     flex: 1;
     min-height: 48px;
   }

   .cosmeticsPrice {
     flex: 0 0 auto;
     white-space: nowrap;
   }

   .menuHowToStep {
     font-size: var(--fs-12);
   }
 }

 @media (max-height: 520px) {
   #minimap,
   #perf {
     display: none;
   }
 }

 @media (pointer: coarse) {
   /* --- C16. Тач-цели в меню и магазине ------------------------------------
      Раньше блок покрывал только экран смерти: на планшете (>720px, но тач)
      фильтры магазина оставались 36px, вкладки — 34px. */
   .cosmeticsFilters {
     --filter-btn-h: 44px;
   }

   .overlay button,
   .overlay summary,
   .overlay select,
   .overlay input:not([type='checkbox']):not([type='range']),
   .overlay .btnPrimary,
   .overlay .btnSecondary,
   .overlay .btnGhost,
   .overlay .cosmeticsTabBtn,
   .overlay .roomRow,
   .overlay .roomRowJoin {
     min-height: 44px;
   }

   .overlay .iconBtn {
     width: 44px;
     height: 44px;
     min-width: 44px;
     min-height: 44px;
   }

   /* кнопка очистки поиска абсолютна внутри инпута — освобождаем ей место */
   .overlay .roomsSearchWrap input {
     padding-right: 52px;
   }

   .deathOverlay {
     padding: calc(var(--pad-lg) + var(--sa-top)) calc(var(--pad-lg) + var(--sa-right)) calc(var(--pad-lg) + var(--sa-bottom)) calc(var(--pad-lg) + var(--sa-left));
   }

   .deathOverlay .toastCard {
     width: min(520px, 100%);
     flex-direction: column;
     align-items: stretch;
     gap: 10px;
   }

   .deathOverlay .toastIcon {
     width: 44px;
     height: 44px;
     border-radius: var(--r-tab);
     align-self: flex-start;
   }

   .deathOverlay .toastRow {
     flex-direction: column;
     align-items: stretch;
   }

   .deathOverlay .fieldInline {
     flex-direction: column;
     align-items: stretch;
     gap: 6px;
   }

   .deathOverlay .fieldLabel {
     font-size: 13px;
   }

   .deathOverlay input,
   .deathOverlay button {
     width: 100%;
     min-height: 44px;
     font-size: 16px;
   }
 }

/* ==========================================================================
   Релизные доработки: рамки профиля (D1), анимация оповещений (J4),
   индикация срочности (I10), появление строк лидерборда (I11).
   ========================================================================== */

/* --- D1. Рамки профиля -----------------------------------------------------
   Классы frame0..frame7 навешиваются на <tr> в панели команды и в таблице
   итогов матча (client.js). До этого правил не существовало вовсе, поэтому
   купленная рамка была не видна никому. Семейство — «металлы и материалы»,
   чтобы не дублировать палитру остальных категорий косметики.
   Левый бордюр одинаковой ширины у всех вариантов, включая базовый, — иначе
   строки с разными рамками разъезжаются по горизонтали. */
.frame0,
.frame1,
.frame2,
.frame3,
.frame4,
.frame5,
.frame6,
.frame7 {
  border-left: 3px solid transparent;
}

/* Сталь — базовая, намеренно нейтральная */
.frame0 {
  border-left-color: #6b7280;
}

/* Медь */
.frame1 {
  border-left-color: #b87333;
  background-image: linear-gradient(90deg, rgba(184, 115, 51, 0.16), transparent 60%);
}

/* Хром: серебристый борт + верхний блик */
.frame2 {
  border-left-color: #c9d1d9;
  background-image: linear-gradient(90deg, rgba(201, 209, 217, 0.14), transparent 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Изумруд: градиент + мягкое свечение имени */
.frame3 {
  border-left-color: #34d399;
  background-image: linear-gradient(90deg, rgba(52, 211, 153, 0.18), transparent 62%);
}
.frame3 td:nth-child(2) {
  text-shadow: 0 0 7px rgba(52, 211, 153, 0.55);
}

/* Обсидиан: тёмный градиент, внутренняя фиолетовая линия, разрядка имени */
.frame4 {
  border-left-color: #4c1d95;
  background-image: linear-gradient(90deg, rgba(20, 12, 38, 0.72), rgba(0, 0, 0, 0.28) 70%);
  box-shadow: inset 0 0 0 1px rgba(170, 120, 255, 0.28);
}
.frame4 td:nth-child(2) {
  color: #ede9fe;
  letter-spacing: 0.3px;
}

/* Платина: холодный светлый борт + верхний блик, самый «чистый» вариант */
.frame5 {
  border-left-color: #e5e7eb;
  background-image: linear-gradient(90deg, rgba(229, 231, 235, 0.12), transparent 52%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.frame5 td:nth-child(2) {
  color: #f8fafc;
}

/* Латунь: тёплый жёлтый борт, подсветка имени */
.frame6 {
  border-left-color: #d4a017;
  background-image: linear-gradient(90deg, rgba(212, 160, 23, 0.20), transparent 60%);
}
.frame6 td:nth-child(2) {
  text-shadow: 0 0 7px rgba(212, 160, 23, 0.55);
}

/* Карбон: диагональное плетение, самая тёмная и «техничная» строка */
.frame7 {
  border-left-color: #1f2937;
  background-color: rgba(15, 23, 42, 0.55);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(148, 163, 184, 0.14) 0,
    rgba(148, 163, 184, 0.14) 1px,
    transparent 1px,
    transparent 5px
  );
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}
.frame7 td:nth-child(2) {
  color: #cbd5e1;
  letter-spacing: 0.4px;
}


/* --- J4. Анимация оповещений ----------------------------------------------
   @keyframes toastIn существовал в файле, но не был применён ни к одному
   селектору: тосты появлялись мгновенным щелчком. */
.eventToast {
  animation: toastIn 260ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes toastPop {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(14px);
  }
  55% {
    transform: scale(1.06) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.eventToastBig {
  animation: toastPop 420ms cubic-bezier(0.16, 1.6, 0.3, 1) both;
}

/* Пульс при повторе уже показанного события (client.js переключает .bump) */
@keyframes toastBump {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}

.eventToast.bump {
  animation: toastBump 220ms ease;
}

/* --- I10. Индикация срочности ----------------------------------------------
   client.js вешает .metaRowUrgent, когда до конца матча меньше 10 секунд либо
   истекает контракт/баунти/мутатор. Правил не существовало — вся логика
   срочности была визуально немой. */
@keyframes urgentPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.metaRowUrgent {
  color: var(--accent);
  font-weight: 800;
  border-left: 2px solid var(--accent);
  padding-left: 6px;
  animation: urgentPulse 1.2s ease-in-out infinite;
}

/* --- I11. Появление строки лидерборда -------------------------------------- */
@keyframes lbEnter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lb-enter {
  animation: lbEnter 200ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .eventToast,
  .eventToastBig,
  .eventToast.bump,
  .metaRowUrgent,
  .lb-enter,
  /* Новые анимации релизной волны: блок точечный, поэтому перечисляем явно */
  .menuOnlineDot,
  #hudCombo.isOn,
  #bigBanner.isOn,
  .cosmeticsItem.tierMythic,
  .cosmeticsItem.tierMythic::before,
  .roomsSkeletonRow .skeletonLine {
    animation: none;
  }

  /* Оставляем видимыми, но без «влёта» и без пульсации */
  #bigBanner.isOn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  #fxFlash,
  .cosmeticsItemProgress > *,
  .roomsDetailsChevron,
  body.inGame #hud:not(.lbPinned) {
    transition: none;
  }

  .counting {
    transform: none;
    transition: none;
  }
}

/* --- H4 (доработка). Приоритет главного CTA -------------------------------
   .btnPlay объявлен раньше базового правила .btnPrimary/.btnSecondary/.btnGhost,
   поэтому при равной специфичности (0,1,0) базовое правило перебивало высоту
   и кнопка «Играть» оставалась 40px. Повышаем специфичность до (0,2,0). */
.menuActions .btnPlay {
  min-height: 56px;
  font-size: var(--fs-18);
  font-weight: 900;
}