/* ═════════ Касса, предметы в профиле, топ и настройки — Чикаго, 1931 (решение Сардора 07.10) ═════════
   Тёплая насыщенная палитра вместо серого: латунь (рамки, ободки, плашки), бордо (табличка кассы, выбранное),
   янтарь (таймер, мелкие акценты), изумруд (бонус, ×2), золото-серебро-бронза — подиум. Красный --red — только
   главное действие (цена «Лучшего выбора»). Плакаты топа — старая бумага, одинаковая в обеих темах (как фото).
   Движение — transform и opacity, кривые --ease-*; «меньше движения» — всё стоит (низ файла). Без градиентов. */
:root {
  --brass: #C9A45C;          /* латунь: рамки, ободки, значки */
  --brass-hi: #E6C783;       /* латунь на свету: числа и надписи на тёмном */
  --brass-lo: #5E4520;       /* тень латуни: внешний край ободка */
  --amber: #E8B565;          /* янтарь: таймер, мелкие акценты */
  --emerald: #1F6A4F;        /* изумруд: бонус, ×2 */
  --emerald-text: #F2EAD8;
  --k-panel: #170D0C;        /* лист кассы: тёплая чернота под бархат фото */
  --k-tile: #24130F;         /* плитка пакета */
  --k-line: rgba(201, 164, 92, .3);
  --k-muted: #C9B497;
  --k-plate: #4E120D;        /* бордовая табличка (касса, выбранный язык) */
  --k-plate-text: #F6E8D2;
  --k-plate-hi: #E6C783;
  --k-plate-glass: rgba(46, 10, 7, .9); /* табличка поверх фото кассы */
  --k-plate-rim: rgba(230, 199, 131, .6);
  --k-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7);
  --gold: #D9B25A; --silver: #C8C4BA; --bronze: #B97A45;
  --medal-ink: #23160C;      /* цифра на медали */
  --paper: #E9DABD;          /* плакат «Разыскивается» */
  --paper-ink: #2B1B10;
  --paper-muted: #6A4F33;
  --paper-line: rgba(43, 27, 16, .28);
  --wall: #26100D;           /* стена, на которой висят плакаты топа: тёмное бордо */
  --wall-line: rgba(201, 164, 92, .45);
  --poster-shadow: 0 12px 22px -10px rgba(0, 0, 0, .7);
  --pin-shadow: 0 2px 3px rgba(0, 0, 0, .35);
  --brass-ink: #23160C;      /* надпись на латуни (выбранная вкладка) */
  --wall-honor: #0F2A21;     /* стена «Хороших»: тёмный изумруд, как сукно ратуши */
  --plate-brass: #B8913F;    /* латунная табличка «Почётный гражданин» — на бумаге плаката, одна в обеих темах */
  --plate-brass-ink: #23160C;
}
:root[data-theme="light"] {
  --brass: #8C6A2A;
  --brass-hi: #6B4E1C;
  --brass-lo: #D9BF8A;
  --amber: #8F5310;
  --emerald: #1F6A4F;
  --k-panel: #F7EDDC;
  --k-tile: #FFF8EB;
  --k-line: rgba(140, 106, 42, .38);
  --k-muted: #6A5443;
  --k-plate: #6E1A12;
  --k-shadow: 0 14px 28px -16px rgba(60, 40, 25, .45);
  --wall: #5C1D15;
  --wall-line: rgba(230, 199, 131, .55);
  --brass-ink: #FFF8EB;
  --wall-honor: #1E4A3A;
}

/* ═════════ лист «Касса» (webapp/topup.js) ═════════ */
/* Лист — тёмный бархатный футляр в тёмной теме и кремовая книга кассы в светлой; класс kassa-sheet ставит
   общий модуль шторок (sheet.js), :has — пока его нет. */
.modal-panel.kassa-sheet, .modal-panel:has(> .tp) { background: var(--k-panel); border-top-color: var(--brass); }
.tp .tp-head { gap: 6px; min-height: 48px; }
.tp .tp-title { font: 600 28px/1.05 var(--font-display); letter-spacing: .02em; color: var(--brass-hi); }
.tp .tp-bal {
  margin-inline-start: auto; gap: 6px; font-size: 13px;
}
.tp .tp-bal > span { height: 30px; padding: 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--k-line); background: var(--k-tile); }
.tp .tp-bal .ic { width: 15px; height: 15px; color: var(--brass); }
.tp .tp-short { color: var(--amber); }
.tp .tp-note { color: var(--k-muted); }
.tp .sec { color: var(--k-muted); }

