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

:root {
     --fg-ink:#090a12;
     --fg-panel:#111225;
     --fg-gold:#ffc83d;
     --fg-gold-light:#ffe89d;
     --fg-violet:#8c52ff;
     --fg-green:#73d96c;
     --fg-muted:#aeb1c3;
     --bs-body-font-family:'Outfit',sans-serif;
     }

* {
     box-sizing:border-box;
     }
 html {
     background:var(--fg-ink);
     }
 body {
     display:flex;
     flex-direction:column;
     min-height:100vh;
     color:#f6f3ed;
     background:radial-gradient(circle at 80% 13%,rgba(104,59,208,.17),transparent 24rem),var(--fg-ink);
     }
 #app {
     flex:1;
     padding:0;
     }
 a {
     color:inherit;
     text-decoration:none;
     }
 h1,h2,h3,.fg-eyebrow,.fg-status-label,.fg-card-kicker {
     font-family:'Barlow Condensed',sans-serif;
     }

.fg-navbar {
     position:relative;
     z-index:5;
     min-height:76px;
     background:rgba(9,10,18,.9);
     border-bottom:1px solid rgba(255,255,255,.08);
     backdrop-filter:blur(16px);
     }
.fg-navbar .navbar-brand {
     display:flex;
     align-items:center;
     gap:.55rem;
     font-family:'Barlow Condensed',sans-serif;
     font-size:1.5rem;
     line-height:.85;
     letter-spacing:.04em;
     text-transform:uppercase;
     }
.fg-navbar .navbar-brand img {
     width:44px;
     height:44px;
     object-fit:cover;
     object-position:50% 16%;
     border-radius:50%;
     box-shadow:0 0 0 1px rgba(255,200,61,.45);
     }
.fg-navbar .navbar-brand span span {
     color:var(--fg-gold);
     }
.fg-navbar .nav-link {
     margin:0 .35rem;
     color:#d0d1dd;
     font-size:.9rem;
     font-weight:600;
     }
.fg-navbar .nav-link:hover,.fg-navbar .nav-link.active {
     color:var(--fg-gold);
     }
.fg-navbar .dropdown-menu {
     background:var(--fg-panel);
     border-color:rgba(255,255,255,.1);
     }
.fg-navbar .dropdown-item{
     color:#f4f0e9;
     }
.fg-navbar .dropdown-item:hover{
    background:rgba(255,200,61,.1);
    color:var(--fg-gold);
    }
.fg-nav-actions {
     display:flex;
     align-items:center;
     gap:.4rem;
     margin-left:1rem;
     font-size:.85rem;
     font-weight:700;
     }
.fg-register-link,.fg-login-link,.fg-profile-link {
     padding:.55rem .8rem;
     border-radius:4px;
     }
.fg-register-link {
     color:#151016;
     background:var(--fg-gold);
     }
.fg-login-link,.fg-profile-link {
     border:1px solid rgba(255,255,255,.22);
     color:#fff;
     }

