:root {
  --header-h: 56px;
}

html,
body,
#root,
#feed,
.slide {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* Элементы управления в ленте всегда в тёмной гамме (Feed protection) */
#feed, .slide, #side-actions, .feed-ui-layer, .game-info-overlay {
  --bg: #000000;
  --surface: #13141a;
  --surface-elevated: #1c1e26;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.42);
  --border: rgba(255, 255, 255, 0.08);
  
  --cta-bg: linear-gradient(180deg, #2f323a 0%, #22252c 55%, #1a1c22 100%);
  --cta-bg-strong: linear-gradient(180deg, #3a4050 0%, #2a2f3a 52%, #1e222c 100%);
  --cta-border: rgba(255, 255, 255, 0.11);
  --cta-highlight: rgba(255, 255, 255, 0.05);

  --tg-glass-bg: rgba(20, 22, 28, 0.72);
  --tg-glass-bg-strong: rgba(18, 20, 26, 0.82);
  --tg-glass-border: rgba(255, 255, 255, 0.1);
}

:root {
  /* Акцент — холодный серо-голубой, чуть ярче чтобы не сливаться с тёмным фоном */
  --accent: #a3b8d4;
  --accent2: #7a8faf;
  --accent-rgb: 163, 184, 212;
  --accent2-rgb: 122, 143, 175;
  --accent-soft: rgba(163, 184, 212, 0.14);
  /* Главные кнопки: нейтральный графит — не отвлекает от игр и контента */
  --cta-bg: linear-gradient(180deg, #2f323a 0%, #22252c 55%, #1a1c22 100%);
  /* Чуть контрастнее primary на экранах без превью игры */
  --cta-bg-strong: linear-gradient(180deg, #3a4050 0%, #2a2f3a 52%, #1e222c 100%);
  --cta-bg-solid: #282b34;
  --cta-border: rgba(255, 255, 255, 0.11);
  --cta-highlight: rgba(255, 255, 255, 0.05);
  /* Вордмарк / марка */
  --brand-1: #b4c7e0;
  --brand-2: #7d90a8;
  --bg: #0a0b0e;
  --surface: #13141a;
  --surface-elevated: #1c1e26;
  --border: rgba(255, 255, 255, 0.06);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.42);
  /* Лайк в ленте: тёплый кораллово-розовый (отдельно от холодного accent) */
  --like-on: #ff7a8a;
  --like-on-rgb: 255, 122, 138;
  --like-on-soft: rgba(255, 122, 138, 0.16);
  --nav-active: rgba(255, 255, 255, 0.92);
  --btn-radius-md: 12px;
  --btn-radius-lg: 14px;
  --btn-pad-y: 14px;
  --btn-pad-x: 18px;
  --btn-border: rgba(255, 255, 255, 0.1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Едва заметный «контурный» паттерн (как тонкий фон в TG) */
  --sg-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h200v200H0z' fill='none'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.038' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='24' r='5'/%3E%3Crect x='38' y='12' width='12' height='12' rx='2.5' transform='rotate(8 44 18)'/%3E%3Cpath d='M68 10c4-1.2 8.2-1.1 12.5.2'/%3E%3Cpath d='M100 18a10 10 0 11-9.5 13.8'/%3E%3Crect x='116' y='8' width='16' height='9' rx='2'/%3E%3Ccircle cx='156' cy='20' r='4'/%3E%3Cpath d='M172 12l6.5 4-2.2 7-6.4-3.5-6.3 3.6-2.2-7.1z'/%3E%3Cpath d='M8 58a6 6 0 1110.2-3'/%3E%3Crect x='32' y='50' width='18' height='10' rx='2' transform='rotate(-6 41 55)'/%3E%3Ccircle cx='70' cy='58' r='3'/%3E%3Cpath d='M86 48c2.5-1.2 5.3-1.1 8.1.2'/%3E%3Crect x='110' y='48' width='11' height='11' rx='2'/%3E%3Cpath d='M144 48c0-2.2 1.8-4 4-4'/%3E%3Cpath d='M170 48c-1.2-1-1-2.7.2-3.7'/%3E%3Cpath d='M6 102a5.2 5.2 0 1110-1'/%3E%3Crect x='30' y='92' width='14' height='14' rx='3'/%3E%3Cpath d='M58 98c0-2.2 1.8-4 4-4'/%3E%3Cpath d='M86 95a5.5 5.5 0 0010.2-1'/%3E%3Crect x='110' y='96' width='20' height='6' rx='1.5'/%3E%3Ccircle cx='150' cy='100' r='4'/%3E%3Cpath d='M170 96c1.2-1.2 2-1.1 3.2.1'/%3E%3Cpath d='M12 140a4.5 4.5 0 111-1'/%3E%3Crect x='30' y='132' width='10' height='10' rx='2' transform='rotate(12 35 137)'/%3E%3Cpath d='M56 126c2-1.1 4.3-1 6.4.2'/%3E%3Ccircle cx='90' cy='136' r='3'/%3E%3Crect x='110' y='128' width='16' height='9' rx='2'/%3E%3Cpath d='M144 130a5.5 5.5 0 0010.2-1'/%3E%3Cpath d='M170 130a4.5 4.5 0 11-1-1'/%3E%3Cpath d='M8 168a4.5 4.5 0 111-1'/%3E%3Crect x='32' y='162' width='12' height='12' rx='2'/%3E%3Cpath d='M60 170a3.5 3.5 0 11-1 1'/%3E%3Ccircle cx='94' cy='172' r='3'/%3E%3Cpath d='M122 166a3.5 3.5 0 11-1-1'/%3E%3Crect x='150' y='166' width='18' height='7' rx='1.5'/%3E%3Cpath d='M186 168a3.5 3.5 0 11-1-1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a3b8d4' stroke-opacity='0.05' stroke-width='0.75'%3E%3Cpath d='M24 86a2.5 2.5 0 11-1-1'/%3E%3Cpath d='M52 78a2.5 2.5 0 11-1-1'/%3E%3Cpath d='M128 66a2.5 2.5 0 11-1-1'/%3E%3Cpath d='M180 78a2.5 2.5 0 11-1-1'/%3E%3Cpath d='M24 188a2.5 2.5 0 11-1-1'/%3E%3Cpath d='M88 44a2.5 2.5 0 11-1-1'/%3E%3Cpath d='M194 130a2.5 2.5 0 11-1-1'/%3E%3C/g%3E%3C/svg%3E");
  --sg-doodle-size: 200px 200px;

  /* Чуть выше классического таббара — под центральную кнопку «загрузка» */
  --nav-h: 72px;
  --info-h: 76px;
  --feed-chrome-h: 44px;
  --game-top: var(--safe-top);
  --game-bottom: calc(var(--safe-bottom) + var(--nav-h) + var(--info-h));

  /* Модальные панели в духе Telegram: лёгкое стекло, один blur на всех «листах» */
  --tg-glass-bg: rgba(20, 22, 28, 0.72);
  --tg-glass-bg-strong: rgba(18, 20, 26, 0.82);
  --tg-glass-border: rgba(255, 255, 255, 0.1);
  --tg-glass-border-soft: rgba(255, 255, 255, 0.06);
  --tg-glass-blur: 18px;
  --tg-glass-saturate: 1.06;
  --tg-glass-shadow: 0 10px 36px rgba(0, 0, 0, 0.28);
  --tg-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root.theme-light, :root {
  --bg: #0a0b0e;
  --surface: #13141a;
  --surface-elevated: #1c1e26;
  --border: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.42);
  
  --accent: #a3b8d4;
  --accent-soft: rgba(163, 184, 212, 0.14);
  
  --cta-bg: linear-gradient(180deg, #2f323a 0%, #22252c 55%, #1a1c22 100%);
  --cta-bg-strong: linear-gradient(180deg, #3a4050 0%, #2a2f3a 52%, #1e222c 100%);
  --cta-bg-solid: #282b34;
  --cta-border: rgba(255, 255, 255, 0.11);
  --cta-highlight: rgba(255, 255, 255, 0.15);
  
  --tg-glass-bg: rgba(255, 255, 255, 0.88);
  --tg-glass-bg-strong: rgba(255, 255, 255, 0.96);
  --tg-glass-border: rgba(0, 0, 0, 0.08);
  --tg-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  --tg-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  
  --nav-active: #007aff;
  --btn-border: rgba(0, 0, 0, 0.1);
  --sg-doodle-opacity: 0.01;
}

.theme-light {
  background: var(--bg);
  color: var(--text);
}

.theme-light .sg-icon {
  color: var(--text);
}

.theme-light .profile-wall-title {
  color: #1c1c1e !important;
  font-weight: 800 !important;
  margin-top: 32px !important;
  font-size: 20px !important;
}

.theme-light #profilePostInput {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 14px !important;
  border-radius: 14px !important;
  width: 100% !important;
  font-size: 16px !important;
  caret-color: var(--accent) !important;
}

.theme-light #profilePostInput::placeholder {
  color: #8e8e93 !important;
  opacity: 0.8 !important;
}

.theme-light .profile-wall-title,
.theme-light .profile-games-title,
.theme-light .upload-faq-title {
  color: #1c1c1e !important;
  opacity: 1 !important;
}

.theme-light .profile-post-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

.theme-light .profile-post-body {
  color: #1c1c1e !important;
}

.theme-light .profile-post-date {
  color: #8e8e93 !important;
}

.theme-light .feed-reviews-drawer {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1c1c1e !important;
}

.theme-light .feed-reviews-drawer-title {
  color: #1c1c1e !important;
}

.theme-light .feed-reviews-drawer-close {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}

.theme-light .feed-review-item {
  border-bottom-color: rgba(0, 0, 0, 0.05) !important;
}

.theme-light .feed-review-author {
  color: #1c1c1e !important;
}

.theme-light .feed-review-body {
  color: #2c2c2e !important;
}

.theme-light .feed-review-date {
  color: #8e8e93 !important;
}

.theme-light .feed-review-action {
  color: #007aff !important;
  opacity: 1 !important;
}

.theme-light .feed-review-action--danger {
  color: #ff3b30 !important;
}

.theme-light .feed-review-action:active {
  opacity: 0.6 !important;
}

.theme-light .feed-reviews-drawer-compose {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.theme-light .feed-reviews-drawer-compose textarea {
  background: #ffffff;
  color: #1c1c1e;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.theme-light .feed-reviews-drawer-head {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.theme-light .feed-reviews-empty {
  color: #8e8e93;
}

.theme-light .feed-reviews-drawer-handle {
  background: rgba(0, 0, 0, 0.1);
}

.theme-light .sg-mini-stat {
  color: #8e8e93;
}

.theme-light .profile-stat-label,
.theme-light .profile-stat-num {
  color: var(--text);
}

.theme-light .game-card {
  background: var(--surface);
  border: 1px solid var(--border);
}

.theme-light:not(.feed-open)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 4.878L52.122 2.373a1.442 1.442 0 0 0-2.039 0L47.578 4.878l2.505 2.505 4.544-4.505zm-5.632 8.137l2.505 2.505 2.039-2.039-2.505-2.505-2.039 2.039zM15 48v2h2v-2h-2zm4 0v2h2v-2h-2zm-8 0v2h2v-2h-2zm12 0v2h2v-2h-2zm-16 0v2h2v-2h-2zM45 10c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm-2 10c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm10 0c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm-2-10c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm-33.828 22.172l-1.414 1.414 7.071 7.071 1.414-1.414-7.071-7.071zm11.314 0l-1.414 1.414 7.071 7.071 1.414-1.414-7.071-7.071z' fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.theme-light .sg-brand-mark {
  background: #ffffff;
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05);
  color: #1c1c1e;
}

.theme-light .sg-brand-word-muted {
  color: #8e8e93;
}

.theme-light .sg-brand-word-accent {
  color: #1c1c1e;
}

.theme-light .app-boot-sub {
  color: #8e8e93;
}

.theme-light .stat-num {
  color: #1c1c1e;
}

.theme-light .stat-lbl {
  color: #8e8e93;
}

.theme-light .profile-name {
  color: #1c1c1e;
}

.theme-light .profile-handle {
  color: var(--accent);
}

.theme-light .profile-bio {
  color: #3a3a3c;
}

.theme-light .profile-stats-hint {
  color: #8e8e93;
}

/* Языковой переключатель в светлой теме теперь управляется общим блоком ниже */

.theme-light:not(.feed-open) .app-tab-chrome {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.theme-light:not(.feed-open) .app-tab-chrome-label {
  color: #1c1c1e;
  font-weight: 700;
}

.theme-light .profile-edit-toggle-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1c1c1e !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.theme-light .profile-edit-toggle-btn.primary {
  background: var(--accent) !important;
  color: #ffffff !important;
}

.theme-light .screen-back {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1c1c1e !important;
}

.theme-light .sg-back-btn:not([hidden]) {
  background: #ffffff !important;
  color: #1c1c1e !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  opacity: 1 !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: calc(var(--safe-top, 0px) + 12px) !important;
  left: 12px !important;
  position: fixed !important;
  z-index: 2200 !important;
}

.theme-light.feed-open .app-tab-chrome {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%) !important;
  border: none !important;
  box-shadow: none !important;
}

.theme-light.feed-open .app-tab-chrome-label,
.theme-light.feed-open .app-tab-chrome-brand {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

/* Переключатель в ленте теперь управляется общим блоком ниже */

.theme-light .feed-exit-focus {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  z-index: 21000 !important;
  position: fixed !important;
  top: calc(var(--safe-top, 0px) + 12px) !important;
  right: 12px !important;
  left: auto !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.theme-light .feed-exit-focus[hidden] {
  display: none !important;
}

.theme-light .nav-label {
  font-weight: 600;
  color: #8e8e93;
}

.theme-light .nav-item.active .nav-label {
  color: var(--accent);
}

.theme-light .nav-item .nav-icon {
  color: #8e8e93;
}

.theme-light .nav-item.active .nav-icon {
  color: var(--accent);
}

.theme-light .nav-upload-btn {
  background: #1c1c1e;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.theme-light .nav-upload-btn .sg-icon {
  color: #ffffff;
}

.theme-light .game-detail-badge--muted {
  background: #f2f2f7;
  color: #8e8e93;
}

.theme-light .sg-mini-sep {
  color: #d1d1d6;
}

.theme-light .sg-mini-stat svg {
  opacity: 0.6;
}

.theme-light .sg-store-card-title {
  color: var(--text);
}

.theme-light .sg-store-card-cat {
  color: var(--accent);
}

.theme-light .sg-store-card-desc {
  color: var(--muted);
}

.theme-light .sg-mini-stat {
  color: var(--muted);
}

.theme-light .sg-store-card-badge {
  background: var(--accent-soft);
  color: var(--accent);
}

.theme-light .upload-active-panel {
  background: var(--bg);
  border-top-color: var(--border);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.05);
}

.theme-light .upload-field-lbl {
  color: var(--muted);
}

.theme-light .upload-section-title {
  color: var(--text);
}

.theme-light .profile-game-icon-btn {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.theme-light .profile-game-icon-btn .sg-icon {
  color: #1c1c1e;
}

.theme-light .profile-game-icon-btn.del {
  background: #fff0f0;
  border-color: #ffdada;
}

.theme-light .profile-game-icon-btn.del .sg-icon {
  color: #ff3b30;
}

.theme-light .profile-edit-label {
  color: var(--muted);
}

.theme-light .field-input {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
}

.theme-light .field-input::placeholder {
  color: #c7c7cc;
}

.theme-light .profile-id-readonly {
  background: rgba(0, 0, 0, 0.03);
  color: var(--muted);
}

.theme-light .profile-id-readonly strong {
  color: var(--text);
}

.theme-light .profile-badges {
  background: transparent;
}

.theme-light .profile-badge {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
}

.theme-light .profile-badge--premium {
  background: linear-gradient(135deg, #fff9f0 0%, #fff 100%);
  border-color: #ffe0b2;
  color: #f57c00;
}

.theme-light .search-bar {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.theme-light .search-input {
  color: var(--text);
  background: transparent;
}

.theme-light .method-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.theme-light .method-card.selected {
  background: #f0f7ff;
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 122, 255, 0.12);
}

.theme-light .method-card .m-title {
  color: var(--text);
}

.theme-light .method-card .m-desc {
  color: var(--muted);
}

.theme-light .method-card .m-icon {
  color: var(--accent);
}

.theme-light .method-card--premium-locked {
  background: #fcfcfc;
  opacity: 0.85;
}

.theme-light .upload-premium-callout {
  background: #fff8eb;
  border: 1px solid #ffe0b2;
}

.theme-light .upload-premium-callout .upload-premium-p {
  color: #855e00;
}

.theme-light .upload-premium-callout .sg-icon {
  color: #f57c00;
}

.theme-light .upload-form-wrap {
  background: #ffffff;
}

.theme-light .field-label {
  color: var(--muted);
}

.theme-light .field-input {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
}

.theme-light .field-input:focus {
  border-color: var(--accent);
  background: #ffffff;
}

.theme-light .help-faq-item {
  background: #ffffff;
  border: 1px solid var(--border);
}

.theme-light .help-faq-item summary {
  color: var(--text);
}

.theme-light .help-acc-body {
  color: var(--muted);
  border-top-color: var(--border);
}

.theme-light .help-prompt {
  background: #f8f9fa;
  color: #1c1c1e;
  border: 1px solid var(--border);
}

.theme-light .upload-faq-title {
  color: var(--text);
}

.theme-light .profile-upload-hint {
  color: var(--muted);
}

.theme-light .profile-upload-hint strong {
  color: var(--text);
}

.theme-light .game-detail-screen {
  background: var(--bg);
}

.theme-light .game-detail-topbar {
  background: var(--tg-glass-bg);
  border-bottom: 1px solid var(--border);
}

.theme-light .game-detail-topbar-title {
  color: var(--text);
}

.theme-light .game-detail-body {
  background: var(--surface);
}

.theme-light .game-detail-title {
  color: var(--text);
}

.theme-light .game-detail-desc {
  color: var(--muted);
}

.theme-light .game-detail-meta-k {
  color: var(--muted);
}

.theme-light .game-detail-meta-v {
  color: var(--text);
}

.theme-light .game-detail-author-card {
  background: var(--bg);
  border: 1px solid var(--border);
}

.theme-light .game-detail-author-name {
  color: var(--text);
}

.theme-light .game-detail-author-handle {
  color: var(--muted);
}

.theme-light .game-detail-section-title {
  color: var(--text);
}

.theme-light .game-detail-review p {
  color: var(--text);
}

.theme-light .game-detail-review-meta {
  color: var(--muted);
}

.theme-light .game-detail-compose {
  background: var(--surface);
  border-top-color: var(--border);
}

.theme-light .game-detail-compose-input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.theme-light #author-screen {
  background: var(--bg);
}

.theme-light .author-profile-name {
  color: var(--text);
}

.theme-light .author-profile-handle {
  color: var(--muted);
}

.theme-light .author-profile-bio {
  color: var(--text);
}

.theme-light .danger-zone {
  background: #fff5f5;
  border-color: #ffcccc;
}

.theme-light .danger-zone-title {
  color: #ff3b30;
}

.theme-light .search-input {
  color: var(--text);
}

.theme-light .genre-btn {
  background: #ffffff;
  border: 1px solid var(--border);
  color: #1c1c1e;
}

.theme-light .genre-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.theme-light .nav-item .nav-label {
  color: #8e8e93;
}

.theme-light .nav-item.active .nav-label {
  color: var(--accent);
}

.theme-light .nav-item .nav-icon {
  color: #8e8e93;
}

.theme-light .nav-item.active .nav-icon {
  color: var(--accent);
}

/* Единое «стекло» для bottom sheet, карточек подсказок, онбординга */
.tg-glass {
  background: var(--tg-glass-bg);
  -webkit-backdrop-filter: blur(var(--tg-glass-blur)) saturate(var(--tg-glass-saturate));
  backdrop-filter: blur(var(--tg-glass-blur)) saturate(var(--tg-glass-saturate));
  border: 1px solid var(--tg-glass-border);
  box-shadow: var(--tg-glass-shadow), var(--tg-glass-inset);
}

.tg-glass--sheet {
  background: var(--tg-glass-bg-strong);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22), var(--tg-glass-inset);
}

.tg-glass--muted {
  box-shadow: var(--tg-glass-inset);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* Единый набор иконок (stroke), без эмодзи в хроме */
.sg-icon {
  display: block;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.92);
}

.sg-icon--sm {
  width: 20px;
  height: 20px;
}

.sg-icon--nav {
  width: 24px;
  height: 24px;
}

.sg-icon--heart path {
  vector-effect: non-scaling-stroke;
}

.sg-icon--heart-filled {
  color: rgba(200, 210, 222, 0.95);
}

.action-icon .sg-icon {
  width: 24px;
  height: 24px;
}

.sg-mini-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.sg-mini-stat .sg-icon {
  width: 13px;
  height: 13px;
  opacity: 0.72;
}

.sg-mini-sep {
  margin: 0 5px;
  opacity: 0.35;
}

/* Иконки жанров: яркие оттенки на тёмном фоне */
.sg-genre-ic {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.sg-genre-ic--xs {
  width: 13px;
  height: 13px;
}

.sg-genre-ic--sm {
  width: 17px;
  height: 17px;
}

.sg-genre-ic--md {
  width: 26px;
  height: 26px;
}

.sg-genre-ic--lg {
  width: 30px;
  height: 30px;
}

.sg-genre-ic--hero {
  width: 52px;
  height: 52px;
  opacity: 0.95;
}

.sg-genre-ic--inline {
  width: 16px;
  height: 16px;
  margin: 0 5px 0 4px;
  vertical-align: -3px;
}

/* Многоцветные иконки: оттенки на .sg-gi-a … (см. js/genre-icons.js) */
.sg-genre--all .sg-gi-a {
  color: #8eb4e8;
}

.sg-genre--all .sg-gi-b {
  color: #a6b0d4;
}

.sg-genre--all .sg-gi-c {
  color: #7ed4b8;
}

.sg-genre--all .sg-gi-d {
  color: #d4b87a;
}

.sg-genre--all .sg-gi-e {
  color: rgba(255, 255, 255, 0.28);
}

.sg-genre--arcade .sg-gi-a {
  color: #4ac4e8;
}

.sg-genre--arcade .sg-gi-b {
  color: #5dd4f0;
}

.sg-genre--arcade .sg-gi-c {
  color: #7ad4f2;
}

.sg-genre--arcade .sg-gi-d {
  color: #2e9fbe;
}

.sg-genre--puzzle .sg-gi-a {
  color: #b48cf0;
}

.sg-genre--puzzle .sg-gi-b {
  color: #c9a6ff;
}

.sg-genre--puzzle .sg-gi-c {
  color: #8a6ed4;
}

.sg-genre--puzzle .sg-gi-d {
  color: #d4a4f0;
}

.sg-genre--puzzle .sg-gi-e {
  color: #8b7af0;
}

.sg-genre--puzzle .sg-gi-f {
  color: #7a6ed4;
}

.sg-genre--puzzle .sg-gi-g {
  color: #e0a6ff;
}

.sg-genre--action .sg-gi-a {
  color: #ff6a6a;
}

.sg-genre--action .sg-gi-b {
  color: #ff9a6a;
}

.sg-genre--casual .sg-gi-a {
  color: #6ed4a0;
}

.sg-genre--casual .sg-gi-b {
  color: #5cc4a0;
}

.sg-genre--casual .sg-gi-c {
  color: #9ef0c0;
}

.sg-genre--strategy .sg-gi-a {
  color: #e8b85a;
}

.sg-genre--strategy .sg-gi-b {
  color: #b88a4a;
}

.sg-genre--racing .sg-gi-a {
  color: #ff8a4a;
}

.sg-genre--racing .sg-gi-b {
  color: #e86a3a;
}

.sg-genre--racing .sg-gi-c {
  color: #ffc48a;
}

.sg-genre--racing .sg-gi-d {
  color: #ff6a4a;
}

.sg-genre--racing .sg-gi-e {
  color: #ffb04a;
}

.sg-genre--racing .sg-gi-f {
  color: #d4a04a;
}

.sg-genre--platform .sg-gi-a {
  color: #6ac4ff;
}

.sg-genre--platform .sg-gi-b {
  color: #4a9ce8;
}

.sg-genre--platform .sg-gi-c {
  color: #3a7ac4;
}

.sg-genre--platform .sg-gi-d {
  color: #8ad4ff;
}

.sg-genre--platform .sg-gi-e {
  color: #a6e0ff;
}

.sg-genre--other .sg-gi-a {
  color: #9aa4b8;
}
.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.badge--dev {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #92400e;
  border: 1px solid #fde68a;
}

.badge--premium {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  color: #9a3412;
  border: 1px solid #fed7aa;
}

.theme-light .badge--dev {
  background: linear-gradient(135deg, #fff9db 0%, #fff3bf 100%);
  border-color: #ffe066;
}

.theme-light .badge--premium {
  background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
  border-color: #ffd8a8;
}

.sg-genre--other .sg-gi-b {
  color: #8a9ab0;
}

.sg-genre--other .sg-gi-c {
  color: #b0b8c8;
}

.sg-genre--other .sg-gi-d {
  color: #7a8a9c;
}

.sg-genre--other .sg-gi-e {
  color: #a0a8b8;
}

.sg-genre--other .sg-gi-f {
  color: #6a7a8a;
}

.upload-genre-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.upload-genre-line strong {
  margin-right: 2px;
}

.genre-pill,
.genre-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.genre-pill-txt,
.genre-tag-txt {
  line-height: 1.2;
}

.game-genre-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 48vw;
  color: rgba(200, 210, 225, 0.88);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.game-genre-inline .sg-genre-ic--md {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.game-genre-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.placeholder-icon.sg-placeholder-genre {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

.placeholder-icon.sg-placeholder-genre .sg-genre-ic--md {
  width: 56px;
  height: 56px;
  opacity: 0.55;
}

.game-card-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.game-card-thumb-placeholder .sg-genre-ic--md {
  width: 48px;
  height: 48px;
  opacity: 0.45;
}

.upload-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.upload-steps-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.upload-steps-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.upload-steps-dot {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  min-width: 12px;
}

.upload-steps-dot.done {
  background: rgba(255, 255, 255, 0.28);
}

.upload-steps-dot.current {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14));
}

/* Цвета шагов как у жанров: 1 головоломка, 2 аркада, 3 стратегия, 4 казуал */
.upload-steps-dot--1.done {
  background: linear-gradient(90deg, rgba(201, 166, 255, 0.55), rgba(201, 166, 255, 0.2));
  box-shadow: 0 0 10px rgba(201, 166, 255, 0.12);
}

.upload-steps-dot--2.done {
  background: linear-gradient(90deg, rgba(93, 212, 240, 0.55), rgba(93, 212, 240, 0.22));
  box-shadow: 0 0 10px rgba(93, 212, 240, 0.12);
}

.upload-steps-track--gh .upload-steps-dot {
  min-width: 28px;
}

.upload-steps-dot--3.done {
  background: linear-gradient(90deg, rgba(240, 200, 106, 0.5), rgba(240, 200, 106, 0.2));
  box-shadow: 0 0 10px rgba(240, 200, 106, 0.1);
}

.upload-steps-dot--4.current {
  background: linear-gradient(90deg, rgba(126, 224, 168, 0.7), rgba(126, 224, 168, 0.28));
  box-shadow: 0 0 12px rgba(126, 224, 168, 0.2);
}

/* Загрузка по ссылке — одна карточка */
.upload-url-card {
  margin-top: 8px;
  padding: 18px 16px 20px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(26, 28, 34, 0.96) 0%, rgba(14, 15, 18, 0.99) 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.upload-url-card .upload-panel-lead {
  margin-top: 0;
  margin-bottom: 16px;
}

.upload-url-divider {
  height: 1px;
  margin: 18px 0 16px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.upload-url-submit-wrap {
  margin-top: 22px;
  padding-top: 4px;
}

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

/* GitHub: двухэтапный поток внутри вкладки */
.github-publish-flow {
  margin-top: 12px;
}

.github-publish-card {
  position: relative;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(26, 28, 34, 0.96) 0%, rgba(14, 15, 18, 0.99) 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.github-publish-head {
  position: relative;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
}

.github-publish-head .upload-steps {
  margin-bottom: 10px;
}

.github-publish-heading {
  margin: 0 0 6px;
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.github-publish-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.48);
}

.github-publish-body {
  padding: 16px 16px 22px;
  max-height: min(72dvh, 680px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.upload-stack-section {
  margin-bottom: 20px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.upload-stack-section:last-of-type {
  border-bottom: none;
  margin-bottom: 8px;
}

.upload-stack-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 12px;
}

.upload-panel-lead--tight {
  margin-bottom: 12px;
}

.upload-review-box--compact {
  font-size: 13px;
  padding: 12px 14px;
}

.github-publish-panel .upload-panel-lead {
  margin-top: 0;
}

.github-publish-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.github-publish-actions .sg-btn {
  flex: 1;
  min-width: 120px;
}

.github-publish-actions--single {
  margin-top: 20px;
}

.github-publish-actions--single .sg-btn {
  flex: 1 1 100%;
  width: 100%;
  min-height: 48px;
}

/* ══════════════════════════════
   BUTTONS — единый язык контролов (Telegram-like)
══════════════════════════════ */

.sg-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: var(--btn-radius-md);
  transition: opacity 0.18s ease, transform 0.14s ease, border-color 0.18s ease, background 0.18s ease;
}

.sg-btn:active:not(:disabled) {
  transform: scale(0.98);
  opacity: 0.92;
}

.sg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sg-btn--primary {
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--cta-border);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 17px;
  background: var(--cta-bg);
  box-shadow:
    0 1px 0 var(--cta-highlight) inset,
    0 10px 28px rgba(0, 0, 0, 0.35);
  border-radius: var(--btn-radius-lg);
}

.sg-btn--primary:active:not(:disabled) {
  background: linear-gradient(180deg, #3a3e48 0%, #262930 100%);
}

.theme-light .sg-btn--primary:active:not(:disabled) {
  background: linear-gradient(180deg, #006ce6 0%, #005bb5 100%);
}

.sg-btn--screen-cta.sg-btn--primary {
  background: var(--cta-bg-strong);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 var(--cta-highlight) inset,
    0 0 0 1px rgba(var(--accent-rgb), 0.22),
    0 12px 32px rgba(0, 0, 0, 0.42);
}

.theme-light .sg-btn--screen-cta.sg-btn--primary {
  background: var(--cta-bg-strong);
  box-shadow: 0 8px 24px rgba(0, 122, 255, 0.2);
}

.sg-btn--screen-cta.sg-btn--primary:active:not(:disabled) {
  background: linear-gradient(180deg, #454b5c 0%, #2e343f 100%);
}

.theme-light .sg-btn--screen-cta.sg-btn--primary:active:not(:disabled) {
  background: #005bb5;
}

.sg-btn--secondary {
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--btn-border);
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.06);
}

.sg-btn--secondary:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.sg-btn--ghost {
  padding: 10px 14px;
  border: 1px solid var(--btn-border);
  color: var(--muted);
  background: transparent;
}

.sg-btn--ghost:active:not(:disabled) {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.sg-btn--icon {
  padding: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.sg-btn--icon .sg-icon {
  flex-shrink: 0;
}

/*
  Подсказка «ещё игры»: лёгкий сдвиг #feed (без полоски/стрелок).
*/
body.is-tab-feed.feed-swipe-tease-burst:not(:has(#feed-nav-tip-overlay.feed-nav-tip-visible)):not(:has(#feed.feed-dragging)) #feed {
  animation: feedSwipeTeaseBurst 2.45s cubic-bezier(0.33, 0, 0.2, 1) forwards;
  will-change: transform;
}

body:has(#feed-nav-tip-overlay.feed-nav-tip-visible).feed-swipe-tease-burst #feed,
body:has(#feed.feed-dragging).feed-swipe-tease-burst #feed {
  animation: none !important;
  transform: none !important;
  will-change: auto;
}

@keyframes feedSwipeTeaseBurst {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  5% {
    transform: translate3d(calc(-1 * min(7vw, 34px)), 0, 0);
  }

  6% {
    transform: translate3d(calc(-1 * min(6vw, 30px)), 0, 0);
  }

  14% {
    transform: translate3d(0, 0, 0);
  }

  52% {
    transform: translate3d(0, 0, 0);
  }

  57% {
    transform: translate3d(calc(-1 * min(5vw, 24px)), 0, 0);
  }

  64% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.feed-swipe-tease-burst #feed {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

/*
  Лента: не ставить pan-x/y на потомков #feed пачкой — ломает canvas в iframe.
  В режиме discovery iframe не получает касания (свайп по всему экрану как в TikTok).
*/
#feed,
.slide {
  touch-action: auto;
}

.slide-placeholder {
  touch-action: auto;
}

#feed .slide iframe.slide-game,
iframe.slide-game {
  touch-action: none !important;
}

/* Прокрутка полноэкранных экранов на телефоне: потомки не должны наследовать touch-action:none */
#profile-screen.open,
#profile-screen.open *,
#author-screen.open,
#author-screen.open *,
#search-screen.open,
#search-screen.open *:not(.genre-scroll):not(.genre-scroll *),
#games-library-screen.open,
#games-library-screen.open *,
#upload-screen.open,
#upload-screen.open *,
#onboarding-screen.open,
#onboarding-screen.open * {
  touch-action: pan-y;
}

body {
  background: var(--bg);
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text);
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Лёгкий «doodle»-фон: контуры почти незаметны, присмотревшись — сетка мелких фигур */
#feed::before,
#upload-screen::before,
#profile-screen::before,
#author-screen::before,
#search-screen::before,
#games-library-screen::before,
#empty-state::before,
.tg-only-wall::before,
#app-boot-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--sg-doodle);
  background-size: var(--sg-doodle-size);
  background-repeat: repeat;
  background-color: transparent;
}

/* Только Telegram Mini App */
.tg-only-wall {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  isolation: isolate;
}

.tg-only-wall>* {
  position: relative;
  z-index: 1;
}

.tg-only-wall[hidden] {
  display: none !important;
}

body.tg-only-wall #app-boot-splash {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Первый кадр: логотип + загрузка (скрывается после feed + проверки онбординга) */
#app-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 1500;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  isolation: isolate;
}

#app-boot-splash>* {
  position: relative;
  z-index: 1;
}

#app-boot-splash>.app-boot-genre-drift {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#app-boot-splash>.sg-brand--splash,
#app-boot-splash>.app-boot-sub {
  z-index: 2;
}

#app-boot-splash:not([hidden]) {
  display: flex;
}

#app-boot-splash[hidden] {
  display: none !important;
}

#app-boot-splash.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Логотип: марка (monogram) + вордмарк */
.sg-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  user-select: none;
}

.sg-brand--splash {
  gap: 16px;
}

.sg-brand--card {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 0;
}

.sg-brand--transition {
  position: static !important;
  transform: none !important;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.sg-brand-mark {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #1e2a3f 0%, #10141c 50%, #0d1016 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 10px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.sg-brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.sg-brand-mark--sm {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.sg-brand-mark--xs {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.sg-brand-mark--spin,
.sg-brand-mark--loader {
  animation: sgLogoSpin 1.1s linear infinite;
}

/* Экран входа: марка без вращения — спокойнее первый кадр */
#app-boot-splash .sg-brand-mark {
  animation: none;
}

.sg-brand-mark--loader {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: rgba(200, 214, 232, 0.85);
  box-shadow: none;
  background: rgba(22, 24, 30, 0.85);
}

@keyframes sgLogoSpin {
  to {
    transform: rotate(360deg);
  }
}

#feed-transition .sg-brand-mark--spin {
  animation-duration: 0.85s;
}

.sg-brand-wordmark {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 7vw, 34px);
  letter-spacing: -0.04em;
  line-height: 1;
  display: flex;
  align-items: baseline;
}

.sg-brand-wordmark--compact {
  font-size: clamp(20px, 5vw, 24px);
}

.sg-brand-wordmark--transition {
  font-size: clamp(17px, 4.5vw, 22px);
}

.sg-brand-word-muted {
  color: rgba(255, 255, 255, 0.42);
}

.sg-brand-word-accent {
  margin-left: 1px;
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-boot-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Иконки жанров на сплэше: старт в разных точках экрана, полёт по диагонали (--boot-dx/dy задаёт JS) */
.sg-genre-ic--boot-drift {
  width: 64px;
  height: 64px;
  display: block;
}

.app-boot-genre-drift__item {
  position: absolute;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.4));
  --boot-dx: -85vw;
  --boot-dy: -85vh;
  --boot-rot: -18deg;
  --boot-dur: 16s;
  --boot-delay: 0s;
  transform: translate3d(0, 0, 0) rotate(var(--boot-rot)) scale(0.9);
  animation: bootGenreDriftDiag var(--boot-dur) linear infinite;
  animation-delay: var(--boot-delay);
  will-change: transform, opacity;
}

@keyframes bootGenreDriftDiag {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--boot-rot)) scale(0.88);
    opacity: 0;
  }

  5% {
    opacity: 0.2;
  }

  40% {
    opacity: 0.3;
  }

  92% {
    opacity: 0.1;
  }

  100% {
    transform: translate3d(var(--boot-dx), var(--boot-dy), 0) rotate(var(--boot-rot)) scale(1.04);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-boot-genre-drift__item {
    animation: none !important;
    opacity: 0;
    display: none;
  }
}

body.tg-only-wall #feed,
body.tg-only-wall #feed-transition,
body.tg-only-wall #empty-state,
body.tg-only-wall #side-actions,
body.tg-only-wall #game-info,
body.tg-only-wall #dots,
body.tg-only-wall #feed-nav-tip-overlay,
body.tg-only-wall #bottom-nav,
body.tg-only-wall #app-tab-chrome,
body.tg-only-wall #feed-exit-focus,
body.tg-only-wall #upload-screen,
body.tg-only-wall #profile-screen,
body.tg-only-wall #search-screen,
body.tg-only-wall #games-library-screen,
body.tg-only-wall #author-screen,
body.tg-only-wall #onboarding-screen,
body.tg-only-wall #toast {
  visibility: hidden !important;
  pointer-events: none !important;
}

.tg-only-card {
  max-width: 340px;
  text-align: center;
  padding: 24px 20px;
  border-radius: 18px;
}

.tg-only-title {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-top-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap !important;
}

.author-name {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.author-role {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.tg-only-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* ══════════════════════════════
   FEED
══════════════════════════════ */
/* Лента: карточки едут влево/вправо через translate3d (как Tinder); % от ширины самого слайда */
#feed {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* Выше колонки лайков (она ниже по z-index), чтобы iframe получал touch */
  z-index: 1;
  isolation: isolate;
}

/* Под шитом профиля/поиска и т.д.: в Telegram WebView iframe иногда рисуется поверх — прячем ленту целиком */
body.app-feed-hidden-under-sheet #feed,
body.app-feed-hidden-under-sheet #empty-state,
body.app-feed-hidden-under-sheet #side-actions,
body.app-feed-hidden-under-sheet #game-info,
body.app-feed-hidden-under-sheet #dots,
body.app-feed-hidden-under-sheet .feed-ui-layer,
body.app-feed-hidden-under-sheet iframe:not(.upload-preview-iframe) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -100 !important;
}

body.app-feed-hidden-under-sheet {
  background-color: var(--bg) !important;
}

body.app-feed-hidden-under-sheet::before {
  display: none !important;
}

body.feed-layout-vertical #feed {
  touch-action: none;
}