/* Билет-купон: бордовая полоса с латунной строчкой и вырезами по краям, как у билета в клуб. */
.tp-coupon {
  position: relative; isolation: isolate; display: grid; gap: 10px; margin: 10px 0 14px; padding: 12px 16px;
  background: var(--k-plate); color: var(--k-plate-text); border-radius: 10px;
  /* вырезы по краям, как у билета: маска, а не рисунок */
  -webkit-mask: radial-gradient(circle 8px at 0 50%, transparent 97%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 97%, #000 100%) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 8px at 0 50%, transparent 97%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 97%, #000 100%) right / 51% 100% no-repeat;
}
.tp-coupon.is-two { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
/* Знак # tech фоном купона (памятка Hesh Tech 5а): табличка тёмная в обеих темах — знак тоном её текста. */
.tp-coupon { overflow: clip; }
.tp-coupon .hesh-bg-mark { height: 160%; top: 50%; transform: translateY(-50%); inset-inline-end: -4%; color: var(--k-plate-text); opacity: .06; }
.tp-coupon::before {
  content: ''; position: absolute; inset: 4px; border: 1px dashed var(--k-plate-rim); border-radius: 7px; pointer-events: none;
}
.tp-coupon-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-coupon.is-two .tp-coupon-cell + .tp-coupon-cell { padding-inline-start: 10px; border-inline-start: 1px dashed var(--k-plate-rim); }
.tp-coupon-t { display: grid; gap: 1px; min-width: 0; }
.tp-coupon-t b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.tp-coupon-t small { font: 600 13px/1.2 var(--font-body); color: var(--k-plate-hi); letter-spacing: .02em; }
.tp-off {
  flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 8px; border-radius: 6px;
  background: var(--k-plate-hi); color: var(--medal-ink); font: 600 17px/1 var(--font-display);
}
.tp-off.is-x2 { background: var(--emerald); color: var(--emerald-text); }

/* Сколько бриллиантов: крупно; ×2 — красный штамп «первая покупка»; бонус — изумрудная плашка. */
.tp .tp-amt { display: inline-flex; align-items: center; gap: 6px; }
.tp .tp-amt .ic { width: 20px; height: 20px; color: var(--brass); }
.tp .tp-amt b { font: 600 30px/1 var(--font-display); }
.tp .tp-x2 {
  height: 20px; padding: 0 5px; border-radius: 4px; background: none; color: var(--red-text);
  box-shadow: inset 0 0 0 1.5px var(--red-text); font: 600 13px/1 var(--font-display); transform: rotate(-8deg);
}
.tp .tp-bonus {
  justify-self: start; display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 5px;
  background: var(--emerald); color: var(--emerald-text); font-size: 12px; font-weight: 600;
}
/* Цена в Stars — на плашке: у «Лучшего выбора» красная (главное действие), у остальных — латунная рамка. */
.tp-pay { display: flex; }
.tp .tp-price {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--brass); font-size: 16px; white-space: nowrap;
}
.tp .tp-price .ic { width: 15px; height: 15px; color: var(--brass); margin: 0; }
.tp .tp-price b { font: 600 18px/1 var(--font-display); }
.tp .tp-price s { color: var(--k-muted); font-size: 13px; }

/* Картинка пакета: фото предмета на бархате в латунной рамке; нет фото — бриллиант на бордо. */
.tp-art-pic, .tp-art-pic img { display: block; width: 100%; height: 100%; }
.tp-art-pic img { object-fit: cover; }
.tp-art-ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--k-plate); color: var(--k-plate-hi); }
.tp-art-ph .ic { width: 40%; height: 40%; stroke-width: 1.25; }

