/* ==========================================================================
   MOBILE-FLAGSHIP.CSS - Флагманские смартфоны 2024-2025
   ========================================================================== */

/* ==========================================================================
   KEYFRAMES - Вне медиа-запроса для корректной работы
   ========================================================================== */
@keyframes mobileTyping {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes mobileBlink {
  50% { border-color: transparent; }
}

/* ==========================================================================
   ТОЛЬКО ДЛЯ МОБИЛЬНЫХ (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  
  /* --------------------------------------------------------------------------
     БАЗОВЫЕ НАСТРОЙКИ
     -------------------------------------------------------------------------- */
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }
  
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  
  /* ЗАПРЕТ СКРОЛЛА НА ГЛАВНОЙ - контент должен помещаться */
  body {
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height */
    padding-top: var(--safe-top);
    -webkit-font-smoothing: antialiased;
  }
  
  /* Когда шторка открыта - блокируем скролл */
  body.drawer-open {
    overflow: hidden !important;
  }

  /* --------------------------------------------------------------------------
     SPLASH SCREEN
     -------------------------------------------------------------------------- */
  #splash-screen {
    padding: 20px;
    padding-top: calc(20px + var(--safe-top));
  }
  
  .splash-title {
    font-size: 38px !important;
  }
  
  .splash-subtitle {
    font-size: 14px !important;
    margin-bottom: 28px !important;
  }
  
  .enter-btn {
    padding: 16px 36px !important;
    font-size: 16px !important;
    min-height: 48px;
  }
  
  .enter-btn:active {
    transform: scale(0.95) !important;
  }

  /* --------------------------------------------------------------------------
     MAIN CONTAINER - Компактный, без лишнего скролла
     -------------------------------------------------------------------------- */
  .container {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    padding: 16px !important;
    margin: 12px auto !important;
    margin-bottom: 80px !important; /* Место для шторки */
    border-radius: 20px !important;
    gap: 12px !important;
  }

  /* --------------------------------------------------------------------------
     PROFILE HEADER
     -------------------------------------------------------------------------- */
  .profile-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }
  
  .profile-header .avatar {
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0;
    border-radius: 18px !important;
  }
  
  .profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px;
  }
  
  .profile-info h1 {
    font-size: 20px !important;
    margin: 0 !important;
  }
  
  .profile-info .subtitle {
    font-size: 11px !important;
    opacity: 0.85;
    /* Анимация печати как на ПК */
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    border-right: 2px solid rgba(0, 191, 255, 0.7) !important;
    animation: mobileTyping 4s steps(40) 0.5s forwards, mobileBlink 0.6s step-end infinite !important;
  }
  
  .profile-info .socials {
    gap: 10px !important;
    margin-top: 4px !important;
  }
  
  .socials a {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .socials a:active {
    transform: scale(0.9);
    background: rgba(0, 191, 255, 0.15);
  }
  
  .socials a img {
    width: 26px !important;
    height: 26px !important;
  }
  
  .socials a::before,
  .socials a::after {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     DISCORD CARD - Исправленный layout
     -------------------------------------------------------------------------- */
  .cards-row {
    gap: 12px !important;
  }
  
  .cards-row .discord-card,
  .discord-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 16px !important;
    background: rgba(88, 101, 242, 0.12) !important;
    border: 1px solid rgba(88, 101, 242, 0.3) !important;
    position: relative;
    overflow: visible !important;
  }
  
  .discord-left {
    flex-shrink: 0;
    position: relative;
    width: 50px;
    height: 50px;
    align-self: center;
  }
  
  .cards-row .discord-card .avatar-small,
  .discord-card .avatar-small {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: block !important;
  }
  
  .discord-status-dot {
    width: 14px !important;
    height: 14px !important;
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    border: 2px solid rgba(20, 20, 30, 0.9) !important;
    border-radius: 50%;
  }
  
  .cards-row .discord-info,
  .discord-info {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px;
    padding-top: 2px;
  }
  
  .cards-row .discord-info #discord-username,
  .discord-info #discord-username {
    font-size: 16px !important;
    font-weight: 600;
    margin: 0 !important;
    line-height: 1.2;
  }
  
  .cards-row .discord-info #discord-status,
  .discord-info #discord-status {
    font-size: 11px !important;
    opacity: 0.75;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
  }

  /* --------------------------------------------------------------------------
     BADGES - ПО НАЖАТИЮ ПОКАЗЫВАЕМ НАЗВАНИЕ (КАК НА ПК)
     -------------------------------------------------------------------------- */
  
  /* Убираем overflow hidden с родителей чтобы tooltip был виден */
  .cards-row .discord-card,
  .discord-card,
  .discord-info,
  .cards-row {
    overflow: visible !important;
  }
  
  .cards-row .badges,
  .badges {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin-top: 6px !important;
    position: relative;
    z-index: 10001;
    overflow: visible !important;
  }
  
  .cards-row .badge,
  .badge {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 4px !important;
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  
  .cards-row .badge img,
  .badge img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 4px;
    pointer-events: none;
  }
  
  /* Tooltip - СВЕРХУ бейджа */
  .cards-row .badge::after,
  .badge::after {
    content: attr(data-title) !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.9) !important;
    background: linear-gradient(135deg, rgba(0,0,0,0.98), rgba(15,15,35,0.98)) !important;
    border: 1px solid rgba(0,191,255,0.4) !important;
    color: #fff !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    z-index: 100002 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6) !important;
  }
  
  .cards-row .badge::before,
  .badge::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + 0px) !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.9) !important;
    border: 7px solid transparent !important;
    border-top-color: rgba(0,0,0,0.98) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 100002 !important;
    transition: all 0.2s ease !important;
  }
  
  /* Показываем tooltip при классе show-tooltip */
  .cards-row .badge.show-tooltip::after,
  .badge.show-tooltip::after {
    transform: translateX(-50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .cards-row .badge.show-tooltip::before,
  .badge.show-tooltip::before {
    transform: translateX(-50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Эффект при нажатии */
  .cards-row .badge.show-tooltip,
  .badge.show-tooltip {
    transform: scale(1.2) !important;
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.6) !important;
  }
  
  /* Кнопка копирования Discord */
  .copy-discord-btn {
    padding: 10px 16px !important;
    font-size: 12px !important;
    min-height: 38px;
    margin-top: 10px !important;
    border-radius: 10px !important;
  }

  /* --------------------------------------------------------------------------
     SERVICES CARD
     -------------------------------------------------------------------------- */
  .cards-row .main-card {
    padding: 12px !important;
    border-radius: 14px !important;
  }
  
  .cards-row .main-card h2 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  
  .cards-row .skills {
    gap: 6px !important;
  }
  
  .cards-row .skills li {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    min-height: 40px;
  }
  
  .cards-row .skills li:active {
    transform: scale(0.96);
  }

  /* --------------------------------------------------------------------------
     ШТОРКА С КОНТРОЛАМИ (Drawer)
     -------------------------------------------------------------------------- */
  
  /* Кнопка открытия шторки - всегда видна */
  .drawer-handle {
    position: fixed;
    bottom: calc(8px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 28px;
    background: rgba(20, 22, 30, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }
  
  .drawer-handle::after {
    content: '';
    width: 28px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
  }
  
  .drawer-handle:active {
    transform: translateX(-50%) scale(0.95);
  }
  
  /* Когда шторка открыта - handle чуть выше шторки */
  body.drawer-open .drawer-handle {
    bottom: calc(88px + var(--safe-bottom));
  }
  
  /* Сама шторка */
  .controls-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(15, 17, 25, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 0 0;
    padding: 12px 16px;
    padding-bottom: calc(12px + var(--safe-bottom));
    z-index: 99998;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  }
  
  body.drawer-open .controls-drawer {
    transform: translateY(0);
  }
  
  /* Контент шторки */
  .drawer-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
  }

  /* --------------------------------------------------------------------------
     ПЛЕЕР В ШТОРКЕ
     -------------------------------------------------------------------------- */
  #music-player {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  
  #music-player.before-enter,
  #music-player.entering {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }
  
  .player-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .player-btn:active {
    transform: scale(0.9);
    background: rgba(0, 191, 255, 0.2) !important;
  }
  
  .play-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.2), rgba(0, 128, 128, 0.2)) !important;
    border: 1px solid rgba(0, 191, 255, 0.3) !important;
  }
  
  .volume-control,
  .music-visualizer {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     СЧЁТЧИК ПОСЕЩЕНИЙ В ШТОРКЕ
     -------------------------------------------------------------------------- */
  #visit-counter {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 6px !important;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  
  #visit-counter.before-enter,
  #visit-counter.entering {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }

  /* --------------------------------------------------------------------------
     КНОПКА ПРОИЗВОДИТЕЛЬНОСТИ В ШТОРКЕ
     -------------------------------------------------------------------------- */
  .performance-toggle {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  
  .performance-toggle.performance-mode {
    background: rgba(100, 200, 100, 0.15) !important;
    border-color: rgba(100, 200, 100, 0.3) !important;
  }
  
  .performance-toggle:active {
    transform: scale(0.9) !important;
  }

  /* --------------------------------------------------------------------------
     TOAST УВЕДОМЛЕНИЯ - ВЫШЕ ШТОРКИ
     -------------------------------------------------------------------------- */
  .toast,
  .toast-container,
  [class*="toast"] {
    bottom: auto !important;
    top: calc(60px + var(--safe-top)) !important;
    z-index: 100000 !important;
  }

  /* --------------------------------------------------------------------------
     СТРАНИЦА ЗВЁЗД - КОМПАКТНАЯ
     -------------------------------------------------------------------------- */
  .stars-container {
    width: calc(100% - 20px) !important;
    padding: 12px !important;
    margin: 8px auto 80px !important;
    border-radius: 16px !important;
  }
  
  .stars-container .page-header {
    margin-bottom: 12px !important;
    padding-bottom: 10px;
  }
  
  .stars-container .back-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 36px;
  }
  
  .stars-container .page-title {
    font-size: 16px !important;
    margin: 0 !important;
  }
  
  .stars-container .page-subtitle {
    font-size: 10px !important;
    margin: 2px 0 0 !important;
  }
  
  .packages-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  
  .star-pack {
    padding: 8px 4px !important;
    border-radius: 10px !important;
    min-height: auto !important;
  }
  
  .star-icon {
    font-size: 18px !important;
    margin-bottom: 2px !important;
  }
  
  .star-amount {
    font-size: 10px !important;
    margin: 2px 0 !important;
  }
  
  .star-price {
    font-size: 12px !important;
    margin: 0 !important;
  }
  
  /* Секция заказа */
  .order-section {
    margin-top: 14px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }
  
  .order-section h2 {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
  
  .order-steps {
    gap: 8px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap;
  }
  
  .order-step {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  
  .contact-buttons {
    gap: 8px !important;
  }
  
  .contact-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
    min-height: 40px;
    flex: 1;
    min-width: 100px;
  }
  
  /* --------------------------------------------------------------------------
     ДРУГИЕ СТРАНИЦЫ
     -------------------------------------------------------------------------- */
  .dev-container,
  .models-container,
  .webdev-container,
  .blockbench-container {
    width: calc(100% - 20px) !important;
    padding: 12px !important;
    margin: 8px auto 80px !important;
    border-radius: 16px !important;
  }
  
  .back-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 36px;
  }
  
  .page-title {
    font-size: 16px !important;
  }
  
  .page-subtitle {
    font-size: 10px !important;
  }
  
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .models-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  .service-card,
  .model-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }
  
  .service-card h3,
  .model-card h3 {
    font-size: 15px !important;
  }
  
  .service-card p,
  .model-card p {
    font-size: 12px !important;
  }

  /* --------------------------------------------------------------------------
     ОТКЛЮЧЕНИЕ HOVER НА TOUCH
     -------------------------------------------------------------------------- */
  .discord-card:hover,
  .card.main-card:hover,
  .skills li:hover,
  .star-pack:hover,
  .service-card:hover,
  .model-card:hover {
    transform: none !important;
  }
  
  .copy-discord-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 36px;
  }
}

/* ==========================================================================
   LANDSCAPE MODE
   ========================================================================== */
@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
  .container {
    margin: 8px auto 60px !important;
    padding: 12px !important;
  }
  
  .profile-header .avatar {
    width: 50px !important;
    height: 50px !important;
  }
  
  .profile-info h1 {
    font-size: 18px !important;
  }
  
  .splash-content {
    transform: scale(0.8);
  }
  
  .controls-drawer {
    padding: 12px;
  }
}

/* ==========================================================================
   SAFE AREA SUPPORT
   ========================================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .controls-drawer {
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
    
    .drawer-handle {
      bottom: calc(8px + env(safe-area-inset-bottom));
    }
    
    body.drawer-open .drawer-handle {
      bottom: calc(88px + env(safe-area-inset-bottom));
    }
  }
}