.fg-hero {
     isolation:isolate;
     min-height:625px;
     overflow:hidden;
     position:relative;
     display:flex;
     align-items:center;
     background:linear-gradient(115deg,#0c1020 0%,#17152c 50%,#100d1c 100%);
     border-bottom:1px solid rgba(255,255,255,.1);
     }
.fg-hero::before,.fg-hero::after {
     content:'';
     position:absolute;
     inset:0;
     pointer-events:none;
     }
.fg-hero::before{
     opacity:.35;
     background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
     background-size:42px 42px;
     mask-image:linear-gradient(to bottom,black,transparent 82%);
     }
.fg-hero::after {
     background:radial-gradient(ellipse at 50% 46%, transparent 10%,rgba(9,10,18,.65) 83%);
     z-index:-1;
     }
.fg-hero-content{
    position:relative;
    z-index:1;
    }
.fg-hero-art{
    position:relative;
    isolation:isolate;
    width:min(310px,78vw);
    aspect-ratio:1;
    margin:auto}
.fg-hero-orbit {
    position:absolute;
    z-index:-1;
    pointer-events:none;
    width:calc(100% + 210px);
    height:calc(100% + 210px);
    border:4px solid rgba(255,200,61,.82);
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 0 14px rgba(255,200,61,.08),0 0 80px rgba(255,171,49,.5),inset 0 0 75px rgba(255,154,34,.22);
    }
.fg-hero-orbit::before,.fg-hero-orbit::after{
    content:'';
    position:absolute;
    border-radius:50%;
    inset:12%;
    border:1px dashed rgba(189,154,255,.53);
    animation:fg-spin 32s linear infinite}
.fg-hero-orbit::after{
    inset:-11%;
    animation-direction:reverse;
    animation-duration:47s}
@keyframes fg-spin{
    to{
    transform:rotate(360deg)}
}
.fg-hero-runes{
    position:absolute;
    z-index:1;
    font-size:2rem;
    color:var(--fg-gold);
    text-shadow:0 0 24px var(--fg-gold);
    }
.fg-hero-runes-left{
    left:12%;
    top:26%;
    }
.fg-hero-runes-right{
    right:13%;
    bottom:23%;
    color:var(--fg-violet);
    text-shadow:0 0 24px var(--fg-violet);
    }
.fg-eyebrow {
     display:flex;
     align-items:center;
     gap:.55rem;
     margin:0 0 .75rem;
     color:var(--fg-gold-light);
     font-weight:700;
     font-size:1.04rem;
     letter-spacing:.14em;
     text-transform:uppercase;
     }
.fg-eyebrow span{
    height:1px;
    width:26px;
    background:var(--fg-gold);
    }
.fg-hero h1,.fg-section-heading h2,.fg-network-section h2 {
     margin:0;
     font-size:clamp(3.7rem,6vw,6.4rem);
     line-height:.78;
     font-weight:800;
     letter-spacing:-.025em;
     text-transform:uppercase;
     }
.fg-hero h1 em,.fg-section-heading h2 em {
     font-style:normal;
     color:var(--fg-gold);
     text-shadow:0 0 28px rgba(255,200,61,.25);
     }
.fg-hero-copy{
    max-width:27rem;
    margin:1.5rem 0;
    color:#cbcada;
    font-size:1.05rem;
    }
.fg-join-button{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    padding:.72rem 1.2rem;
    background:var(--fg-gold);
    border:0;
    color:#171016;
    text-align:left;
    font-weight:800;
    box-shadow:0 10px 28px rgba(255,190,43,.25);
    transition:transform .2s,box-shadow .2s}
.fg-join-button:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 35px rgba(255,190,43,.4)}
.fg-join-button>i{
    font-size:1.55rem}
.fg-join-button small{
    display:block;
    font-size:.7rem;
    letter-spacing:.04em;
    font-weight:600}
.fg-join-offline{
    background:#5f6070;
    color:#eee;
    box-shadow:none}
.fg-mark-wrap{
    position:relative;
    width:min(310px,78vw);
    aspect-ratio:1;
    margin:auto;
    border-radius:50%;
    overflow:hidden;
    filter:drop-shadow(0 0 38px rgba(255,195,48,.36));
    }
.fg-mark{
    width:100%;
    height:100%;
    object-fit:cover;
    mix-blend-mode:screen;
    transform:scale(1.1);
    }
.fg-status-card{
    background:linear-gradient(145deg,rgba(22,22,41,.92),rgba(11,12,25,.85));
    border:1px solid rgba(255,255,255,.13);
    border-top-color:rgba(255,200,61,.6);
    padding:1.35rem;
    box-shadow:20px 20px 45px rgba(0,0,0,.24);
    backdrop-filter:blur(8px)}
.fg-status-label{
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--fg-muted);
    margin-bottom:.8rem}
.fg-status-label i{
    color:var(--fg-violet)}
.fg-status-card strong{
    font-size:1.25rem}
.fg-live-dot,.fg-offline-dot{
    display:inline-block;
    width:.58rem;
    height:.58rem;
    border-radius:50%;
    background:var(--fg-green);
    box-shadow:0 0 0 4px rgba(115,217,108,.15);
    margin-right:.4rem}
.fg-offline-dot{
    background:#e06269}
.fg-player-number{
    font-family:'Barlow Condensed',sans-serif;
    font-size:2.5rem;
    font-weight:700;
    line-height:1.2;
    margin-top:.45rem}
.fg-player-number small{
    font-family:'Outfit',sans-serif;
    color:var(--fg-muted);
    font-size:.73rem;
    font-weight:500}
.fg-progress{
    height:5px;
    background:#26283b;
    margin:.5rem 0 1.05rem}
.fg-progress span{
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--fg-green),var(--fg-gold))}
.fg-status-card p{
    color:var(--fg-muted);
    font-size:.9rem;
    margin:.5rem 0}
.fg-status-ip{
    display:block;
    width:100%;
    background:none;
    border:0;
    text-align:left;
    overflow-wrap:anywhere;
    border-top:1px solid rgba(255,255,255,.09);
    padding-top:.75rem;
    color:var(--fg-gold-light);
    font-size:.84rem}
.fg-status-ip i{
    margin-right:.3rem}

.fg-main{
    padding-top:6.5rem;
    padding-bottom:6rem}
.fg-section-heading{
    text-align:center;
    max-width:44rem;
    margin:0 auto 3rem}
.fg-section-heading .fg-eyebrow{
    justify-content:center}
.fg-section-heading h2{
    font-size:clamp(3rem,5vw,5rem)}
.fg-section-heading>p:last-child{
    color:var(--fg-muted);
    margin:1.2rem auto 0;
    max-width:32rem}
.fg-worlds{
    margin-bottom:7rem}
.fg-world-card{
    display:flex;
    flex-direction:column;
    height:100%;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:275px;
    padding:1.8rem;
    background:var(--fg-panel);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 18px 35px rgba(0,0,0,.18);
    transition:transform .25s,border-color .25s}
.fg-world-card::before{
    content:'';
    position:absolute;
    inset:auto -12% -45% 33%;
    height:200px;
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(255,203,55,.4),transparent 67%);
    z-index:-1}
.fg-world-card:hover{
    transform:translateY(-7px);
    border-color:rgba(255,200,61,.65)}
.fg-world-survival::before{
    background:radial-gradient(ellipse,rgba(93,210,98,.35),transparent 67%)}
.fg-world-soon::before{
    background:radial-gradient(ellipse,rgba(143,81,255,.4),transparent 67%)}
.fg-card-icon{
    font-size:1.55rem;
    color:var(--fg-gold);
    margin-bottom:2.5rem}
.fg-world-survival .fg-card-icon,.fg-world-survival .fg-card-state{
    color:var(--fg-green)}
.fg-world-soon .fg-card-icon{
    color:#b692ff}
.fg-card-kicker{
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--fg-muted);
    font-size:.85rem}
.fg-world-card h3{
    font-size:2.65rem;
    line-height:1;
    margin:.35rem 0 .75rem;
    text-transform:uppercase}
.fg-world-card p{
    color:#c2c2ce;
    max-width:16rem}
.fg-card-state{
    margin-top:auto;
    padding-top:.5rem;
    color:var(--fg-gold-light);
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em}
.fg-card-state i{
    font-size:.5rem;
    vertical-align:2px}
.fg-card-state-soon{
    color:#c3aaff}
.fg-network-section{
    padding:3rem;
    background:linear-gradient(105deg,#16162a,#12152a);
    border:1px solid rgba(255,255,255,.1);
    margin-bottom:7rem}
.fg-network-section .fg-eyebrow{
    font-size:.9rem}
.fg-network-section h2{
    font-size:3.1rem;
    margin-bottom:2rem}
.fg-server-row{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem;
    background:rgba(7,8,15,.35);
    border:1px solid rgba(255,255,255,.08)}
.fg-server-emblem{
    flex-shrink:0;
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    background:rgba(255,200,61,.14);
    color:var(--fg-gold);
    font-size:1.2rem}
.fg-server-row h3{
    font-size:1.35rem;
    margin:0;
    text-transform:uppercase}
.fg-server-row p{
    margin:0;
    color:var(--fg-muted);
    font-size:.78rem}
.fg-server-row strong{
    display:block;
    color:var(--fg-gold);
    font-size:1.3rem}
.fg-server-row small{
    display:block;
    color:var(--fg-muted);
    font-size:.65rem;
    text-transform:uppercase}
.fg-offline-badge{
    background:#802a3a}
.fg-news{
    margin-bottom:2rem}
.fg-news-card{
    display:block;
    min-height:205px;
    background:var(--fg-panel);
    border:1px solid rgba(255,255,255,.1);
    overflow:hidden}
.fg-news-card img{
    width:100%;
    height:180px;
    object-fit:cover}
.fg-news-card>div{
    padding:1.5rem}
.fg-news-card span{
    color:var(--fg-gold);
    text-transform:uppercase;
    font-family:'Barlow Condensed';
    letter-spacing:.12em}
.fg-news-card h3{
    font-size:1.65rem;
    text-transform:uppercase;
    margin:.3rem 0}
.fg-news-card p{
    margin:0;
    color:var(--fg-muted);
    font-size:.9rem}
.fg-alert{
    background:rgba(255,200,61,.11);
    border:1px solid rgba(255,200,61,.3);
    color:#ffe9a9}

footer{
    background:#080910!important;
    border-top:1px solid rgba(255,255,255,.1)}
.fg-footer-brand{
    display:flex;
    align-items:center;
    gap:.8rem;
    font-family:'Barlow Condensed';
    font-size:1.7rem;
    line-height:.75;
    letter-spacing:.05em}
.fg-footer-brand img{
    width:51px;
    height:51px;
    object-fit:cover;
    object-position:50% 16%;
    border-radius:50%}
.fg-footer-brand em{
    color:var(--fg-gold);
    font-style:normal}
.fg-footer p{
    max-width:25rem;
    color:var(--fg-muted);
    font-size:.9rem;
    margin-top:1rem;
    white-space:pre-line}
.fg-footer h4{
    font-size:1.25rem;
    text-transform:uppercase;
    color:var(--fg-gold-light)}
.fg-footer li{
    margin:.45rem 0}
.fg-footer li a{
    color:#c6c6d1;
    font-size:.9rem}
.fg-footer li i{
    color:var(--fg-gold);
    font-size:.75rem}
.fg-socials{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem}
.fg-socials a{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.14);
    color:var(--fg-gold);
    transition:background .2s}
.fg-socials a:hover{
    background:rgba(255,200,61,.15)}
footer .container{
    padding-top:.8rem}
footer hr{
    border-color:rgba(255,255,255,.1);
    margin-top:3rem}
footer .text-md-end{
    color:#7e8090;
    font-size:.75rem}

@media(max-width:991px){
    .fg-navbar .navbar-collapse{
    padding:1rem 0}
.fg-navbar .nav-link{
    padding:.5rem 0}
.fg-nav-actions{
    margin:1rem 0 0}
.fg-hero{
    min-height:760px;
    padding:3.5rem 0}
.fg-hero-orbit{
    width:calc(100% + 110px);
    height:calc(100% + 110px)}
.fg-status-card{
    max-width:355px;
    margin:auto}
.fg-hero h1{
    text-align:center}
.fg-hero-copy{
    text-align:center;
    margin-left:auto;
    margin-right:auto}
.fg-hero .fg-eyebrow{
    justify-content:center}
.fg-hero .fg-join-button{
    margin:auto;
    display:flex;
    width:max-content}
.fg-hero-runes{
    display:none}
}
@media(max-width:575px){
    .fg-navbar{
    min-height:65px}
.fg-navbar .navbar-brand img{
    width:36px;
    height:36px}
.fg-navbar .navbar-brand{
    font-size:1.3rem}
.fg-hero{
    min-height:730px}
.fg-hero-orbit{
    width:calc(100% + 70px);
    height:calc(100% + 70px)}
.fg-hero-art,.fg-mark-wrap{
    width:min(230px,65vw)}
.fg-main{
    padding-top:4.5rem}
.fg-worlds,.fg-network-section{
    margin-bottom:4.5rem}
.fg-network-section{
    padding:1.6rem}
.fg-status-card{
    padding:1rem}
.fg-player-number{
    font-size:2.1rem}
}
@media(prefers-reduced-motion:reduce){
    .fg-hero-orbit::before,.fg-hero-orbit::after{
    animation:none}
.fg-world-card,.fg-join-button{
    transition:none}
}


/* Shared layouts: keep plugin pages consistent with the network theme. */
.content {
     padding-top:clamp(2rem,5vw,4rem);
     padding-bottom:clamp(3rem,6vw,5rem);
     }

.content h1 {
     margin-bottom:1.5rem;
     }

.content > .container.content {
     padding:0;
     max-width:none;
     }

.content .card {
     --bs-card-bg:var(--fg-panel);
     --bs-card-border-color:rgba(255,255,255,.13);
     }

.content .card-header {
     background:rgba(255,255,255,.025);
     }

.content .list-group {
     --bs-list-group-bg:var(--fg-panel);
     --bs-list-group-border-color:rgba(255,255,255,.13);
     }

.content .card-title, .content .card-body p, .content dd, .content code, .content td, .content th {
     overflow-wrap:anywhere;
     }

.fg-server-row .flex-grow-1, .fg-navbar .navbar-collapse, .content .flex-grow-1 {
     min-width:0;
     }

.fg-server-row p, .fg-profile-link, .fg-footer p, .fg-footer li a {
     overflow-wrap:anywhere;
     }

.fg-server-row .text-end {
     flex-shrink:0;
     }

.fg-status-ip:hover {
     color:var(--fg-gold);
     }

.fg-progress {
     overflow:hidden;
     }

.fg-navbar .navbar-brand {
     flex-shrink:0;
     }

.fg-navbar .dropdown-menu {
     max-width:calc(100vw - 2rem);
     }

.fg-navbar .dropdown-item {
     white-space:normal;
     overflow-wrap:anywhere;
     }

.fg-nav-actions {
     flex-wrap:wrap;
     }

.fg-eyebrow span {
     flex-shrink:0;
     }

.fg-mark {
     display:block;
     }

.fg-mark-wrap {
     max-width:100%;
     }

.fg-footer-brand {
     margin-bottom:1rem;
     }

.fg-news .row > div {
     display:flex;
     }

.fg-news-card {
     width:100%;
     height:100%;
     }

[data-vote-step="2"] {
     display:flex;
     flex-wrap:wrap;
     justify-content:center;
     gap:.75rem;
     }

#vote-card [data-vote-step="2"] .btn {
     margin:0;
     }

a:focus-visible, button:focus-visible {
     outline:2px solid var(--fg-gold);
     outline-offset:4px;
     }

@media (max-width:991.98px) {
    
    .fg-hero-content {
     padding-top:2rem;
     }

    .fg-hero-art {
     margin-bottom:2.5rem;
     }

    .fg-hero h1 {
     font-size:clamp(2.9rem,9vw,5rem);
     line-height:.9;
     }

}

@media (max-width:575.98px) {
    
    .fg-hero {
     min-height:0;
     padding:2rem 0 2.5rem;
     }

    .fg-hero-content {
     padding-top:1rem;
     }

    .fg-hero-art {
     margin-bottom:1.5rem;
     }

    .fg-hero h1 {
     font-size:clamp(2.6rem,11vw,3.7rem);
     }

    .fg-section-heading h2 {
     font-size:clamp(2.5rem,10vw,3.5rem);
     line-height:.9;
     }

    .fg-network-section h2 {
     font-size:clamp(2.1rem,9vw,3.1rem);
     line-height:.95;
     }

    .fg-network-section {
     padding:1.25rem;
     }

    .fg-server-row {
     flex-wrap:wrap;
     gap:.65rem;
     padding:.75rem;
     }

    .fg-server-row .flex-grow-1 {
     flex-basis:calc(100% - 60px);
     }

    .fg-server-row .text-end, .fg-server-row > .badge {
     margin-left:calc(43px + .65rem);
     text-align:left!important;
     }

    .fg-world-card {
     min-height:0;
     }

    .fg-card-icon {
     margin-bottom:1.5rem;
     }

    .fg-world-card p {
     max-width:none;
     }

    .fg-nav-actions {
     gap:.75rem;
     }

    .fg-navbar .navbar-nav .dropdown-menu {
     position:static;
     }

    .fg-footer .text-md-end {
     margin-top:.5rem;
     }

}


.fg-footer { background:#080910!important; }
.content h1, .content h2, .content h3, .content .ns-content p { overflow-wrap:anywhere; }
.content .table-responsive { max-width:100%; }
.content .table-responsive .table { margin-bottom:0; }
.cart-items { min-width:36rem; }
.content .card-img-top { aspect-ratio:16 / 9; object-fit:contain; background:rgba(0,0,0,.15); }

.content small { overflow-wrap:anywhere; }
.ns-content .card-body .d-flex > div { min-width:0; }