/* «Лучший выбор» — ведёт: крупная карточка, фото слева, справа количество и красная цена. */
.tp-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 14px; align-items: center;
  width: 100%; padding: 10px; border-radius: 16px; background: var(--k-tile); text-align: start;
  box-shadow: inset 0 0 0 1.5px var(--brass), var(--k-shadow);
  transition: transform 140ms var(--ease-press);
}
.tp-hero:active { transform: scale(.985); }
.tp-hero-art { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 0 0 1px var(--k-line); }
.tp-hero-body { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.tp-ribbon {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 4px;
  background: var(--k-plate-hi); color: var(--medal-ink); font: 600 13px/1 var(--font-display); letter-spacing: .03em;
}
.tp-ribbon .ic { width: 13px; height: 13px; }
.tp-hero .tp-amt b { font-size: 40px; }
.tp-hero .tp-amt .ic { width: 24px; height: 24px; }
.tp-hero .tp-price { background: var(--red); color: var(--on-red); box-shadow: none; height: 42px; }
.tp-hero .tp-price .ic { color: var(--on-red); }
.tp-hero .tp-price s { color: var(--on-red); opacity: .72; }

.tp .tp-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.tp .tp-pack {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 8px 8px 12px;
  border-radius: 14px; background: var(--k-tile); box-shadow: inset 0 0 0 1px var(--k-line); text-align: start;
  transition: transform 140ms var(--ease-press);
}
.tp .tp-pack:active { transform: scale(.97); }
.tp-pack-art { position: relative; justify-self: stretch; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 9px; }
.tp .tp-pack .tp-amt, .tp .tp-pack .tp-bonus, .tp .tp-pack .tp-pay { margin-inline: 4px; }
.tp-pack-art { align-self: stretch; }
.tp .tp-pack .tp-pay { margin-top: auto; padding-top: 2px; }
.tp .tp-pack .tp-price { height: 34px; padding: 0 12px; }
.tp-pack.is-most { box-shadow: inset 0 0 0 1.5px var(--brass); }
.tp-flag {
  position: absolute; top: 8px; inset-inline-start: 8px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center;
  border-radius: 4px; background: var(--emerald); color: var(--emerald-text); font: 600 12px/1 var(--font-display); letter-spacing: .03em;
}

/* Обмен: три латунных жетона. */
.tp .tp-exb { border: 0; box-shadow: inset 0 0 0 1px var(--k-line); background: var(--k-tile); border-radius: 12px; }
.tp .tp-exb .ic { color: var(--brass); }
.tp .tp-exb:active { background: var(--k-tile); }
.tp .tp-rate .ic { color: var(--brass); }
.tp .tp-daily { border-radius: 14px; background: var(--k-tile); box-shadow: inset 0 0 0 1px var(--k-line); }
.tp .tp-daily .tile { background: var(--k-plate); color: var(--k-plate-hi); }
.tp .tp-provs { background: var(--k-tile); }
.tp-sum, .tp-wait { align-items: center; }
.tp-sum-art { position: relative; flex: none; display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--k-line); }

/* Праздник после оплаты: поднос с бриллиантами, бриллианты сыплются, «+N» растёт. */
.tp-paid { display: grid; justify-items: center; gap: 10px; padding: 4px 0 16px; text-align: center; }
.tp-paid-art {
  position: relative; isolation: isolate; overflow: hidden; width: min(100%, 300px); aspect-ratio: 1; border-radius: 16px;
  background: var(--k-plate); box-shadow: inset 0 0 0 1.5px var(--brass), var(--k-shadow);
  animation: tp-paid-in 420ms var(--ease-enter) backwards;
}
.tp-paid-pic, .tp-paid-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tp-paid-pic img { object-fit: cover; }
.tp-rain { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tp-rain i {
  position: absolute; top: -12%; left: calc(8% + var(--i) * 11.5%); width: 22px; height: 22px; color: var(--brass-hi); opacity: 0;
  animation: tp-rain 1500ms var(--ease-move) calc(var(--i) * 110ms) 2 both;
}
.tp-rain i:nth-child(even) { width: 16px; height: 16px; animation-duration: 1800ms; }
.tp-rain .ic { width: 100%; height: 100%; }
@keyframes tp-rain {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(380%) rotate(160deg); }
}
.tp-paid.is-wait .tp-rain { display: none; }
@keyframes tp-paid-in { from { opacity: 0; transform: scale(.94); } }
.tp-paid-n { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.tp-paid-n .ic { width: 30px; height: 30px; color: var(--brass); }
.tp-paid-n b { font: 600 48px/1 var(--font-display); color: var(--brass-hi); }
.tp-paid.is-wait .tp-paid-n { font-size: 20px; }
.tp-paid-t { margin: 0; color: var(--k-muted); font-size: 15px; }
.tp-paid .tp-bal { margin: 0; }

/* ═════════ вход «Касса» в профиле ═════════ */
.kassa-entry {
  position: relative; isolation: isolate; display: block; width: 100%; margin-top: 12px; overflow: hidden;
  aspect-ratio: 16 / 8; min-height: 150px; border-radius: 16px; background: var(--k-plate); text-align: start;
  box-shadow: inset 0 0 0 1.5px var(--brass); transition: transform 140ms var(--ease-press);
}
.kassa-entry:active { transform: scale(.985); }
.ke-art { position: absolute; inset: 0; z-index: -1; }
.ke-pic, .ke-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ke-pic img { object-fit: cover; object-position: 60% 50%; }
.ke-plate {
  position: absolute; left: 12px; bottom: 12px; display: grid; gap: 2px; max-width: calc(100% - 24px); padding: 10px 14px 11px;
  border-radius: 8px; background: var(--k-plate-glass); color: var(--k-plate-text); box-shadow: inset 0 0 0 1px var(--k-plate-rim);
}
:root[dir="rtl"] .ke-plate { left: auto; right: 12px; }
.ke-title { font: 600 26px/1 var(--font-display); letter-spacing: .03em; color: var(--k-plate-hi); }
.ke-sub { font-size: 13px; color: var(--k-plate-text); }
.ke-tags { position: absolute; top: 12px; inset-inline-end: 12px; display: flex; gap: 6px; }
.ke-go {
  position: absolute; bottom: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--k-plate-hi); color: var(--medal-ink);
}

