body {
    font-family: sans-serif;
    background-color: #1b2838;
    color: #c7d5e0;
    margin: 0;
    padding: 20px;
}

#login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header / Navbar */
.navbar {
    background: linear-gradient(180deg, #0f2430 0%, #132a38 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
    color: #cfeaff;
}
.navbar .navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 16px;
}
.navbar-brand {
    font-weight: 700;
    color: #d7f0ff;
    text-decoration: none;
}
.navbar-brand:hover { color: #ffffff; }
.navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px;
    align-items: center;
}
/* per-item overrides can be added under .nav-item if needed */
.nav-link {
    color: #c7d5e0;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background-color 150ms ease, color 150ms ease;
    font-size: 0.95rem;
}
.nav-link:hover {
    background: rgba(255,255,255,0.04);
    color: #ffffff;
}

/* Mobile toggle button */
.navbar-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 6px;
    cursor: pointer;
}
.navbar-toggle .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #c7d5e0;
    margin: 4px 0;
    border-radius: 2px;
}

/* When navbar has .open (mobile) show the menu */
.navbar.open .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 8px 0;
}

@media (max-width: 720px) {
    body { padding: 12px; }
    .navbar-inner { padding: 10px; }
    .navbar-nav { display: none; }
    .navbar-toggle { display: inline-block; }
    .navbar.open { position: relative; }
    .navbar.open .navbar-nav {
        display: flex;
        position: absolute;
        left: 16px;
        right: 16px;
        top: calc(100% + 6px);
        background: linear-gradient(180deg, rgba(19,42,56,0.98), rgba(15,24,32,0.98));
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.5);
        padding: 12px;
    }
}

.profile {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
}

.profile-info h1 {
    margin: 0;
    font-size: 2em;
}

.profile-info p {
    margin: 5px 0 0;
}

.profile-info a {
    color: #66c0f4;
    text-decoration: none;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.game-card {
    background-color: #2a475e;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
}

.game-card img {
    width: 100%;
    height: auto;
}

.game-info {
    padding: 15px;
}

.game-info h3 {
    margin: 0 0 10px;
    font-size: 1.1em;
}

.game-info p {
    margin: 0;
    color: #c7d5e0;
}

.achievements {
    font-size: 0.9em;
    color: #a9b4b8;
    margin-top: 10px;
}

/* Utility to replace inline display:none/inline-block usages */
.hidden {
    display: none !important;
}

/* Game list link / card styles - remove browser default link styles for game list */
.game-card-link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.game-card-link:focus,
.game-card-link:hover {
    text-decoration: none;
}
.game-card-link:hover .game-card {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Search bar (moved from game_list.php) */
.search-container {
    margin-bottom: 20px;
}
#search-bar {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    color: inherit;
}

/* Overview styles (moved from overview.php) */
.overview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.stat-card {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}
.stat-card h3 { margin-top: 0; }

/* Game page: header image, achievements grid (moved from game.php) */
.game-header-image {
    width: 100%;
    max-width: 600px;
    margin-bottom: 20px;
}
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}
.achievement {
    background-color: #1e1e1e;
    padding: 15px;
    border-radius: 5px;
    opacity: 0.6;
}
.achievement.achieved {
    opacity: 1;
    border: 1px solid #66c0f4;
}
.achievement p { margin: 0 0 5px 0; font-weight: bold; }
.achievement small { color: #ccc; }

/* Small transition for cards */
.game-card, .stat-card, .achievement {
    transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

/* Friends list styles */
.friends-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.friend-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: linear-gradient(180deg, #12242f, #0e1f28);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

.friend-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

.friend-meta { flex: 1; min-width: 0; }
.friend-name { display: block; font-weight: 700; color: #e7f7ff; text-decoration: none; }
.friend-name:hover { text-decoration: underline; }
.friend-sub { margin-top: 6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.status { padding: 4px 8px; border-radius: 999px; font-size: 0.85rem; color: #04202a; background: #9fb6c7; }
.status-0 { background: #5a6a73; color: #e6f3f9; }
.status-1 { background: #8ee08b; color: #04220a; }
.status-2 { background: #f27b7b; color: #2b0707; }
.status-3 { background: #f2d36b; color: #2b2207; }
.playing { color: #cfe8f5; font-size: 0.95rem; }

@media (max-width: 540px) {
    .friends-list { grid-template-columns: 1fr; }
    .friend-avatar img { width: 84px; height: 84px; }
}