.slide {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.slide-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.slide-stack {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* Вертикальная лента: карточка на весь экран */
body.feed-layout-vertical .slide-placeholder,
body.feed-layout-vertical .slide-game {
  top: 0;
  height: 100%;
}

.slide-discovery {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--game-bottom) + 10px);
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 16px 0 max(16px, env(safe-area-inset-left, 0px));
  max-width: 100%;
}

.slide-discovery-bg {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}

.slide-discovery-content {
  position: relative;
  z-index: 1;
  padding: 16px 16px 18px;
  pointer-events: auto;
  max-width: min(100%, 420px);
  margin-bottom: 40px !important;
}

.slide-discovery-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 8px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
}

.slide-discovery-desc {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  max-height: 4.5em;
  overflow: hidden;
}

.slide-discovery-meta {
  margin-bottom: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  gap: 8px;
}

.slide-discovery-genre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.slide-play-btn {
  width: 100%;
  max-width: 280px;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 20px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.theme-light .slide-play-btn {
  background: linear-gradient(180deg, #0095f6 0%, #0077d7 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 149, 246, 0.3) !important;
}

body.feed-game-focus.feed-layout-vertical .slide.feed-slide--active .slide-discovery {
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.2s ease;
}

body.feed-game-focus.feed-layout-vertical .slide.feed-slide--active .slide-placeholder {
  opacity: 0;
  pointer-events: none !important;
}

body.feed-game-focus.feed-layout-vertical .slide.feed-slide--active .slide-game {
  top: var(--safe-top);
  height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  max-height: none;
  z-index: 120;
  pointer-events: auto;
}

body.feed-game-focus #bottom-nav,
body.feed-game-focus #side-actions,
body.feed-game-focus #game-info,
body.feed-game-focus #dots {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* app-tab-chrome removed */
.app-tab-chrome { display: none !important; }

/* ── Screen header right slot (lang switch etc.) ── */
.screen-header-right {
  position: absolute;
  right: 16px;
  top: var(--safe-top, 0px);
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}

.lang-switch-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.06);
  padding: 3px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.theme-dark .lang-switch-group {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}

.lang-switch {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text);
  opacity: 0.5;
  cursor: pointer;
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  user-select: none;
  transform: scale(1);
}

