/* Приложение всегда тёмное (стиль Steam): цвета темы Telegram не берём — в светлой теме Telegram
   отдаёт чёрный текст, и на тёмном фоне он не читается (Android, 30.10.2026) */
:root {
  color-scheme: dark;
  --bg: #0e141b;
  --text: #f2f2f5;
  --muted: #9a9ca5;
  --accent: #8b5cf6;
  --accent-text: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #0e141b; color: var(--text); -webkit-tap-highlight-color: transparent; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.page-msg { max-width: 480px; margin: 0 auto; padding: 32px 16px; text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
button { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; margin: 8px 0; }

/* ---------- панель оценки 1–10 (внизу экрана, поверх профиля) ---------- */
.rate {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 6px 10px calc(8px + var(--safe-b));
  background: rgba(10, 13, 18, .88); border-top: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.rate > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.rate__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 2px; }
.rate__title { font-size: 14px; color: #fff; white-space: nowrap; }
.rate__skip { all: unset; padding: 6px 2px 6px 10px; font-size: 13px; color: #8e96a3; cursor: pointer; }
.rate__skip:active { color: #fff; }
.rate__scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.rate__btn {
  margin: 0; padding: 0; height: 42px; border-radius: 10px; font-size: 15px; font-weight: 700;
  background: rgba(255, 255, 255, .07); color: #e9eef3; border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .08s ease-out, background .15s;
}
.rate__btn:active { transform: scale(.88); }
.rate__btn.is-picked { background: #8b5cf6; border-color: #a78bfa; color: #fff; animation: pick .28s ease-out; }
@keyframes pick { 0% { transform: scale(.88); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* Под панелью не должно прятаться содержимое профиля */
.with-rate .profile__body { padding-bottom: 110px; }
/* Смена профиля в ленте: старый уезжает влево, новый появляется */
.feed-out { animation: feed-out .18s ease-in forwards; }
.feed-in { animation: feed-in .22s ease-out; }
@keyframes feed-out { to { transform: translateX(-24%); opacity: 0; } }
@keyframes feed-in { from { transform: translateX(16%); opacity: 0; } }
.shot .rate { right: auto; width: 390px; }  /* снимок экрана: панель в ширину «телефона» */

/* ---------- нижнее меню (⋯ профиля, жалоба) ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5); display: flex; align-items: flex-end; animation: fade .15s; }
.sheet__panel {
  width: 100%; max-width: 560px; margin: 0 auto; padding: 10px 12px calc(12px + var(--safe-b));
  background: #161b22; border-radius: 18px 18px 0 0; animation: rise .18s ease-out;
}
.sheet__title { padding: 6px 4px 10px; font-size: 13px; color: #8e96a3; text-align: center; overflow-wrap: anywhere; }
.sheet__btn { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 14px; margin-bottom: 6px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #e9eef3; font-size: 15px; cursor: pointer; }
.sheet__btn:active { background: rgba(255, 255, 255, .12); }
.sheet__btn--cancel { text-align: center; font-weight: 600; margin-top: 4px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }

/* ---------- нижнее меню приложения ---------- */
:root {
  --nav-h: 58px;
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --safe-t: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
}
#screen { padding-top: var(--safe-t); padding-bottom: calc(var(--nav-h) + var(--safe-b)); min-height: var(--tg-viewport-stable-height, 100vh); }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: rgba(12, 15, 20, .96); border-top: 1px solid rgba(255, 255, 255, .07);
}
.nav__btn {
  all: unset; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; color: #7d8590; cursor: pointer;
}
.nav__btn span { font-size: 20px; line-height: 1; filter: grayscale(1); opacity: .7; }
.nav__btn.is-on { color: #fff; }
.nav__btn.is-on span { filter: none; opacity: 1; }
/* Панель оценки — над нижним меню */
#screen .rate { bottom: calc(var(--nav-h) + var(--safe-b)); padding-bottom: 8px; }
.rate__avg { font-weight: 400; color: #c4b5fd; }
.rate[hidden] { display: none; }

/* ---------- общие элементы экранов ---------- */
.screen { max-width: 560px; margin: 0 auto; padding: 16px 12px; }
.screen__title { margin: 4px 2px 12px; font-size: 20px; }
.big-emoji { font-size: 40px; margin-bottom: 6px; }
.page-msg button { max-width: 320px; }
.ghost-btn { background: rgba(255, 255, 255, .07); color: #e9eef3; border: 1px solid rgba(255, 255, 255, .08); }
.back-btn {
  all: unset; position: fixed; top: 10px; left: 10px; z-index: 25; padding: 7px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Переключатель периода */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.tabs__btn { all: unset; text-align: center; padding: 8px 2px; border-radius: 9px; font-size: 13px; color: #9aa3ad; cursor: pointer; }
.tabs__btn.is-on { background: rgba(139, 92, 246, .9); color: #fff; font-weight: 600; }

/* Строки топа */
.top-list { display: grid; gap: 6px; }
.top-row {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: 34px 50px 1fr auto; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); cursor: pointer;
}
.top-row:active { background: rgba(255, 255, 255, .09); }
.top-row--me { background: rgba(139, 92, 246, .18); border: 1px solid rgba(167, 139, 250, .4); }
.top-row__place { font-size: 20px; text-align: center; font-weight: 800; color: #c9d1d9; }
.top-row__avatar { position: relative; width: 44px; height: 44px; margin: 3px; }
.top-row__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.top-row__avatar .top-row__frame { position: absolute; width: 122%; height: 122%; left: -11%; top: -11%; border-radius: 0; }
.top-row__who { min-width: 0; display: flex; flex-direction: column; }
.top-row__who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-row__you { font-size: 11px; color: #c4b5fd; }
.top-row__score { display: flex; flex-direction: column; align-items: flex-end; }
.top-row__score small { font-size: 11px; color: #8e96a3; }

/* Экран «Профиль»: мой рейтинг и настройки */
.screen--me { padding-bottom: 0; }
.my-rating {
  display: flex; align-items: center; gap: 16px; padding: 16px; margin-bottom: 10px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .32), rgba(139, 92, 246, .08)); border: 1px solid rgba(167, 139, 250, .3);
}
.my-rating--off { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); font-size: 14px; }
.my-rating__big { font-size: 40px; font-weight: 800; line-height: 1; white-space: nowrap; }
.my-rating__big small { font-size: 16px; font-weight: 600; color: #a8a0c4; }
.settings { padding: 4px 2px; }
.toggle { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); cursor: pointer; }
.toggle span { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.toggle small { font-size: 12px; color: #8e96a3; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle i { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: #3a4048; transition: background .2s; }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle input:checked + i { background: #8b5cf6; }
.toggle input:checked + i::after { transform: translateX(18px); }
.toggle input:disabled + i { opacity: .4; }
#my-profile .profile { min-height: 0; }

/* ---------- гость (без Steam), пришёл по ссылке ---------- */
.guest-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: #161b22; border: 1px solid rgba(167, 139, 250, .35); text-align: left; }
.guest-card span { font-size: 13px; color: #8e96a3; }
.guest-card button { margin: 6px 0 0; }
.guest-card--fixed { position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 20; max-width: 540px; margin: 0 auto; box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); }
.with-guest .profile__body { padding-bottom: 190px; }
.share-btn { background: #8b5cf6; }

/* Плашка-уведомление сверху */
.toast {
  position: fixed; left: 12px; right: 12px; top: calc(10px + var(--safe-t)); z-index: 60; max-width: 540px; margin: 0 auto;
  padding: 12px 14px; border-radius: 14px; background: #2a1f4d; border: 1px solid rgba(167, 139, 250, .5); color: #fff;
  font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: rise .2s ease-out; transition: opacity .35s, transform .35s;
}
.toast--out { opacity: 0; transform: translateY(-10px); }

/* Долгое нажатие на кнопки и подписи не выделяет текст (на телефоне всплывало «Копировать»); текст витрин выделять можно */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.text, .text * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }