/* incubator.css — component only (NO TOKENS HERE)
   - использует только tokens.css
   - аккуратные размеры, ровные отступы, читабельные плашки
*/

/* ===== Инкубатор (контейнер) ===== */
.incubator-section{
  width: 100%;
  margin: 0;
  padding: 14px;
  border-radius: 22px;

  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);

  height: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== Сетка ===== */
.incubator-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  padding: 10px 6px;
}

/* ===== Карточка ===== */
.incubator-slot{
  position: relative;
  border-radius: 16px;
  padding: 12px 12px 10px;
  background: transparent;
  overflow: hidden;
  z-index: 0;

  /* свечения */
  --r-border: rgba(255,255,255,.14);

  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}

.incubator-slot:active{
  transform: scale(1.01);
}

/* фон редкости */
.incubator-slot .pigeon-card-bg{
  position: absolute;
  inset: 0;
  border-radius: 16px;
  z-index: -2;
}

/* маппинг на rarity info-bg */
.incubator-slot.rarity-common    .pigeon-card-bg{ background: var(--common-info-bg); }
.incubator-slot.rarity-rare      .pigeon-card-bg{ background: var(--rare-info-bg); }
.incubator-slot.rarity-epic      .pigeon-card-bg{ background: var(--epic-info-bg); }
.incubator-slot.rarity-legendary .pigeon-card-bg{ background: var(--legendary-info-bg); }
.incubator-slot.rarity-mythical  .pigeon-card-bg{ background: var(--mythical-info-bg); }
.incubator-slot.rarity-divine    .pigeon-card-bg{ background: var(--divine-info-bg); }
.incubator-slot.rarity-artifact  .pigeon-card-bg{ background: var(--artifact-info-bg); }

/* глянец + лёгкая виньетка */
.incubator-slot .pigeon-card-bg::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(120px 80px at 30% 12%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.18));
  opacity: .55;
}

/* мягкая рамка/свечение */
.incubator-slot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index:-1;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 16px var(--r-border);
}

/* свечения по редкости */
.incubator-slot.rarity-common    { --r-border: var(--common-border); }
.incubator-slot.rarity-rare      { --r-border: var(--rare-border); }
.incubator-slot.rarity-epic      { --r-border: var(--epic-border); }
.incubator-slot.rarity-legendary { --r-border: var(--legendary-border); }
.incubator-slot.rarity-mythical  { --r-border: var(--mythical-border); }
.incubator-slot.rarity-divine    { --r-border: var(--divine-border); }
.incubator-slot.rarity-artifact  { --r-border: var(--artifact-border); }

/* ===== Картинка яйца ===== */
.incubator-slot img{
  width: 92px;
  height: 92px;
  object-fit: contain;
  display: block;
  margin: 4px auto 10px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

/* ===== Инфо-плашки (как в коллекции/модалке) ===== */
.incubator-slot h3,
.incubator-slot p{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;
  border-radius: 999px;

  background: var(--catch-info-overlay);
  border: 1px solid var(--catch-info-inner-border);

  color: var(--catch-info-text);
  text-shadow: 0 1px 2px rgba(0,0,0,.18);

  line-height: 1;
  margin: 0 auto 6px;
  position: relative;
  z-index: 3;
  max-width: 100%;
  white-space: nowrap;
}

/* заголовок */
.incubator-slot h3{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1px;
  padding: 7px 12px;
}

/* подписи */
.incubator-slot p{
  font-size: 11px;
  font-weight: 700;
  opacity: .96;
}

/* common — светлый фон -> тёмный текст, чтобы не мылить */
.incubator-slot.rarity-common h3,
.incubator-slot.rarity-common p{
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--text-on-light);
  text-shadow: none;
}

