/* ════════════════════════════════════════════
   ZeroOne Beats - Shared site styles
   Used by all sub-pages (about, schedule, streamstuff, submit, privacy, terms).
   Homepage (/index.html) has equivalent rules inlined.
   ════════════════════════════════════════════ */

/* Russo One is the wordmark font - matches the Logo.png lockup.
   Used ONLY on the "ZeroOne Beats" brand mark (nav, footer, and inline body
   brand text via .zob-wordmark). Not for headlines, buttons, or body copy -
   those stay Orbitron / Segoe UI. */


/* ─── View Transitions for smooth page navigation ─── */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }

/* ─── Smooth anchor scrolling (used by "Top" footer link) ─── */
html { scroll-behavior: smooth; }

/* ─── Site background ─── */
html.zob-page { background: #000; scrollbar-color: #555 #111; }

body.zob-body {
    background-color: #000 !important;
    background-image: url('/hero-bg.png') !important;
    background-image: image-set(url('/hero-bg.webp?v=1') type('image/webp'), url('/hero-bg.png') type('image/png')) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    animation: none !important;
    /* Default body font for every page that loads this stylesheet. Pages
       that set their own inline `body { font-family: ... }` will still win
       on cascade, but /tunein (the one page that didn't bother) was
       inheriting the browser's serif default and looking visibly different
       from every other page. Setting it here means any future page can
       skip the inline declaration and still render correctly. */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Always fill at least the viewport so a short page (e.g. logged-out
       /account) doesn't expose html's black background below the body.
       100dvh covers the mobile address-bar collapsing case. */
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
}

body.zob-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 18%, transparent 78%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    body.zob-body { background-attachment: scroll !important; }
}

/* ─── NAV (shared across all pages) ─── */
.zob-nav {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 48px 18px;
    gap: 24px;
    flex-wrap: wrap;
}

.zob-nav-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #fff;
    flex: 1;
    min-width: 0;
}

.zob-nav-logo img {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 0 12px rgba(0,170,255,0.25));
}

.zob-nav-logo-text {
    font-family: 'Russo One', 'Orbitron', sans-serif;
    font-weight: 400;            /* Russo One only ships at 400 - using 800 would force a faux-bold synthesis */
    font-size: 0.95rem;
    letter-spacing: 2px;         /* tightened from 4px to better match the PNG logo's tight stacking */
    text-transform: uppercase;
}

