/* vip.css — 5.3: VIP-ПОДПИСКА (vip.js): кнопка-корона на главной, окно VIP, корона и золотое имя у VIP-игроков */
:root{ --vip-gold: #f5c542; }
.vip-crown{ display: block; }

/* кнопка на главной — последней в строке */
#main-tab .home-ico--vip{ order: 99; position: relative; color: var(--vip-gold);
  border: 1.5px solid var(--vip-gold) !important; background: linear-gradient(180deg, rgba(245,197,66,.32), rgba(245,197,66,.12)) !important;
  box-shadow: 0 0 12px rgba(245,197,66,.35); }
#main-tab .home-ico--vip .vip-crown{ width: 24px; height: 18px; }
#main-tab .home-ico--vip.is-off{ border-color: rgba(245,197,66,.55) !important; background: rgba(245,197,66,.1) !important; box-shadow: none; }
#main-tab .home-ico--vip .vip-dot{ position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px #1c243e; }

/* своя корона над аватаром на главной */
#main-tab .home-top{ position: relative; }
#main-tab .home-top.is-vip > #tg-avatar{ box-shadow: 0 0 0 2.5px var(--vip-gold), 0 0 12px rgba(245,197,66,.5); }
#main-tab .home-top .vip-ava-crown{ position: absolute; left: 26px; top: -11px; transform: translateX(-50%); color: var(--vip-gold); pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#main-tab .home-top .vip-ava-crown .vip-crown{ width: 22px; height: 16px; }

