@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,600;1,700;1,800&family=Barlow:wght@400;500;600;700&display=swap');

/* HollyV interface treatment for the standalone launcher, maintenance and admin pages. */
:root {
    --hv-bg: #080d12;
    --hv-surface: #0d141a;
    --hv-surface-raised: #111b22;
    --hv-line: rgba(255, 255, 255, 0.13);
    --hv-cyan: #19c6e8;
    --hv-text: #e9fbff;
    --hv-muted: #9cacb5;
}

body:has(.launcher),
body:has(.maintenance),
body:has(.sidebar) {
    font-family: "Barlow", Arial, sans-serif !important;
    background: var(--hv-bg) !important;
    color: var(--hv-text) !important;
}

/* Boutique typography: Barlow for content, condensed italic for interface labels. */
body:has(.launcher) *,
body:has(.maintenance) *,
body:has(.sidebar) * {
    font-family: "Barlow", Arial, sans-serif;
}

/* The interface font must not replace the icon font. */
body:has(.launcher) i.fa-solid,
body:has(.maintenance) i.fa-solid,
body:has(.sidebar) i.fa-solid,
body:has(.launcher) i.fa-regular,
body:has(.maintenance) i.fa-regular,
body:has(.sidebar) i.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

body:has(.launcher) i.fa-brands,
body:has(.maintenance) i.fa-brands,
body:has(.sidebar) i.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

.launcher h1,
.launcher h2,
.maintenance h1,
.maintenance h2,
.maintenance h3,
.maintenance h4,
.admin-header h1,
.sidebar-logo h2,
.card-title,
.card h2,
.card h3,
.sidebar nav a,
.sidebar-footer p,
.maintenance-box > label,
.radio-title h2,
.radio-title p,
.progress-info,
.countdown-box p,
.countdown-box h4,
.status,
.button,
.discord-button,
.logout,
.save-button {
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif !important;
    letter-spacing: .05em;
}

.maintenance-box > label,
.progress-info,
.countdown-box p,
.status {
    font-weight: 700;
    text-transform: uppercase;
}

.launcher .description,
.maintenance .description,
.radio-title p,
.card p,
.profile-info p,
.maintenance-box input,
.maintenance-box textarea,
#rulesEditor {
    font-size: .94rem;
    line-height: 1.55;
}

body:has(.maintenance) .background,
body:has(.sidebar) .background {
    background:
        radial-gradient(circle at 12% 12%, rgba(25, 198, 232, 0.13), transparent 30rem),
        radial-gradient(circle at 88% 82%, rgba(51, 153, 255, 0.1), transparent 32rem),
        #080d12 !important;
}

body:has(.launcher) .background {
    background:
        linear-gradient(120deg, rgba(8, 13, 18, .76), rgba(8, 13, 18, .9)),
        url("https://r2.fivemanage.com/ZoSR7TklbKs6LKQicbSAe/galerie1.png") center / cover no-repeat !important;
}

body:has(.launcher) .background::before,
body:has(.maintenance) .background::after,
body:has(.sidebar) .background::before,
body:has(.sidebar) .background::after {
    opacity: .45;
}

/* Launcher */
.launcher {
    position: relative;
    max-width: 510px;
    height: auto !important;
    min-height: calc(100vh - 110px);
    margin: 0 auto;
    padding: 42px 28px 28px;
    justify-content: center;
}

.logo-glow { background: rgba(25, 198, 232, .2) !important; }
.server-logo, .logo { filter: drop-shadow(0 0 24px rgba(25, 198, 232, .36)) !important; }

.launcher h1,
.maintenance h1,
.admin-header h1,
.sidebar-logo h2 {
    background: none !important;
    color: var(--hv-text) !important;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif !important;
    font-style: italic;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase;
}