/* ═════════ кошелёк и предметы в профиле ═════════ */
.wallet-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wtile { display: grid; gap: 6px; padding: 12px 12px 14px; align-items: start; }
.wtile-top { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 13px; }
.wtile-top > span:not(.tp-plus) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtile-top .ic { width: 20px; height: 20px; color: var(--brass); flex: none; }
.wtile .tp-plus { margin-inline-start: auto; }
.wtile > b { display: block; font: 600 26px/1.05 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.inv-list .inv { display: grid; grid-template-columns: 40px minmax(0, 1fr) 48px auto; align-items: center; gap: 12px; min-height: 64px; }
.inv-tile { color: var(--brass); background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--k-line); }
.inv-sw { display: flex; justify-content: center; }
.inv-buy {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 78px; height: 44px; padding: 0 12px;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--brass); font: 600 16px/1 var(--font-display); color: var(--text);
  transition: transform 120ms var(--ease-press), background-color 150ms ease;
}
.inv-buy .ic { width: 16px; height: 16px; color: var(--brass); }
.inv-buy:active { transform: scale(.94); background: var(--raise-2); }
.inv-buy:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
/* «Куплено» на миг поверх цены: латунный кружок с галочкой. */
.inv-ok {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--brass); color: var(--medal-ink);
  animation: inv-ok 900ms var(--ease-enter) both;
}
.inv-ok .ic { width: 18px; height: 18px; stroke-width: 2.5; color: inherit; }
@keyframes inv-ok { 0% { opacity: 0; transform: scale(.7); } 18% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }

/* Значок «Настройки» в карточке профиля: флаг языка эмалевым жетоном, код и шестерёнка. */
.me-set {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 12px 0 8px; border-radius: var(--r-pill); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--k-line); background: var(--card); transition: transform 120ms var(--ease-press);
}
.me-set:active { transform: scale(.96); }
.me-set .lng-flag { width: 24px; height: 24px; }
.me-set-code { font: 600 15px/1 var(--font-display); letter-spacing: .06em; }
.me-set .ic { width: 18px; height: 18px; color: var(--brass); }