.lang-switch--active {
  opacity: 1 !important;
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.theme-dark .lang-switch--active {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.lang-switch:not(.lang-switch--active):active {
  opacity: 0.8;
  transform: scale(0.95);
}

.feed-open .lang-switch-group {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.feed-open .lang-switch {
  color: #ffffff !important;
}

.feed-open .lang-switch--active {
  background: #ffffff !important;
  color: #000000 !important;
}

html[lang="en"] .i18n-ru {
  display: none !important;
}

html[lang="ru"] .i18n-en {
  display: none !important;
}

.sg-back-btn {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: calc(var(--safe-top, 0px) + 6px) !important;
  left: 12px !important;
  position: fixed !important;
  z-index: 2600 !important;
  transition: all 0.2s ease !important;
}

.feed-exit-focus {
  position: fixed;
  top: calc(var(--safe-top, 0px) + 10px);
  left: 16px;
  right: auto;
  z-index: 2100;
  padding: 8px 16px;
  height: 36px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

body.feed-game-focus .feed-exit-focus {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.feed-exit-focus:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.feed-exit-focus[hidden] {
  display: none !important;
}

body.feed-layout-vertical #dots {
  top: auto;
  bottom: calc(var(--game-bottom) + 10px);
  transform: none;
  right: max(8px, env(safe-area-inset-right, 0px));
}

/* Свайп ленты по всему экрану: iframe не перехватывает тач до режима «Играть» */
body.feed-layout-vertical:not(.feed-game-focus) .slide.feed-slide--active .slide-game {
  pointer-events: none;
}

body.feed-layout-vertical #game-info {
  position: fixed;
  left: 16px;
  bottom: 150px !important;
  right: 90px;
  z-index: 120;
  display: flex;
  align-items: center;
  pointer-events: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.feed-layout-vertical #game-info .author-row {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.feed-layout-vertical #game-info .author-row:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.18);
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #222;
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.author-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.author-name {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
}

.author-role {
  display: none;
}

.follow-btn {
  margin-left: 12px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  pointer-events: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
}

.follow-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.25) !important;
}

.follow-btn.following {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: transparent;
}

.games-library-section {
  padding: 0 0 8px;
}

.games-library-section-title {
  margin: 0 16px 10px;
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.88);
}

.games-grid--library {
  flex: 0 1 auto;
  max-height: none;
}

.feed-nav-tip-demo-line--vertical {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.feed-nav-tip-demo-handle--v {
  width: 4px;
  height: 40px;
  border-radius: 999px;
}

/* iOS WebView: соседние iframe с transform иногда «крадут» touch; неактивный слайд полностью прозрачен для hit-test */
.slide.feed-slide--inactive,
.slide.feed-slide--inactive * {
  pointer-events: none !important;
}

.slide.feed-slide--active {
  pointer-events: auto;
}

.slide-game {
  touch-action: none;
  pointer-events: auto;
  position: absolute;
  top: var(--game-top);
  left: 0;
  width: 100%;
  max-width: 100%;
  height: calc(100vh - var(--game-top) - var(--game-bottom));
  height: calc(100dvh - var(--game-top) - var(--game-bottom));
  border: none;
  display: block;
  background: #000;
}

.slide-game-blocker {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: auto;
  background: transparent;
}

body.feed-game-focus .slide.feed-slide--active .slide-game-blocker {
  display: none;
  pointer-events: none;
}


.slide-placeholder {
  position: absolute;
  top: var(--game-top);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--game-top) - var(--game-bottom));
  height: calc(100dvh - var(--game-top) - var(--game-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  gap: 16px;
  z-index: 2;
  transition: opacity 0.3s;
}

#feed {
  background: var(--bg);
}

.slide-placeholder.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Админ: кнопки модерации поверх игры в ленте */
.feed-moderation-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--game-bottom, 120px) + 8px);
  z-index: 25;
  display: flex;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
}

