/* 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; }