/*
 * Дизайн-система hubbo. Своя палитра (не из Telegram themeParams) с двумя темами:
 * светлой (по умолчанию) и тёмной. Тема переключается атрибутом data-theme
 * на <html> ("light" | "dark") — см. app.js. Брендовые фиолетовый и золотой
 * между темами не меняются, меняются только фон/поверхности/текст.
 */
:root {
  --violet:       #6D28D9;
  --violet-deep:  #4A1C99; /* нижняя «губа» 3D-элементов */
  --gold:         #FFB020;
  --gold-deep:    #C98404;

  --bg:           #F5F2FC;
  --surface:      #FFFFFF;
  --surface-2:    #EEE8FB;
  --ink:          #211433;
  --hint:         #897FA3;
  --border:       rgba(74, 28, 153, .12);
  --shadow:       0 8px 24px rgba(74, 28, 153, .12);
  --shadow-sm:    0 3px 10px rgba(74, 28, 153, .10);
  --lip:          rgba(20, 6, 50, .16);

  /* Тема-зависимые «белые» элементы: в светлой теме — белые, в тёмной — стекло/тонированные */
  --cta-bg:         #fff;                     /* кнопка «▶ Играть» на «Хит недели» */
  --cta-fg:         var(--violet-deep);
  --cta-border:     transparent;
  --progress-track: rgba(255, 255, 255, .35); /* полоски прогресса «Продолжить» */
  --progress-fill:  #fff;
  --gloss:          rgba(255, 255, 255, .35); /* блик на «Хит недели» */
  --gloss-tile:     rgba(255, 255, 255, .32); /* блик на плитках игр (в светлой теме был .32) */
  --act-bg:         rgba(255, 255, 255, .2);  /* звёздочка/«Поделиться» на «Хит недели» */
  --toast-bg:       var(--ink);
  --toast-fg:       var(--bg);
  --toast-border:   transparent;

  --tabbar-h: 68px;
}

html[data-theme="dark"] {
  --violet:       #8B5CF6;
  --violet-deep:  #3A1E70;
  --gold:         #FFC24B;
  --gold-deep:    #D79A2A;

  --bg:           #0C0813;
  --surface:      #15101D;
  --surface-2:    #1F1730;
  --ink:          #F2ECFF;
  --hint:         #A99BC7;
  --border:       rgba(255, 255, 255, .08);
  --shadow:       0 10px 30px rgba(0, 0, 0, .5);
  --shadow-sm:    0 3px 12px rgba(0, 0, 0, .4);
  --lip:          rgba(0, 0, 0, .3);

  --cta-bg:         rgba(255, 255, 255, .12);
  --cta-fg:         var(--ink);
  --cta-border:     rgba(255, 255, 255, .20);
  --progress-track: rgba(255, 255, 255, .12);
  --progress-fill:  #B9A5F0;
  --gloss:          rgba(255, 255, 255, .16);
  --gloss-tile:     rgba(255, 255, 255, .15);
  --act-bg:         rgba(255, 255, 255, .12);
  --toast-bg:       var(--surface-2);
  --toast-fg:       var(--ink);
  --toast-border:   rgba(255, 255, 255, .14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: inherit; }

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

.app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ---------- Шапка ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px 8px;
  min-height: 56px;
  flex: 0 0 auto;
}

/* Назад — текстом, без стрелки (решение 02.10.2026: стрелочки на кнопках назад/выйти убраны везде). */
.back {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  font: 600 15px "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  border: 0;
  background: var(--surface-2);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.back[hidden] { display: none; }
/* В Telegram есть родная «Назад» в шапке — свою не показываем (см. app.js → tg-native-back). */
.tg-native-back .back,
.tg-native-back .play-back { display: none; }

.mark {
  display: flex;
  align-items: center;
  gap: 11px;
}
.mark[hidden] { display: none; }
.mark-logo {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: block;
  object-fit: cover;
  filter: drop-shadow(0 4px 10px rgba(74, 28, 153, .28));
}
.mark b {
  font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .3px;
  line-height: 1;
}

.title {
  margin: 0;
  font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 21px;
}
.title[hidden] { display: none; }

.spacer { flex: 1; }

.toggle {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--hint);
  font-size: 15px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Контент / экраны ---------- */

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 18px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
}
.content::-webkit-scrollbar { display: none; }

.screen[hidden] { display: none; }
.screen { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* «Общение» — особый случай: вкладка рисуется в #comms-root с position: fixed; inset: 0
   (comms-web.css). Пока на .screen играет transform из fade, секция становится containing
   block для fixed-потомка, а собственной высоты у неё нет (единственный ребёнок — вне
   потока). Вкладка схлопывалась в 0x0 на все .22s и появлялась рывком — то самое мигание.
   Opacity containing block не создаёт, поэтому здесь фейд без transform. */
.screen[data-screen="comms"] { animation-name: fade-soft; }
@keyframes fade-soft { from { opacity: 0; } to { opacity: 1; } }

.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 22px 2px 12px;
}
.row-head:first-child { margin-top: 6px; }
.row-head h3 {
  margin: 0;
  font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 17px;
}
.row-head[hidden] { display: none; }

/* ---------- Хит недели ---------- */

/* ---------- «Найти собеседника»: бар «Аврора» под «Днями подряд» ----------
   Тёмно-фиолетовая плашка, под матовым стеклом медленно плывут три размытых пятна
   света. Объёмной «губы» нет нарочно — бар легче «Хита недели» и не спорит с ним. */