.feed-moderation-card .feed-moderation-actions {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
}

/* Между играми: логотип + кольцо; не блокирует полоску свайпа (pointer-events: none) */
#feed-transition {
  position: fixed;
  inset: 0;
  z-index: 325;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(18, 18, 22, 0.97) 0%, rgba(0, 0, 0, 0.88) 62%, rgba(0, 0, 0, 0.94) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

#feed-transition[hidden] {
  display: none !important;
}

#feed-transition.feed-transition--show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.feed-transition-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform: translate3d(0, 0, 0);
}

#feed-transition.feed-transition--show .feed-transition-inner {
  animation: feedTransitionLogoIn 0.55s cubic-bezier(0.34, 1.15, 0.64, 1) both;
}

@keyframes feedTransitionLogoIn {
  0% {
    opacity: 0;
    transform: scale(0.88) translate3d(0, 8px, 0);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

.feed-transition-logo {
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.4));
}

.slide-status-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.slide-status-banner.slide-status-rejected {
  border-color: rgba(229, 115, 115, 0.45);
  color: #ffc9c9;
}

.feed-nav-tip-overlay {
  position: fixed;
  inset: 0;
  z-index: 480;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.feed-nav-tip-overlay.feed-nav-tip-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.feed-nav-tip-overlay.feed-nav-tip--detail .feed-nav-tip-card:not(.feed-nav-tip-card--detail) {
  display: none !important;
}

.feed-nav-tip-overlay:not(.feed-nav-tip--detail) .feed-nav-tip-card--detail {
  display: none !important;
}

.feed-nav-tip-card {
  position: relative;
  max-width: 380px;
  width: 100%;
  padding: 22px 20px;
  padding-top: 42px;
  border-radius: 18px 18px 14px 14px;
}

.feed-nav-tip-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.feed-nav-tip-title {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
}

.feed-nav-tip-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.feed-nav-tip-demo {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid var(--tg-glass-border-soft);
  background: rgba(0, 0, 0, 0.2);
}

.feed-nav-tip-demo-hand {
  flex-shrink: 0;
  width: 34px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.88);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  animation: coachFingerNudgeY 2s ease-in-out infinite;
}

.feed-nav-tip-finger-svg,
.feed-onboarding-finger-svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes coachFingerNudgeY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.feed-nav-tip-demo-track {
  flex: 1;
  min-width: 0;
}

.feed-nav-tip-demo-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}

.feed-nav-tip-demo-line {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.feed-nav-tip-demo-arrow {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.32);
  user-select: none;
}

.feed-nav-tip-demo-handle {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  animation: coachHandleSlide 2s ease-in-out infinite;
}

@keyframes coachHandleSlide {

  0%,
  100% {
    transform: translateX(-10%);
  }

  50% {
    transform: translateX(10%);
  }
}

.feed-nav-tip-help {
  margin: 0 0 14px;
  text-align: center;
}

.feed-nav-tip-help-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.feed-nav-tip-help-btn:active {
  opacity: 0.8;
}

.feed-nav-tip-actions--stack {
  grid-template-columns: 1fr;
}

.feed-nav-tip-actions--stack .sg-btn {
  width: 100%;
}