/* редкость — цвет текста берём из токенов */
.incubator-slot .rarity-common    { color: var(--common-color); }
.incubator-slot .rarity-rare      { color: var(--rare-color); }
.incubator-slot .rarity-epic      { color: var(--epic-color); }
.incubator-slot .rarity-legendary { color: var(--legendary-color); }
.incubator-slot .rarity-mythical  { color: var(--mythical-color); }
.incubator-slot .rarity-divine    { color: var(--divine-color); }
.incubator-slot .rarity-artifact  { color: var(--artifact-color); }

/* "Готово!" — компактный бейдж */
.incubator-slot.hatch-ready p:last-of-type{
  background: rgba(74,222,128,.20); /* близко к button-active, но мягко */
  border-color: rgba(74,222,128,.35);
  color: rgba(255,255,255,.95);
  font-weight: 900;
}

/* common для "Готово!" тоже тёмным */
.incubator-slot.rarity-common.hatch-ready p:last-of-type{
  background: rgba(74,222,128,.30);
  border-color: rgba(34,197,94,.35);
  color: var(--text-on-light);
}

/* ===== Прогресс ===== */
.progress-bar{
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 6px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}

.progress{
  height: 100%;
  width: 0%;
  background: var(--accent-blue);
  box-shadow: 0 0 10px rgba(91,168,255,.45);
  transition: width .25s ease;
}

/* ===== Кнопка открытия ===== */
.open-button{
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;

  border-radius: 12px;
  border: 1px solid var(--border-subtle);

  background: var(--button-bg);
  color: var(--text-primary);

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;

  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, filter .18s ease, background .18s ease;
}

.open-button:hover:not(:disabled){
  background: var(--button-hover);
  filter: brightness(1.04);
}

.open-button:active:not(:disabled){
  background: var(--button-active);
  transform: translateY(1px) scale(.99);
}

.open-button:disabled{
  background: var(--button-disabled);
  border-color: transparent;
  color: var(--text-secondary);
  opacity: .78;
  cursor: not-allowed;
  box-shadow: none;
}

/* ===== Анимация вылупления ===== */
.incubator-slot.hatch-animation .pigeon-card-bg{
  animation: pigeon-hatch .5s ease forwards;
}

@keyframes pigeon-hatch{
  0%   { transform: scale(.92); opacity: .9; }
  50%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Пустые слоты ===== */
.incubator-slot.empty{
  background: var(--surface-1);
  border: 1px dashed var(--border-subtle);
}
.incubator-slot.empty::before{
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* ===== Мобилка ===== */
@media (max-width: 450px){
  .incubator-grid{ gap: 10px; padding: 10px 2px; }
  .incubator-slot{ padding: 11px 10px 9px; border-radius: 16px; }
  .incubator-slot img{ width: 86px; height: 86px; margin-bottom: 9px; }
  .incubator-slot h3{ font-size: 12.5px; padding: 7px 12px; }
  .incubator-slot p{ font-size: 11px; padding: 6px 10px; }
  .open-button{ font-size: 11.5px; padding: 9px 10px; }
}

/* ===== Панель блокировки инкубатора ===== */
.incubator-locked{
  margin: 60px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 24px;
  border-radius: 16px;

  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);

  text-align: center;
  max-width: 320px;
}

.incubator-lock{
  width: 76px;
  height: 76px;
  opacity: .95;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

.locked-title{
  color: var(--text-primary);
  font-weight: 900;
  font-size: 18px;
}

.unlock-incubator-btn{
  background: var(--button-active);
  color: var(--text-on-light);
  border: none;
  border-radius: 14px;

  padding: 10px 22px;
  font-weight: 900;

  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  cursor: pointer;

  transition: transform .12s ease, filter .18s ease;
}

.unlock-incubator-btn:hover:not(:disabled){
  filter: brightness(1.06);
}

.unlock-incubator-btn:active:not(:disabled){
  transform: translateY(1px) scale(.99);
}

.unlock-incubator-btn:disabled{
  background: var(--button-disabled);
  color: var(--text-secondary);
  box-shadow: none;
  cursor: default;
}