/* ═════════ «Настройки»: языки эмалевыми жетонами ═════════ */
.set-sheet .sec-row:first-of-type { margin-top: 14px; }
/* Подпись бренда # tech внизу «Настроек» (11.10): мелко, приглушённо, по центру; нажатие — hesh.uz. */
.hesh-badge {
  display: flex; align-items: center; justify-content: center; gap: 5px; width: fit-content; min-height: 44px;
  margin: 10px auto 0; padding: 0 12px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: 500 12px/1 var(--font-body); opacity: .7; transition: opacity 150ms var(--ease-out);
}
/* Знак с «tech» — один рисунок (контуры Unbounded 600, образец Hesh Tech «Подпись для систем»): высота ≈ 1,05 кегля. */
.hesh-badge-brand { display: inline-flex; align-items: center; }
.hesh-badge-brand svg { flex: none; height: 1.05em; width: auto; }
.hesh-badge .hesh-gold { fill: var(--hesh-gold); }
.hesh-badge:hover, .hesh-badge:focus-visible { opacity: 1; }
.hesh-badge:active { opacity: .5; }
.lngs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 359px) { .lngs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lng {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 5px; align-items: center;
  min-height: 62px; padding: 8px 9px; border-radius: 12px; background: var(--raise-2); color: var(--text); text-align: start;
  box-shadow: inset 0 0 0 1px var(--line); touch-action: manipulation;
  transition: background-color 150ms ease, transform 120ms var(--ease-press);
}
.lng:active { transform: scale(.96); }
.lng-flag {
  display: block; width: 28px; height: 28px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--brass), 0 0 0 3px var(--brass-lo);
}
.lng .lng-flag { margin: 3px 0 0 3px; }
:root[dir="rtl"] .lng .lng-flag { margin: 3px 3px 0 0; }
.lng-flag .flag { display: block; width: 100%; height: 100%; }
.lng-code { font: 600 17px/1 var(--font-display); letter-spacing: .06em; }
.lng-name { grid-column: 1 / -1; font-size: 12px; line-height: 1.2; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lng[aria-pressed="true"] { background: var(--k-plate); color: var(--k-plate-text); box-shadow: inset 0 0 0 1.5px var(--k-plate-hi); }
.lng[aria-pressed="true"] .lng-code { color: var(--k-plate-hi); }
.lng[aria-pressed="true"] .lng-name { color: var(--k-plate-text); }
.lng[aria-busy="true"] { opacity: .7; }

/* ═════════ топ: переключатели (11.10) — «Онлайн / Вживую» и «Все / Город / Преступный мир» ═════════ */
/* Сардор 11.10: вместо двух огромных полос — два компактных переключателя одной высоты, по ширине подписей.
   Широко — в один ряд, узко — друг под другом, по центру. Выбранное — красное (красный — только активное состояние),
   остальное — тихий текст на тёмной плашке с латунной волосяной каймой. Справа налево (ar, fa) ряд зеркалится сам. */
.top-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.top-seg {
  display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; border-radius: var(--r-pill);
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--k-line);
}
/* Видно 34 px, а пальцу — 44: невидимое поле по 5 px сверху и снизу (между рядами остаётся зазор). */
.top-seg button::after { content: ''; position: absolute; inset: -5px 0; }
.top-seg button {
  position: relative; flex: 0 1 auto; min-width: 0; height: 34px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; line-height: 1.1; white-space: nowrap; color: var(--muted); touch-action: manipulation;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease-press);
}
@media (hover: hover) and (pointer: fine) {
  .top-seg button[aria-pressed="false"]:hover { background: var(--raise-2); color: var(--text); }
}
.top-seg button:active { transform: scale(.96); }
.top-seg button[aria-pressed="true"] { background: var(--red); color: var(--on-red); }
.top-seg button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* Очень узко (320 px): поля и шрифт чуть меньше — самые длинные подписи (ky, kk, ru) встают в ряд целиком. */
@media (max-width: 359px) {
  .top-seg button { padding: 0 11px; font-size: 13px; }
}
/* «Онлайн / Вживую» — слова-вкладки в строке заголовка вместо отдельной плашки (Сардор 11.10: «много места занимает»).
   Выбранное — цвет текста и красная черта снизу (активное состояние), второе — приглушённое; заголовок «Лучшие игроки»
   остаётся для экранного чтения. Черта — только transform. */