.feed-nav-tip-list {
  margin: 0 0 16px;
  padding: 0 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.feed-nav-tip-list li {
  margin-bottom: 6px;
}

.feed-nav-tip-list li:last-child {
  margin-bottom: 0;
}

.feed-nav-tip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.feed-nav-tip-actions .sg-btn {
  width: 100%;
}

.feed-nav-tip-secondary {
  font-size: 14px !important;
}

/* ── Первый запуск: онбординг ленты (welcome + демо свайпа) ── */
.feed-onboarding-root {
  position: fixed;
  inset: 0;
  z-index: 510;
  pointer-events: none;
}

.feed-onboarding-root:not([hidden]) {
  pointer-events: none;
}

.feed-onboarding-dismiss {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

.feed-onboarding-welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(28px, env(safe-area-inset-bottom, 0px));
  background: rgba(6, 7, 10, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.38s ease, visibility 0.38s ease;
  pointer-events: none;
}

.feed-onboarding-welcome--visible {
  opacity: 1;
  visibility: visible;
}

.feed-onboarding-welcome-inner {
  width: 100%;
  max-width: 360px;
  text-align: center;
  border-radius: 20px;
  padding: 26px 22px 28px;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.feed-onboarding-brand {
  justify-content: center;
  margin: 0 auto 28px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.feed-onboarding-brand--in {
  opacity: 1;
  transform: scale(1);
}

.feed-onboarding-welcome-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.15;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.45s ease 0.08s, transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.08s;
}

#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--safe-bottom) + 64px);
  padding: 0 10px var(--safe-bottom);
  background: var(--surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 10001;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  height: 64px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.nav-item .nav-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-item .nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Active Colors */
.nav-item.active#nav-feed .nav-icon { color: #3b82f6; }
.nav-item.active#nav-games .nav-icon { color: #ef4444; }
.nav-item.active#nav-search .nav-icon { color: #22c55e; }
.nav-item.active#nav-profile .nav-icon { color: #a855f7; }

.nav-item.active .nav-label {
  color: #3b82f6;
  opacity: 1;
}

/* Inactive but distinct colors? No, keep muted */
.nav-item#nav-feed:not(.active) { color: rgba(138, 43, 226, 0.4); }
.nav-item#nav-games:not(.active) { color: rgba(255, 45, 85, 0.4); }
.nav-item#nav-search:not(.active) { color: rgba(52, 199, 89, 0.4); }
.nav-item#nav-profile:not(.active) { color: rgba(0, 122, 255, 0.4); }

.nav-item.active .nav-icon {
  transform: translateY(-2px) scale(1.1);
}

/* Upload FAB */
.nav-item--upload {
  flex: 1.2;
}

.nav-upload-fab {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.15) 0%, rgba(255, 45, 85, 0.15) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: -8px;
  border: 1.5px solid rgba(138, 43, 226, 0.3);
  color: #8a2be2;
}

.theme-light .nav-upload-fab {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.1) 0%, rgba(255, 45, 85, 0.1) 100%);
  border-color: rgba(138, 43, 226, 0.25);
  color: #8a2be2;
}

.nav-item--upload.active .nav-upload-fab {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(220, 39, 67, 0.4);
  transform: translateY(-4px) scale(1.05);
}

.nav-upload-fab-icon {
  width: 24px;
  height: 24px;
  color: currentColor;
}

.nav-upload-fab-plus {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: #8a2be2;
  border: 2px solid var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.nav-upload-fab-plus svg {
  width: 10px;
  height: 10px;
}

.nav-item--upload.active .nav-upload-fab-plus {
  background: #fff;
  color: #000;
  border-color: #000;
}

.feed-onboarding-welcome-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.45s ease 0.16s, transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.16s;
}

.feed-onboarding-welcome--visible .feed-onboarding-welcome-title,
.feed-onboarding-welcome--visible .feed-onboarding-welcome-sub {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.feed-onboarding-welcome-cta {
  margin-top: 28px;
  width: 100%;
  max-width: 320px;
}

.feed-onboarding-hand {
  position: absolute;
  left: 50%;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  z-index: 3;
  font-size: 44px;
  line-height: 1;
  transform: translate3d(-50%, 0, 0);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.feed-onboarding-hand--show {
  opacity: 1;
}

.feed-onboarding-hand--lift {
  transform: translate3d(-50%, calc(-1 * min(50dvh, 50vh)), 0);
}

.feed-onboarding-hand--hide {
  opacity: 0;
  transform: translate3d(-50%, 18px, 0);
  transition: opacity 0.4s ease, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.feed-onboarding-demo #slide-0 {
  z-index: 5;
}

body.feed-onboarding-demo #slide-1 {
  z-index: 4;
}

/* Нижнее меню оставляем кликабельным — иначе «Игры/Профиль» не работают, пока висит welcome */
body.feed-onboarding-ui #bottom-nav {
  pointer-events: auto !important;
  opacity: 1;
  /* Выше шитов профиля/поиска (1800), чтобы табы всегда ловили тап */
  z-index: 1950;
}

body.feed-onboarding-ui #side-actions,
body.feed-onboarding-ui #game-info,
body.feed-onboarding-ui #dots {
  pointer-events: none !important;
  opacity: 0.38;
  transition: opacity 0.22s ease;
}

body.feed-onboarding-ui .app-tab-chrome {
  opacity: 0.38;
  pointer-events: none !important;
}

.feed-onboarding-swipe-hint {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 55;
  width: min(100%, 300px);
  padding: 0 18px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: opacity;
}

.feed-onboarding-swipe-hint--visible {
  opacity: 1;
}

.feed-onboarding-swipe-hint-arrow {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  animation: feedOnboardingArrowBounce 0.9s ease-in-out infinite;
  will-change: transform;
}

@keyframes feedOnboardingArrowBounce {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -12px, 0);
  }
}

.feed-onboarding-swipe-hint-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.placeholder-icon {
  font-size: 56px;
  animation: breathe 2s ease-in-out infinite;
}

@keyframes breathe {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.08)
  }
}

.placeholder-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.placeholder-sub {
  font-size: 14px;
  color: var(--muted);
}

.loader-ring {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border);
  border-top-color: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ══════════════════════════════
   OVERLAY UI (поверх игры)
══════════════════════════════ */

.topbar-right {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.15s;
}

.icon-btn:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.18);
}

#side-actions {
  position: fixed;
  right: 12px;
  bottom: calc(var(--safe-bottom, 0px) + var(--nav-h) + 16px);
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 350;
  pointer-events: none;
  padding-right: max(0px, env(safe-area-inset-right, 0px));
}

#side-actions .action-icon {
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}

#side-actions .action-label-num {
  pointer-events: none;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  user-select: none;
  pointer-events: none;
}

.action-icon {
  width: 48px;
  height: 48px;
  background: rgba(20, 20, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.15s, background 0.2s;
  position: relative;
}

.action-icon .sg-icon {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.9);
}

.action-icon:active {
  transform: scale(0.85);
}

.action-icon.active-like {
  background: var(--like-on-soft);
  border-color: rgba(var(--like-on-rgb), 0.4);
}

.action-icon.active-like .sg-icon--heart {
  color: rgba(var(--like-on-rgb), 0.92);
}

.action-icon.active-like .sg-icon--heart.sg-icon--heart-filled {
  color: var(--like-on);
}

.action-label-num {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  line-height: 1;
}

/* три точки — pointer-events для всей кнопки */
.action-btn--more {
  position: relative;
}
.action-btn--more .action-icon {
  pointer-events: auto;
}

/* Дроп-меню жалобы */
.side-action-popup {
  position: fixed;
  right: 72px;
  bottom: calc(var(--safe-bottom, 0px) + var(--nav-h) + 16px);
  background: rgba(28, 28, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
  z-index: 360;
  pointer-events: auto;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.side-action-popup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.88);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s;
}

.side-action-popup-item:active {
  background: rgba(255, 255, 255, 0.08);
}

/* Анимация лайка */
@keyframes likePop {
  0% { transform: scale(1) }
  30% { transform: scale(1.4) }
  60% { transform: scale(0.9) }
  100% { transform: scale(1) }
}

.action-icon.pop {
  animation: likePop 0.35s ease;
}
.game-detail-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 1900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  /* Анимация появления */
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  visibility: hidden;
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  will-change: opacity, transform;
}

body.game-detail-open .game-detail-screen {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.game-detail-screen[hidden] {
  display: none !important;
}

.game-detail-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--safe-top) + 6px) 16px 12px;
  background: rgba(10, 11, 14, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}

.game-detail-topbar-title {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.game-detail-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.game-detail-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.game-detail-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.game-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.game-detail-hero-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.game-detail-hero-skel {
  min-height: 140px;
  background: rgba(255, 255, 255, 0.04);
}

.game-detail-body {
  padding: 12px 16px 8px;
}

.game-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.game-detail-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.game-detail-badge--free {
  color: rgba(126, 214, 160, 0.98);
  background: rgba(46, 160, 90, 0.18);
  border-color: rgba(102, 200, 140, 0.35);
}

.game-detail-badge--pending {
  color: #ffe082;
  border-color: rgba(255, 193, 7, 0.4);
}

.game-detail-badge--rejected {
  color: #ffc9c9;
  border-color: rgba(229, 115, 115, 0.4);
}

.game-detail-badge--muted {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
}

.game-detail-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 6px;
}

.game-detail-desc {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
}

.game-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.game-detail-meta-cell {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-detail-meta-cell--wide {
  grid-column: 1 / -1;
}

.game-detail-meta-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.game-detail-meta-v {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.game-detail-play {
  width: 100%;
  margin-bottom: 12px;
}

.game-detail-author-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  margin-bottom: 14px;
}

.game-detail-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-detail-author-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.game-detail-author-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-detail-author-name {
  font-size: 14px;
  font-weight: 700;
}

.game-detail-author-handle {
  font-size: 12px;
  color: var(--muted);
}

.game-detail-follow {
  margin-left: auto;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
}

.game-detail-follow.following {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-color: var(--border);
}

.game-detail-section {
  margin-top: 8px;
}

.game-detail-section-title {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 12px;
}

.game-detail-reviews-empty {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}

.game-detail-review {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.45;
}

.game-detail-review:last-child {
  border-bottom: none;
}

.game-detail-review-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--muted);
}

.game-detail-review p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

/* Sticky compose bar (отзыв) */
.game-detail-compose {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px calc(var(--safe-bottom) + 10px);
  border-top: 1px solid var(--border);
  background: rgba(10, 11, 14, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.game-detail-compose[hidden] {
  display: none !important;
}

.game-detail-compose-input {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 100px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.game-detail-compose-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.22);
}

.game-detail-compose-send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

:root {
  --bg-header: rgba(0, 0, 0, 0.85);
}

.theme-light {
  --bg-header: rgba(255, 255, 255, 0.9);
}

/* Скролл shrinks when compose is visible */
.game-detail-screen:has(.game-detail-compose:not([hidden])) .game-detail-scroll {
  padding-bottom: 20px;
}

.game-detail-owner-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.game-detail-owner-lead {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.game-detail-owner-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-detail-owner-del {
  color: rgba(255, 170, 170, 0.95) !important;
  border-color: rgba(229, 115, 115, 0.35) !important;
}

/* Профиль: иконки вместо широких кнопок */
.profile-game-actions--icons {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 0 2px;
}

.profile-game-actions--icons .profile-game-icon-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(22, 24, 30, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.14s ease, border-color 0.18s ease;
}

.profile-game-actions--icons .profile-game-icon-btn:active {
  transform: scale(0.94);
}

.profile-game-actions--icons .profile-game-icon-btn--danger {
  color: rgba(255, 170, 170, 0.95);
  border-color: rgba(229, 115, 115, 0.28);
  background: rgba(40, 22, 24, 0.55);
}

/* ══════════════════════════════
   НИЖНИЙ НАВ
══════════════════════════════ */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  height: calc(var(--safe-bottom) + var(--nav-h));
  background: var(--tg-glass-bg);
  border-top: 1px solid var(--tg-glass-border);
  backdrop-filter: blur(var(--tg-glass-blur)) saturate(var(--tg-glass-saturate));
  -webkit-backdrop-filter: blur(var(--tg-glass-blur)) saturate(var(--tg-glass-saturate));
  padding: 8px 4px var(--safe-bottom);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  overflow: visible;
  box-shadow: var(--tg-glass-shadow);
}

body.app-boot-active #bottom-nav,
body.app-boot-active .app-tab-chrome {
  display: none !important;
}

body.keyboard-open #bottom-nav,
body.keyboard-open .app-tab-chrome {
  display: none !important;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 12px;
  transition: transform 0.12s ease, background 0.2s;
  min-width: 60px;
}

.nav-item:active {
  background: rgba(255, 255, 255, 0.06);
  transform: scale(0.96);
}

.nav-item .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0.5;
}

.nav-item .nav-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nav-item .nav-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  transition: color 0.2s;
  text-transform: none;
}

.nav-item.active .nav-icon {
  opacity: 1;
  transform: translateY(-0.5px);
}

/* Центральная кнопка: марка smolgame + плюс (как в TikTok) */
.nav-item--upload {
  flex: 0 0 auto;
  min-width: 68px;
  padding: 0 6px 2px;
  position: relative;
  z-index: 2;
  align-self: flex-end;
}

.nav-item--upload .nav-label {
  margin-top: 2px;
  max-width: 72px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item--upload:active {
  background: transparent;
}

.nav-upload-fab {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  margin-top: -18px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(40, 43, 52, 0.98) 0%, rgba(22, 24, 30, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.14s ease, box-shadow 0.2s ease;
}

.nav-item--upload:active .nav-upload-fab {
  transform: scale(0.94);
}

.nav-item--upload.active .nav-upload-fab {
  border-color: rgba(180, 199, 224, 0.35);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(163, 184, 212, 0.12) inset;
}

.nav-upload-fab-icon {
  width: 34px;
  height: 34px;
  display: block;
  opacity: 0.95;
}

.nav-upload-fab-plus {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(10, 11, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
}

.nav-upload-fab-plus svg {
  width: 12px;
  height: 12px;
  display: block;
}

.nav-item--upload .sg-icon--nav {
  display: none;
}

.games-library-lead {
  margin: 0 16px 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

#games-library-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  isolation: isolate;
}

#games-library-screen>* {
  position: relative;
  z-index: 1;
}

#games-library-screen.open {
  display: flex;
  bottom: 0;
  padding-bottom: calc(var(--safe-bottom) + var(--nav-h) + 16px);
}

.games-grid--library {
  flex: 1;
  padding: 8px 12px 12px;
  overflow-y: auto;
  touch-action: pan-y;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}

.liked-games-empty-heart .sg-icon {
  width: 40px;
  height: 40px;
  opacity: 0.55;
  color: var(--like-on);
}

/* ══════════════════════════════
   ПРОГРЕСС ТОЧКИ
══════════════════════════════ */
#dots {
  position: fixed;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 250;
  pointer-events: none;
}

.dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s;
}

.dot.active {
  background: rgba(255, 255, 255, 0.9);
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ══════════════════════════════
   ЭКРАН: ЗАГРУЗИТЬ ИГРУ
══════════════════════════════ */
#upload-screen {
  position: fixed;
  inset: 0;
  z-index: 30000;
  background: var(--bg);
  display: none;
  flex-direction: column;
  overflow: hidden; /* Agent handles its own scroll */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 0;
}

#upload-screen>* {
  position: relative;
  z-index: 1;
}

#upload-screen.open {
  display: flex;
  bottom: 0;
  padding-bottom: calc(var(--safe-bottom) + var(--nav-h));
}

.agent-container {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

#agent-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--bg);
}

#agent-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.upload-welcome-block {
  margin-bottom: 22px;
  padding: 16px;
  border-radius: 16px;
}

.upload-welcome-block[hidden] {
  display: none !important;
}

.upload-welcome-card .onboarding-body {
  margin: 0 0 14px;
}

.upload-welcome-card .welcome-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Строка «моя игра»: карточка + раскрывающийся редактор на всю ширину сетки */
#myGamesGrid .profile-game-row {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Одна колонка на всю ширину сетки: карточка и кнопки выровнены по левому краю, не «остров» по центру */
#myGamesGrid .profile-game-row .game-card {
  width: 100%;
  max-width: none;
  align-self: stretch;
}

.profile-game-row--editing .game-card {
  outline: 1px solid rgba(180, 199, 224, 0.35);
  border-radius: 14px;
}

.profile-game-editor {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.profile-game-editor[hidden] {
  display: none !important;
}

.profile-game-editor-lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.profile-game-editor-url-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 0;
  line-height: 1.4;
  word-break: break-all;
}

.profile-game-editor-url-hint code {
  font-size: 11px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 6px;
}

.profile-game-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 18px;
}

/* Действия под карточкой: полная ширина строки, без центрирования; один ряд без переноса текста */
.profile-game-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-start;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  padding: 2px 0 6px;
}

.profile-game-actions .profile-text-btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 8px;
  line-height: 1.2;
}

.profile-game-actions .profile-game-play-btn {
  flex: 1 1 0;
}

.profile-game-actions .profile-game-delete-btn {
  flex: 0 0 auto;
  min-width: 44px;
  padding-left: 10px;
  padding-right: 10px;
  color: rgba(255, 170, 170, 0.95);
  border-color: rgba(229, 115, 115, 0.35);
}

.profile-game-actions .profile-game-delete-btn:active {
  background: rgba(229, 115, 115, 0.12);
}

.upload-guide-block {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.upload-guide-block .help-intro {
  margin-top: 0;
}

.upload-faq-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 22px 0 10px;
}

.upload-scroll-to-form {
  margin-top: 16px;
  width: 100%;
}

.profile-upload-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  text-align: center;
  margin: 14px 12px 0;
}

.screen-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top, 0px) 16px 0;
  height: calc(var(--safe-top, 0px) + var(--header-h));
  min-height: calc(var(--safe-top, 0px) + var(--header-h));
  background: var(--bg);
  z-index: 2100;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.screen-header .screen-title,
.screen-header .app-tab-chrome-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--safe-top, 0px);
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.screen-header .screen-back {
  position: absolute;
  left: 16px;
  top: var(--safe-top, 0px);
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}

.screen-header--in-screen {
  margin-bottom: 16px;
}

.screen-back {
  flex-shrink: 0;
  white-space: nowrap;
}

.screen-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  flex: 1;
  text-align: center;
  margin: 0;
}

.lang-switch-modern {
  display: flex;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
  height: 32px;
  align-items: stretch;
}

.lang-option {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 32px;
}

.lang-option.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.upload-active-panel {
  margin-top: 4px;
}

.upload-panel-lead {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 18px;
}

.upload-step-indicator {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 10px;
}

.upload-flow-step {
  margin-bottom: 8px;
}

.upload-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.upload-flow-actions .submit-btn {
  flex: 1;
  min-width: 160px;
}

.upload-meta-panel {
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.upload-premium-stub {
  text-align: center;
  padding: 28px 20px 32px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(32, 34, 42, 0.95) 0%, rgba(18, 19, 24, 0.98) 100%);
  margin-bottom: 8px;
}

.upload-premium-stub-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 12px;
  opacity: 0.55;
  color: rgba(240, 200, 106, 0.85);
}

.upload-premium-stub-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
}

.upload-premium-stub-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.upload-premium-stub-text code {
  font-size: 12px;
}

.upload-premium-page {
  padding: 4px 0 24px;
  max-width: 440px;
  margin: 0 auto;
}

.upload-premium-hero {
  text-align: center;
  margin-bottom: 22px;
}

.upload-premium-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
}

.upload-premium-block {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.upload-premium-block--muted {
  background: rgba(255, 255, 255, 0.02);
}

.upload-premium-h3 {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
  letter-spacing: -0.02em;
}

.upload-premium-p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.upload-premium-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.upload-premium-list li {
  margin-bottom: 8px;
}

.upload-premium-list li:last-child {
  margin-bottom: 0;
}

.upload-premium-callout {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px dashed rgba(240, 200, 106, 0.45);
  background: rgba(240, 200, 106, 0.08);
  margin-top: 8px;
}

.upload-premium-callout--ok {
  border-style: solid;
  border-color: rgba(140, 213, 255, 0.4);
  background: rgba(140, 213, 255, 0.08);
}

.upload-premium-callout .upload-premium-p {
  color: rgba(255, 255, 255, 0.82);
}

.upload-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.upload-methods--triple {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}

.upload-methods--dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.upload-methods-more {
  display: flex;
  justify-content: center;
  margin: 6px 0 4px;
}

.upload-more-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.18s ease, background 0.18s ease;
}

.upload-more-btn:active {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.06);
}

.upload-more-btn-sub {
  font-weight: 500;
  opacity: 0.75;
  margin-left: 4px;
}

.upload-more-btn--locked .upload-more-btn-sub {
  color: rgba(240, 200, 106, 0.85);
}

.github-connect-btn {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.github-unlink-btn {
  width: 100%;
  margin-top: 10px;
}

.github-input-mode .github-mode-btn {
  flex: 1;
  min-width: 0;
}

.github-input-mode .github-mode-btn.selected {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.field-hint--tight {
  margin-top: 0;
  margin-bottom: 8px;
}

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

.method-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px 14px 22px;
  min-height: 108px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.method-card.selected {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: var(--accent-soft);
}

/* Вкладки способа: оттенки как у жанров (ссылка / GitHub / премиум) */
.method-card--url:not(.selected) .m-icon--svg {
  color: rgba(140, 213, 255, 0.62);
}

.method-card--url.selected {
  border-color: rgba(140, 213, 255, 0.48);
  background: linear-gradient(165deg, rgba(140, 213, 255, 0.12) 0%, rgba(19, 20, 26, 0.96) 55%);
  box-shadow: 0 0 0 1px rgba(140, 213, 255, 0.08) inset;
}

.method-card--url.selected .m-icon--svg {
  color: #8cd5ff;
}

.method-card--github:not(.selected) .m-icon--svg {
  color: rgba(201, 166, 255, 0.55);
}

.method-card--github.selected {
  border-color: rgba(201, 166, 255, 0.5);
  background: linear-gradient(165deg, rgba(201, 166, 255, 0.1) 0%, rgba(19, 20, 26, 0.96) 55%);
  box-shadow: 0 0 0 1px rgba(201, 166, 255, 0.08) inset;
}

.method-card--github.selected .m-icon--svg {
  color: #c9a6ff;
}

.method-card--premium:not(.selected) .m-icon--svg {
  color: rgba(240, 200, 106, 0.5);
}

.method-card--premium.selected {
  border-color: rgba(240, 200, 106, 0.5);
  background: linear-gradient(165deg, rgba(240, 200, 106, 0.1) 0%, rgba(19, 20, 26, 0.96) 55%);
  box-shadow: 0 0 0 1px rgba(240, 200, 106, 0.08) inset;
}

.method-card--premium.selected .m-icon--svg {
  color: #f0c86a;
}

.method-card--premium-locked {
  opacity: 0.72;
  border-style: dashed;
}

.method-card--premium-locked .m-title,
.method-card--premium-locked .m-desc {
  color: rgba(255, 255, 255, 0.5);
}

.method-card .m-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.method-card .m-icon--svg {
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
}

.method-card .m-icon--svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.github-btn-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.92);
}

.method-card .m-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.method-card .m-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* Форма */
.form-section {
  display: none;
}

.form-section.visible {
  display: block;
}

.field-group {
  margin-bottom: 18px;
}

.field-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}

.field-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.35;
}

.field-hint-center {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: -10px;
  margin-bottom: 16px;
  line-height: 1.35;
}

.field-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  touch-action: pan-y;
}

.field-input:focus {
  border-color: rgba(var(--accent-rgb), 0.45);
}

.field-input::placeholder {
  color: var(--muted);
}

textarea.field-input {
  height: 100px;
  resize: none;
}

.code-area {
  width: 100%;
  height: 180px;
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: #7fdbca;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  outline: none;
  resize: none;
  transition: border-color 0.2s;
  touch-action: pan-y;
}

.code-area:focus {
  border-color: rgba(var(--accent-rgb), 0.45);
}

.code-area::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

#form-github .code-area {
  min-height: 220px;
  height: min(42vh, 320px);
}

#btn-code-tab-advance {
  margin-top: 14px;
  width: 100%;
}

.github-reauth-btn {
  margin-top: 8px;
}

.gh-paste-strip {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  line-height: 1.45;
}

.upload-wizard-step {
  margin-bottom: 8px;
}

.upload-wizard-hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
  margin: 0 0 14px;
}

.code-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.code-wizard-actions--wrap {
  justify-content: flex-start;
}

.upload-review-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.upload-review-box p {
  margin: 0 0 10px;
}

.upload-review-box p:last-child {
  margin-bottom: 0;
}

.github-btn {
  width: 100%;
  padding: 15px 16px;
  background: linear-gradient(180deg, #2d333b 0%, #1f2429 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--btn-radius-lg);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  transition: opacity 0.18s ease, transform 0.14s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.github-btn:active {
  opacity: 0.88;
  transform: scale(0.995);
}

#btn-github-primary {
  margin-bottom: 8px;
}

.code-upload-branch {
  margin-top: 4px;
}

.github-input-mode {
  display: flex;
  gap: 10px;
  margin: 12px 0 14px;
}

.github-mode-btn.selected {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.github-files-list {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
}

.github-upload-result {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.45;
}

.github-upload-result a {
  color: #7ab8ff;
  word-break: break-all;
}

.image-upload {
  width: 100%;
  min-height: 110px;
  background: var(--surface);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}

.image-upload input {
  display: none;
}

.image-preview {
  margin-top: 10px;
  min-height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-preview img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.submit-btn {
  width: 100%;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--cta-bg);
  border: 1px solid var(--cta-border);
  border-radius: var(--btn-radius-lg);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.14s ease, background 0.18s ease;
  margin-top: 8px;
  box-shadow:
    0 1px 0 var(--cta-highlight) inset,
    0 8px 24px rgba(0, 0, 0, 0.28);
}

.submit-btn:active:not(:disabled) {
  opacity: 0.95;
  transform: scale(0.985);
  background: linear-gradient(180deg, #3a3e48 0%, #23262d 100%);
}

.submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.genre-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.genre-pill {
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.genre-pill.selected {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
}

/* ══════════════════════════════
   ЭКРАН: ПРОФИЛЬ
══════════════════════════════ */
#profile-screen,
#author-screen,
#search-screen,
#games-library-screen,
#upload-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-top: 0;
  padding-bottom: 90px;
}

#profile-screen.open,
#author-screen.open {
  display: flex;
  z-index: 9999;
}

.profile-header-main {
  padding: 10px 20px 20px;
}

.profile-avatar-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
}

.profile-avatar-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  padding: 3px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-radius: 50%;
  flex-shrink: 0;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  color: var(--muted);
  overflow: hidden;
  border: 3px solid var(--bg);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
}

