/* gems.css — 5.4: Золотые зёрна (gems.js): фишка 🌾 + в строке денег (главная, магазин) и окно зёрен (оболочка — .vip из vip.css) */
:root{ --gem-gold: #ffd76a; }

/* фишка: золотая, с плюсиком справа — тап открывает окно зёрен */
#main-tab .home-chip--gems, #upgrades-tab .wallet-bar .wallet-chip--gems{ position: relative; font-family: inherit; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; background: rgba(245,197,66,.12); border: 1px solid rgba(245,197,66,.5); color: #ffe7a3; padding-right: 22px; }
#main-tab .home-chip--gems[hidden], #upgrades-tab .wallet-chip--gems[hidden]{ display: none; }
#main-tab .home-chip--gems .chip-icon{ font-size: 14px; line-height: 1; }
.home-chip--gems .gems-plus, .wallet-chip--gems .gems-plus{ position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 5px;
  background: linear-gradient(180deg, #ffd96a, #f0aa00); color: #3a2600; font-style: normal; font-size: 13px; font-weight: 900; line-height: 15px; text-align: center; }
#main-tab .home-chip--gems:active, #upgrades-tab .wallet-chip--gems:active{ transform: scale(.96); }

/* окно зёрен */
.gm-head{ display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.gm-ico{ flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 34px; line-height: 1;
  background: radial-gradient(circle at 50% 35%, rgba(255,215,106,.45), rgba(245,197,66,.12)); box-shadow: inset 0 0 0 1.5px rgba(245,197,66,.6); }
.gm-head h3{ margin: 0; font-size: 21px; font-weight: 900; color: var(--gem-gold); }
.gm-head p{ margin: 3px 0 0; font-size: 14px; font-weight: 800; color: #e6e3f5; }
.gm-head p b{ color: #fff; font-size: 16px; }
.gm-need{ padding: 8px 12px; border-radius: 12px; background: rgba(255,90,90,.14); border: 1px solid rgba(255,120,120,.4); font-size: 13px; font-weight: 800; color: #ffd0d0; }
.gm-need.is-wait{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #d9d4ee; }
.gm-label{ margin: 4px 2px -2px; font-size: 12px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: #9aa0c4; }
.gm-packs{ display: flex; flex-direction: column; gap: 8px; }
.gm-pack{ display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(245,197,66,.28); }
.gm-pack__n{ flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.gm-pack__n span{ font-size: 20px; line-height: 1; align-self: center; }
.gm-pack__n b{ font-size: 22px; font-weight: 900; color: #fff; }
.gm-pack__n small{ font-size: 12.5px; font-weight: 800; color: #b9bdd8; }
.gm-pack__n em{ flex-basis: 100%; font-style: normal; font-size: 11.5px; font-weight: 900; color: #6fe39b; }
.gm-pack__btns{ flex: none; display: flex; flex-direction: column; gap: 6px; }
.gm-pay{ min-width: 96px; height: 34px; padding: 0 12px; border: 0; border-radius: 11px; font-family: inherit; font-size: 14px; font-weight: 900; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #ffd76a, #e8a91c); color: #2a1d00; box-shadow: 0 3px 0 #a8740a; }
.gm-pay--card{ background: rgba(255,255,255,.1); color: #fff; box-shadow: none; border: 1px solid rgba(255,215,106,.45); }
.gm-pay:disabled{ opacity: .55; }
.gm-pay:active:not(:disabled){ transform: translateY(2px); box-shadow: 0 1px 0 #a8740a; }
.gm-pay--card:active:not(:disabled){ box-shadow: none; }
.gm-off{ padding: 14px; border-radius: 14px; background: rgba(255,255,255,.05); text-align: center; font-size: 13px; font-weight: 800; color: #b9bdd8; }
.gm-item{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 16px; border: 1.5px solid rgba(245,197,66,.55);
  background: rgba(245,197,66,.1); color: #fff; font-family: inherit; text-align: left; cursor: pointer; }
.gm-item__ico{ flex: none; font-size: 24px; line-height: 1; }
.gm-item__tx{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-item__tx b{ font-size: 14.5px; font-weight: 900; }
.gm-item__tx small{ font-size: 11.5px; font-weight: 700; color: #c9cde6; }
.gm-item__price{ flex: none; font-size: 15px; font-weight: 900; color: var(--gem-gold); white-space: nowrap; }

/* окно VIP (vip.js): купить за зёрна + галочка автопродления */
.vip-buy--gems{ height: auto; min-height: 50px; padding: 7px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(245,197,66,.12); color: #ffe7a3; box-shadow: none; border: 1.5px solid rgba(245,197,66,.6); font-size: 16px; }
.vip-buy--gems small{ font-size: 11.5px; font-weight: 700; color: #d9d4ee; }
.vip-buy--gems:active:not(:disabled){ box-shadow: none; }
.vip-auto{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.05); cursor: pointer;
  font-family: inherit; text-align: left;
  font-size: 13px; font-weight: 800; color: #e6e3f5; -webkit-tap-highlight-color: transparent; }
.vip-auto small{ display: block; font-size: 11px; font-weight: 700; color: #9aa0c4; }
.vip-auto .vip-sw{ flex: none; position: relative; width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.16); transition: background .15s; }
.vip-auto .vip-sw::after{ content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.vip-auto.is-on .vip-sw{ background: #34c46a; }
.vip-auto.is-on .vip-sw::after{ transform: translateX(16px); }
.vip-auto > span:last-child{ flex: 1 1 auto; min-width: 0; }

/* в ивент фишек четыре (💰 · 🪶 · 🌾 · 🎃) — плюсик убираем, ширина — по содержимому (деньгам — больше места) */
#main-tab .home-chips.has-event{ grid-auto-columns: auto; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .95fr); }
#main-tab .home-chips.has-event .home-chip--gems{ padding-right: 0; }
#main-tab .home-chips.has-event .home-chip--gems .gems-plus{ display: none; }
#main-tab .home-chips.has-event .home-chip{ font-size: 12.5px; gap: 2px; }
#main-tab .home-chips.has-event .home-chip .chip-icon{ font-size: 12px; }
#main-tab .home-chips.has-event .home-chip .chip-feather{ width: 14px; height: 14px; }

/* картинка зерна (gems.json → image) — по высоте строки; в шапке окна — крупно */
.gem-ico{ display: inline-block; width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.2em; flex: none; }
.gem-ico--big{ width: 44px; height: 44px; vertical-align: middle; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
#main-tab .home-chip--gems .chip-icon .gem-ico, .wallet-chip--gems .chip-icon .gem-ico{ width: 17px; height: 17px; vertical-align: -3px; }