.launcher h1 { font-size: clamp(3.2rem, 9vw, 4.5rem) !important; line-height: .9; }
.launcher .description, .maintenance .description { color: var(--hv-muted) !important; text-align: center; }
.buttons { width: 100%; gap: 10px !important; }
.button, .discord-button, .logout, .save-button {
    min-height: 44px;
    border: 1px solid var(--hv-line) !important;
    border-radius: 0 !important;
    background: var(--hv-surface-raised) !important;
    color: var(--hv-text) !important;
    box-shadow: none !important;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.button.login, .discord-button, .save-button { background: var(--hv-cyan) !important; border-color: var(--hv-cyan) !important; color: #061017 !important; }
.button.discord { background: #111b22 !important; }
.button:hover, .discord-button:hover, .logout:hover, .save-button:hover { transform: translateY(-2px) !important; border-color: var(--hv-cyan) !important; box-shadow: 0 9px 22px rgba(0, 0, 0, .22) !important; }

/* The HollyV fold continues on every action button. */
.button,
.discord-button,
.logout,
.save-button,
#saveRulesButton,
.controls button {
    --button-cut: 12px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--button-cut)),
        calc(100% - var(--button-cut)) 100%,
        0 100%
    );
}

.button::after,
.discord-button::after,
.logout::after,
.save-button::after,
#saveRulesButton::after,
.controls button::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 2;
    width: var(--button-cut);
    height: var(--button-cut);
    pointer-events: none;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 2px),
        rgba(25, 198, 232, 0.5) calc(50% - 2px) calc(50% - 1px),
        #19c6e8 calc(50% - 1px) calc(50% + 1px),
        rgba(25, 198, 232, 0.5) calc(50% + 1px) calc(50% + 2px),
        transparent calc(50% + 2px)
    );
}

/* Keep action icons readable above the folded-corner decoration. */
.button i,
.discord-button i,
.logout i,
.save-button i,
#saveRulesButton i,
.controls button i {
    position: relative;
    z-index: 3;
    display: inline-block;
    color: currentColor !important;
}

.radio, .maintenance-card {
    border: 1px solid var(--hv-line) !important;
    border-radius: 0 !important;
    background: var(--hv-surface) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28) !important;
    backdrop-filter: none !important;
}

/* HollyV fold, identical to the visual signature used on boutique cards. */
.radio,
.maintenance-card,
.card {
    --cut: 22px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%
    );
}

.radio::after,
.maintenance-card::after,
.card::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 12;
    width: var(--cut);
    height: var(--cut);
    pointer-events: none;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 2.6px),
        rgba(25, 198, 232, 0.4) calc(50% - 2.6px) calc(50% - 1.5px),
        #19c6e8 calc(50% - 1.5px) calc(50% + 1.5px),
        rgba(25, 198, 232, 0.4) calc(50% + 1.5px) calc(50% + 2.6px),
        transparent calc(50% + 2.6px)
    );
}

