/* Shared mobile composition. Existing page artwork, colours and desktop layout stay in their page styles. */
@media (min-width:901px) and (max-width:1599px) {
  .header .header_component { grid-template-columns:auto minmax(0,1fr) auto; gap:16px; }
  .header .header_gift-text { display:none; }
  .header .header_gift-link { min-width:36px; }
  .header .header_gift-icon-img { width:36px; height:36px; }
}

@media (min-width:1200px) and (max-width:1349px) {
  /* The sidebar is fixed; its width must be subtracted rather than added to a 100% row. */
  body > .layout_row { width:calc(100% - var(--live-feed-width,176px) - var(--site-edge,16px)); }
  body > .layout_row > .page_component { width:100%; margin-inline:0; max-width:100%; }
  body.profile-new-page .pn-dashboard { grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); }
  body.profile-new-page .pn-stats { grid-template-columns:repeat(5,minmax(0,1fr)); }
  body.profile-new-page .pn-connection-card { grid-template-columns:24px minmax(0,1fr); grid-template-rows:1fr 1fr; gap:2px 6px; padding:8px; height:56px; }
  body.profile-new-page .pn-connection-card__icon { width:24px; height:24px; grid-row:1/3; }
  body.profile-new-page .pn-connection-card strong { font-size:12px; }
  body.profile-new-page .pn-connection-card > span { grid-column:2; justify-self:start; padding:2px 5px; }
  body.upgrades-body .upgrade-section__controls-grid { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; height:auto!important; gap:6px!important; }
  body.upgrades-body .upgrade-multiplier-input { grid-column:span 2; width:100%!important; max-width:none!important; min-width:0!important; }
  body.upgrades-body .upgrade-section__controls-grid-elem { min-width:0!important; width:100%!important; }
  body.upgrades-body .upgrade-items { grid-template-columns:minmax(0,1fr)!important; grid-template-areas:"list-title" "list-actions" "list-grid"!important; gap:12px!important; padding:14px!important; }
  body.upgrades-body .upgrade__cases-price { min-width:140px!important; }
}

