﻿/* Main stylesheet loader. Split from legacy monolith without changing cascade order. */
/* admin tab layout fix: no empty slot for regular users, 5th slot only when admin tab is visible */
.bottom-nav.bottom-nav-4,
.redesign-bottom-nav.bottom-nav-4{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}

.bottom-nav.bottom-nav-4:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])),
.redesign-bottom-nav.bottom-nav-4:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])){
  grid-template-columns:repeat(4, minmax(0, 1fr)) auto !important;
}

.bottom-nav.bottom-nav-5,
.redesign-bottom-nav.bottom-nav-5{
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
}

.bottom-nav.bottom-nav-5:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])),
.redesign-bottom-nav.bottom-nav-5:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])){
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
}


.app-splash-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#041022;
  opacity:1;
  visibility:visible;
  transition:opacity .24s ease, visibility .24s ease;
}

.app-splash-screen.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.app-splash-screen__content{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.app-splash-screen__logo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scaleY(1.04);
  display:block;
}

.app-splash-screen__spinner{
  position:absolute;
  left:50%;
  bottom:max(32px, env(safe-area-inset-bottom) + 18px);
  transform:translateX(-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:#fff;
  animation:app-splash-spin .8s linear infinite;
}

@keyframes app-splash-spin{
  to{ transform:rotate(360deg); }
}

/* hide bottom nav only when fullscreen game overlay is actually open */
.app-shell:has(#fullscreenGameOverlay:not(.hidden)) .bottom-nav,
.app-shell:has(#fullscreenGameOverlay:not(.hidden)) .redesign-bottom-nav{
  display:none !important;
}

/* hide bottom nav when profile action modal is open */
.app-shell:has(#profileActionModal:not(.hidden)) .bottom-nav,
.app-shell:has(#profileActionModal:not(.hidden)) .redesign-bottom-nav{
  display:none !important;
}

/* mobile polish v2026-04-05 */
#inventory-screen .compact-inventory-hero{
    padding: 14px 16px 16px;
    border-radius: 22px;
    width: 100%;
    margin: 0 auto;
    min-height: unset;
  }
  #inventory-screen .compact-inventory-balance-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: unset;
    width: min(100%, 460px);
    margin: 0 auto;
  }
  #inventory-screen .gift-balance-line{
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    width: 100%;
    display:flex;
    justify-content:center;
  }
#inventory-screen #giftInventorySummary{
      display:inline-flex;
      align-items:center;
      min-height: 34px;
      width: fit-content;
      max-width: 100%;
      padding: 0 14px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(17, 40, 84, 0.92), rgba(10, 24, 52, 0.96));
      border: 1px solid rgba(118, 166, 255, 0.14);
      color: #f2f7ff;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -.01em;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
  #inventory-screen .compact-inventory-actions{
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:12px;
        width: 100%;
        margin: 0;
      }
#inventory-screen .compact-inventory-actions .ton-btn,
#inventory-screen .compact-inventory-actions .dark-btn{
        min-height: 56px;
        padding: 0 16px;
        border-radius: 18px;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        line-height: 1;
      }
#inventory-screen .compact-inventory-card{
    padding: 12px;
    border-radius: 24px;
  }
#inventory-screen #giftInventory{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap:10px;
    align-items:start;
  }
  #inventory-screen .inventory-gift-card.inventory-gift-tile{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding: 8px;
    border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(88, 137, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(10, 26, 54, 0.96), rgba(8, 19, 43, 0.98));
  border: 1px solid rgba(101, 151, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
  }
  #inventory-screen .inventory-gift-card.inventory-gift-tile.is-active{
  border-color: rgba(255, 194, 91, 0.5);
  background:
    radial-gradient(circle at top right, rgba(255, 202, 110, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(13, 30, 60, 0.98), rgba(8, 21, 45, 1));
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  #inventory-screen .inventory-gift-main{
    display:block;
    cursor:pointer;
    outline:none;
  }
  #inventory-screen .inventory-gift-visual{
    position:relative;
    width:100%;
    aspect-ratio: 1 / 1;
    padding:6px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(180deg, rgba(31, 68, 119, 0.92), rgba(17, 37, 72, 0.98));
    border: 1px solid rgba(154, 196, 255, 0.14);
    overflow:hidden;
  }
  #inventory-screen .inventory-gift-image,
  #inventory-screen .inventory-gift-fallback{
    width:72%;
    height:72%;
    border-radius:14px;
  }