.radio { width: 100% !important; }
.radio-logo, .maintenance-card .icon { border-radius: 0 !important; background: rgba(25, 198, 232, .1) !important; box-shadow: none !important; color: var(--hv-cyan); }
.music-info, .features div, .countdown-box { border-radius: 0 !important; background: var(--hv-surface-raised) !important; }
.controls button { border-radius: 0 !important; background: var(--hv-surface-raised) !important; color: var(--hv-text); }
.controls .play { background: var(--hv-cyan) !important; color: #061017 !important; }
body:has(.launcher) footer, body:has(.maintenance) footer { border-top: 1px solid var(--hv-line); background: rgba(8, 13, 18, .8); }

/* Maintenance */
.maintenance { min-height: 100vh; height: auto !important; padding: 48px 20px 112px !important; justify-content: center; }
.maintenance h1 { font-size: clamp(3rem, 7vw, 4.3rem) !important; line-height: .9; }
.maintenance h2 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; letter-spacing: .04em; color: var(--hv-text); }
.maintenance-card { max-width: 520px; width: min(520px, 94vw) !important; padding: 24px !important; }
.card-header h3, .progress-info strong, .countdown-box h4 { color: var(--hv-cyan) !important; }
.progress-bar { border-radius: 0 !important; background: #071017 !important; }
.progress-fill { border-radius: 0 !important; background: var(--hv-cyan) !important; }
.status { border-radius: 0 !important; background: rgba(25, 198, 232, .08) !important; color: #bdeff8 !important; }

/* Administration */
.sidebar { border-right: 1px solid var(--hv-line) !important; background: var(--hv-surface) !important; box-shadow: none !important; }
.sidebar-logo { border-bottom: 1px solid var(--hv-line) !important; }
.sidebar-logo span, .sidebar-footer { color: var(--hv-muted) !important; }
.sidebar nav a { border-radius: 0 !important; color: var(--hv-muted) !important; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.sidebar nav a:hover, .sidebar nav a.active { border-color: var(--hv-cyan) !important; background: rgba(25, 198, 232, .1) !important; color: var(--hv-cyan) !important; box-shadow: none !important; }
.main { background: transparent !important; }
.admin-header { border-bottom: 1px solid var(--hv-line) !important; background: rgba(8, 13, 18, .8) !important; box-shadow: none !important; }
.admin-header p, .card p { color: var(--hv-muted) !important; }
.dashboard { gap: 18px !important; }
.card, .maintenance-box, .server-status, .player-list, .staff-member, .log-item, .system-box {
    border: 1px solid var(--hv-line) !important;
    border-radius: 0 !important;
    background: var(--hv-surface) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
}
.card:hover, .staff-member:hover, .log-item:hover { transform: none !important; border-color: rgba(25, 198, 232, .5) !important; }
.card-title { border-bottom-color: var(--hv-line) !important; color: var(--hv-text) !important; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.card-title i, .system-box > i, .players-count i { color: var(--hv-cyan) !important; }
.maintenance-box input[type="text"], .maintenance-box input[type="datetime-local"], .maintenance-box textarea, #rulesEditor {
    border: 1px solid var(--hv-line) !important;
    border-radius: 0 !important;
    background: #080d12 !important;
    color: var(--hv-text) !important;
}
.maintenance-box input:focus, .maintenance-box textarea:focus, #rulesEditor:focus { border-color: var(--hv-cyan) !important; box-shadow: 0 0 0 2px rgba(25, 198, 232, .14) !important; outline: none; }
.switch span { border-radius: 0 !important; background: #1a2830 !important; }
.switch input:checked + span { background: var(--hv-cyan) !important; }
.system-box { box-shadow: none !important; }
body:has(.sidebar) footer { border-top: 1px solid var(--hv-line) !important; background: var(--hv-surface) !important; color: var(--hv-muted) !important; }

/* Standalone footers: a compact status bar instead of floating text. */
body:has(.launcher) footer,
body:has(.maintenance) footer {
    position: fixed !important;
    right: 0;
    bottom: 0 !important;
    left: 0;
    z-index: 20;
    min-height: 68px;
    padding: 10px 28px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    border: 0 !important;
    border-top: 1px solid var(--hv-line) !important;
    background: rgba(8, 13, 18, .94) !important;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, .16);
    color: var(--hv-muted) !important;
    font-size: .78rem !important;
    line-height: 1.35;
    text-align: left;
}

body:has(.launcher) footer .copyright,
body:has(.maintenance) footer .copyright {
    color: #aebbc5;
}

body:has(.launcher) footer .dev,
body:has(.maintenance) footer .dev {
    gap: 8px;
    color: #83949e;
    white-space: nowrap;
}

body:has(.launcher) footer .dev img,
body:has(.maintenance) footer .dev img {
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 1px solid var(--hv-line);
    border-radius: 0;
    background: #111b22;
    filter: none;
}

body:has(.launcher) footer .dev strong,
body:has(.maintenance) footer .dev strong {
    color: var(--hv-cyan) !important;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .9rem;
    font-style: italic;
    letter-spacing: .06em;
}

@media (max-width: 700px) {
    .launcher { padding: 58px 20px 38px; }
    .maintenance { padding-top: 60px !important; }
    .maintenance-card { padding: 18px !important; }
    body:has(.launcher) footer,
    body:has(.maintenance) footer {
        position: relative !important;
        min-height: 0;
        margin-top: 0;
        padding: 14px 18px;
        align-items: center !important;
        gap: 12px !important;
        font-size: .7rem !important;
    }
    body:has(.launcher) footer .copyright,
    body:has(.maintenance) footer .copyright { text-align: left; }
    body:has(.launcher) footer .dev,
    body:has(.maintenance) footer .dev { display: none; }
}