.top-title { gap: 6px; margin-bottom: 12px; }
.top-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.top-modes { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
.top-modes button {
  position: relative; padding: 2px 0 9px; font: 600 30px/1.05 var(--font-display); letter-spacing: -.005em;
  color: var(--muted); white-space: nowrap; touch-action: manipulation; transition: color 150ms ease;
}
.top-modes button::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--red);
  transform: scaleX(0); transition: transform 200ms var(--ease-out);
}
.top-modes button[aria-pressed="true"] { color: var(--text); }
.top-modes button[aria-pressed="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .top-modes button[aria-pressed="false"]:hover { color: var(--text); }
}
.top-modes button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 359px) {
  .top-modes { gap: 14px; }
  .top-modes button { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .top-modes button, .top-modes button::after { transition: none; } }
.top-sub { margin: -4px 0 12px; color: var(--k-muted); font-size: 13px; line-height: 1.35; text-align: center; }
.top-body { transition: opacity 160ms ease; }
.top-body.is-busy { opacity: .5; }

/* лист ведущего: пойдёт ли партия в топ «Вживую» — одной строкой, подробности в «i» (app.js → sheetTopLine) */
.sheet-top {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 4px 4px 4px 12px; min-height: 44px; border-radius: 12px;
  background: var(--raise); color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.3;
}
.sheet-top > span { flex: 1; min-width: 0; }
.sheet-top > .ic { flex: none; }
.sheet-top.is-ok { color: var(--text); box-shadow: inset 0 0 0 1px var(--k-line); }
.sheet-top.is-ok > .ic { color: var(--brass); }

/* ═════════ «Версия мира» (только владелец; «Настройки» и «Тест»): три жетона тем же языком, что и языки ═════════ */
.wlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wld {
  display: grid; justify-items: start; align-content: start; row-gap: 4px; min-height: 92px; padding: 10px; border-radius: 12px;
  background: var(--raise-2); color: var(--text); text-align: start; box-shadow: inset 0 0 0 1px var(--line); touch-action: manipulation;
  transition: background-color 150ms ease, transform 120ms var(--ease-press);
}
.wld:active { transform: scale(.96); }
.wld:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.wld-ic {
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; color: var(--brass);
  box-shadow: inset 0 0 0 1.5px var(--brass);
}
.wld-ic .ic { width: 17px; height: 17px; }
.wld-name { font: 600 16px/1.1 var(--font-display); letter-spacing: .02em; }
.wld-sub { font-size: 12px; line-height: 1.25; color: var(--muted); }
.wld[aria-pressed="true"] { background: var(--k-plate); color: var(--k-plate-text); box-shadow: inset 0 0 0 1.5px var(--k-plate-hi); }
.wld[aria-pressed="true"] .wld-ic { color: var(--k-plate-hi); box-shadow: inset 0 0 0 1.5px var(--k-plate-hi); }
.wld[aria-pressed="true"] .wld-sub { color: var(--k-plate-text); }
/* «Только вы» справа от заголовка (11.10): видно сразу, что переключатель — владельца, а не настройка для всех */
.wld-only { background: transparent; color: var(--brass); box-shadow: inset 0 0 0 1px var(--k-line); white-space: nowrap; }
/* Компактно (вверху «Теста», «Разработчику» в профиле): без второй строки, ниже */
.wlds.is-compact .wld { min-height: 0; padding: 8px 10px 10px; row-gap: 2px; }
.wlds.is-compact .wld-ic { width: 26px; height: 26px; margin-bottom: 2px; }
.wlds.is-compact .wld-ic .ic { width: 15px; height: 15px; }
.wlds.is-compact .wld-name { font-size: 15px; }
/* «Карта ночью» (только владелец, рядом с «Версией мира»): длинные подписи (de, uz, 320 px) переносятся, а не вылезают */
.seg.seg-wrap { border-radius: 20px; }
.seg.seg-wrap button { height: auto; min-height: 36px; padding: 6px; border-radius: 16px; line-height: 1.15; text-wrap: balance; }
/* «Тест»: версия мира сразу под заголовком */
.sb-world { margin: 0 0 16px; }
.sb-world .sec-row { margin-top: 4px; }

/* ═════════ топ: подиум плакатов «Разыскивается» ═════════ */
.podium {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr);
  grid-template-areas: 'p2 p1 p3'; align-items: end; gap: 8px; padding: 46px 10px 26px; margin: 0 0 16px;
  border-radius: 16px; background: var(--wall); box-shadow: inset 0 0 0 1px var(--wall-line);
}
.podium.n1 { grid-template-columns: minmax(0, .6fr); grid-template-areas: 'p1'; justify-content: center; }
.podium.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); grid-template-areas: 'p2 p1'; }
/* латунный карниз под плакатами */
.podium-ledge { position: absolute; z-index: -1; left: 0; right: 0; bottom: 12px; height: 3px; background: var(--brass); opacity: .75; pointer-events: none; }
.wanted {
  --medal: var(--bronze); --r: 2.2deg;
  position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 14px 8px 12px;
  background: var(--paper); color: var(--paper-ink); border-radius: 3px; text-align: center;
  box-shadow: inset 0 0 0 1px var(--paper-line), var(--poster-shadow);
  transform: rotate(var(--r));
}
.wanted.is-1 { --medal: var(--gold); --r: 0deg; grid-area: p1; padding: 18px 10px 14px; margin-bottom: 14px; }
.wanted.is-2 { --medal: var(--silver); --r: -2.4deg; grid-area: p2; }
.wanted.is-3 { grid-area: p3; }
/* латунная кнопка, на которую плакат приколот */
.wanted-pin {
  position: absolute; top: 5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 1.5px var(--brass-lo), var(--pin-shadow);
}
.wanted-crown { position: absolute; top: -34px; left: 50%; width: 34px; height: 34px; margin-left: -17px; color: var(--gold); }
.wanted-crown .ic { width: 100%; height: 100%; stroke-width: 1.6; }
.wanted-head {
  width: 100%; padding: 4px 0 3px; border-block: 1.5px double var(--paper-ink);
  font: 600 11px/1 var(--font-display); letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wanted.is-1 .wanted-head { font-size: 13px; }
/* боковые плакаты уже: разрядка меньше, чтобы «Разыскивается» влезало целиком, без многоточия (375 px) */
.wanted:not(.is-1) .wanted-head { letter-spacing: .03em; }
.wanted-ph {
  position: relative; display: block; width: 100%; aspect-ratio: 1; margin-top: 4px; overflow: hidden; border-radius: 2px;
  background: var(--paper-ink); box-shadow: 0 0 0 3px var(--medal);
}
.wanted-ph > img, .wanted-ph .top-ph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wanted-ph .ph-pic img { object-position: 50% 26% !important; }
.wanted-ph .ph-pic img, .wanted-ph > img { filter: sepia(.18) saturate(1.08); }
.wanted-ph .ch { width: 100%; height: 100%; }
.wanted-ph .top-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 600 34px/1 var(--font-display); color: var(--paper); }
.wanted-no {
  position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--medal); color: var(--medal-ink); font: 600 16px/1 var(--font-display); box-shadow: 0 0 0 1.5px var(--paper);
}
:root[dir="rtl"] .wanted-no { right: auto; left: 4px; }
.wanted.is-1 .wanted-no { width: 32px; height: 32px; font-size: 20px; }
.wanted-name {
  max-width: 100%; margin-top: 6px; font: 600 15px/1.1 var(--font-display); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wanted.is-1 .wanted-name { font-size: 19px; }
.wanted-rk { font-size: 11px; color: var(--paper-muted); line-height: 1.2; }
.wanted-reward { margin-top: 2px; padding: 3px 8px; border-radius: 3px; background: var(--paper-ink); color: var(--paper); font-size: 12px; font-weight: 600; white-space: nowrap; }
.wanted.is-1 .wanted-reward { background: var(--k-plate); color: var(--k-plate-hi); font-size: 13px; }
.wanted-me {
  position: absolute; top: 34%; inset-inline-start: -6px; padding: 2px 8px; border-radius: 3px; transform: rotate(-12deg);
  background: var(--paper); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); font: 600 12px/1.2 var(--font-display);
}
/* «Хорошие» (08.10): стена — изумрудное сукно ратуши, заголовок плаката — латунная табличка «Почётный гражданин». */
.podium.is-honor { background: var(--wall-honor); }
.wanted.is-honor .wanted-head {
  padding: 4px 4px 3px; border: 0; border-radius: 2px; background: var(--plate-brass); color: var(--plate-brass-ink);
  box-shadow: inset 0 0 0 1px rgba(35, 22, 12, .35), inset 0 0 0 3px var(--plate-brass), inset 0 0 0 3.5px rgba(35, 22, 12, .25);
  letter-spacing: .03em; white-space: normal; text-wrap: balance; line-height: 1.1;
}
/* Персонаж, которого игрок выбрал кружком в профиле: на красном круге, как в профиле. */
.top-char { position: absolute; inset: 0; display: block; background: var(--disc); }
.top-char .ch { display: block; width: 100%; height: 100%; }
/* плакаты падают на стену по одному при первом открытии; первый — последним */
.podium.is-enter .wanted { animation: wanted-in 520ms var(--ease-enter) backwards; }
.podium.is-enter .is-3 { animation-delay: 60ms; }
.podium.is-enter .is-2 { animation-delay: 150ms; }
.podium.is-enter .is-1 { animation-delay: 280ms; }
.podium.is-enter .wanted-crown { animation: crown-in 360ms var(--ease-enter) 720ms backwards; }
@keyframes wanted-in { from { opacity: 0; transform: translateY(-26px) rotate(calc(var(--r) + 7deg)); } }
@keyframes crown-in { from { opacity: 0; transform: translateY(8px) scale(.6); } }