#inventory-screen .inventory-gift-image{
  object-fit:contain;
}
#inventory-screen .inventory-gift-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:800;
  color:#f3f7ff;
  background: linear-gradient(180deg, rgba(244, 157, 210, 0.86), rgba(132, 91, 173, 0.92));
}
#inventory-screen .inventory-gift-price-badge{
    position:absolute;
    right:8px;
    bottom:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding: 0 8px;
    border-radius:999px;
    background: rgba(6, 12, 28, 0.82);
    border: 1px solid rgba(255,255,255,0.08);
    color:#f8fbff;
    font-size:12px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    backdrop-filter: blur(10px);
  }
#inventory-screen .inventory-gift-actions{
    display:none !important;
    grid-template-columns: 1fr;
    gap:6px;
  }
#inventory-screen .inventory-gift-actions[hidden]{
    display:none !important;
  }
#inventory-screen .inventory-gift-card.inventory-gift-tile.is-active .inventory-gift-actions{
    display:grid !important;
  }
#inventory-screen .inventory-gift-actions .small-btn,
#inventory-screen .inventory-gift-actions .dark-btn{
    min-height:34px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
  }

/* final mobile viewport + profile modal fix */
:root{
  --yak-fullscreen-top-offset: 58px;
  --yak-fullscreen-top-offset-short: 52px;
  --yak-fullscreen-top-offset-tiny: 46px;
  --yak-screen-bottom-pad: calc(var(--layout-nav-height, var(--nav-h, 78px)) + var(--safe-bottom) + 20px);
  --yak-profile-modal-top-gap: max(10px, calc(var(--safe-top) + 8px));
  --yak-profile-modal-bottom-gap: max(10px, calc(var(--safe-bottom) + 8px));
}

html.is-tg-fullscreen{
  --tg-top-ui-offset: var(--yak-fullscreen-top-offset);
}

html.is-tg-fullscreen.is-short-screen{
  --tg-top-ui-offset: var(--yak-fullscreen-top-offset-short);
}

html.is-tg-fullscreen.is-tiny-screen{
  --tg-top-ui-offset: var(--yak-fullscreen-top-offset-tiny);
}

.screen.active{
  scroll-padding-top: 8px;
  scroll-padding-bottom: var(--yak-screen-bottom-pad);
}

#profile-screen.screen.active{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:0 0 var(--yak-screen-bottom-pad) !important;
}

#profile-screen .cards-stack.redesign-profile-stack{
  min-height:min-content;
  padding-bottom:6px;
}

#profile-screen .redesign-profile-hero,
#profile-screen .redesign-quick-links,
#profile-screen #wallet-screen.profile-history-only{
  scroll-margin-top: calc(var(--safe-top) + var(--tg-top-ui-offset, 0px) + 82px);
}

.profile-action-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:
    var(--yak-profile-modal-top-gap)
    max(8px, env(safe-area-inset-right, 0px) + 8px)
    var(--yak-profile-modal-bottom-gap)
    max(8px, env(safe-area-inset-left, 0px) + 8px) !important;
  overflow:hidden;
}

.profile-action-card{
  width:min(100%, 560px) !important;
  max-height:calc(var(--tg-vh, 100dvh) - var(--yak-profile-modal-top-gap) - var(--yak-profile-modal-bottom-gap)) !important;
  min-height:0;
  margin:0 auto;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  overflow:hidden !important;
}

.profile-action-head{
  position:sticky;
  top:0;
  z-index:2;
  flex:0 0 auto;
}

.profile-action-body{
  min-height:0;
  overflow:hidden;
  display:block;
}

.profile-action-body > #wallet-screen{
  height:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  padding-right:2px;
  padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}

.profile-action-body > #wallet-screen .wallet-layout{
  min-height:min-content;
}