.profile-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.profile-handle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2px;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.profile-badge {
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-badge.dev {
  background: rgba(255, 193, 7, 0.08);
  border-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.profile-badge--premium {
  background: linear-gradient(135deg, rgba(240, 148, 51, 0.1), rgba(188, 24, 136, 0.1));
  border-color: rgba(219, 39, 67, 0.3);
  color: #f09433;
}

.profile-bio {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  white-space: pre-wrap;
  margin: 4px 0 8px;
}

/* Stats Grid */
.profile-stats-grid {
  flex: 1;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: center !important;
  padding: 0;
  margin: 0;
  background: transparent;
  min-width: 0;
}

.theme-light .stat-num {
  color: #000 !important;
}

.theme-light .stat-label {
  color: #8e8e93 !important;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 1;
}

.stat-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.stat-lbl {
  font-size: 13px;
  color: var(--text);
  opacity: 0.8;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Tabs Segment */
.profile-tabs-segment {
  display: flex;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.profile-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 14px;
}

.theme-light .profile-tab-btn {
  color: #8e8e93;
}

.profile-tab-btn.active {
  color: #fff;
}

.theme-light .profile-tab-btn.active {
  color: #000;
}

.profile-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

.theme-light .profile-tab-btn.active::after {
  background: #000;
}

.profile-tab-btn-icon {
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.profile-tab-btn.active .profile-tab-btn-icon {
  opacity: 1;
}

.profile-tab-btn-icon svg {
  width: 18px;
  height: 18px;
}

.profile-tab-btn-text {
  font-weight: 700;
  font-size: 13px;
}

.profile-tab-content {
  display: none;
  padding-bottom: 40px;
}

.profile-tab-content.active {
  display: block;
}

/* Wall / Posts */
.profile-wall-compose {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-post-input {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
  font-size: 15px;
  min-height: 80px;
  resize: none;
  font-family: inherit;
}

.profile-post-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.profile-post-body {
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 12px;
}

.profile-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-post-date {
  font-size: 12px;
  color: var(--muted);
}

.profile-post-delete {
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.profile-post-delete:active {
  background: rgba(255, 255, 255, 0.05);
}

/* Форма редактирования — только после «Редактировать» */
#profile-screen:not(.profile-edit-active) #profile-edit-wrap {
  display: none !important;
}

#profile-screen.profile-edit-active #profile-edit-wrap {
  display: block !important;
}

.profile-action-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 20px 20px;
}

#profile-screen:not(.profile-edit-active) #profileEditSaveBtn,
#profile-screen:not(.profile-edit-active) #profileEditDiscardBtn {
  display: none !important;
}

#profile-screen.profile-edit-active #profileEditOpenBtn {
  display: none !important;
}

#profile-screen.profile-edit-active #profileEditSaveBtn,
#profile-screen.profile-edit-active #profileEditDiscardBtn {
  display: flex !important;
}

.profile-btn {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-light .profile-btn {
  background: #efefef;
  color: #000;
}

.theme-light .profile-btn--primary {
  background: #0095f6;
  color: #fff;
}

.theme-light .stat-num {
  color: #000;
}

.theme-light .stat-label {
  color: #8e8e93;
}

.theme-light .profile-name {
  color: #000;
}

.profile-btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-btn--primary {
  background: #0088cc;
  color: #fff;
}

.profile-stats-hint {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.38);
  margin: -8px 0 14px;
  max-width: 340px;
}

.profile-stats-hint:empty {
  display: none;
}

.profile-me-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--btn-radius-md);
  border: 1px solid rgba(255, 180, 100, 0.45);
  background: rgba(255, 200, 120, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.profile-me-banner[hidden] {
  display: none !important;
}

.profile-me-banner-text {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.profile-me-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-me-banner .profile-me-retry {
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--btn-border);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.profile-edit-toggle-btn {
  flex: 1;
  min-width: 140px;
  padding: 13px 16px;
  border-radius: var(--btn-radius-md);
  border: 1px solid var(--btn-border);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.14s ease, background 0.18s ease;
}

.profile-edit-toggle-btn.primary {
  border: 1px solid var(--cta-border);
  background: var(--cta-bg);
  color: #fff;
  box-shadow: 0 1px 0 var(--cta-highlight) inset, 0 6px 20px rgba(0, 0, 0, 0.2);
}

.profile-edit-toggle-btn:active {
  opacity: 0.92;
  transform: scale(0.985);
}

.profile-edit-wrap {
  margin-bottom: 16px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.profile-id-readonly {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.4;
}

.profile-id-readonly strong {
  color: var(--text);
  font-weight: 700;
}

.profile-id-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.profile-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 14px;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-field-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.profile-handle-input {
  text-transform: lowercase;
}

.profile-avatar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.profile-avatar-upload span {
  font-size: 13px;
}

.profile-text-btn {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius-md);
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.14s ease, background 0.18s ease;
}

.profile-text-btn:active {
  opacity: 0.9;
  transform: scale(0.985);
}

.profile-avatar-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.profile-save-btn {
  width: 100%;
}

.profile-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.profile-badge {
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.profile-badge.dev {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.1);
}

.profile-badge--premium {
  color: rgba(240, 200, 106, 0.95);
  border-color: rgba(240, 200, 106, 0.45);
  background: rgba(240, 200, 106, 0.12);
}

.author-follow-btn {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--cta-border);
  border-radius: var(--btn-radius-lg);
  background: var(--cta-bg);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.14s ease, background 0.18s ease;
  box-shadow: 0 1px 0 var(--cta-highlight) inset, 0 8px 24px rgba(0, 0, 0, 0.25);
}

.author-follow-btn:active:not(:disabled) {
  transform: scale(0.985);
}

.author-follow-btn.following {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border: 1px solid var(--btn-border);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
}

.profile-games-title {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 16px 20px 8px;
}

.games-grid {
  padding: 0 12px 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.game-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
}

.game-card:active {
  transform: scale(0.97);
}

.game-card-thumb {
  width: 100%;
  aspect-ratio: 9/10;
  background: linear-gradient(145deg, #161a24 0%, #0f1219 55%, #0c0e14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  position: relative;
  overflow: hidden;
}

.game-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 60%);
}

.game-card-cover,
.slide-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-cover {
  position: absolute;
  inset: 0;
  opacity: 0.45;
}

.game-card-status-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.game-card-status-badge.pending {
  border-color: rgba(255, 193, 7, 0.5);
  color: #ffe082;
}

.game-card-status-badge.rejected {
  border-color: rgba(229, 115, 115, 0.5);
  color: #ffc9c9;
}

.edit-game-btn {
  position: absolute;
  right: 48px;
  top: 8px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: opacity 0.18s ease, transform 0.14s ease;
}

.edit-game-btn:active {
  transform: scale(0.92);
  opacity: 0.85;
}

.delete-game-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: opacity 0.18s ease, transform 0.14s ease;
}

.delete-game-btn:active {
  transform: scale(0.92);
  opacity: 0.85;
}

.game-card-info {
  padding: 10px 12px 12px;
}

.game-card-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
}

.game-card-stats {
  font-size: 11px;
  color: var(--muted);
}

/* Карточка «как товар» (профиль, поиск, библиотека, автор) */
.sg-store-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #22252e 0%, #1a1c24 48%, #16181f 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
  min-height: 0;
}

.sg-store-card:active {
  transform: scale(0.985);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.sg-store-card-thumb {
  aspect-ratio: 1 / 1.08;
  background: linear-gradient(165deg, #f4f6fa 0%, #e8ecf4 35%, #dce2ee 100%);
}

.sg-store-card-thumb::after {
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.22) 100%);
}

.sg-store-card-thumb .game-card-cover {
  mix-blend-mode: normal;
}

.sg-store-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 11px 11px;
  gap: 4px;
  min-height: 0;
}

.sg-store-card-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.2;
}

.sg-store-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.28;
  color: rgba(255, 255, 255, 0.96);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.56em;
}

.sg-store-card-author {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.sg-store-card-desc {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.sg-store-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sg-store-card-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  min-width: 0;
}

.sg-store-card-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 8px;
  color: rgba(126, 214, 160, 0.98);
  background: rgba(46, 160, 90, 0.2);
  border: 1px solid rgba(102, 200, 140, 0.35);
}

/* ══════════════════════════════
   ЭКРАН: ПОИСК
══════════════════════════════ */
#search-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  isolation: isolate;
}

#search-screen>* {
  position: relative;
  z-index: 1;
}

#search-screen.open {
  display: flex;
  bottom: 0;
  padding-bottom: calc(var(--safe-bottom) + var(--nav-h) + 12px);
}

.search-bar-wrap,
.games-library-header-sub {
  padding: 14px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.search-header {
  display: none; /* Deprecated */
}

.search-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.search-header-top .screen-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  margin: 0;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 14px;
  transition: border-color 0.2s ease;
}

.search-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.14);
}

.search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  padding: 14px 0;
  touch-action: pan-y;
}

.search-bar input::placeholder {
  color: var(--muted);
}

.search-icon {
  display: flex;
  align-items: center;
  color: var(--muted);
  flex-shrink: 0;
}

.search-icon .sg-icon {
  opacity: 0.65;
}

.search-hint-bar {
  min-height: 28px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.search-hint-bar:empty {
  display: none;
}

.search-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
}

.search-active-filter .search-active-filter-x {
  margin-left: 2px;
  font-size: 16px;
  line-height: 1;
  opacity: 0.45;
  font-weight: 400;
}

.search-active-filter:active {
  opacity: 0.85;
}

.genre-scroll-wrap {
  border-bottom: 1px solid var(--border);
  padding: 12px 0 10px;
  background: rgba(0, 0, 0, 0.12);
}

.genre-scroll-label {
  padding: 0 16px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

.genre-scroll {
  display: flex;
  gap: 8px;
  padding: 0 16px 2px;
  overflow-x: auto;
  touch-action: pan-x;
}

.genre-scroll::-webkit-scrollbar {
  display: none;
}

.genre-tag {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.genre-tag.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--nav-active);
}

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  touch-action: pan-y;
  align-content: start;
}

.search-empty-state,
.search-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 24px 48px;
}

.search-empty-icon-wrap {
  margin: 0 auto 18px;
  display: flex;
  justify-content: center;
}

.search-empty-title {
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.9);
}

.search-empty-sub,
.search-no-results-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.search-no-results p {
  margin: 0 0 6px;
}

.search-no-results p:first-child {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

/* Поиск: карточки используют .sg-store-card; старые классы title-row убраны из разметки */

/* ══════════════════════════════
   ЭКРАН: РЕГИСТРАЦИЯ
══════════════════════════════ */
#onboarding-screen {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#onboarding-screen.open {
  display: flex;
}

.onboarding-card {
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  padding: 20px;
}

.onboarding-body {
  margin: 18px 0;
}

.onboarding-step {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.onboarding-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}

.onboarding-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
  margin-bottom: 14px;
}

.onboarding-value-prop {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
  margin: 0 0 12px;
}

.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}

.check-row input {
  margin-top: 2px;
}

.onboarding-blocked {
  margin-top: 14px;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}

.welcome-btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--btn-border) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.help-intro {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 18px;
}

