/* css/store-extras.css — магазин: превью новых категорий и открытие кейса.
   Подключается из store.html (основные стили магазина — инлайн в самой странице). */

/* ===== Превью новых категорий в сетке ===== */
.store-item-icon .store-back-preview{ width:34px; height:48px; margin:auto; }
.store-item-icon .store-felt-preview{
  width:52px; height:34px; border-radius:999px; margin:auto; position:static; aspect-ratio:auto;
  box-shadow: 0 0 0 2px #6d5220, 0 0 0 3px rgba(246,236,208,.5), 0 6px 16px rgba(0,0,0,.6) !important;
}
.store-item-icon .store-name-preview{ font-weight:800; font-size:18px; letter-spacing:.02em; }
.store-item-icon .store-title-preview{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:0 4px; }

/* превью рубашки рядом с аватаром на мини-столе */
.store-preview-mini-table .store-preview-back{ position:absolute; right:14px; bottom:14px; width:40px; height:56px; }
/* магазин подключает table-premium.css ради рубашек и сукна — сам .poker-table там absolute,
   в превью он должен быть обычным блоком */
.store-preview-mini-table[data-felt]{ border-color: rgba(232,197,105,.5); }

/* ===== Открытие кейса ===== */
@keyframes caseShake { 0%,100%{ transform:rotate(0) } 20%{ transform:rotate(-8deg) scale(1.05) } 40%{ transform:rotate(8deg) scale(1.08) } 60%{ transform:rotate(-6deg) scale(1.1) } 80%{ transform:rotate(6deg) scale(1.12) } }
@keyframes caseOpen  { to { transform: translateY(-40px) scale(.4); opacity:0 } }
@keyframes caseCard  { 0%{ transform: translateY(30px) scale(.6); opacity:0 } 60%{ transform: translateY(-8px) scale(1.05); opacity:1 } 100%{ transform:none; opacity:1 } }
.case-reveal{ position:fixed; inset:0; z-index:12000; display:grid; place-items:center; }
.case-reveal__backdrop{ position:absolute; inset:0; background:rgba(3,2,8,.82); backdrop-filter:blur(8px); }
.case-reveal__box{ position:relative; display:grid; place-items:center; min-width:280px; }
.case-reveal__chest{ font-size:96px; line-height:1; filter: drop-shadow(0 0 24px rgba(232,197,105,.7)); }
.case-reveal__chest.is-shaking{ animation: caseShake .9s ease-in-out; }
.case-reveal__chest.is-open{ animation: caseOpen .4s ease-in forwards; }
.case-reveal__card{
  position:absolute; width:min(320px, 86vw); padding:22px 18px 18px; border-radius:20px; text-align:center;
  background: linear-gradient(160deg, rgba(30,25,44,.99), rgba(12,10,20,.99));
  border:1px solid rgba(232,197,105,.45); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 40px rgba(232,197,105,.25);
  animation: caseCard .55s cubic-bezier(.2,.9,.25,1.05) both;
}
.case-reveal__card.is-hidden{ display:none; }
.case-reveal__card.store-rarity--legendary{ border-color: rgba(255,184,74,.8); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,184,74,.45); }
.case-reveal__card.store-rarity--mythic{ border-color: rgba(255,120,200,.9); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 70px rgba(255,120,200,.5); }
.case-reveal__icon{ display:grid; place-items:center; height:84px; font-size:44px; margin-bottom:10px; }
.case-reveal__icon .store-frame-preview{ width:64px; height:64px; }
.case-reveal__name{ font-size:18px; font-weight:800; color:#fff; }
.case-reveal__meta{ font-size:12px; color: rgba(245,245,255,.7); margin-top:4px; }
.case-reveal__note{ font-size:12px; color: rgba(232,197,105,.9); margin:12px 0 14px; }
.case-reveal__close{ width:100%; }
.case-reveal__icon .avatar-frame{ width:64px; height:64px; }
.case-reveal__icon .avatar-frame .store-frame-core{ font-size:18px; }
.case-reveal__icon .store-back-preview{ width:48px; height:66px; }

/* Карусель категорий прокручивается по горизонтали (overflow:auto), а это режет и
   вертикальное сияние активной вкладки. Даём свечению место внутри контейнера. */
.store-tabs{ padding-top:14px !important; padding-bottom:14px !important; margin-top:-6px; margin-bottom:6px; }
.store-tab .emoji{ display:inline-flex; align-items:center; line-height:0; margin-right:4px; }
.store-tab .mb-ico{ color: currentColor; }

/* кнопки в диалоге подтверждения кейса (замена системного confirm) */
.case-reveal__actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top: 14px;
}

/* pity-счётчик в окне вскрытия кейса */
.case-reveal__pity{
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(200,203,255,.7);
}
.case-reveal__pity.is-hit{
  color: #f2e3b8;
  text-shadow: 0 0 12px rgba(232,197,105,.45);
}

/* подарок другому игроку */
.gift-dialog .case-reveal__card{ max-width: 380px; }
.gift-search, .gift-message{
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,10,22,.95);
  color: #f5f5ff;
  font-size: 13px;
  outline: none;
}
.gift-search:focus, .gift-message:focus{ border-color: rgba(232,197,105,.6); }
.gift-results{ display:flex; flex-direction:column; gap:4px; margin-top:8px; max-height:150px; overflow-y:auto; }
.gift-user{
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,10,22,.8);
  color: #e6e8f5;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.gift-user:hover{ border-color: rgba(232,197,105,.45); }
.gift-user.is-on{ border-color: rgba(232,197,105,.85); background: rgba(232,197,105,.14); color:#f2e3b8; }
.gift-empty{ font-size:12px; color:#9a9aad; padding:6px 2px; }