@media (max-width:900px) {
  :root {
    --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
    --mobile-bar-height:56px;
    --mobile-bar-space:calc(var(--mobile-bar-height) + var(--mobile-safe-bottom));
  }
  html.tg-mini { --mobile-safe-bottom:var(--tg-mini-bottom,0px); }
  html.mobile-menu-open { overflow:hidden; }
  body { padding-bottom:calc(var(--mobile-bar-space) + 12px)!important; }
  body.mobile-menu-open { overflow:hidden; }
  body .mobile-bottom-menu, body.tg-mini-session .mobile-bottom-menu { height:var(--mobile-bar-space); box-sizing:border-box; z-index:10002; }
  body .mobile-bottom-menu__container, body.tg-mini-session .mobile-bottom-menu__container {
    gap:4px; padding:0 max(8px,var(--tg-mini-right,0px)) var(--mobile-safe-bottom) max(8px,var(--tg-mini-left,0px));
    box-sizing:border-box;
  }
  body .mobile-bottom-menu__socials { gap:4px; }
  body .mobile-bottom-menu__social,
  body .mobile-bottom-menu__sound,
  body .mobile-bottom-menu__burger,
  body .mobile-bottom-menu #hdr-notifs-btn {
    display:flex; width:44px; height:44px; min-width:44px; flex:0 0 44px;
    align-items:center; justify-content:center; padding:0; border-radius:12px;
  }
  body .mobile-bottom-menu__notifications { display:flex; margin-left:auto; }
  body .mobile-bottom-menu .header_notificationsRow { display:flex; position:static; width:44px; }
  body .mobile-bottom-menu #hdr-notifs-btn { background:hsla(0,0%,100%,.06); position:relative; }
  body .mobile-bottom-menu .header_buttonIcon { width:22px; height:22px; }
  body .mobile-bottom-menu #hdr-notifs-btn.header_unread::after { top:5px; right:5px; }
  body .mobile-bottom-menu .notification-tooltip {
    top:auto!important; bottom:calc(var(--mobile-bar-space) + 8px)!important;
    left:max(10px,var(--tg-mini-left,0px))!important; right:max(10px,var(--tg-mini-right,0px))!important;
    width:auto!important; max-height:calc(var(--tg-mini-height,100dvh) - var(--mobile-bar-space) - var(--tg-mini-top,0px) - 24px);
    overflow:auto!important; z-index:10003!important;
  }
  body .mobile-bottom-menu .notification-tooltip__body { max-height:min(52dvh,430px); overscroll-behavior:contain; }
  body .notification-tooltip__close { width:44px; height:44px; flex:none; }
  body .notification-tooltip__item-text { overflow-wrap:anywhere; }
  body .mobile-bottom-menu .notification-promo-code { display:flex; align-items:center; gap:8px; }
  body .mobile-bottom-menu .notification-promo-code__value { min-width:0; flex:1; overflow-wrap:anywhere; }
  body .mobile-bottom-menu .notification-promo-code__copy { display:flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; padding:0; border-radius:8px; }
  body .mobile-drawer { visibility:hidden; z-index:10004; }
  body .mobile-drawer--open { visibility:visible; }
  body .mobile-drawer__panel {
    max-height:calc(var(--tg-mini-height,100dvh) - var(--tg-mini-top,0px) - 20px);
    padding-bottom:var(--mobile-safe-bottom); overscroll-behavior:contain; box-sizing:border-box;
  }
  body .mobile-drawer__header { padding:10px 12px 8px 20px; }
  body .mobile-drawer__close { width:44px; height:44px; }
  body .mobile-drawer__body { padding:8px 12px 16px; gap:2px; }
  body .mobile-drawer__link { min-height:48px; padding:10px 12px; box-sizing:border-box; }
  body .mobile-drawer__link > span:not(.mobile-drawer__link-icon):not(.header-beta-badge) { white-space:normal; line-height:1.35; }
  .header .header_component { gap:8px; grid-template-columns:minmax(0,1fr) auto; }
  .header .header_side { gap:8px; min-width:0; }
  .header .header_logo { min-width:0; }
  .header #mobile-topup-btn { padding-inline:10px; font-size:13px; }
  body .footer__scroll-top {
    bottom:calc(var(--mobile-bar-space) + 12px); right:12px; width:40px; height:40px; z-index:990;
  }
  body .cookie-choice, body .ref-toast { bottom:calc(var(--mobile-bar-space) + 12px); }
  body .floating-social { display:none; }
  /* A footer should not take several phone screens before the legal links. */
  body .footer { padding:20px 0 12px; }
  body .footer .container-footer.page_component { padding:16px 12px 0!important; }
  body .footer .footer__statistics { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px; }
  body .footer .footer__statistics-item { width:auto; min-width:0; padding:12px 10px; gap:8px; border-radius:12px; }
  body .footer .footer__statistics-icon { width:24px; height:24px; }
  body .footer .footer__statistics-item > div { min-width:0; }
  body .footer .footer__statistics-numb { font-size:clamp(14px,4vw,19px); white-space:normal; overflow-wrap:anywhere; line-height:1.2; }
  body .footer .footer__statistics-title { font-size:11px; line-height:1.4; }
  body .footer .footer__main { margin-top:20px; gap:16px; }
  body .footer .footer__seo-title { font-size:20px; line-height:1.35; margin:0; }
  body .footer .footer__seo-text, body .footer .footer__seo-list li { font-size:12px; line-height:1.65; margin-bottom:10px; }
  body .footer .footer__legal { gap:6px 14px; margin-top:16px; padding-top:16px; }
  body .footer .footer__legal a { display:inline-flex; align-items:center; min-height:36px; font-size:12px; }
  body .footer .footer__content-img img { max-width:100%; max-height:110px; }
}