.find-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 60px;
  margin-top: 14px;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  background: #2A0A73;
  color: #fff;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s;
}
.find-bar[hidden] { display: none; }
.find-bar:active { transform: scale(.98); }
.find-bar:focus-visible { outline: 3px solid #C026D3; outline-offset: 3px; }
.find-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.fb-blob {
  position: absolute;
  z-index: -1;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(32px);
  opacity: .9;
  animation: fb-drift 8s ease-in-out infinite alternate;
}
.fb-b1 { background: #C026D3; left: -30px; top: -50px; }
.fb-b2 { background: #5B16E0; left: 40%; top: -40px; animation-delay: -3s; }
.fb-b3 { background: #FF8A1A; right: -40px; top: -30px; opacity: .7; animation-delay: -5s; }
@keyframes fb-drift { to { transform: translate(40px, 20px) scale(1.2); } }

.fb-wave { display: flex; align-items: center; gap: 3px; height: 20px; flex: 0 0 auto; }
.fb-wave i { width: 3px; height: 6px; border-radius: 2px; background: currentColor; animation: fb-wave 1.1s ease-in-out infinite; }
.fb-wave i:nth-child(2) { animation-delay: .15s; }
.fb-wave i:nth-child(3) { animation-delay: .3s; }
.fb-wave i:nth-child(4) { animation-delay: .45s; }
.fb-wave i:nth-child(5) { animation-delay: .6s; }
@keyframes fb-wave { 0%, 100% { height: 5px; } 50% { height: 18px; } }

.fb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fb-tx b { font: 700 15px/1.15 var(--f-display, "Baloo 2"), -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.02em; }
.fb-tx span { font-size: 12px; color: rgba(255, 255, 255, .8); }
.fb-chev { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }

/* Подсветка до первого нажатия (app.js → initFindBar): пульсирующий ореол в цветах
   пятен, блик пробегает по стеклу, в подписи метка «Новое». Ореол — box-shadow самого
   бара: overflow: hidden его не режет. */
.fb-new { display: none; }
.find-bar.fb-fresh .fb-new {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 7px;
  font-style: normal;
  vertical-align: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFB020, #FF6A1A);
  color: #3a1600;
  font: 700 9px/1 var(--f-display, "Baloo 2"), -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.find-bar.fb-fresh { animation: fb-halo 2.2s ease-in-out infinite; }
.find-bar.fb-fresh::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  animation: fb-shine 3.2s ease-in-out infinite;
}
@keyframes fb-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 38, 211, .55), 0 0 18px 2px rgba(255, 138, 26, .25); }
  50%      { box-shadow: 0 0 0 6px rgba(192, 38, 211, 0), 0 0 28px 8px rgba(255, 138, 26, .45); }
}
@keyframes fb-shine {
  0%, 55% { left: -60%; }
  100%    { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-blob, .fb-wave i, .find-bar.fb-fresh::before { animation: none; }
  .find-bar.fb-fresh { animation: none; box-shadow: 0 0 0 2px #C026D3, 0 0 22px 4px rgba(255, 138, 26, .4); }
}

/* ---------- «Найти собеседника»: страница #find (find-web.js, docs/find-partner.md) ----------
   Выбор — в токенах хаба (светлая и тёмная тема). Поиск, разговор и «конец разговора» —
   всегда тёмные, на том же «аврора»-фоне, что бар на главной: это режим звонка. */

#find-root {
  --fp-night: #14082F;
  --fp-glass: rgba(255, 255, 255, .12);
  --fp-glass-2: rgba(255, 255, 255, .2);
  --fp-text: #fff;
  --fp-dim: rgba(255, 255, 255, .72);
  --fp-pink: #C026D3;
  --fp-violet: #5B16E0;
  --fp-fire: #FF8A1A;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  transition: height .24s cubic-bezier(.17,.59,.25,1);   /* едет вместе с клавиатурой, как #comms-root */
}
#find-root svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
:where(#find-root button) { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#find-root button:focus-visible { outline: 3px solid var(--fp-pink); outline-offset: 3px; }
.fp-view {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  flex-direction: column;
  gap: 12px;
}
.fp-view.on { display: flex; }
.fp-dark { background: var(--fp-night); color: var(--fp-text); overflow: hidden; isolation: isolate; }
.fp-back { align-self: flex-start; font-weight: 600; color: var(--hint); padding: 4px 0; }

/* аврора: те же пятна, что у бара на главной */
.fp-blob { position: absolute; z-index: -1; width: 46vmax; height: 46vmax; max-width: 420px; max-height: 420px; border-radius: 50%; filter: blur(60px); opacity: .75; animation: fb-drift 9s ease-in-out infinite alternate; pointer-events: none; }
.fp-b1 { background: var(--fp-pink); left: -18%; top: -10%; }
.fp-b2 { background: var(--fp-violet); right: -20%; top: 25%; animation-delay: -3s; }
.fp-b3 { background: var(--fp-fire); left: 10%; bottom: -18%; opacity: .45; animation-delay: -6s; }
.fp-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.fp-wave i { width: 3px; height: 6px; border-radius: 2px; background: currentColor; animation: fb-wave 1.1s ease-in-out infinite; }
.fp-wave i:nth-child(2) { animation-delay: .15s; } .fp-wave i:nth-child(3) { animation-delay: .3s; }
.fp-wave i:nth-child(4) { animation-delay: .45s; } .fp-wave i:nth-child(5) { animation-delay: .6s; }
.fp-wave-big { height: 56px; gap: 6px; }
.fp-wave-big i { width: 6px; border-radius: 3px; animation-name: fp-wave-big; }
@keyframes fp-wave-big { 0%, 100% { height: 10px; } 50% { height: 54px; } }

/* ---- выбор ---- */
.fp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 20px 20px; border-radius: 24px;
  background: #2A0A73; color: #fff;
}
.fp-hero .fp-blob { width: 220px; height: 220px; filter: blur(40px); }
.fp-hero .fp-b1 { left: -60px; top: -90px; } .fp-hero .fp-b2 { right: -70px; top: -60px; } .fp-hero .fp-b3 { left: 30%; bottom: -150px; }
.fp-hero h1 { margin: 0; font: 800 24px/1.05 var(--f-display, "Baloo 2"), -apple-system, sans-serif; letter-spacing: -.03em; }
.fp-stats { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .85); display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.fp-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.fp-sec { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); }
/* Столбцов столько, сколько форматов открыто: «Камера» видна, только когда её включил сервер. */
.fp-modes { display: grid; grid-template-columns: repeat(var(--fp-modes, 2), 1fr); gap: 8px; }
.fp-mode[hidden], .fp-icon[hidden] { display: none; }
.fp-mode {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 16px;
  background: var(--surface); border: 1.5px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--hint);
  transition: border-color .15s, color .15s, transform .08s;
}
.fp-mode svg { width: 22px; height: 22px; }
.fp-mode.on { border-color: var(--violet); color: var(--ink); box-shadow: inset 0 0 0 1px var(--violet); }
.fp-mode:active { transform: scale(.97); }
.fp-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 14px 14px 12px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .08s;
}
.fp-choice:active { transform: scale(.98); }
.fp-choice .fp-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.fp-random { background: linear-gradient(110deg, #5B16E0, #C026D3); color: #fff; border-color: transparent; }
.fp-random .fp-ic { background: rgba(255, 255, 255, .2); }
.fp-friend .fp-ic { background: #E5476F; }
.fp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fp-tx b { font: 700 15px/1.15 var(--f-display, "Baloo 2"), -apple-system, sans-serif; letter-spacing: -.02em; }
.fp-tx span { font-size: 12.5px; opacity: .8; }
.fp-friend .fp-tx span { color: var(--hint); opacity: 1; }
.fp-rules { margin: 4px 2px 0; font-size: 12px; line-height: 1.45; color: var(--hint); }

/* ---- поиск ---- */
.fp-search-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.fp-search-mid h2 { margin: 14px 0 0; font: 800 22px/1.1 var(--f-display, "Baloo 2"), -apple-system, sans-serif; letter-spacing: -.03em; }
.fp-search-mid p { margin: 0; color: var(--fp-dim); font-size: 14px; }
.fp-search-time { font-variant-numeric: tabular-nums; font-size: 13px; }
.fp-hint { margin-top: 8px; padding: 10px 14px; border-radius: 14px; background: var(--fp-glass); font-size: 13px; }
.fp-hint button { font-weight: 700; text-decoration: underline; }
.fp-cancel, .fp-ghost { align-self: stretch; height: 50px; border-radius: 16px; background: var(--fp-glass); font-weight: 700; }

/* ---- разговор ---- */
.fp-stage { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; background: radial-gradient(120% 70% at 50% 20%, #3A1592, var(--fp-night) 70%); }
.fp-remote { position: absolute; inset: 0; }
.fp-remote video { width: 100%; height: 100%; object-fit: cover; }
.fp-has-video .fp-peer-big { display: none; }
.fp-peer-big {
  width: 132px; height: 132px; border-radius: 50%; margin-bottom: 25vh;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--fp-violet), var(--fp-pink));
  font: 800 52px/1 var(--f-display, "Baloo 2"), sans-serif; color: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .08);
  transition: box-shadow .2s;
}
.fp-speaking .fp-peer-big { box-shadow: 0 0 0 6px rgba(34, 197, 94, .7), 0 0 40px 10px rgba(34, 197, 94, .3); }
.fp-peer-big img, .fp-ava img { width: 100%; height: 100%; object-fit: cover; }
#find-root[data-talk="text"] .fp-peer-big { display: none; }
.fp-self { position: absolute; right: 16px; top: calc(76px + env(safe-area-inset-top, 0px)); width: 92px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, .3); display: none; }
#find-root[data-talk="video"] .fp-self { display: block; }
.fp-self video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.fp-back-cam .fp-self video { transform: none; }   /* основная камера — без зеркала */
.fp-top { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 18px; background: rgba(10, 4, 30, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fp-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(135deg, var(--fp-violet), var(--fp-pink)); color: #fff; font-weight: 800; }
.fp-ava-xl { width: 96px; height: 96px; font-size: 38px; }
.fp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-who b { font: 700 15px/1.2 var(--f-display, "Baloo 2"), sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-who span { font-size: 12px; color: var(--fp-dim); font-variant-numeric: tabular-nums; }
.fp-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--fp-glass); }
.fp-chat { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 4px 2px; mask-image: linear-gradient(transparent, #000 24px); -webkit-mask-image: linear-gradient(transparent, #000 24px); }
#find-root:not([data-talk="text"]) .fp-chat { flex: 0 1 auto; max-height: 30vh; margin-top: auto; }
.fp-msg { max-width: 80%; align-self: flex-start; padding: 8px 12px; border-radius: 16px 16px 16px 6px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.fp-msg.mine { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: linear-gradient(110deg, var(--fp-violet), var(--fp-pink)); }
.fp-sys { align-self: center; font-size: 12px; color: var(--fp-dim); padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.fp-compose { display: flex; gap: 8px; align-items: center; }
.fp-compose input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 4, 30, .45); color: #fff; font: inherit; font-size: 16px; outline: none; }   /* меньше 16px — iOS зумит страницу при фокусе */
/* Клавиатура открыта (.kb ставит bindViewport в find-web.js) — как в чате «Общения»:
   кнопки звонка прячем, отступ под «домашнюю полоску» не нужен, всё место — переписке. */
#find-root.kb .fp-bar { display: none; }
#find-root.kb .fp-view { padding-bottom: 8px; }
#find-root.kb:not([data-talk="text"]) .fp-chat { max-height: none; flex: 1 1 auto; }
.fp-compose input::placeholder { color: rgba(255, 255, 255, .55); }
.fp-send { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--fp-violet), var(--fp-pink)); }
.fp-bar { display: flex; flex-direction: column; gap: 12px; }
.fp-rounds { display: flex; justify-content: space-around; align-items: flex-start; }
.fp-round { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fp-round-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--fp-glass-2); transition: background .15s, color .15s, transform .08s; }
.fp-round:active .fp-round-ic { transform: scale(.94); }
.fp-round small { font-size: 11px; line-height: 1.2; color: var(--fp-dim); text-align: center; }
.fp-round.off .fp-round-ic { background: #fff; color: #14082F; }
/* выключенный микрофон — перечёркнутая иконка на том же стекле, без белой заливки */
.fp-round.off[data-act="mic"] .fp-round-ic { background: var(--fp-glass-2); color: #fff; }
.fp-like.done .fp-round-ic { background: #22C55E; }
.fp-like.pulse .fp-round-ic { animation: fp-pulse 1.2s ease-in-out infinite; }
@keyframes fp-pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 138, 26, .35); background: var(--fp-fire); } }
.fp-stop .fp-round-ic { background: #E5476F; }
.fp-next {
  width: 100%; height: 52px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(#FFC34A, #FF8A1A); color: #3a1600;
  font: 800 16px/1 var(--f-display, "Baloo 2"), sans-serif; letter-spacing: -.02em;
  box-shadow: 0 4px 0 #C2560A;
}
.fp-next svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.fp-next:active { transform: translateY(3px); box-shadow: 0 1px 0 #C2560A; }

/* ---- конец разговора ---- */
.fp-ended { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.fp-ended h2 { margin: 10px 0 0; font: 800 21px/1.15 var(--f-display, "Baloo 2"), sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.fp-ended p { margin: 0 0 14px; color: var(--fp-dim); font-size: 14px; }
.fp-primary { align-self: stretch; height: 52px; border-radius: 18px; background: linear-gradient(#FFC34A, #FF8A1A); color: #3a1600; font: 800 16px/1 var(--f-display, "Baloo 2"), sans-serif; box-shadow: 0 4px 0 #C2560A; }

/* ---- позвать друга ---- */
.fp-title { margin: 4px 0 0; font: 800 24px/1.1 var(--f-display, "Baloo 2"), sans-serif; letter-spacing: -.03em; }
.fp-lead { margin: 0; color: var(--hint); font-size: 14px; }
.fp-friends { display: flex; flex-direction: column; gap: 8px; }
.fp-frow { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.fp-frow b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.fp-fbtn { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 12px; background: linear-gradient(110deg, #5B16E0, #C026D3); color: #fff; font-size: 13px; font-weight: 700; }
.fp-fbtn svg { width: 16px; height: 16px; }
.fp-empty { padding: 18px; border-radius: 18px; border: 1px dashed var(--border); color: var(--hint); font-size: 14px; line-height: 1.45; text-align: center; }
.fp-invite { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 14px; border-radius: 18px; text-align: left; background: var(--surface-2); }
.fp-invite > span { display: flex; flex-direction: column; gap: 2px; }
.fp-invite b { font-size: 15px; }
.fp-invite span span { font-size: 12.5px; color: var(--hint); }

/* ---- шторка и тост ---- */
.fp-sheet { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; }
.fp-sheet[hidden], .fp-hint[hidden] { display: none; }
.fp-sheet-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.fp-sheet-box { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding: 14px; border-radius: 22px; background: var(--surface); color: var(--ink); }
.fp-sheet-t { text-align: center; font-size: 13px; color: var(--hint); padding-bottom: 4px; }
.fp-sheet-box button { height: 48px; border-radius: 14px; background: var(--surface-2); font-weight: 600; }
.fp-sheet-box .danger { color: #E5476F; }
.fp-sheet-box .muted { background: none; color: var(--hint); }
.fp-toast { position: absolute; left: 16px; right: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 6; padding: 12px 14px; border-radius: 14px; background: rgba(20, 8, 47, .92); color: #fff; font-size: 14px; text-align: center; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.fp-toast.on { opacity: 1; transform: none; }

/* свёрнутый разговор: тот же кружок, что в играх (.gv-bubble), поверх всего хаба */
#fp-mini { position: fixed; inset: 0; z-index: 55; pointer-events: none; color: #fff; font-family: "Inter", -apple-system, sans-serif; }
#fp-mini .gv-bubble { border: 0; padding: 0; color: #fff; cursor: pointer; }
#fp-mini svg { width: 20px; height: 20px; }
.fp-mini-toast { position: absolute; left: 16px; right: 16px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); padding: 12px 14px; border-radius: 14px; background: rgba(20, 8, 47, .94); font-size: 14px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.fp-mini-toast.on { opacity: 1; transform: none; }
.fp-top .fp-icon + .fp-icon { margin-left: -2px; }
@media (prefers-reduced-motion: reduce) {
  .fp-blob, .fp-wave i, .fp-like.pulse .fp-round-ic { animation: none; }
}

/* ---------- Голос в игре: «С кем играем?» (game-voice.js, docs/game-party.md) ----------
   Шторка выезжает сверху поверх загружающейся игры, после подбора сворачивается в
   перетаскиваемый кружок. Стиль — утверждённая «Аврора»: тёмно-фиолетовое стекло с
   плавающими пятнами и звуковой волной, как бар на главной и экраны звонка на #find. */

#gv-root {
  --gv-night: #160A33;
  --gv-card: rgba(255, 255, 255, .08);
  --gv-card-2: rgba(255, 255, 255, .14);
  --gv-dim: rgba(255, 255, 255, .66);
  --gv-pink: #C026D3;
  --gv-violet: #5B16E0;
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
#gv-root svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
:where(#gv-root button) { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#gv-root button:focus-visible { outline: 3px solid var(--gv-pink); outline-offset: 3px; }

.gv-shade { position: absolute; inset: 0; background: rgba(8, 3, 20, .45); opacity: 0; transition: opacity .25s; }
#gv-root[data-view="choose"] .gv-shade, #gv-root[data-view="invite"] .gv-shade, #gv-root[data-view="again"] .gv-shade, #gv-root[data-view="room"] .gv-shade, #gv-root[data-view="error"] .gv-shade { opacity: 1; pointer-events: auto; }

.gv-sheet {
  position: absolute; left: 0; right: 0; top: 0;
  max-height: 92%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 20px;
  border-radius: 0 0 28px 28px;
  background: #2A0A73;
  isolation: isolate;
  overflow-x: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .18);
  transform: translateY(-105%);
  transition: transform .32s cubic-bezier(.2, .9, .3, 1.05);
}
#gv-root[data-view="choose"] .gv-sheet, #gv-root[data-view="invite"] .gv-sheet, #gv-root[data-view="again"] .gv-sheet, #gv-root[data-view="room"] .gv-sheet, #gv-root[data-view="error"] .gv-sheet { transform: none; pointer-events: auto; }
/* «Ошибка подключения»: значок перечёркнутого микрофона вместо волн, повтор на паузе — приглушён. */
.gv-err-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #FFB020; }
#gv-root .gv-err-ic svg { width: 22px; height: 22px; }
.gv-opt[disabled] { opacity: .5; }
.gv-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.gv-aurora .fp-blob { width: 260px; height: 260px; filter: blur(48px); }
.gv-aurora .fp-b1 { left: -80px; top: -60px; } .gv-aurora .fp-b2 { right: -90px; top: 30%; } .gv-aurora .fp-b3 { left: 25%; bottom: -170px; opacity: .55; }
.gv-wave { color: #fff; margin-top: 2px; }
.gv-grip { order: 99; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.gv-x { position: absolute; right: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--gv-dim); }
.gv-sheet h2 { margin: 4px 44px 0 0; display: flex; align-items: center; gap: 8px; font: 800 22px/1.1 var(--f-display, "Baloo 2"), -apple-system, sans-serif; letter-spacing: -.03em; }
.gv-lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gv-dim); }
.gv-dots { display: inline-flex; gap: 4px; }
.gv-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: gv-dot 1.2s ease-in-out infinite; }
.gv-dots i:nth-child(2) { animation-delay: .2s; } .gv-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes gv-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.gv-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .08s; }
.gv-opt:active { transform: scale(.98); }
.gv-opt-random { background: linear-gradient(110deg, var(--gv-violet), var(--gv-pink)); box-shadow: none; }
.gv-opt-friends .gv-opt-ic { background: #E5476F; }
.gv-opt-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); flex: 0 0 auto; }
.gv-opt-ic svg { width: 24px; height: 24px; }
.gv-opt-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gv-opt-tx b { font: 700 15px/1.15 var(--f-display, "Baloo 2"), sans-serif; letter-spacing: -.02em; }
.gv-opt-tx span { font-size: 13px; color: rgba(255, 255, 255, .78); }

/* шторка комнаты: «Голосовой канал» по макету — карточка с фиолетовой обводкой поверх игры */
#gv-root[data-view="room"] .gv-sheet { background: transparent; box-shadow: none; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 0; border-radius: 0; overflow: visible; }
#gv-root[data-view="room"] .gv-shade { background: linear-gradient(rgba(8, 3, 20, .55), rgba(8, 3, 20, .15) 70%, transparent); }
.gv-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 16px; border-radius: 28px;
  background: linear-gradient(165deg, #251A5C 0%, #170E3A 60%, #120A2E 100%);
  border: 1px solid rgba(139, 92, 246, .55);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(124, 58, 237, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.gv-head { display: flex; align-items: flex-start; gap: 10px; }
.gv-head-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gv-card h2 { margin: 0; font: 600 21px/1.15 "Inter", -apple-system, sans-serif; letter-spacing: -.01em; }
.gv-status { font-size: 12.5px; color: #B9A9EC; }
.gv-chev { width: 36px; height: 36px; margin: -4px -6px 0 0; border-radius: 50%; display: grid; place-items: center; color: #C9B8FF; }
.gv-chev svg { width: 24px; height: 24px; }
.gv-opt-solo { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.gv-opt-solo .gv-opt-ic { background: rgba(255, 255, 255, .12); }
/* по 4 в ряд; видно два ряда, остальные — прокруткой (первый ряд — кто говорил последним).
   Ряд фиксированной высоты: волна говорящего лежит поверх аватарки и ряды не прыгают.
   Внутренний отступ — под свечение говорящего: край прокрутки его не обрезает. */
.gv-members { --gv-row: 96px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--gv-row); gap: 12px 10px; align-items: start; }
#gv-root .gv-members { max-height: calc(var(--gv-row) * 2 + 12px + 14px); overflow-y: auto; margin: -14px -18px 0; padding: 14px 18px; scroll-padding: 14px 0; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
#gv-root .gv-members::-webkit-scrollbar { display: none; }
.gv-member { scroll-snap-align: start; }
.gv-member { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.gv-ava-w { position: relative; display: block; width: min(72px, 100%); }
.gv-ava-w .gv-ava { width: 100%; }
.gv-member small { font-size: 14px; font-weight: 500; color: #EDE7FF; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-ava {
  width: min(72px, 100%); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #3B2A86, #24175A);
  border: 2px solid rgba(167, 139, 250, .7);
  font: 700 28px/1 "Inter", sans-serif; color: #E9E1FF;
  transition: box-shadow .2s, border-color .2s;
}
.gv-ava img { width: 100%; height: 100%; object-fit: cover; }
/* кольцо говорящего — толщина и свечение от живого уровня голоса (--lv 0…1) */
.gv-member.talk .gv-ava { border-color: #A78BFA; box-shadow: 0 0 0 calc(2px + var(--lv, .5) * 5px) rgba(167, 139, 250, .38), 0 0 calc(8px + var(--lv, .5) * 14px) rgba(139, 92, 246, .6); transition: box-shadow .06s linear, border-color .1s; }
/* волны: объёмные полоски-капсулы, растут от средней линии. С живым измерителем (gv-metered)
   высота идёт прямо от уровня голоса (--lv), без анимации; без него — мягкая «дышащая» анимация. */
.gv-mini, .gv-bars { display: flex; align-items: center; justify-content: center; }
.gv-mini i, .gv-bars i {
  flex: 0 0 auto; border-radius: 99px; height: var(--h, 20px);
  background: linear-gradient(180deg, #E9D5FF, #A855F7 55%, #C026D3);
  transform: scaleY(.3); transform-origin: center; opacity: .45;
  transition: transform .3s, opacity .3s;
}
.gv-mini { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); gap: 3px; height: 20px; padding: 0 6px; border-radius: 10px; background: #170E3A; visibility: hidden; }
.gv-mini i { width: 3px; }
.gv-member.talk .gv-mini { visibility: visible; }
.gv-member.talk .gv-mini i { opacity: 1; animation: gv-amp .9s ease-in-out infinite; }
.gv-bars { gap: 3px; height: 30px; }
.gv-bars i { width: 3px; }
.gv-talking .gv-bars i, .gv-mic.on ~ .gv-live .gv-bars i { opacity: 1; }
.gv-talking .gv-bars i { animation: gv-amp .9s ease-in-out infinite; }
/* живой уровень меняет высоту, а не scaleY: так концы капсул остаются круглыми */
.gv-metered .gv-member.talk .gv-mini i, .gv-metered .gv-bars i { animation: none; transform: none; transition: height .05s linear; }
.gv-metered .gv-member.talk .gv-mini i, .gv-metered .gv-bars i { height: calc(3px + (var(--h, 20px) - 3px) * (.22 + var(--lv, 0) * .78) * var(--w, 1)); }
@keyframes gv-amp { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.gv-member.wait .gv-ava, .gv-member.add .gv-ava { background: rgba(255, 255, 255, .04); border: 2px dashed rgba(167, 139, 250, .45); color: #C9B8FF; }
.gv-member.add .gv-ava { font-size: 34px; font-weight: 400; }
.gv-member.wait small, .gv-member.add small { color: #B9A9EC; }
button.gv-member { width: 100%; }
.gv-ava { position: relative; }
.gv-member.off .gv-ava { opacity: .5; filter: grayscale(.6); }
.gv-off { position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #EF3E5C; border: 2px solid #170E3A; }
#gv-root .gv-off svg { width: 13px; height: 13px; }
.gv-member.sel .gv-ava { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.gv-peer { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(167, 139, 250, .18); }
.gv-peer-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gv-peer-head b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-peer-head span { font-size: 12.5px; color: #B9A9EC; }
.gv-vol { display: flex; align-items: center; gap: 10px; color: #C9B8FF; }
.gv-vol input { flex: 1; min-width: 0; accent-color: #8B5CF6; }
.gv-vol output { flex: 0 0 48px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gv-pbtns { display: flex; justify-content: space-around; }
.gv-pbtn { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gv-pbtn-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); transition: background .15s, transform .08s; }
.gv-pbtn:active .gv-pbtn-ic { transform: scale(.94); }
.gv-pbtn small { font-size: 12px; font-weight: 600; color: #EDE7FF; white-space: nowrap; }
.gv-pbtn.on .gv-pbtn-ic { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.gv-pbtn.warn .gv-pbtn-ic { color: #F2B84B; }
.gv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gv-chip { padding: 9px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.gv-chip.danger { background: #EF3E5C; box-shadow: none; }
.gv-chip.ghost { background: none; box-shadow: none; color: #C9B8FF; }
.gv-friends { display: flex; flex-direction: column; gap: 8px; max-height: 210px; overflow-y: auto; }
.gv-frow { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 4px; border-radius: 16px; }
.gv-frow b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-ava.sm { width: 40px; font-size: 16px; border-width: 1.5px; }
.gv-fbtn { height: 36px; padding: 0 16px; border-radius: 12px; font-size: 13.5px; font-weight: 700; background: linear-gradient(135deg, #7C3AED, #6D28D9); box-shadow: 0 0 14px rgba(124, 58, 237, .45); }
.gv-fbtn:active { transform: scale(.96); }
.gv-fstate { font-size: 13px; color: #B9A9EC; padding: 0 6px; }
.gv-fstate.ok { color: #86EFAC; }
.gv-empty { margin: 0; font-size: 13.5px; color: #B9A9EC; text-align: center; padding: 6px 0; }
.gv-share { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 16px; font-weight: 700; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .35); }
.gv-done { align-self: center; }
.gv-invite-in { position: absolute; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 18px; background: linear-gradient(165deg, #251A5C, #170E3A); border: 1px solid rgba(139, 92, 246, .55); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); font-size: 14px; }
.gv-invite-in[hidden] { display: none; }
.gv-invite-in > span { flex: 1; min-width: 0; }
.gv-invite-in > button:not(.x) { height: 36px; padding: 0 16px; border-radius: 12px; font-weight: 700; background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.gv-invite-in .x { width: 32px; height: 32px; display: grid; place-items: center; color: #B9A9EC; }
.gv-card .gv-lead { margin: -4px 0 0; font-size: 13px; text-align: center; color: #B9A9EC; }
.gv-noise { display: flex; align-items: center; gap: 10px; }
.gv-noise > span { font-size: 12.5px; color: #B9A9EC; flex: 0 0 auto; }
.gv-noise .gv-seg { flex: 1; }
.gv-noise .gv-seg button { height: 32px; font-size: 12.5px; border-radius: 11px; }
.gv-sec { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--gv-dim); }
.gv-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 18px; background: rgba(10, 4, 30, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.gv-seg button { height: 40px; border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--gv-dim); transition: background .15s, color .15s; }
.gv-seg button.on { background: linear-gradient(110deg, var(--gv-violet), var(--gv-pink)); color: #fff; }

.gv-ctrls { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(167, 139, 250, .18); }
.gv-mic, .gv-hang {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: transform .12s ease, background .2s;
}
/* микрофон включён — фирменный градиент, как активный пункт «Шумодава» */
.gv-mic.on { background: linear-gradient(135deg, var(--gv-violet), var(--gv-pink)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.gv-hang { background: linear-gradient(135deg, #FF5273, #E5174A); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.gv-mic:active, .gv-hang:active { transform: scale(.92); }
.gv-mic svg, .gv-hang svg { width: 24px; height: 24px; }
/* общая волна и таймер — стеклянная капсула той же высоты, что и кнопки */
.gv-live {
  flex: 1; min-width: 0; height: 56px; padding: 0 16px; border-radius: 28px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.gv-live .gv-bars { flex: 1; min-width: 0; overflow: hidden; }
.gv-timer { flex: 0 0 auto; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; }
.gv-hint { margin: -6px 0 0; font-size: 12px; color: #B9A9EC; text-align: center; }

/* кружок с голосовыми волнами */
.gv-bubble {
  position: absolute; left: 14px; top: 62%;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: auto; touch-action: none;
  background: #2A0A73; overflow: visible; isolation: isolate;
  box-shadow: 0 10px 26px rgba(40, 10, 110, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .22);
  transition: transform .12s, box-shadow .2s;
}
.gv-bubble[hidden] { display: none; }
.gv-bubble.drag { transform: scale(1.08); transition: none; }
.gv-bubble.talk { box-shadow: 0 10px 26px rgba(40, 10, 110, .55), 0 0 0 4px rgba(34, 197, 94, .55), 0 0 26px 6px rgba(192, 38, 211, .45); }
.gv-bubble-aurora { position: absolute; inset: 0; z-index: -1; border-radius: 50%; overflow: hidden; }
.gv-bubble-aurora span { position: absolute; width: 46px; height: 46px; border-radius: 50%; filter: blur(12px); animation: fb-drift 6s ease-in-out infinite alternate; }
.gv-bubble-aurora span:nth-child(1) { background: #C026D3; left: -10px; top: -12px; }
.gv-bubble-aurora span:nth-child(2) { background: #5B16E0; right: -12px; top: 10px; animation-delay: -2s; }
.gv-bubble-aurora span:nth-child(3) { background: #FF8A1A; left: 8px; bottom: -22px; opacity: .7; animation-delay: -4s; }
.gv-bubble-waves { display: flex; align-items: center; gap: 3px; height: 26px; }
.gv-bubble-waves i { width: 3px; height: 24px; border-radius: 2px; background: #fff; transform: scaleY(.25); transition: transform .2s; }
.gv-bubble.talk .gv-bubble-waves i { animation: gv-wave 1s ease-in-out infinite; }
.gv-bubble.talk .gv-bubble-waves i:nth-child(2) { animation-delay: .15s; }
.gv-bubble.talk .gv-bubble-waves i:nth-child(3) { animation-delay: .3s; }
.gv-bubble.talk .gv-bubble-waves i:nth-child(4) { animation-delay: .45s; }
.gv-bubble.talk .gv-bubble-waves i:nth-child(5) { animation-delay: .6s; }
.gv-bubble.waiting .gv-bubble-waves i { animation: gv-dot 1.2s ease-in-out infinite; }
/* Волны — transform, не height: высота пересчитывала раскладку каждый кадр поверх игры. */
@keyframes gv-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
/* iOS: размытые пятна кружка не дрейфуют — вечная анимация blur поверх игры в рамке вместе с голосом
   приводила к тому, что iOS убивал мини-апп (08.10.2026). */
.gv-ios .gv-bubble-aurora span { animation: none; }
.gv-bubble-count { position: absolute; right: -2px; top: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: linear-gradient(90deg, #FFB020, #FF6A1A); color: #3a1600; font: 800 12px/22px var(--f-display, "Baloo 2"), sans-serif; text-align: center; }
.gv-bubble-count:empty { display: none; }
.gv-bubble-mute { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; border-radius: 50%; background: #E5476F; border: 3px solid #2A0A73; display: none; }
.gv-bubble.muted .gv-bubble-mute { display: block; }
.gv-bubble-off { display: none; position: relative; color: #fff; }
#gv-root .gv-bubble-off svg { width: 28px; height: 28px; }
.gv-bubble.error .gv-bubble-off { display: grid; }
.gv-bubble.error .gv-bubble-waves, .gv-bubble.error .gv-bubble-mute { display: none; }

.gv-toast { position: absolute; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); padding: 12px 14px; border-radius: 14px; background: rgba(20, 8, 47, .94); font-size: 14px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.gv-toast.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gv-sheet { transition: none; }
  .gv-dots i, .gv-bubble.talk .gv-bubble-waves i, .gv-bubble.waiting .gv-bubble-waves i, .gv-bubble-aurora span, .gv-member.talk .gv-mini i, .gv-talking .gv-bars i { animation: none; transform: none; }
}

.featured {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 10;
  background: var(--violet);
  color: #fff;
  box-shadow: 0 6px 0 var(--violet-deep), 0 16px 30px rgba(109, 40, 217, .34);
}
.featured:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--violet-deep), 0 10px 20px rgba(109, 40, 217, .3); }
.featured .gloss {
  position: absolute;
  inset: 0;
  background: radial-gradient(150px 110px at 82% 4%, var(--gloss), transparent 68%);
}
.featured .spark { position: absolute; top: 16px; left: 18px; width: 20px; height: 20px; opacity: .85; }
.featured .glyph {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-56%);
  width: 96px;
  height: 96px;
  border-radius: 22px;
  overflow: hidden;
  filter: drop-shadow(0 8px 14px rgba(20, 6, 50, .35));
}
.featured .glyph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured .glyph.is-placeholder { display: flex; align-items: center; justify-content: center; }
.featured .glyph.is-placeholder img { width: 55%; height: 55%; object-fit: contain; }
.featured .meta { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.hit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold);
  color: #3a2500;
  font: 800 11px "Inter";
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 9px;
}
.featured h2 {
  margin: 0 0 12px;
  font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 27px;
  letter-spacing: .3px;
  max-width: 62%;
}
.play {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font: 800 15px "Baloo 2", sans-serif;
  /* рамка 1px съедает 1px паддинга — размер кнопки прежний; в светлой теме рамка прозрачна
     и фон виден под ней, так что вид не меняется */
  border: 1px solid var(--cta-border);
  border-radius: 14px;
  padding: 8px 17px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(20, 6, 50, .22);
}
/* стеклянная кнопка поверх фиолетового: лёгкая тень текста для читаемости */
html[data-theme="dark"] .play { text-shadow: 0 1px 2px rgba(20, 6, 50, .45); }
.play:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(20, 6, 50, .22); }
.featured-actions { position: absolute; right: 16px; bottom: 18px; display: flex; gap: 8px; z-index: 2; }
.featured-act {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: var(--act-bg);
  box-shadow: 0 3px 0 rgba(20, 6, 50, .22);
}
.featured-act svg { width: 20px; height: 20px; }
.featured-act:focus-visible, .tile-act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Дни подряд (без монет) ---------- */

.streak {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.streak .fire { flex: 0 0 auto; width: 26px; height: 26px; color: var(--gold-deep); }
.streak .fire svg { width: 100%; height: 100%; }
.streak-text { min-width: 0; }
.streak-text b {
  font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  display: block;
  line-height: 1.1;
}
.streak-text span { font-size: 12.5px; color: var(--hint); }
.streak .days { margin-left: auto; display: flex; gap: 5px; flex: 0 0 auto; }
.streak .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); }
.streak .dot.on { background: var(--gold); border-color: var(--gold); }

/* ---------- Плитки игр ---------- */

.rail {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  margin: 0 -18px;
  padding: 2px 18px 6px;
  scrollbar-width: none;
}
.rail[hidden] { display: none; }
.rail::-webkit-scrollbar { display: none; }
.rail .tile { flex: 0 0 128px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.tile { cursor: pointer; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; display: block; }
.tile .art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--violet);
  box-shadow: 0 5px 0 var(--lip), var(--shadow-sm);
}
.tile:active .art { transform: translateY(4px); box-shadow: 0 1px 0 var(--lip), var(--shadow-sm); transition: transform .08s; }
.tile .art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90px 60px at 76% 8%, var(--gloss-tile), transparent 70%);
}
.tile .art-img { width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.tile .art.is-placeholder .art-img { width: 54%; height: 54%; object-fit: contain; }
.tile .name {
  display: block;
  margin-top: 9px;
  font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
/* игра «Скоро» (soon в games-config.json) */
.tile .soon-chip { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; z-index: 1; }
.tile.is-soon .art-img { filter: grayscale(.7) brightness(.8); }
.tile.is-soon .name { color: var(--hint); }
/* прогресс «продолжить» */
.tile .bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 5px; border-radius: 3px; background: var(--progress-track); z-index: 1; }
.tile .bar i { display: block; height: 100%; border-radius: 3px; background: var(--progress-fill); }

/* обёртка плитки: кнопка игры + маленькие кнопки-действия поверх арта */
.tile-box { position: relative; min-width: 0; }
.tile-box .tile { width: 100%; }
.rail .tile-box { flex: 0 0 128px; }
.tile-act {
  position: absolute;
  top: 7px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(20, 6, 50, .38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tile-act svg { width: 17px; height: 17px; }
.tile-fav { right: 7px; }
.tile-share { left: 7px; }
.tile-fav svg, .featured-act.fav svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.tile-fav[aria-pressed="true"], .featured-act.fav[aria-pressed="true"] { background: var(--gold); color: #3a2500; box-shadow: 0 2px 0 var(--gold-deep); }
.tile-fav[aria-pressed="true"] svg, .featured-act.fav[aria-pressed="true"] svg { fill: currentColor; }
.tile-act:active, .featured-act:active { transform: scale(.92); }

.empty { color: var(--hint); font-size: 15px; text-align: center; padding: 40px 0; }
.empty[hidden] { display: none; }

/* ---------- Разделы «Игры» ---------- */

.section-card {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 14px;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  box-shadow: 0 5px 0 var(--lip), var(--shadow-sm);
}
.section-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lip), var(--shadow-sm); transition: transform .08s; }
.section-card .ic {
  flex: 0 0 54px;
  height: 54px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .12);
}
.section-card .ic svg { width: 27px; height: 27px; }
.ic-solo { background: var(--violet); }
.ic-multi { background: #E5476F; }
.section-card .tx { flex: 1; display: flex; flex-direction: column; }
.section-card .tx b { font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 17px; display: block; }
.section-card .tx span { font-size: 12.5px; color: var(--hint); }
.chip { font: 800 11px "Inter"; background: var(--gold); color: #3a2500; padding: 5px 11px; border-radius: 999px; margin-left: auto; flex: 0 0 auto; }
.arrow { color: var(--hint); opacity: .6; flex: 0 0 auto; }
.arrow svg { width: 18px; height: 18px; display: block; }

/* ---------- Скоро (мультиплеер) ---------- */

.stub { text-align: center; padding: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stub .badge {
  width: 82px;
  height: 82px;
  border-radius: 26px;
  background: var(--violet);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 0 var(--violet-deep), 0 14px 26px rgba(109, 40, 217, .32);
}
.stub .badge svg { width: 40px; height: 40px; }
.stub h3 { margin: 0; font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 21px; }
.stub p { margin: 0; color: var(--hint); font-size: 13.5px; max-width: 25ch; line-height: 1.5; }

/* ---------- Профиль (без монет) ---------- */

.prof { display: flex; align-items: center; gap: 15px; margin: 10px 0 20px; }
.prof .av {
  width: 66px;
  height: 66px;
  border-radius: 22px;
  background: var(--violet);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 27px "Baloo 2", sans-serif;
  box-shadow: 0 6px 0 var(--violet-deep), 0 12px 22px rgba(109, 40, 217, .32);
}
.prof .av { flex: 0 0 auto; overflow: hidden; }
.prof .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof .av.has-photo { background: var(--surface-2); }
.prof-text { min-width: 0; }
.prof-text b, .prof-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof b { font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 20px; display: block; }
.prof span { font-size: 13px; color: var(--hint); }

.stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 8px; text-align: center; box-shadow: var(--shadow-sm); }
.stat b { font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; font-size: 21px; display: block; }
.stat.gold b { color: var(--gold-deep); }
.stat span { font-size: 11px; color: var(--hint); }

.stat b.stat-text { font-size: 14px; line-height: 31px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }

.row-note { font-size: 12px; color: var(--hint); }

/* ---------- Уровень / квест / ачивки ---------- */

.level {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.level-badge {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 17px;
  background: var(--gold);
  color: #3a2500;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 24px "Baloo 2", sans-serif;
  box-shadow: 0 4px 0 var(--gold-deep);
}
.level-body { flex: 1; min-width: 0; }
.level-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.level-top b { font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 17px; }
.level-top > span { font: 700 12px "Inter", sans-serif; color: var(--violet); }
html[data-theme="dark"] .level-top > span { color: var(--gold); }
.level-bar, .quest-bar { height: 10px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 7px 0 5px; }
.level-bar i, .quest-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--violet); transition: width .4s ease; }
.level-hint { font-size: 11.5px; color: var(--hint); }
.level-rules { display: block; margin-top: 2px; opacity: .8; }

/* Профиль → последние игры */
.recent-list[hidden] { display: none; }
.recent-row { gap: 12px; }
.recent-art {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.recent-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-art.is-placeholder img { width: 60%; height: 60%; object-fit: contain; }
.recent-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.recent-text b { font: 700 14.5px "Inter", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-text span { font: 500 12px "Inter", sans-serif; color: var(--hint); }
.empty-note {
  margin: 0;
  padding: 16px;
  text-align: center;
  font: 600 13px "Inter", sans-serif;
  color: var(--hint);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 18px;
}
.empty-note[hidden] { display: none; }

.quest {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.quest-ic { flex: 0 0 42px; height: 42px; border-radius: 14px; background: var(--surface-2); color: var(--violet); display: flex; align-items: center; justify-content: center; }
.quest-ic svg { width: 22px; height: 22px; }
.quest-body { flex: 1; min-width: 0; }
.quest-body b { font: 600 14px "Inter", sans-serif; }
.quest-bar { margin-bottom: 0; }
.quest-count { font: 800 17px "Baloo 2", sans-serif; color: var(--hint); flex: 0 0 auto; }
.quest.done .quest-ic { background: var(--gold); color: #3a2500; }
.quest.done .quest-bar i { background: var(--gold); }
.quest.done .quest-count { color: var(--gold-deep); }

.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ach {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ach-ic {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--hint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.ach-ic svg { width: 22px; height: 22px; }
.ach b { font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.15; }
.ach-desc { font-size: 11.5px; color: var(--hint); line-height: 1.35; }
.ach-state { margin-top: 5px; font: 700 11px "Inter", sans-serif; color: var(--hint); }
.ach:not(.on) b, .ach:not(.on) .ach-ic { opacity: .7; }
.ach.on .ach-ic { background: var(--violet); color: #fff; box-shadow: 0 4px 0 var(--violet-deep); }
.ach.on .ach-state { color: var(--violet); }
/* Закрыта до событий из игр: вместо «x / y» — подсказка */
.ach.locked .ach-state { font-weight: 600; line-height: 1.3; }

/* Витрина ачивок: +XP, прогресс к порогу, итог */
.ach-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.ach-xp {
  flex: 0 0 auto;
  font: 800 10.5px "Inter", sans-serif;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--hint);
  background: var(--surface-2);
}
.ach.on .ach-xp { color: #3a2500; background: var(--gold); }
.ach:not(.on) { background: var(--bg); box-shadow: none; }
.ach:not(.on) .ach-desc { opacity: .85; }
.ach-progress { display: block; height: 6px; margin-top: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ach-progress[hidden] { display: none; }
.ach-progress i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--violet); transition: width .4s ease; }
.row-link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 700 12.5px "Inter", sans-serif;
  color: var(--violet);
}
html[data-theme="dark"] .row-link { color: var(--gold); }
.ach-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.ach-summary-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ach-summary-top b { font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 18px; }
.ach-summary-note { font: 700 12px "Inter", sans-serif; color: var(--gold-deep); }
html[data-theme="dark"] .ach-summary-note { color: var(--gold); }
html[data-theme="dark"] .ach.on .ach-state { color: var(--gold); }

.list { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); }
.list button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 16px;
  font: 600 14.5px "Inter";
  color: var(--ink);
  cursor: pointer;
}
.list button:last-child { border-bottom: 0; }
.list button:active { background: var(--surface-2); }
.list svg { width: 20px; height: 20px; color: var(--violet); flex: 0 0 auto; }
.list .arrow { margin-left: auto; }
.demo-chip {
  margin-left: auto;
  flex: 0 0 auto;
  font: 700 10.5px "Inter", sans-serif;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--hint);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  padding: 3px 8px;
  border-radius: 999px;
}
.demo-chip[hidden] { display: none; }

/* ---------- Лидеры: вкладки «За всё время» / «За неделю» ---------- */

.leaders-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: -2px 0 10px;
  background: var(--surface-2);
  border-radius: 14px;
}
.leaders-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--hint);
  font: 700 13px "Inter", sans-serif;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
}
.leaders-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
#leaders-head[hidden] ~ .leaders-tabs { display: none; }   /* до первой отрисовки блок целиком скрыт */
.leaders-note { margin: 0 4px 10px; font: 500 12px "Inter", sans-serif; color: var(--hint); }
.leaders-note[hidden] { display: none; }
.leaders-empty {
  margin: 0;
  padding: 18px 16px;
  text-align: center;
  font: 600 13.5px "Inter", sans-serif;
  color: var(--hint);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 20px;
}
.leaders-empty[hidden] { display: none; }
/* Скелет загрузки лидерборда */
.leaders-loading {
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.leaders-loading[hidden] { display: none; }
.leaders-loading span {
  display: block;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.leaders-loading span + span { margin-top: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }


.leaders {
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.leaders[hidden] { display: none; }
.leader { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 14px; }
.leader + .leader { margin-top: 2px; }
.leader-rank {
  flex: 0 0 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 14px "Baloo 2", sans-serif;
  color: var(--hint);
  background: var(--surface-2);
}
.leader-av {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 15px "Baloo 2", sans-serif;
  color: #fff;
  background: var(--violet);
}
.leader-av { overflow: hidden; }
.leader-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leader-name { flex: 1; min-width: 0; font: 600 14px "Inter", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-pts { flex: 0 0 auto; font: 800 15px "Baloo 2", sans-serif; }
.leader-pts small { font: 600 11px "Inter", sans-serif; color: var(--hint); margin-left: 3px; }
.leader.top1 .leader-rank { background: var(--gold); color: #3a2500; box-shadow: 0 3px 0 var(--gold-deep); }
.leader.top2 .leader-rank { background: #C9CBD6; color: #2c2f3a; box-shadow: 0 3px 0 #9A9DAB; }
.leader.top3 .leader-rank { background: #E0A071; color: #3d1f08; box-shadow: 0 3px 0 #B0703F; }
.leader.top1 { background: rgba(255, 176, 32, .12); }
.leader.me { background: var(--surface-2); outline: 2px solid var(--violet); outline-offset: -2px; }
.leader.me .leader-name { font-weight: 700; }
.leaders-gap { text-align: center; color: var(--hint); font-size: 13px; line-height: 1; padding: 2px 0 6px; letter-spacing: 2px; }

/* ---------- Профиль → «Друзья» ---------- */

/* Бейдж у строки «Друзья»: число заявок, ждущих ответа. Ноль — скрыт из app.js. */
.friends-badge {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font: 800 12px "Baloo 2", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.friends-badge[hidden] { display: none; }
/* Бейдж виден — он забирает авто-отступ, стрелка идёт за ним. Скрыт (display:none) —
   у стрелки остаётся margin-left:auto из .list .arrow и она у правого края, как у всех. */
.friends-badge:not([hidden]) + .arrow { margin-left: 0; }
.list-friends { margin-bottom: 12px; }
/* Одиночные карточки-строки профиля: «Избранное» под «Друзьями», «Помощь» в самом низу */
.list-solo { margin-bottom: 20px; }
.list-help { margin-top: 12px; }

/* Скелет загрузки — тот же приём, что у лидерборда */
.friends-loading {
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.friends-loading[hidden] { display: none; }
.friends-loading span {
  display: block;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.friends-loading span + span { margin-top: 8px; }

/* comms не ответил — показываем это прямо, с кнопкой «Повторить» */
.friends-error {
  padding: 18px 16px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 20px;
}
.friends-error[hidden] { display: none; }
.friends-error p {
  margin: 0 0 12px;
  font: 600 13.5px "Inter", sans-serif;
  color: var(--hint);
}
.friends-retry {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 20px;
  font: 700 13px "Inter", sans-serif;
  cursor: pointer;
}
.friends-retry:active { background: var(--bg); }

.friends-list {
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.friends-list[hidden] { display: none; }

.friend { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 14px; }
.friend + .friend { margin-top: 2px; }
.friend-av {
  position: relative;
  overflow: hidden;
  flex: 0 0 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 16px "Baloo 2", sans-serif;
  color: #fff;
  background: var(--violet);
}
.friend-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.friend-text { flex: 1; min-width: 0; }
.friend-text b {
  display: block;
  font: 600 14px "Inter", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-text span {
  display: block;
  margin-top: 1px;
  font: 500 12px "Inter", sans-serif;
  color: var(--hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-text .friend-lvl { color: var(--violet); font-weight: 600; }
.friend-acts { display: flex; flex: 0 0 auto; gap: 6px; }
.friend-act {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 13px;
  font: 700 12.5px "Inter", sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.friend-act:active { background: var(--bg); }
.friend-act.primary { background: var(--violet); border-color: var(--violet); color: #fff; }
.friend-act[disabled] { opacity: .55; cursor: default; }

/* «Пригласить друга»: и в пустом экране, и подвалом под списками */
.friends-invite-btn {
  border: 0;
  background: var(--violet);
  color: #fff;
  border-radius: 999px;
  padding: 13px 26px;
  font: 700 14.5px "Inter", sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--violet-deep), 0 10px 20px rgba(109, 40, 217, .28);
}
.friends-invite-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--violet-deep); }
.friends-cta { display: flex; justify-content: center; margin: 22px 0 6px; }
.friends-cta[hidden] { display: none; }
.friends-empty[hidden] { display: none; }
.friends-empty { padding: 48px 24px; }

/* ---------- Таб-бар ---------- */

.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--tabbar-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 6px;
  z-index: 50;
}
.tab {
  flex: 1;
  border: 0;
  background: none;
  cursor: pointer;
  height: 48px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--hint);
  font: 700 11px "Inter";
  transition: background .15s, color .15s;
}
.tab-icon { width: 23px; height: 23px; }
.tab[aria-selected="true"] { background: var(--violet); color: #fff; box-shadow: 0 4px 12px rgba(109, 40, 217, .38); }

/* ---------- Онбординг (подсказки первого запуска) ---------- */

.coach { position: fixed; inset: 0; z-index: 100; }
.coach[hidden] { display: none; }
.coach-hole {
  position: fixed;
  border-radius: 20px;
  box-shadow: 0 0 0 9999px rgba(12, 5, 28, .68);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  pointer-events: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease, border-radius .25s ease;
}
.coach-bubble {
  position: fixed;
  width: min(320px, calc(100vw - 32px));
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px 16px 14px;
  box-shadow: 0 5px 0 var(--lip), var(--shadow);
  transition: top .25s ease, left .25s ease;
  animation: coach-pop .22s ease;
}
@keyframes coach-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.coach-arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  transform: rotate(45deg);
}
.coach-bubble.below .coach-arrow { top: -9px; border-right: 0; border-bottom: 0; }
.coach-bubble.above .coach-arrow { bottom: -9px; border-left: 0; border-top: 0; }
.coach-step { display: block; font: 700 11px "Inter", sans-serif; color: var(--violet); letter-spacing: .4px; margin-bottom: 4px; }
html[data-theme="dark"] .coach-step { color: var(--gold); }
.coach-title { display: block; font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; font-size: 18px; line-height: 1.15; }
.coach-text { margin: 6px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--hint); }
.coach-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coach-skip { border: 0; background: none; color: var(--hint); font: 600 13.5px "Inter", sans-serif; padding: 8px 4px; cursor: pointer; border-radius: 10px; }
.coach-next {
  border: 0;
  background: var(--violet);
  color: #fff;
  font: 800 15px "Baloo 2", sans-serif;
  padding: 8px 18px;
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--violet-deep);
}
.coach-next:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--violet-deep); }

/* ---------- Тост ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 32px));
  background: var(--toast-bg);
  color: var(--toast-fg);
  font: 600 13.5px "Inter", sans-serif;
  padding: 11px 16px;
  border-radius: 14px;
  /* рамка через inset-тень: размер тоста не меняется, в светлой теме она прозрачна */
  box-shadow: inset 0 0 0 1px var(--toast-border), var(--shadow);
  z-index: 120;
  animation: fade .2s ease;
  text-align: center;
}
.toast[hidden] { display: none; }

/* Плашка «Поделиться результатом» — над таб-баром, в стиле тоста */
.result-share {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--toast-bg);
  color: var(--toast-fg);
  font: 600 13.5px "Inter", sans-serif;
  padding: 9px 9px 9px 16px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--toast-border), var(--shadow);
  z-index: 119;                              /* обычный тост — поверх */
  animation: fade .2s ease;
}
.result-share[hidden] { display: none; }
/* Плашка на экране — тост («Новая ачивка» и т.п.) поднимается над ней, а не поверх */
.has-result-share .toast { bottom: calc(var(--tabbar-h) + 14px + 66px + env(safe-area-inset-bottom, 0px)); }
.result-share-text { flex: 1; min-width: 0; }
.result-share-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--gold);
  color: #3a2500;
  font: 800 13px "Inter", sans-serif;
  cursor: pointer;
}

/* ---------- Доступность ---------- */

@media (prefers-reduced-motion: reduce) {
  .screen,
  .screen[data-screen="comms"] { animation: none; }
  .coach-hole, .coach-bubble { transition: none; animation: none; }
  .toast, .result-share, .leaders-loading span, .friends-loading span { animation: none; }
  .level-bar i, .quest-bar i, .ach-progress i { transition: none; }
  .coach-next:active,
  .tile-act:active,
  .featured-act:active,
  .friends-invite-btn:active { transform: none; }
  .featured:active,
  .play:active,
  .tile:active .art,
  .section-card:active {
    transform: none;
    transition: none;
  }
}
/* body.playing ставится из app.js на время игры */
body.playing .topbar,
body.playing .tabbar { display: none; }

body.playing .content { padding: 0; }

.screen-play {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #000;                 /* поля вокруг игры — чёрные, а не в цвет темы */
  z-index: 20;
}

.screen-play[hidden] { display: none; }

/* Узкая полоска с выходом. Держим её КРОМЕ рамки, а не поверх: иначе
   перекрывала бы интерфейс игры, а он у каждой игры свой. */
.play-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 8px;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(0, 0, 0, .88);
  color: #fff;
}

.play-back {
  border: 0;
  border-radius: 9px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.play-back:active { background: rgba(255, 255, 255, .26); }

.play-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Контейнер рамки: сама <iframe> создаётся в hub-bridge.js под каждую игру
   и удаляется при выходе, поэтому размеры заданы контейнеру. */
.play-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  background: #000;
}

.play-stage[hidden] { display: none; }

/* ---------- Заставка загрузки игры ----------
   Раньше на месте игры был просто чёрный прямоугольник: пока внутри рамки едут
   бандл и картинки (у тяжёлых игр это мегабайт с лишним), человек видел пустоту
   и решал, что всё зависло. Заставка закрывает ровно это ожидание и снимается
   по сигналу моста. Лежит ПОВЕРХ рамки, во всю область ниже play-bar. */
.play-loader {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(44px + env(safe-area-inset-top, 0px));   /* ровно под play-bar */
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #000;
  animation: play-loader-in .18s ease;
}

.play-loader[hidden] { display: none; }

/* Плитка в цвет игры (accent из games.js) — что-то узнаваемое вместо пустоты. */
.play-loader-tile {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  animation: play-loader-pulse 1.5s ease-in-out infinite;
}

.play-loader-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}

.play-loader-icon[hidden] { display: none; }

.play-loader-name {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  max-width: 76vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Неопределённый прогресс: сколько осталось, мы не знаем (рамка чужого origin
   о себе не рассказывает), поэтому полоска просто бежит. */
.play-loader-bar {
  width: 132px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}

.play-loader-bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: rgba(255, 255, 255, .78);
  animation: play-loader-run 1.15s ease-in-out infinite;
}

@keyframes play-loader-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes play-loader-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes play-loader-run {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* Тем, кто просил уменьшить анимацию, — статичная заставка. */
@media (prefers-reduced-motion: reduce) {
  .play-loader,
  .play-loader-tile,
  .play-loader-bar i { animation: none; }
}

.save-error {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  gap: 16px;
  text-align: center;
  background: var(--surface);
  color: var(--text);
}
.save-error button { padding: 12px 18px; border-radius: 12px; cursor: pointer; }

.play-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.play-error {
  margin: 0;
  padding: 24px 20px;
  color: rgba(255, 255, 255, .75);
  font-size: 15px;
  text-align: center;
}

.play-error[hidden] { display: none; }

/* ---------- Чат во время игры ----------
   FAB поверх рамки открывает оверлей общения (comms-web.js), не выгружая игру.
   Кнопка закрытия оверлея — top-level, поверх слоя чата (#comms-root.c-overlay, z-index 80). */
.play-chat-fab {
  position: absolute;
  right: 14px;
  bottom: calc(16px + var(--c-safe-bottom, env(safe-area-inset-bottom, 0px)));
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  cursor: pointer;
  z-index: 15;                       /* над рамкой и заставкой, под оверлеем чата */
}

.play-chat-fab[hidden] { display: none; }
.play-chat-fab:active { transform: scale(.94); }
.play-chat-fab svg { width: 24px; height: 24px; }

/* Бейдж непрочитанных на FAB. */
.play-chat-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger, #e0463a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}

.play-chat-badge[hidden] { display: none; }

/* Свернуть чат-оверлей и вернуться в игру. */
.play-chat-close {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  color: #fff;
  cursor: pointer;
  z-index: 81;                       /* над слоем чата (#comms-root.c-overlay, z-index 80) */
}

.play-chat-close[hidden] { display: none; }
.play-chat-close:active { background: rgba(0, 0, 0, .55); }
.play-chat-close svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .play-chat-fab:active { transform: none; }
}

/* ---------- Обложки игр (assets/voice-covers): плитки каталога и «Хит недели» ---------- */
.tile .art.has-cover { aspect-ratio: 4 / 3; background: #1a1035; }
.tile .art.has-cover::after { background: linear-gradient(to top, rgba(10, 6, 26, .35), transparent 45%); }
.rail .tile .art.has-cover { aspect-ratio: 4 / 3; }
.featured.has-cover { background: #1a1035; }
.featured .featured-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.featured.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(14, 6, 36, .88) 0%, rgba(14, 6, 36, .55) 45%, rgba(14, 6, 36, 0) 75%),
              linear-gradient(to top, rgba(14, 6, 36, .55), transparent 50%);
}
.featured.has-cover .glyph, .featured.has-cover .gloss, .featured.has-cover .spark { display: none; }
.featured.has-cover .meta, .featured.has-cover .featured-actions { z-index: 1; }
.featured.has-cover h2 { text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }

/* Плитки с обложкой — как карточки «Игр с голосом» («Неоновая подпись»): обложка на всю карточку,
   название по ней фирменным шрифтом заглавными с розовым свечением, тёмная карточка с неоновой рамкой. */
.tile.cover-tile { position: relative; }
.tile.cover-tile .art.has-cover {
  aspect-ratio: 6 / 5;
  border-radius: 20px;
  background: #151027;
  border: 1px solid rgba(255, 79, 163, .35);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .2), 0 10px 26px rgba(109, 59, 245, .25);
}
.tile.cover-tile:active .art.has-cover { box-shadow: 0 0 0 1px rgba(139, 92, 246, .2), 0 4px 12px rgba(109, 59, 245, .22); }
.tile.cover-tile .art.has-cover::after { background: linear-gradient(to top, rgba(8, 5, 20, .9) 0%, rgba(8, 5, 20, .15) 55%, rgba(8, 5, 20, 0) 100%); z-index: 1; }
.tile.cover-tile .name,
html[data-skin="loud"] .tile.cover-tile .name {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  z-index: 2;
  margin: 0;
  text-align: left;
  font-family: "Unbounded", "Arial Black", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(11.5px, 3.1vw, 15px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 79, 163, .75), 0 0 2px rgba(255, 79, 163, .9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}
.rail .tile.cover-tile .name { font-size: 11px; left: 9px; right: 9px; bottom: 9px; }
.tile.cover-tile .soon-chip { top: 10px; bottom: auto; z-index: 2; }
.tile.cover-tile .bar { z-index: 2; bottom: auto; top: 10px; left: 44px; right: 44px; }
.tile.cover-tile.is-soon .name { color: #d9d0ff; }
/* кнопки «Поделиться» и звёздочка поверх обложки — тёмное стекло, как значок голоса */
.tile-box .tile.cover-tile ~ .tile-act { background: rgba(8, 5, 20, .6); color: #fff; box-shadow: none; }

/* ---------- Название игры — утверждённый стиль «Неоновая подпись» везде, где показывается игра ----------
   Unbounded, заглавные, белый с розовым свечением (как на карточках «Игр с голосом» и плитках каталога). */
#featured-title,
.play-title,
.play-loader-name {
  font-family: "Unbounded", "Arial Black", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 79, 163, .75), 0 0 2px rgba(255, 79, 163, .9);
}
#featured-title { font-size: 22px; line-height: 1.12; }
.play-title { font-size: 13px; }
.play-loader-name { font-size: 15px; }
/* На светлой карточке («Недавние» в профиле) белый не читается — тот же шрифт и свечение, но тёмный текст */
.recent-text b {
  font-family: "Unbounded", "Arial Black", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink, #1c1630);
  text-shadow: 0 0 8px rgba(255, 79, 163, .35);
}
html[data-theme="dark"] .recent-text b { color: #fff; text-shadow: 0 0 10px rgba(255, 79, 163, .75), 0 0 2px rgba(255, 79, 163, .9); }