/* Мобильные устройства (до 768px) */
  @media (max-width: 768px) {

    
    body {
      padding: 10px;
      align-items: stretch;
      overflow: hidden;
    }
    
    .main {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    
    .main.active {
      opacity: 1;
      pointer-events: auto;
    }
    
    .sidebar.hidden + .main {
      opacity: 1;
      pointer-events: auto;
    }
    
    .app {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      height: 100vh;
      border-radius: 12px;
      gap: 0;
      position: relative;
      overflow: hidden;
    }
    
    .sidebar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 15px;
      border-right: none;
      z-index: 10;
      background: linear-gradient(180deg, rgba(7,17,34,0.9), rgba(2,6,14,0.95));
      transform: translateX(0);
      transition: transform 0.35s cubic-bezier(.2,.9,.16,1);
    }
    
    .sidebar.hidden {
      transform: translateX(-100%);
    }
    
    .server-list {
      max-height: 100vh; /*calc(100vh - 180px);*/
    }
    
    .brand {
      gap: 10px;
    }
    
    .logo {
      width: 44px;
      height: 44px;
    }
    
    .brand h1 {
      font-size: 14px;
    }
    
    .brand p {
      font-size: 11px;
    }
    
    .server {
      padding: 10px;
    }
    
    .server .icon {
      width: 40px;
      height: 40px;
    }
    
    .main {
      padding: 12px;
      min-height: 0;
      position: relative;
    }
    
    .panel-menu {
      gap: 8px;
      margin-bottom: 8px;
      margin-left: 15%;
    }
    
    .panel-btn {
      padding: 8px 12px;
      font-size: 14px;
      flex: 1;
    }
    
    .viewport {
      border-radius: 10px;
      position: relative;
    }
    
    .view {
      padding: 12px;
      transform: translateX(100%);
    }
    
    .view.active {
      transform: translateX(0);
    }
    
    .view.exit-left {
      transform: translateX(-100%);
    }

    /* Кнопка назад в мобильном режиме */
    .back-btn {
      display: block;
      position: absolute;
      top: 15px;
      left: 15px;
      z-index: 20;
      background: rgba(255,255,255,0.1);
      border: none;
      color: var(--accent);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 18px;
    }
    
    /* Адаптация статистики */
    #view-stats .grid {
      display: block;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    
    .stats {
      gap: 8px;
    }
    
    .stat {
      flex: 1 1 calc(50% - 8px);
      min-width: 100px;
      padding: 10px;
    }
    
    .stat h3 {
      font-size: 14px;
    }
    
    .stat p {
      font-size: 12px;
    }
    
    .actions {
      flex-direction: column;
      gap: 8px;
      width: 100%;
      display: none;
    }
    
    .btn {
      width: 100%;
      padding: 8px 10px;
      font-size: 14px;
    }
    
    /* Карта на мобильных */
    #leafMapPanel {
      /*min-height: 250px;*/
    }
    
    .map-embed {
      height: 200px;
    }
    
    /* Топ игроков в списке */
    #view-leaders .card {
      height: calc(100% - 60px);
    }
    
    .neon {
      font-size: 18px;
    }
    
    /* Скрываем кнопку "Моя статистика" на мобильных */
    #meBtn {
      display: none;
    }

    .lilleft {
      margin-left: 15%;
    }
  }

  /* Маленькие мобильные (до 480px) */
  @media (max-width: 480px) {
    body {
      padding: 5px;
    }
    
    .app {
      border-radius: 8px;
    }
    
    .sidebar {
      padding: 12px;
    }
    
    .server-list {
      gap: 8px;
    }
    
    .server {
      padding: 8px;
    }
    
    .server .meta b {
      font-size: 12px;
    }
    
    .server .meta small {
      font-size: 10px;
    }
    
    .main {
      padding: 8px;
    }
    
    .panel-btn {
      padding: 6px 8px;
      font-size: 12px;
    }
    
    .stat {
      flex: 1 1 100%;
    }
    
    #leafMapPanel {
      /*min-height: 250px;*/
    }
    
    .muted {
      font-size: 12px;
    }
    .panel-menu {
      gap: 8px;
      margin-bottom: 8px;
      margin-left: 15%;
    }
  }

  /* Планшеты (769px - 1024px) */
  @media (min-width: 769px) and (max-width: 1024px) {
    .app {
      max-width: 95vw;
    }
    
    .sidebar {
      width: 280px;
    }
    .panel-menu {
      gap: 8px;
      margin-bottom: 8px;
      margin-left: 15%;
    }
    
    #view-stats .grid {
      display: block;
      grid-template-columns: 1fr 300px;
    }
  }

  /* Ландшафтная ориентация на мобильных */
  @media (max-height: 500px) and (orientation: landscape) {
    .sidebar {
      max-height: 100vh;
    }
    
    .server-list {
      max-height: 60vh;
    }
    
    #leafMapPanel {
      min-height: 200px;
    }
        .panel-menu {
      gap: 8px;
      margin-bottom: 8px;
      margin-left: 15%;
    }
  }