/* Compact Navbar */
.navbar {
    background-color: #07004D;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid var(--accent-gold);
    padding: 0.4rem 0;
    min-height: 40px;
    box-sizing: border-box;
    width: 100%;
    font-weight: 700;
}

.secondary-navbar {
    background-color: var(--text-main);;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--accent-gold);
    min-height: 32px;
    box-sizing: border-box;
    width: 100%;
    font-weight: 700;
}

/* An app may restyle .container for its own page shell (games caps it at
   600px and pads it 20px). The navbars are not that shell, so they hold
   their own geometry no matter which app is loaded. */
.navbar .container,
.secondary-navbar .container {
    display: block;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    box-sizing: border-box;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 0.5rem;
}

.nav-item {
    color: var(--line);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
    white-space: nowrap;
}

.nav-item:hover {
    color: #f39c12;
}

.secondary-navbar .nav-item {
    color: var(--text-main);
    font-size: 1rem;
}

.secondary-navbar .nav-item:hover {
    color: var(--ink-2);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-btn {
    background: none;
    font-family: 'Roboto', sans-serif;
    border: none;
    color: var(--line);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.3rem 0.5rem;
    transition: color 0.3s;
}

.dropdown-btn:hover {
    color: var(--accent-gold-dark);
}

.profile-pic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #1a1a2e;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    min-width: 140px;
    z-index: 1000;
    border: 1px solid var(--text-main);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-item {
    color: var(--line);
    font-family: 'Roboto', sans-serif;
    padding: 0.6rem 0.8rem;
    display: block;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background-color: var(--text-main);
    color: #f39c12;
}

.dropdown-divider {
    margin: 0;
    border: none;
    border-top: 1px solid var(--text-main);
}

.logout-btn {
    width: 100%;
    background: none;
    border: none;
    color: var(--danger);
    padding: 0.6rem 0.8rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.logout-btn:hover {
    background-color: #2d1b1b;
    color: var(--danger-dark);
}

.spaceship-balance {
    display: inline-block;
    background: linear-gradient(145deg, var(--ink), var(--ink));
    border: 1px solid var(--accent-gold);
    border-radius: 8px;
    margin: 0 4px;
    padding: 0 10px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

.spaceship-balance::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #8b0000, #ff6b6b, #8b0000);
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.spaceship-balance:hover::before {
    opacity: 1;
}

.spaceship-balance:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 215, 0, 0.2);
}

.balance-tablo {
    color: #ffd700;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4);
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4);
    }
    to {
        text-shadow: 0 0 15px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 215, 0, 0.6);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Auth nav links */
.nav-join {
  color: var(--line);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.3s;
}

.nav-join:hover {
  color: #f39c12;
}

/* Active navbar state */
.nav-item.active,
.nav-signin.active,
.nav-join.active {
  background: #09637E;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
}

.nav-signin {
  color: var(--line);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}

.nav-signin:hover {
  color: #f39c12;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .navbar {
        padding: 0.3rem 0;
        min-height: 45px;
    }
    
    .nav-links {
        padding: 0 0.3rem;
    }
    
    .dropdown-btn {
        font-size: 0.875rem;
        padding: 0.2rem 0.3rem;
    }
    
    .profile-pic {
        width: 26px;
        height: 26px;
    }

    .balance-tablo {
        font-size: 14px;
    }

    .spaceship-balance {
        padding: 0 8px;
        margin: 0 2px;
    }
}

@media (max-width: 480px) {
    .navbar {
        min-height: 40px;
        padding: 0.2rem 0;
    }

    .secondary-navbar {
        min-height: 32px;
    }

    /* On a phone the icons fill the whole bar, with equal space between them. */
    .secondary-navbar .nav-links {
        justify-content: space-evenly;
    }

    /* The staff row carries nine icons plus the balance. Tighten the gap and
       forbid wrapping so it stays one line instead of breaking in two. */
    .nav-links {
        padding: 0;
        gap: 0.3rem;
        flex-wrap: nowrap;
    }
    
    .dropdown-btn {
        font-size: 0.875rem;
        padding: 0.1rem 0.2rem;
        gap: 3px;
    }
    
    .profile-pic {
        width: 24px;
        height: 24px;
    }

    .balance-tablo {
        font-size: 14px;
    }

    .spaceship-balance {
        padding: 0 10px;
        margin: 0 1px;
    }

    .dropdown-menu {
        min-width: 120px;
    }

    .dropdown-item {
        padding: 0.5rem 0.6rem;
        font-size: 0.875rem;
    }

    .logout-btn {
        padding: 0.5rem 0.6rem;
        font-size: 0.875rem;
    }
}

/* Rewards band under the navbars: the level as a medal ringed by the way to
   the next one, and the next rung as a gold GO card. Colour and ring come
   from the page (--rw-medal, --rw-pct). */
.rw {
    background: var(--bg-footer);
    border-bottom: 2px solid var(--bg-primary);
    font-family: 'Roboto', sans-serif;
}

.rw__in {
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--surface);
    text-decoration: none;
    box-sizing: border-box;
}

.rw__medal {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.rw__ring {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(var(--bg-primary) 0 var(--rw-pct), #24303A var(--rw-pct) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px rgba(242, 230, 172, 0.35);
}

.rw__disc {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--bg-footer);
    box-sizing: border-box;
    overflow: hidden;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 45%),
        radial-gradient(circle at 60% 75%, rgba(0, 0, 0, 0.35), transparent 60%),
        var(--rw-medal);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 900 20px/1 'Roboto', sans-serif;
    color: var(--surface);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.rw__disc--long {
    font-size: 13px;
}

.rw__disc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rw__lvl b {
    display: block;
    font: 900 22px/1 'Roboto', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bg-primary);
}

.rw__lvl small {
    display: block;
    margin-top: 6px;
    font: 700 12px/1.25 'Roboto', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--surface);
}

.rw__next {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    background: var(--bg-primary);
    border: 2px solid var(--ink);
    border-radius: 6px;
    color: var(--ink);
}

.rw__next small {
    display: block;
    font: 700 10px/1 'Roboto', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}

.rw__next b {
    display: block;
    margin-top: 4px;
    font: 700 15px/1.15 'Roboto', sans-serif;
}

.rw__go {
    flex: 0 0 auto;
    font: 900 13px/1 'Roboto', sans-serif;
    letter-spacing: 0.1em;
    background: var(--bg-footer);
    color: var(--bg-primary);
    padding: 8px 10px;
    border-radius: 4px;
}

.rw__in:hover .rw__go {
    background: #24303A;
}