/* Top navigation — fixed in the 120px band above the TV, matched to the TV's width
   so the logo lines up with the TV's left edge and the right cluster with its right edge. */
.topnav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1440px, 100vw - 40px);       /* same as .tv */
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 50;
}

.topnav__logo img {
    display: block;
    height: 56px;
    width: auto;
}

.topnav__right {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 2rem);
}

.topnav__menu {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2.75vw, 2.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Comic-badge menu items — yellow box, black border, slight tilt (like the ★ TOP badge). */
.topnav__menu a {
    display: inline-block;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(.8rem, 1.3vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
    white-space: nowrap;
    color: #000;                             /* black text */
    background: #ff0;                        /* yellow box */
    border: 2px solid #000;                  /* black border */
    padding: 5px 9px;
    text-align: center;
    line-height: 1.05;
    transform: rotate(var(--tilt, -3deg));   /* per-item tilt, set below */
    transition: transform .12s ease, box-shadow .12s ease;
}
.topnav__menu a:hover {
    transform: rotate(var(--tilt, -3deg)) translateY(-2px);
    box-shadow: 2px 3px 0 rgba(0, 0, 0, .85);   /* comic drop on hover */
}
/* Hand-placed sticker angles — each badge tilts a little differently. */
.topnav__menu li:nth-child(1) a { --tilt: -3deg; }
.topnav__menu li:nth-child(2) a { --tilt: 2.5deg; }
.topnav__menu li:nth-child(3) a { --tilt: -2deg; }
.topnav__menu li:nth-child(4) a { --tilt: 3deg; }
.topnav__menu li:nth-child(5) a { --tilt: -1.5deg; }

/* Login avatar — coin-flips through profile icons (topnav.js). */
.topnav__login { display: block; perspective: 600px; }
.topnav__avatar {
    display: block;
    width: 48px;
    height: 48px;
    transform: rotateY(0deg);
    transition: transform .25s ease;
    will-change: transform;
}

/* Hamburger — hidden on desktop, shown below 1024 (yellow box to match the badges). */
.topnav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: #ff0;
    border: 2px solid #000;
    cursor: pointer;
}
.topnav__burger span {
    display: block;
    width: 24px;
    height: 3px;
    background: #000;
    transition: transform .2s ease, opacity .2s ease;
}

/* ---- Tablet / phone (< 1024): collapse the menu into a hamburger ---- */
@media (max-width: 1023px) {
    .topnav__burger { display: flex; }

    .topnav__menu {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: .5rem;
        flex-direction: column;
        align-items: flex-end;
        gap: .6rem;
        display: none;                       /* hidden until the burger opens it */
    }
    .topnav.is-open .topnav__menu { display: flex; }

    /* burger morphs to an X when open */
    .topnav.is-open .topnav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .topnav.is-open .topnav__burger span:nth-child(2) { opacity: 0; }
    .topnav.is-open .topnav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
    .topnav__avatar { transition: none; }
}