/* полоска «Перья VIP на сегодня» под кнопками */
.vip-chip{ display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 8px 10px; box-sizing: border-box;
  border: 1px solid rgba(245,197,66,.55); border-radius: 14px; background: rgba(245,197,66,.1); color: #fff; font-family: inherit; text-align: left; cursor: pointer; }
.vip-chip[hidden]{ display: none; }
.vip-chip img{ width: 26px; height: 26px; flex: 0 0 auto; }
.vip-chip span{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; font-weight: 900; }
.vip-chip small{ font-size: 11.5px; font-weight: 700; color: #d9d4ee; }
.vip-chip b{ flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: 10px; background: var(--vip-gold); color: #2a1d00; font-size: 13px; font-weight: 900; display: grid; place-items: center; }
.vip-chip:active{ transform: scale(.98); }

/* окно VIP */
.vip{ position: fixed; inset: 0; z-index: 20000; display: flex; align-items: flex-end; justify-content: center; background: rgba(4,6,18,.6); opacity: 0; transition: opacity .18s; }
.vip.is-open{ opacity: 1; }
.vip-sheet{ position: relative; width: 100%; max-width: 450px; max-height: 92vh; overflow-y: auto; box-sizing: border-box;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #2a2148 0%, #1a1f3d 34%, #161b34 100%); border-top: 1.5px solid rgba(245,197,66,.55); color: #fff;
  display: flex; flex-direction: column; gap: 12px; transform: translateY(24px); transition: transform .2s; }
.vip.is-open .vip-sheet{ transform: none; }
.vip-x{ position: absolute; z-index: 5; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 16px; font-weight: 900; cursor: pointer; }
.vip-hero{ display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.vip-hero > img{ width: 92px; height: 92px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 6px 14px rgba(245,197,66,.45)); }
.vip-hero.is-on > img{ width: 72px; height: 72px; }
.vip-hero > div{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vip-hero h3{ margin: 0; display: flex; align-items: center; gap: 6px; color: var(--vip-gold); font-size: 23px; font-weight: 900; }
.vip-hero h3 .vip-crown{ width: 22px; height: 17px; }
.vip-hero p{ margin: 0; font-size: 14px; font-weight: 800; line-height: 1.3; color: #e6e3f5; }
.vip-bar{ height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.vip-bar i{ display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffd76a, #e8a91c); }
.vip-was{ padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 12.5px; font-weight: 800; color: #d9d4ee; }
.vip-perks{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vip-perk{ padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column; gap: 3px; }
.vip-perk > div{ display: flex; align-items: center; gap: 7px; }
.vip-perk i{ flex: none; min-width: 24px; height: 24px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; background: rgba(245,197,66,.18); color: var(--vip-gold);
  font-style: normal; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.vip-perk b{ font-size: 13.5px; font-weight: 900; line-height: 1.15; }
.vip-perk small{ font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #b9bdd8; }
.vip-price{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(245,197,66,.1); border: 1.5px solid rgba(245,197,66,.6); }
.vip-price span{ display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 800; color: #e6e3f5; }
.vip-price small{ font-size: 11.5px; font-weight: 700; color: #b9bdd8; }
.vip-price b{ flex: none; font-size: 22px; font-weight: 900; color: var(--vip-gold); white-space: nowrap; }
.vip-buy{ height: 54px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #ffd76a, #e8a91c); color: #2a1d00; font-family: inherit; font-size: 18px; font-weight: 900;
  box-shadow: 0 4px 0 #a8740a, 0 8px 18px rgba(232,169,28,.35); cursor: pointer; }
.vip-buy:disabled{ opacity: .6; }
.vip-buy:active:not(:disabled){ transform: translateY(2px); box-shadow: 0 2px 0 #a8740a; }
.vip-note{ text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.4; color: #8f94b3; }
.vip-daily{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(245,197,66,.12); border: 1.5px solid rgba(245,197,66,.7); }
.vip-daily.is-done{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.vip-daily img{ width: 30px; height: 30px; flex: none; }
.vip-daily span{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; font-weight: 900; }
.vip-daily small{ font-size: 12px; font-weight: 700; color: #d9d4ee; }
.vip-daily button{ flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #ffd76a, #e8a91c); color: #2a1d00;
  font-family: inherit; font-size: 14px; font-weight: 900; box-shadow: 0 3px 0 #a8740a; cursor: pointer; }
.vip-daily button:disabled{ opacity: .6; }
.vip-rows{ display: flex; flex-direction: column; gap: 6px; }
.vip-row{ display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.045); }
.vip-row > i{ flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(52,212,110,.2); color: #6fe39b; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 900; }
.vip-row > span{ flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 800; }
.vip-row > b{ flex: none; font-size: 12.5px; font-weight: 900; color: var(--vip-gold); text-align: right; }

/* VIP глазами других: соседи и профиль в гостях */
.vip-tag{ display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 5px; background: var(--vip-gold); color: #2a1d00;
  font-style: normal; font-size: 10.5px; font-weight: 900; line-height: 1.35; vertical-align: 2px; }
#search-tab .nb-card.is-vip{ border: 1.5px solid rgba(245,197,66,.75); background: linear-gradient(90deg, rgba(245,197,66,.18), rgba(20,26,48,.92) 60%); box-shadow: 0 0 16px rgba(245,197,66,.2), 0 8px 20px rgba(0,0,0,.3); }
#search-tab .nb-card.is-vip .nb-name{ color: var(--vip-gold); }
#search-tab .nb-card.is-vip .nb-ava{ box-shadow: 0 0 0 2px var(--vip-gold); }
#profile-modal.is-vip .pf-title{ color: var(--vip-gold) !important; }
#profile-modal.is-vip .pf-title::after{ content: "VIP"; margin-left: 6px; padding: 1px 5px; border-radius: 5px; background: var(--vip-gold); color: #2a1d00; font-size: 10.5px; font-weight: 900; vertical-align: 2px; }
#profile-modal.is-vip .pf-avatar{ position: relative; overflow: visible; box-shadow: 0 0 0 2.5px var(--vip-gold), 0 0 12px rgba(245,197,66,.5) !important; }
#profile-modal.is-vip .pf-avatar::after{ content: ""; position: absolute; left: 50%; top: -12px; width: 20px; height: 15px; transform: translateX(-50%);
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23f5c542' d='M1 4l5.5 5L12 1l5.5 8L23 4l-2.3 12H3.3z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }