:root{
  --bg:#050912;--bg2:#07101a;--panel:rgba(9,16,26,.86);--panel2:rgba(7,13,22,.93);
  --line:#20364a;--line2:#2c4258;--text:#f4f7fb;--muted:#8fa2b8;
  --blue:#22c8ff;--blue2:#2e88ff;--orange:#ff7a00;--violet:#7c5cff;--green:#31e6a1;
  --radius:15px;--shadow:0 18px 52px rgba(0,0,0,.32);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#050912 url("../img/playarena-bg.svg") center top/cover fixed no-repeat;min-height:100vh;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,18,.06),rgba(5,9,18,.48) 70%,#050912);z-index:-1}
a{color:inherit;text-decoration:none}button,input{font:inherit}
.ambient{position:fixed;width:420px;height:420px;border-radius:50%;filter:blur(120px);opacity:.09;pointer-events:none;z-index:-1}
.ambient-blue{background:var(--blue);left:-180px;top:260px}.ambient-orange{background:var(--orange);right:-180px;top:300px}
.topbar{
  height:64px;position:sticky;top:0;z-index:50;display:grid;grid-template-columns:280px 1fr 280px;align-items:center;
  padding:0 30px;border-bottom:1px solid #1f3041;background:rgba(4,9,16,.94);backdrop-filter:blur(15px);
}
.brand{display:flex;align-items:center}.brand img{height:42px;max-width:195px;object-fit:contain}
.topnav{justify-self:center;display:flex;align-items:center;gap:38px;font-weight:750}
.topnav a{position:relative;padding:21px 2px 19px;color:#f4f7fb}
.topnav a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),var(--orange));transition:.18s}
.topnav a:hover:after,.topnav a.active:after{transform:scaleX(1)}
.top-actions{justify-self:end;display:flex;gap:9px}
.icon-button{
  width:40px;height:40px;border-radius:11px;border:1px solid #263b50;background:#09111d;color:#e8f2ff;display:grid;place-items:center;cursor:pointer
}
.icon-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.icon-button:hover{border-color:#3489bd;box-shadow:0 0 20px rgba(34,200,255,.12)}
.mobile-only{display:none}.mobile-nav{display:none}

.app-shell{display:grid;grid-template-columns:285px minmax(0,1fr);gap:24px;max-width:1640px;margin:0 auto;padding:18px 28px 30px}
.sidebar{position:relative}
.sidebar-card{
  position:sticky;top:82px;min-height:calc(100vh - 110px);padding:26px 14px 18px;border-radius:16px;
  border:1px solid #29506a;background:linear-gradient(180deg,rgba(7,16,27,.96),rgba(5,11,20,.96));
  box-shadow:0 0 0 1px rgba(34,200,255,.05),inset 3px 0 16px rgba(34,200,255,.025),inset -3px 0 16px rgba(255,122,0,.025),var(--shadow);
}
.sidebar-card:before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;background:linear-gradient(180deg,var(--blue),transparent 44%,transparent 56%,var(--orange));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.eyebrow{font-size:.72rem;letter-spacing:.14em;font-weight:850;color:#9db1c7;margin:0 0 12px}
.side-nav{display:grid;gap:6px}.side-nav a{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:10px;color:#c6d3df;border:1px solid transparent;transition:.18s}
.side-nav a:hover{background:#0c1826;border-color:#1d3348;color:white;transform:translateX(2px)}
.side-nav a.active{background:linear-gradient(90deg,rgba(27,126,214,.33),rgba(31,94,160,.2));border-color:#1e9bea;color:white;box-shadow:inset 0 0 20px rgba(34,200,255,.08)}
.nav-icon{width:23px;text-align:center;font-size:1.2rem;color:#a8bed3}.side-nav a.active .nav-icon{color:#67d8ff}
.sidebar-bottom{position:absolute;left:18px;right:18px;bottom:20px;border-top:1px solid #1c3042;padding:18px 5px 0;display:flex;gap:10px;align-items:center}
.sidebar-bottom small{display:block;color:#72889f;margin-top:3px}.pulse{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 16px rgba(49,230,161,.75);display:inline-block}

.content{min-width:0;display:grid;gap:14px}
.panel{border:1px solid #243a50;border-radius:var(--radius);background:linear-gradient(135deg,rgba(7,16,27,.93),rgba(10,12,18,.91));box-shadow:var(--shadow);position:relative;overflow:hidden}
.panel:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--blue),transparent 42%,transparent 62%,var(--orange));opacity:.92}
.hero{min-height:298px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.9fr) 330px;gap:24px;align-items:center;padding:30px 22px 28px 32px}
.hero-copy{z-index:3}.online-line{display:flex;align-items:center;gap:10px;font-size:.86rem;margin-bottom:21px;color:#dce7f1}.hero-eyebrow{color:#54d2ff;margin-bottom:6px}
.hero h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.02;margin:0;font-weight:900;letter-spacing:-.035em}.hero h1 span{background:linear-gradient(90deg,#fff 30%,#86dcff 72%);-webkit-background-clip:text;color:transparent}
.hero h2{font-size:1.13rem;color:#8c78ff;margin:12px 0 16px}.hero p:not(.eyebrow){max-width:620px;color:#aab9c8;line-height:1.65;margin:0}
.hero-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:0 17px;border-radius:9px;border:1px solid #2d455b;font-weight:800;font-size:.88rem}
.button.primary{background:linear-gradient(135deg,#087ac9,#1262bd);border-color:#1baaf2;box-shadow:0 0 24px rgba(34,200,255,.13)}
.button.ghost{background:#08121e}.button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.hero-brand{height:245px;position:relative;display:grid;place-items:center;isolation:isolate}
.hero-brand img{width:min(100%,245px);filter:drop-shadow(0 0 26px rgba(34,200,255,.18)) drop-shadow(0 0 22px rgba(255,122,0,.13));z-index:2;transform:scale(1.08)}
.brand-ring{position:absolute;border-radius:50%;border:1px solid rgba(45,102,148,.28);z-index:0}.ring-a{width:230px;height:230px}.ring-b{width:170px;height:170px;border-color:rgba(255,122,0,.2)}
.game-chip{position:absolute;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-weight:950;border:1px solid}
.chip-blue{left:12px;bottom:21px;color:#69d8ff;background:#07192a;border-color:#1675a8;box-shadow:0 0 20px rgba(34,200,255,.14)}
.chip-orange{right:18px;top:22px;color:#ffb068;background:#1d1008;border-color:#914815;box-shadow:0 0 20px rgba(255,122,0,.12)}

.community-status{padding:18px 14px;border:1px solid #784119;border-radius:13px;background:rgba(10,13,20,.76);box-shadow:inset 0 0 22px rgba(255,122,0,.035)}
.community-status h3{margin:0 6px 11px;font-size:1rem}
.status-row{display:grid;grid-template-columns:36px 1fr 10px;align-items:center;gap:10px;padding:11px 8px;border-top:1px solid #213043}
.status-row:first-of-type{border-top:0}.status-row b{font-size:.85rem}.status-row small{display:block;color:#8396aa;margin-top:2px;font-size:.75rem}.status-row i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(49,230,161,.55)}
.service-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#0a1624;border:1px solid #28425a}.service-icon.blue{color:#4ed0ff}.service-icon.violet{color:#917cff}.service-icon.orange{color:#ff9a3d}

.portal-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.portal-card{min-height:168px;position:relative;padding:20px 18px;border-radius:14px;border:1px solid #284158;background:linear-gradient(160deg,rgba(8,21,34,.96),rgba(7,13,22,.98));transition:.2s;overflow:hidden}
.portal-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 0%,rgba(34,200,255,.11),transparent 42%);opacity:.55}
.portal-card.violet:before{background:radial-gradient(circle at 15% 0%,rgba(124,92,255,.16),transparent 42%)}.portal-card.orange:before{background:radial-gradient(circle at 15% 0%,rgba(255,122,0,.16),transparent 42%)}
.portal-card:hover{transform:translateY(-4px);border-color:#3a88b8;box-shadow:0 15px 35px rgba(0,0,0,.22)}
.portal-card.blue{border-color:#176d9a}.portal-card.violet{border-color:#5b44a3}.portal-card.cyan{border-color:#168caf}.portal-card.orange{border-color:#914c1c}
.portal-icon{font-size:1.8rem;margin-bottom:11px;color:#63d8ff;position:relative}.violet .portal-icon{color:#927cff}.orange .portal-icon{color:#ffa14b}
.portal-card h3{position:relative;margin:0 0 8px;font-size:1rem}.portal-card p{position:relative;color:#96a9bd;font-size:.82rem;line-height:1.45;margin:0 28px 0 0}.portal-card .arrow{position:absolute;right:16px;bottom:17px;color:#c7eaff;font-size:1.25rem}

.benefits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.benefits article{display:flex;gap:11px;min-height:100px;padding:16px 14px;border:1px solid #243a50;border-radius:13px;background:rgba(7,14,23,.88)}
.benefits article>span{font-size:1.45rem;color:#56cdff}.benefits article:nth-child(2)>span{color:#9c85ff}.benefits article:nth-child(4)>span{color:#ff9638}
.benefits b{font-size:.78rem}.benefits p{font-size:.73rem;color:#869aaf;line-height:1.45;margin:5px 0 0}

.section{padding:25px 20px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}.section-head h2{margin:0;font-size:1.55rem}.section-head .eyebrow{margin-bottom:4px}.text-link{color:#62d1ff;font-size:.82rem;font-weight:750}
.server-list{display:grid;gap:9px}.server{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:13px;align-items:center;padding:13px 14px;border:1px solid #21364a;border-radius:12px;background:rgba(6,12,20,.65)}
.server-badge{width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,#0a2941,#102237);border:1px solid #20516f;display:grid;place-items:center;font-weight:950;color:#67d8ff}.server:nth-child(even) .server-badge{color:#ff9b3c;border-color:#74421f;background:linear-gradient(135deg,#25130b,#17130f)}
.server h3{font-size:.93rem;margin:0}.server .game{color:#71869c;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.server p{margin:4px 0 0;color:#91a3b4;font-size:.78rem}.server-tags{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}.tag{font-size:.64rem;padding:3px 7px;border-radius:999px;background:#0b1b2a;border:1px solid #23435b;color:#9fdcff}
.server-meta{text-align:right;min-width:175px}.server-status{font-size:.68rem;color:var(--green);font-weight:900;text-transform:uppercase}.server-address{display:block;margin-top:5px;color:#becddd;font-size:.79rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.copy-button{margin-top:7px;border:1px solid #28526e;background:#091a28;color:#d9efff;border-radius:7px;padding:6px 10px;font-size:.68rem;cursor:pointer}

.player-zone{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}.zone-copy,.community-copy{padding:25px 22px}.player-zone h2{font-size:1.55rem;margin:0 0 10px}.player-zone p:not(.eyebrow){color:#91a3b7;line-height:1.55;margin:0}
.zone-links{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}.zone-links a{padding:14px;border:1px solid #253b50;border-radius:11px;background:#08121e}.zone-links span{color:#52d1ff;font-size:.73rem;font-weight:900}.zone-links b{display:block;margin-top:7px}.zone-links small{display:block;color:#8196ab;margin-top:4px}.community-actions{margin-top:18px;display:flex;gap:9px;flex-wrap:wrap}

.news-list{display:grid}.news-list article{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 7px;border-top:1px solid #213347}.news-list article:first-child{border-top:0}.news-dot{width:8px;height:8px;border-radius:50%}.news-dot.green{background:var(--green)}.news-dot.violet{background:var(--violet)}.news-dot.orange{background:var(--orange)}
.news-list b{font-size:.86rem}.news-list p{margin:3px 0 0;color:#8195a9;font-size:.76rem}.news-list em{font-style:normal;font-size:.62rem;font-weight:850;border:1px solid #285c7d;border-radius:999px;padding:4px 8px;color:#64d4ff}

footer{min-height:65px;max-width:1640px;margin:0 auto;padding:20px 32px 34px;display:flex;justify-content:space-between;color:#71869a;font-size:.75rem}footer nav{display:flex;gap:17px}footer a:hover{color:#c9e9ff}

.search-overlay{position:fixed;inset:0;z-index:100;background:rgba(3,7,12,.74);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding:90px 20px}
.search-overlay.open{display:flex}.search-modal{width:min(760px,100%);border:1px solid #2e506b;border-radius:14px;background:#07111d;box-shadow:0 30px 100px rgba(0,0,0,.55);overflow:hidden}
.search-top{display:grid;grid-template-columns:24px 1fr 34px;gap:12px;align-items:center;padding:15px;border-bottom:1px solid #1e3448}.search-top svg{width:21px;fill:none;stroke:#75d8ff;stroke-width:2}.search-top input{width:100%;background:transparent;border:0;outline:0;color:white;font-size:1rem}.search-top button{border:0;background:transparent;color:#8299b0;font-size:1.8rem;cursor:pointer}
.search-results{padding:15px;display:grid;gap:8px;color:#8fa4b8;font-size:.85rem;max-height:420px;overflow:auto}.search-result{padding:12px;border:1px solid #21374a;border-radius:9px;background:#091521;color:#dce9f5}.search-result small{display:block;color:#7990a6;margin-top:4px}.search-result:hover{border-color:#2787b8}
.hidden-by-search{display:none!important}

@media(max-width:1250px){
  .topbar{grid-template-columns:220px 1fr 90px}.app-shell{grid-template-columns:235px minmax(0,1fr)}.hero{grid-template-columns:1.4fr .7fr}.community-status{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:0}.community-status h3{grid-column:1/-1}.status-row{border-top:1px solid #213043;border-left:1px solid #213043}.status-row:nth-of-type(2){border-left:0}
  .portal-grid{grid-template-columns:repeat(3,1fr)}.benefits{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .topbar{grid-template-columns:1fr auto;padding:0 15px}.topnav{display:none}.mobile-only{display:grid}.brand img{height:38px}
  .app-shell{display:block;padding:14px}.sidebar{display:none}.content{gap:11px}
  .mobile-nav{position:fixed;z-index:48;left:12px;right:12px;top:70px;padding:9px;border:1px solid #274158;border-radius:13px;background:#07111d;box-shadow:var(--shadow);display:none;grid-template-columns:1fr 1fr;gap:5px}.mobile-nav.open{display:grid}.mobile-nav a{padding:10px;border-radius:8px;background:#091622;color:#cbd8e4}
  .hero{grid-template-columns:1fr;padding:25px 19px}.hero-brand{height:190px;order:2}.hero-brand img{max-width:240px}.community-status{order:3;grid-template-columns:1fr 1fr}.portal-grid{grid-template-columns:1fr 1fr}.benefits{grid-template-columns:1fr 1fr}.player-zone{grid-template-columns:1fr}.zone-links{grid-template-columns:1fr}
}
@media(max-width:560px){
  .topbar{height:58px}.brand img{height:33px;max-width:160px}.icon-button{width:37px;height:37px}.app-shell{padding:9px}
  .hero{padding:21px 16px}.hero h1{font-size:2.15rem}.hero-brand{height:160px}.hero-brand img{max-width:205px}.community-status{grid-template-columns:1fr}
  .portal-grid,.benefits{grid-template-columns:1fr}.portal-card{min-height:145px}.section{padding:20px 14px}.section-head{align-items:flex-start;flex-direction:column}
  .server{grid-template-columns:45px minmax(0,1fr)}.server-meta{grid-column:1/-1;text-align:left;display:flex;gap:11px;align-items:center;flex-wrap:wrap;min-width:0}.copy-button{margin-top:0}.player-zone article{padding:20px 16px}
  .news-list article{grid-template-columns:10px 1fr}.news-list em{grid-column:2;justify-self:start}footer{padding:18px 16px 28px;gap:10px;flex-direction:column}
}


/* PLAYARENA_DYNAMIC_STATUS_V2 */

.pa-live-pill{

    display:inline-flex;
    align-items:center;

    margin-left:8px;

    padding:4px 8px;

    border-radius:999px;

    border:
        1px solid
        #23364b;

    font-size:10px;

    font-weight:900;

    letter-spacing:.07em;
}


.pa-live-pill.online{

    color:#31e6a1;

    border-color:
        rgba(
            49,
            230,
            161,
            .40
        );

    background:
        rgba(
            49,
            230,
            161,
            .08
        );
}


.pa-live-pill.offline{

    color:#ff7a00;

    border-color:
        rgba(
            255,
            122,
            0,
            .40
        );

    background:
        rgba(
            255,
            122,
            0,
            .08
        );
}


.pa-runtime-fallback{

    max-width:1180px;

    margin:
        16px auto
        24px;

    padding:15px;

    border:
        1px solid
        #23364b;

    border-radius:14px;

    background:#0a111c;

    color:#f4f7fb;
}


.pa-runtime-items{

    display:flex;

    flex-wrap:wrap;

    gap:10px 18px;

    margin-top:10px;
}


.pa-runtime-row{

    display:flex;

    align-items:center;

    gap:7px;
}


.pa-runtime-row
.pa-live-pill{

    margin-left:0;
}