.top-head { display: grid; grid-template-columns: minmax(0, 1fr) 56px 44px; gap: 10px; padding: 0 14px 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.top-head span { text-align: end; white-space: nowrap; }
.top-head span:first-child { grid-column: 2; }
.top-list { margin: 0; padding: 0; list-style: none; }
.top-list .top-row + .top-row { border-top: 1px solid var(--line); }
.top-row { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) 56px 44px; align-items: center; column-gap: 10px; min-height: 60px; padding: 8px 14px; }
.top-n { font: 600 19px/1 var(--font-display); text-align: center; color: var(--muted); }
.top-list .top-row:nth-child(-n + 7) .top-n { color: var(--brass); }
.top-ava {
  position: relative; display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--raise-2);
  box-shadow: 0 0 0 1.5px var(--k-line);
}
.top-ava > img, .top-ava .top-ph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.top-ava .ph-pic img { object-position: 50% 24% !important; }
.top-ava .ch { width: 100%; height: 100%; }
.top-ava .top-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px/1 var(--font-display); color: var(--k-plate-hi); background: var(--k-plate); }
.top-w { font: 600 20px/1 var(--font-display); text-align: end; }
.top-g { color: var(--muted); font-size: 14px; text-align: end; }
.top-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.top-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-name .tag { flex: none; }
.top-row.is-me { background: var(--raise-2); }
.top-you { background: var(--k-plate); color: var(--k-plate-hi); }
/* своё место — закреплено над панелью вкладок */
.top-mine {
  position: sticky; z-index: 5; bottom: calc(var(--tabbar-h) + 12px + var(--safe-b)); margin-top: 14px;
}
.top-mine ol { margin: 0; padding: 0; list-style: none; }
.top-mine .top-row {
  border-radius: 14px; background: var(--raise); box-shadow: inset 0 0 0 1.5px var(--brass), var(--k-shadow);
}