@media (max-width:900px) {
  /* Account summary and inventory. */
  body.profile-new-page .page_component { padding:10px!important; }
  .profile-new-page .pn-dashboard { gap:10px; }
  .profile-new-page .pn-user-card { padding:14px; }
  .profile-new-page .pn-avatar { width:64px; height:64px; flex:none; }
  .profile-new-page .pn-name { font-size:22px; }
  .profile-new-page .pn-identity { gap:12px; max-width:100%; }
  .profile-new-page .pn-user-main { gap:12px; margin-bottom:12px; }
  .profile-new-page .pn-connections { gap:6px; }
  .profile-new-page .pn-connection-card { height:48px; grid-template-columns:30px minmax(0,1fr) auto; padding:0 10px; gap:8px; }
  .profile-new-page .pn-connection-card > img { width:30px; height:30px; }
  .profile-new-page .pn-feature { min-height:144px; height:144px; padding:14px; }
  .profile-new-page .pn-feature__image, .profile-new-page .pn-feature__image-bg { max-height:150px; }
  .profile-new-page .pn-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .profile-new-page .pn-stat { min-height:76px; padding:12px; }
  .profile-new-page .pn-stat:last-child { grid-column:1/-1; }
  .profile-new-page .pn-stat__value { font-size:20px; line-height:1.2; overflow-wrap:anywhere; }
  .profile-new-page .pn-stat__label { font-size:12px; }
  .profile-new-page .pn-stat .profile-stat-image { width:80px; height:80px; }
  .profile-new-page .pn-content { padding:8px; }
  .profile-new-page .pn-tabs { padding:0 0 6px; gap:4px; scroll-padding-inline:6px; scrollbar-width:none; }
  .profile-new-page .pn-tabs::-webkit-scrollbar { display:none; }
  .profile-new-page .pn-tab { min-height:44px; padding:10px 12px; font-size:12px; }
  .profile-new-page .pn-items-grid { gap:8px; }
  .profile-new-page .pn-items-grid .item-card { min-height:210px; }
  .profile-new-page .pn-items-grid .item-image { height:92px; margin-bottom:8px; }
  .profile-new-page .pn-items-grid .item-name { font-size:13px; }
  /* Referral link remains selectable; neither CTA is allowed to crop its label. */
  body .ref-hero { padding:0 0 16px; }
  body .ref-hero__content { padding:20px 14px 0; gap:14px; }
  body .ref-hero__title { font-size:24px; }
  body .ref-code-row { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; }
  body .ref-code-display { min-width:0; height:auto; min-height:44px; padding:10px 12px; font-size:12px; line-height:1.5; letter-spacing:0; text-transform:none; white-space:normal; overflow-wrap:anywhere; }
  body .ref-code-row .ref-btn--icon { width:44px; height:44px; min-width:44px; }
  body .ref-code-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
  body .ref-code-actions .profile-card-btn { width:100%; min-width:0; height:auto; min-height:44px; padding:12px; font-family:inherit; font-size:12px; line-height:1.4; box-sizing:border-box; }
  body .ref-code-actions .profile-card-btn span { white-space:normal; }
  body .ref-code-actions .profile-card-btn svg { flex:none; }
  body .ref-benefit-item { gap:8px; padding:10px 12px; }
  body .ref-benefit-item__text { font-size:13px; }
  body .ref-benefit-item__icon { flex:none; }
  body .ref-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  body .ref-stat-card { min-height:80px; padding:10px; }
  body .ref-stat-card__label { font-size:11px; }
  body .ref-stat-card__value { gap:4px; flex-wrap:wrap; }
  body .ref-stat-card__value p { font-size:18px; overflow-wrap:anywhere; }
  body .ref-stat-card__value img { width:16px; height:16px; }
  body .ref-panel { padding:14px; min-width:0; }
  body .ref-top-item { padding:10px 8px; gap:8px; }
  body .ref-top-item__user { gap:8px; }
  body .ref-top-item__avatar { width:32px; height:32px; }
  body .ref-top-item__earned { font-size:12px; white-space:nowrap; }
  /* A partner case's link and bonuses need separate rows on phones. */
  body .nickname-case-description-block .tradeUrl_component { display:flex; flex-direction:column; align-items:stretch; padding:10px; gap:8px; }
  body .nickname-case-description-block .tradeUrl_left { min-width:0; width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:0; }
  body .nickname-case-description-block .tradeUrl_field { width:100%; min-width:0; padding:0 10px; font-size:13px; min-height:44px; height:44px; box-sizing:border-box; }
  body .nickname-case-description-block .tradeUrl_linkIcon { display:none; }
  body .nickname-case-description-block .tradeUrl_infoButton { position:static; min-height:44px; height:44px; padding:0 10px; font-family:inherit; }
  body .nickname-case-description-block .case-page__open-btn { min-width:0; width:100%; min-height:44px; height:auto; padding:12px; margin:0; box-sizing:border-box; }
  body .nickname-case-description { font-size:14px; line-height:1.55; }
  /* Common promotional and task cards reuse the site's existing palette. */
  body .promo-hero__content { padding:20px 14px; gap:14px; }
  body .promo-hero__title { font-size:clamp(24px,6.8vw,32px); line-height:1.15; }
  body .promo-hero__subtitle { font-size:14px; line-height:1.5; }
  body .tasks-stat--vibe { padding:14px; gap:12px; }
  body .tasks-stat--vibe .tasks-stat__vibe-photo-wrap { width:64px; height:64px; max-width:64px; max-height:64px; }
  body .tasks-stat--vibe .tasks-stat__vibe-title { font-size:18px; }
  body .task-card__cover-wrap { max-height:160px; }
  body .task-card__cover-wrap > img { max-height:160px; object-fit:cover; }
  body .task-card__body { padding:14px; }
  body .task-card__btn { min-height:44px; white-space:normal; line-height:1.4; }
  body .notification-card { padding:16px; }
  body .notification-card-header { flex-wrap:wrap; gap:10px; }
  body .notification-card-title { min-width:0; overflow-wrap:anywhere; }
  body .notification-promo-code { min-width:0; max-width:100%; flex-wrap:wrap; }
  body .notification-promo-code__value { overflow-wrap:anywhere; }
  body .notifications-page .page-stats { flex-direction:row; flex-wrap:wrap; gap:8px 16px; }
  body.profile-new-page .modal-dialog, body .vb-dialog { max-height:calc(var(--tg-mini-height,100dvh) - var(--tg-mini-top,0px) - var(--mobile-safe-bottom) - 24px); overflow:auto; overscroll-behavior:contain; }
  body .vb-close { width:44px; height:44px; }
  body.vibes-native-page .vb-side-account { padding:12px 0 0; gap:8px; }
  body.vibes-native-page .vb-side-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  body.vibes-native-page .vb-side-stat-row { display:flex; align-items:center; gap:5px; min-width:0; }
  body.vibes-native-page .vb-side-stat-row strong { min-width:0; font-size:11px; line-height:1.4; }
  body.vibes-native-page .vb-side-stat-row svg { width:18px; height:18px; flex:none; }
  body.vibes-native-page .vb-side-account-title { font-size:12px; }
  body.vibes-native-page .vb-daily-uploads { padding:8px 10px; }
  body.vibes-native-page .vb-timeline h2 { font-size:22px; }
  body.vibes-native-page .vb-timeline h3 { font-size:18px; }
  body.vibes-native-page .vb-timeline li p { font-size:14px; }
  body.vibes-native-page .vw-submit .vw-upload-head h2 { font-size:24px; }
  body.vibes-native-page .vw-upload-note .vw-upload-note-head h3 { font-size:20px; }
  body.vibes-native-page .vw-copy-card button { min-height:44px; }
}