.help-acc,
.help-faq-item {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.help-acc summary,
.help-faq-item summary {
  list-style: none;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.help-acc summary::-webkit-details-marker,
.help-faq-item summary::-webkit-details-marker {
  display: none;
}

.help-acc-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-acc--step1 {
  border-color: rgba(201, 166, 255, 0.16);
  background: linear-gradient(180deg, rgba(201, 166, 255, 0.04) 0%, var(--surface) 32px);
}

.help-acc--step1[open] {
  border-color: rgba(201, 166, 255, 0.32);
}

.help-acc--step1 .help-acc-num {
  background: rgba(201, 166, 255, 0.2);
  color: #c9a6ff;
  box-shadow: 0 0 0 1px rgba(201, 166, 255, 0.2) inset;
}

.help-acc--step2 {
  border-color: rgba(93, 212, 240, 0.16);
  background: linear-gradient(180deg, rgba(93, 212, 240, 0.04) 0%, var(--surface) 32px);
}

.help-acc--step2[open] {
  border-color: rgba(93, 212, 240, 0.3);
}

.help-acc--step2 .help-acc-num {
  background: rgba(93, 212, 240, 0.18);
  color: #5dd4f0;
  box-shadow: 0 0 0 1px rgba(93, 212, 240, 0.2) inset;
}

.help-acc--step3 {
  border-color: rgba(240, 200, 106, 0.14);
  background: linear-gradient(180deg, rgba(240, 200, 106, 0.05) 0%, var(--surface) 32px);
}

.help-acc--step3[open] {
  border-color: rgba(240, 200, 106, 0.28);
}

.help-acc--step3 .help-acc-num {
  background: rgba(240, 200, 106, 0.16);
  color: #f0c86a;
  box-shadow: 0 0 0 1px rgba(240, 200, 106, 0.2) inset;
}

.help-acc--step4 {
  border-color: rgba(126, 224, 168, 0.16);
  background: linear-gradient(180deg, rgba(126, 224, 168, 0.04) 0%, var(--surface) 32px);
}

.help-acc--step4[open] {
  border-color: rgba(126, 224, 168, 0.3);
}

.help-acc--step4 .help-acc-num {
  background: rgba(126, 224, 168, 0.18);
  color: #7ee0a8;
  box-shadow: 0 0 0 1px rgba(126, 224, 168, 0.2) inset;
}

.help-acc-body {
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.help-acc-body p {
  margin: 0 0 10px;
}

.help-acc-body p:last-child {
  margin-bottom: 0;
}

.help-prompt {
  margin: 10px 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(255, 255, 255, 0.88);
}

.help-ol {
  margin: 8px 0 12px;
  padding-left: 20px;
}

.help-ol li {
  margin-bottom: 6px;
}

.help-ol code {
  font-size: 12px;
}

.help-acc-body code {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ══════════════════════════════
   TOAST
══════════════════════════════ */
#toast {
  position: fixed;
  bottom: calc(var(--safe-bottom) + var(--nav-h) + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  max-width: calc(100vw - 48px);
  background: rgba(28, 28, 30, 0.94);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  padding: 11px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  white-space: normal;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════
   ПУСТАЯ ЛЕНТА
══════════════════════════════ */
#empty-state {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 40px;
  z-index: 9999;
  isolation: isolate;
}

#empty-state>* {
  position: relative;
  z-index: 1;
}

#empty-state.show {
  display: flex;
}

.sg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 340px;
}

.sg-empty-state--grid {
  grid-column: 1 / -1;
  padding: 40px 16px 48px;
  text-align: center;
}

.sg-empty-state-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}

.sg-empty-state-icon .sg-icon {
  width: 100%;
  height: 100%;
}

.sg-empty-state-icon--warn {
  color: rgba(255, 180, 120, 0.85);
}

.sg-empty-state-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
}

.sg-empty-state-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.sg-empty-state-cta {
  margin-top: 8px;
  width: 100%;
  max-width: 280px;
}

.empty-icon {
  font-size: 64px;
}

.empty-title {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 800;
}

.empty-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

.empty-btn {
  margin-top: 8px;
  padding: var(--btn-pad-y) 28px;
  background: var(--cta-bg);
  border: 1px solid var(--cta-border);
  border-radius: var(--btn-radius-lg);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--cta-highlight) inset, 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: opacity 0.18s ease, transform 0.14s ease, background 0.18s ease;
}

.empty-btn:active {
  transform: scale(0.985);
  opacity: 0.95;
}

/* ══════════════════════════════
   ADMIN (видно только админу)
══════════════════════════════ */
.admin-only {
  display: none;
}

body.is-admin .admin-only {
  display: block;
}

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.admin-card-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  word-break: break-word;
}

.admin-card-title--row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.admin-card-title--row span {
  min-width: 0;
}

.admin-card-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  word-break: break-all;
}

.admin-card-meta a {
  color: var(--accent);
  text-decoration: none;
}

.admin-actions {
  display: flex;
  gap: 8px;
}

.admin-btn {
  flex: 1;
  padding: 11px 10px;
  border-radius: var(--btn-radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  transition: opacity 0.18s ease, transform 0.14s ease;
}

.admin-btn.approve {
  background: rgba(76, 175, 80, 0.14);
  border-color: rgba(76, 175, 80, 0.38);
}

.admin-btn.reject {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.28);
}

.admin-btn.delete {
  background: rgba(255, 152, 0, 0.12);
  border-color: rgba(255, 152, 0, 0.32);
}

.admin-btn:active {
  opacity: 0.85;
  transform: scale(0.98);
}

.admin-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}

@media (max-width: 640px) {
  :root {
    --nav-h: 64px;
    --info-h: 72px;
  }

  /* Как TikTok: колонка поверх игры */
  #side-actions {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    bottom: calc(var(--game-bottom) + 12px);
    right: max(6px, env(safe-area-inset-right, 0px));
    left: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    width: auto;
    max-width: none;
    padding-right: 0;
  }

  .action-icon {
    width: 48px;
    height: 48px;
    font-size: 21px;
  }

  .action-label {
    max-width: 62px;
    font-size: 11px;
    line-height: 1.05;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .author-avatar {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .author-name {
    font-size: 14px;
  }

  .author-role {
    font-size: 11px;
  }

  .follow-btn {
    font-size: 12px;
    padding: 7px 11px;
  }

  #bottom-nav {
    height: calc(var(--safe-bottom) + var(--nav-h));
    padding: 8px 2px var(--safe-bottom);
    align-items: flex-end;
  }

  .nav-item {
    min-width: 0;
    padding: 6px 6px;
    flex: 1;
  }

  .nav-item .nav-icon {
    font-size: 24px;
  }

  .nav-item .nav-label {
    font-size: 10px;
  }

  .nav-item--upload {
    min-width: 56px;
    padding: 0 4px 2px;
  }

  .nav-upload-fab {
    width: 48px;
    height: 48px;
    margin-top: -16px;
  }

  .nav-upload-fab-icon {
    width: 30px;
    height: 30px;
  }

  #profile-screen,
  #author-screen,
  #search-screen,
  #games-library-screen,
  #upload-screen {
    width: 100vw;
    max-width: none;
  }

  .profile-header {
    padding: calc(var(--safe-top) + 26px) 16px 18px;
  }

  .profile-top {
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }

  .profile-avatar {
    width: 76px;
    height: 76px;
    min-width: 76px;
    min-height: 76px;
    max-width: 76px;
    max-height: 76px;
    flex-basis: 76px;
    font-size: 26px;
  }

  .profile-stats {
    flex: 1;
    justify-content: space-around;
    gap: 8px;
  }

  .stat-num {
    font-size: 20px;
  }

  .stat-lbl {
    font-size: 10px;
  }

  .profile-name {
    font-size: 22px;
  }

  .games-grid,
  .search-results,
  .games-grid--library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .game-card {
    border-radius: 16px;
  }

  .game-card-thumb {
    aspect-ratio: 1/1.1;
    font-size: 40px;
  }
}

@media (max-width: 380px) {
  :root {
    --info-h: 68px;
  }

  #side-actions {
    right: max(4px, env(safe-area-inset-right, 0px));
    gap: 12px;
  }

  .action-icon {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }

  .action-label {
    font-size: 10px;
    max-width: 54px;
  }

  #game-info {
    right: 0;
    padding-left: 10px;
  }

  .author-avatar {
    width: 34px;
    height: 34px;
  }

  .author-name {
    max-width: 32vw;
    font-size: 14px;
  }

  .follow-btn {
    padding: 6px 9px;
  }
}

/* Debug Panel */
.profile-debug-panel {
  margin-top: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  padding: 12px;
  border-radius: 12px;
  font-family: monospace;
  font-size: 11px;
  color: #0f0;
  word-break: break-all;
}

/* Profile Wall */
.profile-wall-section {
  padding: 0 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 20px;
}

.profile-wall-header {
  padding: 20px 20px 10px;
}

.profile-wall-title {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: #fff;
}

.profile-wall-compose {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 20px 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.profile-post-input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  padding: 12px;
  min-height: 100px;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}

.profile-post-input:focus {
  border-color: var(--accent);
}

.profile-post-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.profile-post-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px;
}

.profile-post-item {
  padding: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  position: relative;
}

.profile-post-body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  white-space: pre-wrap;
  margin-bottom: 12px;
}

.profile-post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 10px;
}

.profile-post-date {
  font-size: 12px;
  color: var(--muted);
}

.profile-post-delete {
  background: rgba(255, 100, 100, 0.1);
  border: none;
  color: #ff8a8a;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.profile-post-delete:active {
  background: rgba(255, 100, 100, 0.2);
}
/* --- FEED REVIEWS DRAWER (STABLE VERSION) --- */
.feed-reviews-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2050;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.feed-reviews-backdrop:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

.feed-reviews-drawer {
  position: fixed;
  top: 15%; 
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(20, 20, 25, 0.98);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 2100;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: all;
  overscroll-behavior: contain;
  will-change: transform;
}
.feed-reviews-drawer:not([hidden]) {
  display: flex;
  transform: translateY(0);
}
.feed-reviews-drawer.is-stable:not([hidden]) {
  transition: none !important;
}

.feed-reviews-drawer-handle {
  width: 40px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

.feed-reviews-drawer-head {
  padding: 8px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(20, 20, 25, 1);
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 24px 24px 0 0;
}

.feed-reviews-drawer-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
}

.feed-reviews-drawer-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: -8px;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.1s;
}
.feed-reviews-drawer-close:active {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0.9);
}

.feed-reviews-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px;
  -webkit-overflow-scrolling: touch;
}

.feed-reviews-drawer-compose {
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #1a1a20;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.keyboard-open .feed-reviews-drawer-compose {
  padding-bottom: 14px;
}

.feed-reviews-compose-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.feed-reviews-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px 14px;
  color: #fff;
  font-size: 15px;
  resize: none;
  height: 44px;
  max-height: 120px;
  outline: none;
}

.feed-reviews-submit-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  height: 44px;
  font-weight: 700;
  font-size: 14px;
}

.feed-review-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.feed-review-item:last-child { border-bottom: none; }

.feed-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #444, #222);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.feed-review-content { flex: 1; min-width: 0; }
.feed-review-author { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 2px; }
.feed-review-body { margin: 0; font-size: 14px; line-height: 1.4; color: #fff; }
.feed-review-date { font-size: 11px; color: rgba(255,255,255,0.3); margin-left: 8px; }
.feed-review-header { display: flex; align-items: baseline; }
.feed-review-actions { display: flex; gap: 16px; margin-top: 6px; }
.feed-review-action {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: opacity 0.2s;
}
.feed-review-action:hover { opacity: 0.8; }
.feed-review-action--danger { color: #ff453a; }

/* Action Bar (Reply/Edit) */
.feed-reviews-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 12px;
}
.feed-reviews-action-bar[hidden] { display: none !important; }
.feed-reviews-action-cancel { background: none; border: none; color: #fff; opacity: 0.5; font-size: 18px; cursor: pointer; }

/* Danger Zone Account Deletion */
.profile-danger-zone {
  margin: 60px 20px 80px;
  padding-top: 32px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  text-align: center;
}

.profile-danger-btn {
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.2);
  color: #ff3b30;
  padding: 12px 24px;
  border-radius: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-danger-btn:active {
  background: rgba(255, 59, 48, 0.15);
  transform: scale(0.97);
}

.profile-danger-hint {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
/* Theme Selector in Profile */
.profile-theme-selector {
  display: flex;
  background: rgba(0, 0, 0, 0.05);
  padding: 4px;
  border-radius: 12px;
  margin-top: 8px;
}

.theme-light .profile-theme-selector {
  background: rgba(0, 0, 0, 0.03);
}

.theme-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-btn.active {
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-light .theme-btn.active {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ══════════════════════════════
   ACTIVITY & NOTIFICATIONS
   ══════════════════════════════ */
.nav-badge {
  position: absolute;
  top: 10px;
  right: 25%;
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  border: 1.5px solid var(--surface);
  box-shadow: 0 0 6px rgba(255, 59, 48, 0.4);
  pointer-events: none;
  z-index: 5;
}

.profile-tab-btn-icon {
  position: relative;
}

.profile-tab-btn-icon .nav-badge {
  top: -2px;
  right: -2px;
}

.activity-list {
  padding: 12px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.theme-light .activity-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.03);
}

.activity-item:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.06);
}

.activity-item.unread {
  background: rgba(0, 122, 255, 0.06);
  border-left: 3px solid #007aff;
}

.theme-light .activity-item.unread {
  background: rgba(0, 122, 255, 0.04);
}

.activity-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #2c2c2e;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
}

.activity-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

.activity-user {
  font-weight: 700;
  color: var(--text);
}

.activity-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.activity-empty-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Final Fixes: Search and Profile Contrast */
.genre-tag, .genre-pill {
  display: inline-flex !important;
  width: auto !important;
  margin: 4px !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}
.genre-tag.active, .genre-pill.selected {
  background: #fff !important;
  color: #000 !important;
}
#searchInput {
  background: #13141a !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.profile-stat-count, .profile-handle, .profile-name {
  color: #ffffff !important;
  opacity: 1 !important;
}
.profile-stat-label {
  color: rgba(255, 255, 255, 0.6) !important;
}