@layer reset, base, utilities, modal, shop, inventory, boosts, upgrades, stats, catch, incubator;

/* ===================================================== */
/* ===================== BASE =========================== */
/* ===================================================== */

/* База шрифтов и сглаживание */
html, body {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ВСЕ элементы по умолчанию наследуют шрифт */
*, *::before, *::after { font-family: inherit; }

body {
  font-family: 'Nunito', sans-serif;
  padding: 0;
  padding-bottom: var(--layout-bottom-padding);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-y: hidden;
  user-select: none;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 450px;
  margin: 0 auto;
  transition: background 0.3s ease, color 0.3s ease;
  touch-action: manipulation;
}

/* ===================================================== */
/* ===================== HEADER ========================= */
/* ===================================================== */

.header{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  background: var(--bg-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  width:100%;
  position:sticky;
  top:0;
  z-index:10;
  min-height:55px;
}

.pigeon-icon{
  width:34px;
  height:34px;
  padding:4px;
  border-radius:50%;
  background:var(--bg-card);
  box-shadow:0 2px 6px var(--shadow);
}

.title{ margin-left:8px; }
.title h1{
  font-size:18px;
  margin:0;
  color:var(--accent);
  text-shadow:0 1px 2px var(--shadow);
}
.title p{
  font-size:12px;
  margin:2px 0 0;
  color:var(--text-secondary);
}

/* ===================================================== */
/* ===================== COMMON ========================= */
/* ===================================================== */

.money-section,
.feathers-section{
  text-align:center;
  font-size:16px;
  font-weight:600;
  color:var(--accent);
  text-shadow:0 1px 4px var(--shadow);
  margin:10px 0;
}

.feathers-section img{
  width:32px;
  height:32px;
  vertical-align:middle;
  margin-right:5px;
}

.money-section-value,
.feathers-section-value{
  color:var(--accent);
}

/* ===================================================== */
/* ===================== TABS =========================== */
/* ===================================================== */

.tab-content{
  width:100%;
  padding:15px;
  padding-bottom: calc(250px + env(safe-area-inset-bottom));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  height:auto;
  min-height: calc(100vh - 140px - env(safe-area-inset-bottom));
  flex-grow:1;
  box-sizing:border-box;
  display:none;
}

.tab-content.active{ display:block; }

.tab-content#farm-tab,
.tab-content#upgrades-tab,
.tab-content#incubator-tab{
  overflow-y:auto;
  height:auto;
}

@media (max-width: 450px){
  .tab-content#farm-tab,
  .tab-content#upgrades-tab,
  .tab-content#incubator-tab{
    animation:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ===================================================== */
/* ===================== MAIN =========================== */
/* ===================================================== */

.main-section{
  text-align:center;
  font-size:36px;
  font-weight:700;
  color:var(--accent);
  margin:15px 0;
}

.income-section{
  text-align:center;
  font-size:16px;
  color:var(--text-secondary);
  margin-bottom:15px;
}

/* ===================================================== */
/* ===================== INCUBATOR ====================== */
/* ===================================================== */

.incubator-locked{
  text-align:center;
  font-size:18px;
  color:var(--text-secondary);
  margin:20px 0;
}

.incubator-locked button{
  background:var(--button-bg);
  color:var(--text-primary);
  border:0;
  padding:12px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  border-radius:15px;
  transition: background .3s, transform .3s;
  box-shadow:0 3px 8px var(--shadow);
  width:100%;
  margin-top:10px;
}

.incubator-locked button:not(:disabled){
  background:var(--button-active);
  box-shadow:0 3px 12px rgba(74,222,128,.5);
}

.incubator-locked button:active:not(:disabled){
  background:var(--button-hover);
  transform:scale(1.05);
}

.incubator-locked button:disabled{
  background:var(--button-disabled);
  cursor:not-allowed;
  opacity:.7;
  transform:none;
  box-shadow:0 3px 8px var(--shadow);
}

.incubator-section{
  max-width:100%;
  margin:0;
  background:var(--bg-card);
  padding:15px;
  padding-bottom: calc(200px + env(safe-area-inset-bottom));
  border-radius:25px;
  box-shadow:0 4px 20px var(--shadow);
  height:auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  z-index:1;
}

.incubator-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap:10px;
  padding:10px;
  padding-bottom:250px;
  margin-bottom:100px;
}

.incubator-slot{
  position:relative;
  padding:12px;
  border-radius:15px;
  background:transparent;
  box-shadow:0 3px 12px var(--shadow);
  transition: transform .3s ease;
  overflow:hidden;
  margin-bottom:30px;
}

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

.incubator-slot img{
  width:100px;
  height:100px;
  object-fit:contain;
  margin:0 auto 8px;
  display:block;
  position:relative;
  z-index:2;
}

.incubator-slot h3,
.incubator-slot p{
  color:var(--text-primary);
  text-align:center;
  text-shadow:0 1px 2px var(--shadow);
}

.incubator-slot h3{
  font-size:14px;
  margin:0 0 6px;
}

.incubator-slot p{
  font-size:12px;
  margin:3px 0;
}

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

.incubator-slot .pigeon-card-bg{
  position:absolute;
  inset:0;
  border-radius:15px;
  z-index:-1;
}

/* ===================================================== */
/* ===================== NOTIFICATION =================== */
/* ===================================================== */

.notification{
  position:fixed;
  bottom:150px;
  left:50%;
  transform: translateX(-50%) translateY(10px);
  background:#b22222;
  color:#fff;
  padding:6px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  z-index:950;
  opacity:0;
  transition: opacity .25s ease, transform .25s ease;
}

.notification.show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

/* ===================================================== */
/* ===================== LOADING ======================== */
/* ===================================================== */

.loading-overlay{
  position:fixed;
  inset:0;
  background:rgba(26,27,46,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  flex-direction:column;
  gap:10px;
}

.loading-spinner{
  border:8px solid #2e2f4a;
  border-top:8px solid #fff;
  border-radius:50%;
  width:60px;
  height:60px;
  animation: spin 1s linear infinite;
}

@keyframes spin{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}

.loading-text{
  color:var(--text-primary,#e6e6fa);
  font-weight:700;
  font-size:14px;
  opacity:.95;
}

/* ===================================================== */
/* ===================== WALLET ========================= */
/* ===================================================== */

.wallet-wrap.--main{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:12px auto 6px;
  width:max-content;
}

.wallet-wrap.--main .wallet-row{
  display:flex;
  gap:8px;
  justify-content:center;
}

.wallet-wrap.--main .wallet-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 3px 8px var(--shadow);
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
}

.wallet-wrap.--main .chip-feather{
  width:18px;
  height:18px;
}

.wallet-wrap.--main .income-chip{
  width:100%;
  text-align:center;
  font-size:14px;
}

@media (max-width: 380px){
  .wallet-wrap.--main{ gap:6px; }
  .wallet-wrap.--main .wallet-row{ gap:6px; }
  .wallet-wrap.--main .wallet-chip{
    padding:8px 10px;
    font-size:13px;
  }
  .wallet-wrap.--main .income-chip{ font-size:13px; }
}

/* ===================================================== */
/* ===================== QUICK ACTIONS ================== */
/* ===================================================== */

.quick-actions{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  padding:0 12px;
  margin:12px 0 16px;
}

.qa-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 10px;
  border-radius:14px;
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 3px 8px var(--shadow);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  position: relative;
}

/* NEW badge (collection) */
.qa-new{
  position:absolute;
  top: 6px;
  left: 6px;

  width: 40px;      /* было 22px */
  height: 40px;     /* было 22px */

  pointer-events:none;
  z-index: 2;

  /* чтобы анимация выглядела "пончиково" */
  transform-origin: 60% 70%;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.qa-new.hidden{ display:none; }

/* Пульс + "стряхивание" как пончик */
@keyframes donut-wiggle {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  8%   { transform: translateY(0) rotate(-10deg) scale(1.06, .92); }  /* squash */
  16%  { transform: translateY(-7px) rotate(8deg) scale(.96, 1.08); } /* stretch + jump */
  24%  { transform: translateY(0) rotate(-6deg) scale(1.04, .94); }
  32%  { transform: translateY(-3px) rotate(4deg) scale(.99, 1.02); }
  40%  { transform: translateY(0) rotate(0) scale(1); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

/* запускаем анимацию постоянно, но с паузой */
.qa-new:not(.hidden){
  animation: donut-wiggle 1.8s ease-in-out infinite;
}

/* если хочешь, чтобы появление было "поп" — твой game.js добавляет .pop */
@keyframes badge-pop {
  0%   { transform: scale(.6) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.qa-new.pop{
  animation: badge-pop .35s ease-out, donut-wiggle 1.8s ease-in-out .35s infinite;
}


.qa-ico{
  width:28px;
  height:28px;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

.qa-txt{
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
}

.qa-tile:active{
  transform: scale(0.92);
  background: rgba(168,94,255,.15);
  box-shadow: 0 2px 6px rgba(168,94,255,.35);
}

.qa-tile:hover{
  background: rgba(255,255,255,.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);










}

/* =================================================================== */
/* ===================== NAVIGATION ================================== */
/* =================================================================== */

/* навбар: flex, капсула слева + круги справа, НЕ наезжает */
.bottom-nav{
  position: fixed;
  left: 50%;
  transform: translateX(calc(-50% + var(--nav-x)));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  width: min(92vw, 400px);
  z-index: 1000;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0 6px;
  pointer-events: none;
}

/* капсула с тремя пунктами */
.bn-wrap{
  pointer-events: all;

  height: 60px;
  flex: 1 1 auto;
  min-width: 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  gap: 8px;

  padding: 6px 8px;

  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
}

/* пункт капсулы */
.bn-item{
  box-sizing: border-box;
  border: 1px solid transparent;
  width: 100%;
  height: 48px;
  border-radius: 16px;

  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  row-gap: 4px;

  padding: 6px 4px;
  color: #eaeaf3;
  text-decoration: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.bn-item + .bn-item::before{
  content:"";
  position:absolute;
  left:-4px; top:10px; bottom:10px; width:1px;
  background: rgba(255,255,255,.08);
  border-radius: 1px;
  pointer-events: none;
}

/* активный пункт */
.bn-item.active{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.bn-item.active .bn-txt{ color: var(--accent-blue); }
.bn-item.active .bn-ico{ filter: var(--icon-active-filter); }

/* мгновенно, без плавностей */
.bn-item,
.bn-txt,
.bn-ico,
.bn-fab,
.bn-fab-ico{ transition: none !important; }

/* клик-эффект */
.bn-item:active{
  background: transparent !important;
  transform: scale(.95);
}

/* ✅ КРУГЛЫЕ КНОПКИ (поиск/настройки) — железно круг, не “пилюля” */
.bn-fab{
  pointer-events: all;

  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;

  flex: 0 0 48px;

  padding: 0;
  border-radius: 50%;
  line-height: 0;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 26px rgba(0,0,0,.35);

  text-decoration: none;
  overflow: hidden;
}

.bn-fab:active{ transform: scale(.95); }

/* PNG-иконки */
.bn-ico{
  width: 26px; height: 26px;
  object-fit: contain; display: block; pointer-events: none;
}
.bn-fab-ico{
  width: 26px; height: 26px;
  object-fit: contain; display: block; pointer-events: none;
}

/* текст под иконкой в капсуле */
.bn-txt{
  font-size: 14px;
  font-weight: 700;
  opacity: .95;
  line-height: 1.2;
  text-align: center;
}

/* активные круглые кнопки (поиск/настройки) */
.bn-fab.active .bn-fab-ico{ filter: var(--icon-active-filter); }

/* адаптив */
@media (max-width: 380px){
  .bn-wrap{ height: 50px; }
  .bn-item{ height: 38px; }

  .bn-fab{
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }

  .bn-ico{ width: 22px; height: 22px; }
  .bn-fab-ico{ width: 24px; height: 24px; }
  .bn-txt{ font-size: 13px; }
}