/* RUBUPPRO1011 · ПК-страницы (rubup.pro, сайт в браузере и мини-апп в большом окне Telegram).
   Только от 1024 px: каждое правило ниже стоит внутри @media (min-width: 1024px), телефон и планшет не меняются.
   Файл подключается в index.html сразу после layout.css, то есть РАНЬШЕ стилей разделов (их докачивает app.js).
   Поэтому селекторы начинаются с «html body …» и повторяют селектор правила, которое меняют: при равном числе
   классов лишние «html body» дают перевес, порядок загрузки не важен. Откат: убрать строку ссылки из index.html. */

@media (min-width: 1024px) {

  /* ── 1. Одна рамка для всех разделов ──────────────────────────────────────────────────────────────────────
     Главная стоит в рамке --content-max (1560 px, на 2200+ шире), а внутренние разделы (PCFIX1001, профиль, задания,
     турниры) растягивались на весь экран: на 1920 кошелек и история прижаты влево, бонусы и профиль шириной 1856 px.
     Теперь рамка одна для всех, кроме страницы игры (у нее свое поле). До 1560 px ничего не меняется. */
  html:not([data-home]):not([data-route="login"]) body .app:not(.app--game) .shell__main > :is(.page, .footer) {
    max-width: var(--content-max);
  }

  /* ── 2. Кошелек: колонка по центру ─────────────────────────────────────────────────────────────────────────
     Было: вкладки, способы и история прижаты к левому краю, справа пустая треть экрана (на 1920 — половина).
     Стало: заголовок и касса — одна колонка по центру; выбор способа 960 px, форма вывода и история 1180 px. */
  html:not([data-home]):not([data-route="login"]) body .app:not(.app--game) .shell__main > .page[data-page="wallet"] {
    max-width: calc(1180px + 2 * var(--gutter));
  }
  html:not([data-home]):not([data-route="login"]) body .app:not(.app--game) .shell__main > .page[data-page="wallet"]:has(#wt-panel-deposit:not([hidden]) .ds-deposit[data-deposit-stage="choose"]) {
    max-width: calc(960px + 2 * var(--gutter));
  }
  /* RUBUPPRO1011F1: плитки разделов пополнения («Рубли», «Криптовалюта», «Telegram») делят ширину колонки поровну,
     сколько бы их ни было. Ряд был на три: когда крипты нет (11.10 выключен Crypto Bot), две плитки занимали две трети,
     справа пустовала треть. Так же, как в окне пополнения из шапки (pc-modals.css). */
  html body [data-page="wallet"] .wallet .ds-deposit .ds-categories { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  /* история — строки таблицы: подсветка под курсором, ровные колонки «операция · дата · сумма» */
  html body [data-page="wallet"]:not(.ds-content) .wallet .w-op {
    grid-template-columns: 44px minmax(0, 1fr) 150px 150px;
    padding: 12px 12px; border-radius: 14px; border-bottom-color: rgba(156, 174, 224, .10);
    transition: background-color var(--dur-1, .12s) ease;
  }
  html body [data-page="wallet"]:not(.ds-content) .wallet .w-op:hover { background: rgba(255, 255, 255, .035); }
  html body [data-page="wallet"]:not(.ds-content) .wallet .w-op__t { font-size: 15px; }
  html body [data-page="wallet"]:not(.ds-content) .wallet .w-op__s { font-size: 14px; color: var(--text-2); }
  html body [data-page="wallet"]:not(.ds-content) .wallet .w-op__v { font-size: 16px; }
  html body [data-page="wallet"]:not(.ds-content) .wallet .w-hsum { padding: 0 12px; }
  html body .wallet .w-hs__l { font-size: 13px; }
  html body .wallet .w-hs__v { font-size: 16px; }

  /* гость: «Войдите, чтобы пополнить» слева и плитки способов справа не помещались — подписи вывода
     («Crypto Bot · USDT на ваш Telegram») вылезали за плитку. На ПК: призыв войти строкой сверху, способы ниже во всю ширину */
  html body [data-page="wallet"] .wallet .w-guest { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
  html body [data-page="wallet"] .wallet .w-guest__txt {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h btn" "p btn";
    align-items: center; column-gap: 32px; row-gap: 6px; padding: 0;
  }
  html body [data-page="wallet"] .wallet .w-guest__txt > .w-guest__h { grid-area: h; margin: 0; }
  html body [data-page="wallet"] .wallet .w-guest__txt > .w-guest__p { grid-area: p; max-width: 640px; margin: 0; }
  html body [data-page="wallet"] .wallet .w-guest__txt > .btn { grid-area: btn; margin: 0; }
  html body [data-page="wallet"] .wallet .w-guest__side { padding: 0; }

  /* ── 3. Бонусы ─────────────────────────────────────────────────────────────────────────────────────────────
     Четыре розыгрыша в сетке на три давали одну карточку во втором ряду и пустоту справа — при четырех ставим 2×2.
     «Бонусы за пополнение» были набраны другим шрифтом и мельче соседних заголовков раздела. */
  html body .rf .rf__list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .bn-topup .tb-live .w-tb__h, html body .bn-topup .tb-live > h2 {
    font-family: var(--font-display, 'Unbounded', system-ui, sans-serif); font-weight: 700; font-size: 24px;
    line-height: 1.15; letter-spacing: -.01em; color: var(--text);
  }
  html body .acc.bn h2.acc-h { font-size: 24px; }   /* «Ваши бонусы» — тем же размером, что «Розыгрыши» */
  html body .bn-topup .tb-live > .tb-note { font-size: 14px; }

  /* ── 4. Профиль: промокод рядом с «Друзьями», а не под «Выйти» ────────────────────────────────────────────── */
  html body .acc.profile .p9:has(.pcd) .pcd { grid-column: 1; grid-row: 2; margin: 0; align-self: stretch; }
  html body .acc.profile.has-topup-tabs .p9:has(.pcd) .p-fr,
  html body .acc.profile .p9:has(.pcd) .p-fr { grid-column: 2 / -1; grid-row: 2; align-self: stretch; }

  /* ── 4б. Друзья гостем: одна колонка (призыв войти) в странице шириной 1248 — справа пустая половина экрана ─── */
  html[data-route="friends"] body .app .shell__main > #page.page:has(.f-grid > .f-col:only-child) {
    max-width: calc(720px + 2 * var(--gutter, 32px));
  }
  html body .friends .f-grid:has(> .f-col:only-child) { grid-template-columns: minmax(0, 1fr); }

  /* ── 5. Страница кейса ─────────────────────────────────────────────────────────────────────────────────────
     Шапка кейса и лента были 960 px, а «Что может выпасть» и «Еще кейсы» под ними — 1120: края не совпадали. */
  html body .cs.cs--case :is(.cs-top, .cs-stage) { width: 100%; }
  /* кейс недоступен: под шапкой нет ленты, а шапка рисовалась без нижней кромки (как оборванная) */
  html body .cs.cs--case:not(:has(.cs-stage)) .cs-top { border-bottom: 1px solid var(--s-line); border-radius: 20px; }
  /* «Еще кейсы»: на ПК не лента с обрезанной справа карточкой, а ряд витрины (как в каталоге) */
  html body .cs.cs--case .cs-grid--related {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; overflow: visible; padding: 0;
    scroll-snap-type: none;
  }
  html body .cs.cs--case .cs-grid--related > li { flex: none; min-width: 0; }
  /* подпись плитки — как в каталоге: название целиком сверху, цена справа под ним (в узкой плитке название резалось) */
  html body .cs.cs--case .cs-grid--related .cs-tile {
    grid-template-areas: 'art art' 'name name' 'foot foot'; grid-template-rows: auto auto 1fr; row-gap: 6px;
  }
  html body .cs.cs--case .cs-grid--related .cs-tile__name { overflow-wrap: normal; }
  html body .cs.cs--case .cs-grid--related .cs-tile__foot { justify-self: end; align-self: end; }
  /* «Подарок дня» недоступен: кнопка «Все кейсы» растягивалась на 790 px — теперь обычного размера справа */
  html body .cs.cs--case .cs-na.cs-free-unavailable {
    grid-template-columns: minmax(0, 1fr) auto; padding: 20px 24px; text-align: left;
  }
  html body .cs.cs--case .cs-na.cs-free-unavailable > .btn { padding-inline: 28px; }
  /* призы бесплатного и реф кейса — три огромные плитки в ряд; на ПК — плотная сетка, как у обычных кейсов */
  html body .cs.cs--case .pz-grid.cs-free-prizes { --cols: 5 !important; }
  html body .cs.cs--case .pz-grid.cs-ref-prizes { --cols: 6 !important; }

  /* ── 6. Инвентарь: плитки 334 px с одной картинкой в центре → плотнее, как витрина кейсов ───────────────── */
  html body .iv .iv-grid, html body .iv .iv-grid:has(> .iv-tile:last-child:nth-child(-n+3)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  html body .iv .iv-grid, html body .iv .iv-grid:has(> .iv-tile:last-child:nth-child(-n+3)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ── 7. Меню шапки 1024–1119 px: подписи пунктов скрыты (не помещаются), остаются одни значки. Подсказка с названием
   раздела — под значком при наведении мышью и при переходе клавишей Tab. ──────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1119.98px) {
  html body .topbar .topnav__link:focus-visible .topnav__label {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 70;
    width: auto; height: auto; overflow: visible; clip: auto; padding: 6px 10px; border-radius: 10px;
    background: var(--s1, #222840); box-shadow: inset 0 0 0 1px var(--s-line-hi, rgba(255, 255, 255, .12)), 0 8px 20px rgba(0, 0, 0, .35);
    color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none;
  }
}
@media (min-width: 1024px) and (max-width: 1119.98px) and (hover: hover) {
  html body .topbar .topnav__link:hover .topnav__label {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 70;
    width: auto; height: auto; overflow: visible; clip: auto; padding: 6px 10px; border-radius: 10px;
    background: var(--s1, #222840); box-shadow: inset 0 0 0 1px var(--s-line-hi, rgba(255, 255, 255, .12)), 0 8px 20px rgba(0, 0, 0, .35);
    color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none;
  }
}