@media (max-width: 720px){
  .profile-action-modal{
    padding:
      max(8px, calc(var(--safe-top) + 6px))
      6px
      max(8px, calc(var(--safe-bottom) + 6px))
      6px !important;
  }

  .profile-action-card{
    width:100% !important;
    max-height:calc(var(--tg-vh, 100dvh) - max(8px, calc(var(--safe-top) + 6px)) - max(8px, calc(var(--safe-bottom) + 6px))) !important;
    border-radius:22px !important;
    padding:12px !important;
  }

  .profile-action-head{
    margin-bottom:8px !important;
  }

  .profile-action-close{
    width:38px !important;
    height:38px !important;
  }

  .profile-action-body > #wallet-screen .wallet-layout{
    gap:8px !important;
  }

  .profile-action-body > #wallet-screen .panel-card{
    padding:10px !important;
  }

  .profile-action-body > #wallet-screen .panel-title{
    font-size:15px !important;
    line-height:1.1 !important;
  }

  .profile-action-body > #wallet-screen .field input,
  .profile-action-body > #wallet-screen .buy-btn,
  .profile-action-body > #wallet-screen .ton-btn,
  .profile-action-body > #wallet-screen .danger-btn,
  .profile-action-body > #wallet-screen .dark-btn,
  .profile-action-body > #wallet-screen .profile-info-chip{
    min-height:40px !important;
  }
}

#tasks-screen .compact-tasks-stack{
  gap: 8px;
}
#tasks-screen .compact-tasks-head{
  margin-bottom: 4px;
}
#tasks-screen .compact-tasks-list{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
#tasks-screen #gamesTaskList{
  gap: 10px;
}
#tasks-screen .task-public-card.premium-task-card{
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 198, 86, 0.12), transparent 34%),
    radial-gradient(circle at top left, rgba(75, 120, 255, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(9, 23, 50, 0.98), rgba(6, 17, 39, 1));
  border: 1px solid rgba(113, 157, 255, 0.11);
}
#tasks-screen .task-public-topline{
  margin-bottom: 10px;
}
#tasks-screen .task-public-kicker{
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .12em;
  background: rgba(255,255,255,0.06);
}
#tasks-screen .task-public-title{
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.2;
}
#tasks-screen .task-public-link{
  margin-top: 0;
  color: #89c5ff;
  font-size: 14px;
  font-weight: 700;
}
#tasks-screen .task-public-meta{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(221, 231, 247, 0.78);
}
#tasks-screen .task-public-footer{
  margin-top: 14px;
  gap: 10px;
}
#tasks-screen .task-public-chip.reward-chip{
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #9ed9ff;
  background: rgba(56, 110, 230, 0.14);
  border: 1px solid rgba(99, 162, 255, 0.18);
}
#tasks-screen .task-premium-btn.gold-btn{
  min-height: 46px;
  border-radius: 15px;
  font-size: 15px;
}

#admin-screen .compact-mobile-admin-card{
  padding: 14px;
  border-radius: 24px;
}
#admin-screen .compact-mobile-admin-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}
#admin-screen .compact-mobile-admin-head .panel-title{
  font-size: 22px;
  line-height: 1.1;
}
#admin-screen .compact-admin-route-link{
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
#admin-screen .compact-mobile-admin-tabs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-bottom: 12px;
}
#admin-screen .compact-mobile-admin-tabs .admin-tab-btn{
  min-height: 42px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}
#admin-screen .admin-subtitle{
  margin-bottom: 10px;
  color: rgba(234, 241, 255, 0.92);
  font-size: 14px;
  font-weight: 800;
}
#admin-screen .admin-info-box,
#admin-screen .admin-meta-note{
  display:none;
}
#admin-screen .admin-form-card.admin-surface-card{
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 24, 52, 0.92), rgba(7, 17, 39, 0.98));
  border: 1px solid rgba(104, 146, 229, 0.12);
}
#admin-screen .admin-inline-actions{
  gap: 8px;
}
#admin-screen .admin-inline-actions .primary-btn,
#admin-screen .admin-inline-actions .dark-btn,
#admin-screen .admin-inline-actions .danger-btn,
#admin-screen .admin-inline-actions .secondary-btn{
  min-height: 42px;
  border-radius: 14px;
  font-size: 13px;
}
#admin-screen .list-box.compact-admin-list{
  border-radius: 18px;
}