@media (min-width: 720px) {
  .podium { gap: 16px; padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .podium.is-enter .wanted, .podium.is-enter .wanted-crown, .tp-rain i, .tp-paid-art, .inv-ok { animation: none !important; }
  .top-seg button:active { transform: none; }
  .top-body { transition: none; }
  .tp-rain { display: none; }
}

/* «+» у кошелька в профиле — латунная монета */
.wtile .tp-plus { background: var(--k-plate-hi); color: var(--medal-ink); }
.wtile-top .tp-plus .ic { color: currentColor; width: 16px; height: 16px; }
/* «Тема» в настройках: три надписи в узком листе */
.set-sheet .seg button { font-size: 13px; padding: 0 4px; }

/* монеты летят из кошелька к предмету — латунь, а не белый */
.coin-fly.kassa-fly { color: var(--k-plate-hi); }

/* Узкий телефон (320–359): плакаты и строки топа плотнее, чтобы имена не обрезались; кошелёк кассы — второй строкой. */
@media (max-width: 359px) {
  .tp .tp-head { flex-wrap: wrap; }
  .tp .tp-bal { order: 3; width: 100%; margin: 2px 0 4px; }
  .podium { gap: 6px; padding: 44px 6px 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); }
  .wanted { padding: 13px 6px 10px; }
  .wanted.is-1 { padding: 16px 7px 12px; }
  .wanted-head { font-size: 10px; letter-spacing: .04em; }
  .wanted.is-1 .wanted-head { font-size: 11px; }
  .wanted-name { font-size: 14px; }
  .wanted.is-1 .wanted-name { font-size: 17px; }
  .wanted-reward, .wanted.is-1 .wanted-reward { max-width: 100%; padding: 3px 5px; font-size: 11px; white-space: normal; }
  .top-row { grid-template-columns: 24px 32px minmax(0, 1fr) 42px 34px; column-gap: 8px; padding: 8px 10px; }
  .top-ava { width: 32px; height: 32px; }
  .top-w { font-size: 18px; }
  .top-g { font-size: 13px; }
  .top-head { grid-template-columns: minmax(0, 1fr) 42px 34px; column-gap: 8px; padding: 0 10px 6px; font-size: 11px; }
}
/* «−50%» и «×2» читаются слева направо и в арабском и персидском (иначе минус и знак умножения уезжают в конец). */
.tp-off, .tp .tp-x2 { direction: ltr; unicode-bidi: isolate; }
/* разделы кассы (обмен первым, когда не хватает денег) — с промежутком */
.tp .tp-sec + .tp-sec { margin-top: 22px; }