/* --- Variabel Warna Soft Blue --- */
:root {
    --bg-primary: #f0f8ff;
    --bg-secondary: #ffffff;
    --bg-sidebar: #e3f2fd;
    --bg-accent: #bbdefb;
    --bg-button: #90caf9;
    --bg-button-hover: #64b5f6;
    --text-primary: #1e3a5a;
    --text-secondary: #4a658a;
    --border-color: #d1e5f8;
    --shadow-light: 0 4px 10px rgba(0, 82, 160, 0.05);
    --shadow-medium: 0 6px 15px rgba(0, 82, 160, 0.1);
}

/* --- Reset & Global --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

#app-container {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative; /* Untuk overlay */
}

/* --- Header Mobile --- */
.mobile-header { display: none; }
#hamburger-btn { background: none; border: none; cursor: pointer; }
#hamburger-btn span { display: block; width: 24px; height: 3px; background-color: var(--text-primary); border-radius: 3px; margin: 5px 0; }

/* --- Sidebar Lobby --- */
.lobby-sidebar {
    width: 240px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out;
    z-index: 200;
}
.lobby-sidebar h1 { font-size: 1.5rem; margin-bottom: 24px; }
.lobby-sidebar-nav a {
    display: block; text-decoration: none; color: var(--text-secondary);
    font-size: 1rem; padding: 12px 16px; border-radius: 8px;
    margin-bottom: 8px; transition: background-color 0.2s;
}
.lobby-sidebar-nav a:hover { background-color: var(--bg-accent); color: var(--text-primary); }
.lobby-sidebar-nav a.active { background-color: var(--bg-button); color: var(--text-primary); font-weight: 600; }

/* --- Konten Utama Lobby --- */
.lobby-main {
    flex-grow: 1;
    overflow-y: auto;
    padding: 32px;
    height: 100%;
}
.lobby-header { margin-bottom: 24px; }
.lobby-header h2 { font-size: 1.75rem; font-weight: 700; }
.lobby-header p { color: var(--text-secondary); margin-top: 4px; }

.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}
.character-card {
    background-color: var(--bg-secondary); border-radius: 16px;
    border: 1px solid var(--border-color); box-shadow: var(--shadow-light);
    overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.character-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
.character-card img { width: 100%; height: 200px; object-fit: cover; background-color: var(--bg-accent); }
.character-card-info { padding: 16px; }
.character-card-info h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.character-card-info p {
    font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4;
    height: 2.4em; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* --- Overlay Menu Mobile --- */
.overlay {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 199;
}
.overlay.overlay-visible { display: block; }

/* --- Responsif --- */
@media (max-width: 768px) {
    .mobile-header {
        display: flex; position: fixed; top: 0; left: 0; width: 100%;
        background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color);
        padding: 16px; z-index: 100; align-items: center; box-shadow: var(--shadow-medium);
    }
    .mobile-header h1 { font-size: 1.25rem; margin: 0 auto; }
    #hamburger-btn { position: absolute; left: 16px; }
    
    .lobby-sidebar h1 { display: none; }
    .lobby-sidebar {
        position: fixed; top: 0; left: 0; height: 100%;
        width: 260px; padding-top: 60px;
        transform: translateX(-100%);
    }
    .lobby-sidebar.sidebar-visible { transform: translateX(0); box-shadow: 0 0 20px rgba(0,0,0,0.2); }
    
    .lobby-main {
        padding: 24px; padding-top: 80px; /* Ruang untuk header mobile */
    }
    .character-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
    .character-card img { height: 140px; }
}

/* --- Tambahkan kode ini di akhir lobby.css --- */

/* 1. Animasi denyut (pulse) untuk skeleton */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* 2. Sembunyikan elemen asli saat loading */
.character-card.is-loading img {
  display: none;
}
.character-card.is-loading h3,
.character-card.is-loading p {
  visibility: hidden; /* Sembunyikan teks, tapi tetap ambil ruang */
}

/* 3. Tampilkan elemen skeleton */
.character-card.is-loading .card-img-skeleton {
  display: block;
  width: 100%;
  height: 200px; /* Sesuaikan dengan tinggi gambar Anda */
  background-color: var(--bg-accent);
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.character-card.is-loading .skeleton-line {
  display: block;
  height: 1em; /* Tinggi satu baris teks */
  background-color: var(--bg-accent);
  border-radius: 4px;
  margin-bottom: 8px;
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.character-card.is-loading h3.skeleton-line {
  height: 1.1rem;
  margin-bottom: 12px; /* Jarak antara judul dan paragraf */
}