@media (max-width: 640px){
  #inventory-screen .compact-inventory-balance-card{
      flex-direction: column;
      align-items: stretch;
    }
  #inventory-screen .compact-inventory-actions{
        width: 100%;
        gap:10px;
      }
  #inventory-screen .compact-inventory-hero{
      width: 100%;
      padding: 12px 14px 14px;
      }
  #inventory-screen .inventory-gift-main{
      display:block;
    }
  #inventory-screen .inventory-gift-visual{
      padding:6px;
    }
  #inventory-screen .inventory-gift-image,
  #inventory-screen .inventory-gift-fallback{
      width:72%;
      height:72%;
    }
  #admin-screen .compact-mobile-admin-head .panel-title{
    font-size: 20px;
  }
}

/* inventory polish v2026-04-08 */
#inventory-screen .compact-inventory-card{
  padding: 12px !important;
}

#inventory-screen #giftInventory{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px 7px !important;
}

#inventory-screen .inventory-gift-card.inventory-gift-tile{
  gap: 8px !important;
  padding: 7px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top right, rgba(88, 137, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(10, 26, 54, 0.96), rgba(8, 19, 43, 0.98)) !important;
  border: 1px solid rgba(101, 151, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

#inventory-screen .inventory-gift-card.inventory-gift-tile.is-active{
  border-color: rgba(255, 194, 91, 0.5) !important;
  background:
    radial-gradient(circle at top right, rgba(255, 202, 110, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(13, 30, 60, 0.98), rgba(8, 21, 45, 1)) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

#inventory-screen .inventory-gift-main{
  display: block !important;
}

#inventory-screen .inventory-gift-visual{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  min-height: unset !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#inventory-screen .inventory-gift-card.inventory-gift-tile.is-active .inventory-gift-visual{
  border: none !important;
  box-shadow: none !important;
}

#inventory-screen .inventory-gift-image,
#inventory-screen .inventory-gift-fallback{
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px !important;
}

#inventory-screen .inventory-gift-image{
  object-fit: cover !important;
}

#inventory-screen .inventory-gift-fallback{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: rgba(255,255,255,.12) !important;
}

#inventory-screen .inventory-gift-price-badge{
  left: 6px !important;
  right: auto !important;
  top: auto !important;
  bottom: 6px !important;
  min-height: 24px !important;
  max-width: calc(100% - 12px) !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(11, 43, 38, 0.92) !important;
  border: none !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#inventory-screen .inventory-gift-actions{
  display: none !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

#inventory-screen .inventory-gift-card.inventory-gift-tile.is-active .inventory-gift-actions{
  display: grid !important;
}

#inventory-screen .inventory-gift-actions .small-btn,
#inventory-screen .inventory-gift-actions .dark-btn{
  min-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#inventory-screen .inventory-gift-withdraw-btn{
  position: relative !important;
  color: transparent !important;
  text-shadow: none !important;
  background: linear-gradient(135deg, #d88c33, #f1b153) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 22px rgba(216, 140, 51, 0.2) !important;
}

#inventory-screen .inventory-gift-withdraw-btn::after{
  content: "Вывод";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

#inventory-screen button[data-gift-sell]{
  background: linear-gradient(135deg, rgba(112, 78, 255, 0.95), rgba(182, 91, 255, 0.92)) !important;
  color: #fff !important;
  border: 1px solid rgba(206, 170, 255, 0.18) !important;
  box-shadow: 0 8px 22px rgba(126, 84, 255, 0.2) !important;
}

#inventory-screen #giftWithdrawNotice{
  display: grid !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

#inventory-screen .inventory-withdraw-item{
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
}

#inventory-screen .inventory-withdraw-title{
  margin-bottom: 3px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

#inventory-screen .inventory-withdraw-text{
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,.72) !important;
}