@media (max-width:600px) {
  /* Amount gets a full row, with the slider and three presets below it. */
  body.upgrades-body .layout-upgrade__upgrade-sections { gap:16px 8px!important; padding-top:36px!important; }
  body.upgrades-body .upgrade-center_live > .upgrade-live-hero { width:228px!important; height:228px!important; }
  body.upgrades-body .upgrade-balance-stake__control {
    display:grid!important; grid-template-columns:minmax(0,1fr) repeat(3,44px)!important; gap:6px!important; height:auto!important; padding:8px!important;
  }
  body.upgrades-body .upgrade-balance-stake__value {
    grid-column:1/-1; grid-row:1; width:100%!important; min-width:0!important; height:44px!important; padding:0 12px!important; box-sizing:border-box;
  }
  body.upgrades-body .upgrade-balance-stake__value input { width:100%!important; min-width:0!important; font-size:16px!important; }
  body.upgrades-body .upgrade-balance-stake__slider { grid-row:2; width:auto!important; min-width:0!important; height:44px!important; padding:0 6px!important; }
  body.upgrades-body .upgrade-balance-stake__quick,
  body.upgrades-body .upgrade-balance-stake__max { grid-row:2; width:44px!important; min-width:44px!important; height:44px!important; font-size:12px!important; padding:0!important; }
  body.upgrades-body .upgrade-section__controls-grid { grid-template-columns:repeat(4,minmax(0,1fr))!important; padding:6px!important; gap:6px!important; min-height:0!important; }
  body.upgrades-body .upgrade-multiplier-input,
  body.upgrades-body .upgrade-section__controls-grid-elem { height:44px!important; min-height:44px!important; padding:0 4px!important; font-size:13px!important; }
  body.upgrades-body .upgrade-multiplier-input { grid-column:span 2; width:100%!important; max-width:none!important; box-sizing:border-box; }
  body.upgrades-body .upgrade-multiplier-input input { font-size:14px!important; }
  body.upgrades-body .upgrade-center__btn { min-height:48px!important; height:48px!important; }
  body.upgrades-body .upgrade-center__fast-btn { height:48px!important; width:48px!important; min-width:48px!important; }
}

@media (max-width:360px) {
  .header .header_logo { max-width:108px; }
  .header #mobile-topup-btn { font-size:11px; padding-inline:7px; gap:5px; }
  .profile-new-page .pn-avatar { width:52px; height:52px; }
  .profile-new-page .pn-identity { gap:8px; }
  .profile-new-page .pn-name { font-size:19px; }
}

@media (max-width:480px) {
  body #items-list.grid-cols-auto { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; }
}