.zob-nav-logo-text .zero { color: #00aaff; }
.zob-nav-logo-text .one  { color: #ff7a00; }
.zob-nav-logo-text .rest { color: #fff; margin-left: 6px; }

.zob-nav-center {
    display: flex;
    gap: 24px;
    align-items: center;
    flex: 0 0 auto;
    justify-content: center;
}

.zob-nav-link {
    position: relative;
    display: inline-block;
    padding: 10px 0;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: color 0.25s ease;
    cursor: pointer;
}

.zob-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    background: #00aaff;
    box-shadow: 0 0 8px rgba(0,170,255,0.7);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.zob-nav-link:hover { color: #fff; }
.zob-nav-link:hover::after { transform: scaleX(0.55); }

.zob-nav-link.active { color: #fff; }
.zob-nav-link.active::after { transform: scaleX(1); height: 3px; }

.zob-nav-right {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

.zob-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: rgba(0,0,0,0.4);
    border: 1px solid;
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    cursor: pointer;
    white-space: nowrap;
}

.zob-nav-btn svg { flex-shrink: 0; }

.zob-nav-btn.player-btn {
    color: #ff7a00;
    border-color: #ff7a00;
}
.zob-nav-btn.player-btn:hover {
    background: rgba(255,122,0,0.15);
    box-shadow: 0 0 18px rgba(255,122,0,0.35);
}

.zob-nav-btn.download-btn {
    color: #00aaff;
    border-color: #0080ff;
}
.zob-nav-btn.download-btn:hover {
    background: rgba(0,128,255,0.15);
    box-shadow: 0 0 18px rgba(0,128,255,0.35);
}

.zob-download-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.zob-version-label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.6px;
}

.zob-nav-btn,
.zob-nav-link {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.zob-nav-link {
    font-family: 'Orbitron', sans-serif !important;
}

/* ─── Mobile hamburger button (injected by zob-auth-nav.js) ───
   Hidden on desktop; revealed only inside the <=768px block below.
   Lives in the shared sheet so the homepage (which loads this file but
   uses its own inline .nav rules) gets the same button styling. */
.zob-navburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    flex-shrink: 0;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(0,170,255,0.45);
    border-radius: 8px;
    color: #00aaff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.zob-navburger:hover { background: rgba(0,128,255,0.15); box-shadow: 0 0 16px rgba(0,128,255,0.3); }
.zob-navburger svg { width: 24px; height: 24px; display: block; }
.zob-navburger .icon-close { display: none; }
.zob-nav-open .zob-navburger .icon-open  { display: none; }
.zob-nav-open .zob-navburger .icon-close { display: block; }

@media (max-width: 1300px) {
    .zob-nav { padding: 20px 24px 14px; gap: 16px; }
    .zob-nav-center { order: 3; width: 100%; gap: 22px; justify-content: center; flex-wrap: wrap; }
    .zob-nav-right { gap: 10px; }
}

@media (max-width: 768px) {
    .zob-nav { padding: 16px 18px 12px; }
    .zob-nav-logo img { width: 36px; height: 36px; }
    .zob-nav-logo-text { font-size: 0.8rem; letter-spacing: 3px; }
    .zob-nav-btn { padding: 9px 14px; font-size: 0.6rem; letter-spacing: 1.2px; }
    .zob-version-label { font-size: 0.55rem; }

    /* The PC App is a Windows .exe installer - not actionable on phones, hide it */
    .zob-download-wrapper { display: none; }

    /* Mobile menu: links show as 2 rows of plain-text nav items (4 per row).
       No hamburger; old dropdown removed. */
    .zob-nav-right { flex: 0 0 auto; justify-content: flex-end; }
    .zob-nav-center {
        order: 3;
        width: 100%;
        position: static;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px 10px;
        margin-top: 6px;
    }
    .zob-nav-link {
        padding: 7px 2px;
        font-size: 0.62rem;
        letter-spacing: 1px;
        text-align: center;
    }
    .zob-nav-link::after { display: none; }
    .zob-nav-link:hover,
    .zob-nav-link.active { color: #00aaff; }
}

@media (max-width: 460px) {
    .zob-nav-logo-text { display: none; }

    /* Smaller Mobile Player chip so it does not dominate the top */
    .zob-nav-btn { padding: 7px 12px; font-size: 0.56rem; letter-spacing: 1px; gap: 7px; }
    .zob-nav-btn svg { width: 12px; height: 12px; }
}

/* ─── Page footer (brand + social links) ─── */
.zob-page-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 24px 8px;
    margin-top: 20px;
}

.zob-footer-brand {
    font-family: 'Russo One', 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;            /* Russo One only ships at 400 */
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.zob-footer-brand .zero { color: #00aaff; }
.zob-footer-brand .one  { color: #ff7a00; }
.zob-footer-brand .rest { color: #fff; }

/* Inline brand-wordmark utility. Wrap any in-body "ZeroOne Beats" with this
   so it matches the logo PNG and the nav/footer wordmark. Sets font only -
   colour comes from .zero/.one/.rest spans inside, or from inline style. */
.zob-wordmark {
    font-family: 'Russo One', 'Orbitron', sans-serif;
}

.zob-footer-links {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

.zob-footer-links a {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.zob-footer-links a:hover { color: #00aaff; }

/* Legal footer (© line + CVR + policy links).
   On desktop the policy links sit inline after the CVR with a separator dot.
   On mobile (<= 600px) they break to a second line. Margin-based spacing is
   more robust than &nbsp; escapes inside CSS content strings. */
.footer-policies::before {
    content: "·";
    margin: 0 0.55em;
    color: inherit;
}

@media (max-width: 600px) {
    .footer-policies {
        display: block;
        margin-top: 6px;
    }
    .footer-policies::before {
        content: "";
        margin: 0;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   AUTH NAV CHIP (rendered into .zob-nav-right / .nav-right by
   /_website/website-20261027-release205charts1/assets/zob-auth-nav.js — see that file for the DOM it produces).
   ════════════════════════════════════════════════════════════════════════ */

.zob-auth-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* ── Sign-in button (logged-out state) ── */
.zob-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #00aaff;
    color: #00aaff;
    border-radius: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    white-space: nowrap;
}
.zob-auth-btn:hover {
    background: rgba(0, 128, 255, 0.15);
    color: #fff;
    box-shadow: 0 0 18px rgba(0, 128, 255, 0.35);
}

/* ── Provider chooser popover ── */
.zob-auth-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100;
    min-width: 280px;
    background: rgba(8, 12, 22, 0.96);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 10px;
    padding: 18px 16px 14px;
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(0, 170, 255, 0.12);
    animation: zobAuthFadeIn 0.18s ease;
}

@keyframes zobAuthFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.zob-auth-popover-head {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 4px;
}
.zob-auth-popover-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
}

.zob-auth-popover-providers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.zob-auth-prov-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.zob-auth-prov-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
}
.zob-auth-prov-btn svg { flex-shrink: 0; }

.zob-prov-twitch { color: #b388ff; }
.zob-prov-twitch:hover { border-color: rgba(145, 70, 255, 0.5); box-shadow: 0 0 14px rgba(145, 70, 255, 0.18); }
.zob-prov-google:hover { border-color: rgba(255, 255, 255, 0.4); }
.zob-prov-discord { color: #8a92f7; }
.zob-prov-discord:hover { border-color: rgba(88, 101, 242, 0.5); box-shadow: 0 0 14px rgba(88, 101, 242, 0.22); }

.zob-auth-popover-foot {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.zob-auth-popover-foot a {
    color: rgba(0, 170, 255, 0.85);
    text-decoration: none;
}
.zob-auth-popover-foot a:hover { color: #00aaff; text-decoration: underline; }

/* ── Account chip (logged-in state) ── */
.zob-auth-chip {
    position: relative;
}

.zob-auth-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 7px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    max-width: 240px;
}
.zob-auth-trigger:hover {
    border-color: rgba(0, 170, 255, 0.5);
    background: rgba(0, 0, 0, 0.55);
}
.zob-auth-chip[data-open="true"] .zob-auth-trigger {
    border-color: rgba(0, 170, 255, 0.7);
    background: rgba(0, 170, 255, 0.08);
}

.zob-auth-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00aaff 0%, #0066cc 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.7rem;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0;
    flex-shrink: 0;
    text-transform: uppercase;
}
.zob-prov-bg-twitch { background: linear-gradient(135deg, #9146ff 0%, #6b2cd9 100%); }
.zob-prov-bg-google { background: linear-gradient(135deg, #4285f4 0%, #1a73e8 100%); }
.zob-prov-bg-x      { background: linear-gradient(135deg, #2a2a2a 0%, #000 100%); }

/* When a user uploads a profile picture the chip avatar renders an <img>
   instead of initials. The img fills the circle via object-fit: cover. */
.zob-auth-avatar-img { background: rgba(0,0,0,0.4); padding: 0; overflow: hidden; }
.zob-auth-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.zob-auth-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zob-auth-chip-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1.4;
}

.zob-auth-chev {
    color: rgba(255, 255, 255, 0.55);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.zob-auth-chip[data-open="true"] .zob-auth-chev { transform: rotate(180deg); color: #00aaff; }

/* ── Dropdown menu ── */
.zob-auth-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100;
    min-width: 260px;
    background: rgba(8, 12, 22, 0.96);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 10px;
    padding: 6px;
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(0, 170, 255, 0.12);
    animation: zobAuthFadeIn 0.18s ease;
}
.zob-auth-chip[data-open="true"] .zob-auth-menu { display: block; }

.zob-auth-menu-head {
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}

.zob-auth-name-big {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zob-auth-prov-line {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}

.zob-auth-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.zob-auth-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1.4;
}

.zob-badge-admin {
    background: rgba(255, 80, 80, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 80, 80, 0.35);
}
.zob-badge-sub {
    background: rgba(255, 122, 0, 0.15);
    color: #ff7a00;
    border: 1px solid rgba(255, 122, 0, 0.4);
}
.zob-badge-artist {
    background: rgba(0, 200, 100, 0.13);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
}

.zob-auth-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
}
.zob-auth-menu-item svg {
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}
.zob-auth-menu-item:hover {
    background: rgba(0, 170, 255, 0.1);
    color: #fff;
}
.zob-auth-menu-item:hover svg { color: #00aaff; }

.zob-auth-menu-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 4px;
}

.zob-auth-signout:hover {
    background: rgba(255, 80, 80, 0.1);
    color: #ff8a8a;
}
.zob-auth-signout:hover svg { color: #ff8a8a; }

/* ── Mobile ── */
@media (max-width: 768px) {
    .zob-auth-btn {
        padding: 8px 12px;
        font-size: 0.6rem;
        letter-spacing: 1.2px;
    }
    .zob-auth-trigger {
        padding: 5px 10px 5px 5px;
        font-size: 0.74rem;
        gap: 8px;
        max-width: 200px;
    }
    .zob-auth-avatar { width: 22px; height: 22px; font-size: 0.62rem; }
    .zob-auth-name { max-width: 90px; }
    .zob-auth-chip-badge { font-size: 0.5rem; padding: 2px 6px; }
    .zob-auth-popover, .zob-auth-menu { min-width: 240px; }
}

@media (max-width: 460px) {
    .zob-auth-popover, .zob-auth-menu {
        /* Anchor to viewport edges so the popover never overflows */
        right: 8px;
        min-width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
    }
    .zob-auth-name { max-width: 70px; }
}