/* =====================================================================
   PrivateDrop v2.22 — phone composition of the upgrade screen
   Reference 2: dense stack — dial → two item panels → CTA → controls
   Reference 3: "Мои предметы / Желаемые предметы" tab bar on the items panel
   Phones only (≤767px). Desktop/tablet layout is untouched.
   ===================================================================== */

@media (max-width:767px){
  main ._page_1mn3a_2{padding:14px 12px 0}

  /* ---------- board stack ---------- */
  ._upgrader_1szeh_2{
    row-gap:8px;
    column-gap:7px;
    padding-top:30px;          /* room for the settings / sound / fast icons row */
    margin-bottom:0;
  }
  ._wheelArea_1szeh_20{padding:4px 0 6px}

  /* item panels: two compact cards side by side */
  ._itemPanel_t6nbi_2,
  ._itemPanel_1ifna_2{
    height:clamp(150px,calc((100vw - 31px) / 2 * .94),200px);
    border-radius:12px;
  }

  /* CTA */
  ._upgradeBtnContainer_1szeh_134{margin-top:2px}
  ._upgradeBtn_1szeh_134{
    --pd-cta-r:10px;
    --pd-cta-fs:17px;
    height:44px;
    min-height:44px;
    padding:0;
    letter-spacing:.08em;
  }

  /* balance + multipliers: tight control rows */
  ._balanceBar_1szeh_39{
    --pd-bar-r:12px;
    --pd-bal-pad:8px 12px;
    --pd-bal-fs:13px;
    gap:4px;
  }
  ._multipliersArea_1szeh_88{margin-bottom:14px}
  ._multipliersBar_1szeh_97{
    --pd-bar-r:12px;
    --pd-mult-gap:4px;
    --pd-mult-pad:4px;
    height:42px;
  }
  ._multiplier_b5k30_118{font-size:13px;border-radius:8px}

  /* ---------- items tab bar (reference 3) ---------- */
  ._tabs_1ohf7_16{
    margin-bottom:20px;
    border-radius:12px;
    overflow:hidden;
    background:var(--pd2-well);
    box-shadow:inset 0 0 0 1px var(--pd2-line);
  }
  ._tabs_1ohf7_16 ._tabsRoot_1ohf7_23 > [role=tablist]{
    display:grid;
    grid-template-columns:1fr 1fr;
    height:34px;
    padding:0;
    gap:0;
    border:0;
    background:var(--pd2-s1);
  }
  ._tabs_1ohf7_16 ._tabsRoot_1ohf7_23 > [role=tablist] > [role=tab]{
    height:34px;
    min-height:0;
    padding:0 6px;
    border:0;
    border-radius:12px 12px 0 0;
    background:transparent;
    box-shadow:none;
    color:var(--pd2-text-3);
    font-family:"Exo 2",Inter,"Segoe UI",Arial,sans-serif;
    font-size:14px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  ._tabs_1ohf7_16 ._tabsRoot_1ohf7_23 > [role=tablist] > [role=tab][data-state=active]{
    background:var(--pd2-s2);
    color:var(--pd2-text);
    box-shadow:inset 0 2px 0 var(--pd2-gold);
  }
  ._tabs_1ohf7_16 ._tabsRoot_1ohf7_23 > [role=tablist] > [role=tab]::after,
  ._tabs_1ohf7_16 ._tabsRoot_1ohf7_23 > [role=tablist] > [role=tab]::before{display:none}
  ._tabs_1ohf7_16 ._panel_14f48_2{border-radius:0}
}

/* very narrow phones (≤350px): keep everything inside the column */
@media (max-width:350px){
  main ._page_1mn3a_2{padding-left:8px;padding-right:8px}
  ._upgrader_1szeh_2{column-gap:5px}
  ._tabs_1ohf7_16 ._tabsRoot_1ohf7_23 > [role=tablist] > [role=tab]{font-size:13px}
}