@font-face{
    font-family:"Austerlane";
    src:
        url("/fonts/Austerlane%20Trial.otf") format("opentype"),
        url("/fonts/Austerlane%20Trial.otf") format("opentype"),
        url("/fonts/Austerlane%20Trial.otf") format("opentype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

:root{
    --bg:#02070d;
    --bg2:#050d16;
    --panel:rgba(3,12,20,.72);
    --panel2:rgba(7,18,29,.82);
    --line:rgba(89,151,186,.22);
    --line2:rgba(0,191,255,.42);
    --cyan:#00c8ff;
    --blue:#008cff;
    --text:#e9eef2;
    --muted:#8398a8;
    --green:#7effd7;
    --header:76px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
html,body{
    width:100%;
    height:100%;
}
body{
    margin:0;
    color:var(--text);
    background:var(--bg);
    font-family:Arial,Helvetica,sans-serif;
    overflow:hidden;
}
main{
    position:fixed;
    inset:0;
    z-index:5;
    height:100svh;
    overflow:hidden;
}
#pageTrack{
    width:100%;
    will-change:transform;
    transform:translate3d(0,0,0);
    transition:transform 850ms cubic-bezier(.645,.045,.355,1);
}
button,input{font:inherit}
a{color:inherit}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.28) 43%,rgba(0,0,0,.30) 65%,rgba(0,0,0,.62) 100%),
        linear-gradient(180deg,rgba(1,5,10,.12),rgba(1,5,10,.48)),
        url("/img/paal/paal_bg_base.png") center/cover no-repeat;
}
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.34;
    background:url("/img/paal/paal_embers_overlay.png") center/cover no-repeat;
}

/* HEADER */
.site-header{
    position:fixed;
    top:0;left:0;right:0;
    height:var(--header);
    z-index:1000;
    display:grid;
    grid-template-columns:230px 1fr auto;
    align-items:center;
    padding:0 28px;
    background:rgba(1,7,12,.92);
    border-bottom:1px solid rgba(86,145,177,.18);
    backdrop-filter:blur(12px);
}
.brand{
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    white-space:nowrap;
}
.brand-wordmark{
    display:block;
    width:96px;
    height:auto;
    object-fit:contain;
    object-position:center center;
}
.brand-sub{
    display:block;
    margin-top:-2px;
    padding-left:.38em;
    font-family:Georgia,serif;
    font-size:8px;
    line-height:1;
    letter-spacing:.38em;
    color:#8ea7b9;
    text-align:center;
}
.top-nav{
    display:flex;
    height:100%;
    align-items:stretch;
    justify-content:center;
}
.top-nav a{
    position:relative;
    display:flex;
    align-items:center;
    padding:0 20px;
    text-decoration:none;
    color:#718898;
    font-size:10px;
    font-weight:700;
    letter-spacing:.19em;
    text-transform:uppercase;
    transition:.2s ease;
}
.top-nav a:hover,.top-nav a.active{color:#eef4f7}
.top-nav a.active{
    background:linear-gradient(180deg,rgba(0,130,190,.035),rgba(0,172,240,.08));
}
.top-nav a.active::after{
    content:"";
    position:absolute;
    left:26%;right:26%;bottom:0;
    height:1px;
    background:var(--cyan);
    box-shadow:0 0 10px var(--cyan);
}
.header-actions{
    display:flex;
    gap:10px;
    align-items:center;
}
.header-btn,.server-pill{
    height:34px;
    border:1px solid rgba(57,127,159,.32);
    background:rgba(3,15,24,.42);
    color:#dbe6ec;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.server-pill{color:var(--green);white-space:nowrap}
.server-pill::before{
    content:"";
    width:6px;height:6px;
    border-radius:50%;
    background:var(--green);
    margin-right:9px;
    box-shadow:0 0 10px var(--green);
}


/* ================================================================
   INNER PAGE PORTAL LAYOUT
   Active only after leaving ACASA.
   ================================================================ */

.site-header{
    transition:
        top .65s cubic-bezier(.645,.045,.355,1),
        left .65s cubic-bezier(.645,.045,.355,1),
        right .65s cubic-bezier(.645,.045,.355,1),
        width .65s cubic-bezier(.645,.045,.355,1),
        height .65s cubic-bezier(.645,.045,.355,1),
        border-radius .65s cubic-bezier(.645,.045,.355,1),
        background .45s ease,
        box-shadow .45s ease;
}

/* The two columns exist permanently in the DOM but are invisible on ACASA. */
.portal-rail{
    position:fixed;
    z-index:820;
    top:152px;
    bottom:96px;
    width:224px;
    pointer-events:none;

    opacity:0;
    visibility:hidden;

    transform:translateX(0);

    transition:
        opacity .50s ease,
        transform .65s cubic-bezier(.645,.045,.355,1),
        visibility .50s step-end;
}

.portal-rail.left{
    left:112px;
    transform:translateX(-34px);
}

.portal-rail.right{
    right:112px;
    transform:translateX(34px);
}

body.inner-page .portal-rail{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);

    transition:
        opacity .55s ease .12s,
        transform .70s cubic-bezier(.645,.045,.355,1) .05s,
        visibility 0s;
}

/* Header becomes a centered floating navigation strip after first scroll. */
body.inner-page .site-header{
    top:22px;
    left:50%;
    right:auto;
    width:min(920px,calc(100vw - 460px));
    height:58px;
    transform:translateX(-50%);

    grid-template-columns:150px 1fr auto;
    padding:0 18px;

    border:1px solid rgba(94,164,198,.26);
    border-radius:3px;

    background:
        linear-gradient(180deg,rgba(10,25,38,.94),rgba(3,12,20,.95)),
        url("/images/ui/web/paal_web_panel_fill_seamless.png") 0 0 / 380px 380px repeat;

    box-shadow:
        0 20px 52px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 -3px 8px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(42,95,124,.12);
}

body.inner-page .site-header .brand-wordmark{
    width:74px;
}

body.inner-page .site-header .brand-sub{
    font-size:6px;
}

body.inner-page .top-nav a{
    padding:0 10px;
    font-size:7.5px;
    letter-spacing:.13em;
}

body.inner-page .header-btn,
body.inner-page .server-pill{
    height:30px;
    padding:0 10px;
    font-size:7px;
}

/* More room for the side rails without changing the homepage. */
body.inner-page .page-section:not(#intro){
    padding-left:272px;
    padding-right:272px;
    align-items:flex-start;
    padding-top:152px;
}

body.inner-page .content-shell{
    width:min(790px,calc(100vw - 690px));
    max-height:calc(100svh - 150px);
}


/* SIDE RAIL VISUALS */
.rail-panel{
    height:100%;
    padding:24px 18px;

    position:relative;
    isolation:isolate;

    border:1px solid rgba(86,151,184,.13);

    background:
        linear-gradient(180deg,rgba(5,18,29,.74),rgba(1,8,14,.72)),
        url("/images/ui/web/paal_web_panel_fill_seamless.png") 0 0 / 420px 420px repeat;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        inset 0 -16px 28px rgba(0,0,0,.18),
        0 26px 64px rgba(0,0,0,.24);

    backdrop-filter:blur(9px);
}

.rail-panel::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:-13px;
    pointer-events:none;

    border:24px solid transparent;
    border-image-source:url("/images/ui/web/paal_web_center_frame.png");
    border-image-slice:92 92 92 92;
    border-image-width:24px;
    border-image-repeat:round;

    opacity:.92;
}

.rail-panel > *{
    position:relative;
    z-index:2;
}

.rail-title{
    margin:0 0 12px;

    color:#617f92;

    font-size:6.5px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.rail-server{
    padding:0 0 11px;
    margin-bottom:10px;

    border-bottom:1px solid rgba(71,128,157,.12);
}

.rail-online{
    display:flex;
    align-items:center;
    gap:7px;

    margin-bottom:7px;

    color:#cce8e4;

    font-family:Georgia,serif;
    font-size:12px;
}

.rail-online::before{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;

    background:#7ef2d3;
    box-shadow:0 0 9px rgba(126,242,211,.65);
}

.rail-meta{
    color:#526d7e;
    font-size:6.5px;
    font-weight:700;
    letter-spacing:.10em;
    line-height:1.7;
    text-transform:uppercase;
}

.rail-stat{
    display:flex;
    align-items:center;
    justify-content:space-between;

    min-height:28px;

    border-bottom:1px solid rgba(72,128,157,.09);
}

.rail-stat span{
    color:#587587;

    font-size:6px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.rail-stat strong{
    color:#dce6eb;

    font-family:Georgia,serif;
    font-size:10px;
    font-weight:600;
}

.rail-links{
    display:flex;
    flex-direction:column;
}

.rail-link{
    position:relative;

    display:flex;
    align-items:center;

    min-height:35px;
    padding:0 8px;

    border-bottom:1px solid rgba(72,128,157,.09);

    color:#8aa0ae;

    text-decoration:none;

    font-size:7px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;

    transition:.2s ease;
}

.rail-link::after{
    content:"";
    position:absolute;
    left:8px;
    bottom:-1px;

    width:0;
    height:1px;

    background:#53d2ff;
    box-shadow:0 0 8px rgba(83,210,255,.40);

    transition:width .2s ease;
}

.rail-link:hover,
.rail-link.active{
    color:#e5edf1;
    background:linear-gradient(90deg,rgba(0,161,225,.045),transparent);
}

.rail-link:hover::after,
.rail-link.active::after{
    width:28px;
}

.rail-account{
    margin-top:17px;
    padding-top:15px;

    border-top:1px solid rgba(72,128,157,.12);
}

.rail-account-label{
    color:#4f6f82;

    font-size:6px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.rail-account-name{
    margin-top:5px;

    color:#dfe8ed;

    font-family:Georgia,serif;
    font-size:12px;
}

.rail-bottom{
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;

    color:#3e5b6d;

    font-size:5.5px;
    letter-spacing:.11em;
    line-height:1.6;
    text-transform:uppercase;
}


/* The portal layout only appears where it has enough horizontal room. */
@media(max-width:1420px){
    body.inner-page .portal-rail{
        display:none;
    }

    body.inner-page .site-header{
        top:0;
        left:0;
        right:0;
        width:100%;
        height:var(--header);
        transform:none;

        border-left:0;
        border-right:0;
        border-top:0;
        border-radius:0;

        grid-template-columns:230px 1fr auto;
        padding:0 28px;
    }

    body.inner-page .site-header .brand-wordmark{
        width:108px;
    }

    body.inner-page .site-header .brand-sub{
        font-size:8px;
    }

    body.inner-page .top-nav a{
        padding:0 15px;
        font-size:8.5px;
    }

    body.inner-page .page-section:not(#intro){
        padding-left:24px;
        padding-right:24px;
    }

    body.inner-page .content-shell{
        width:min(900px,92vw);
        max-height:calc(100svh - var(--header) - 48px);
    }
}


/* FULL-PAGE CMS FEEL */
.page-section{
    min-height:100svh;
    height:100svh;
    padding-top:var(--header);
    position:relative;
    overflow:hidden;
}
.page-section:not(#intro){
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:24px;
    padding-right:24px;
}
.page-section:not(#intro)::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:rgba(0,5,10,.36);
}

/* HERO */
#intro{
    min-height:100svh;
}
.hero-architecture{
    position:absolute;
    inset:var(--header) 0 0;
    z-index:0;
    opacity:.12;
    background:url("/img/paal/paal_architecture_overlay.png") center bottom/cover no-repeat;
}
.hero-character{
    position:absolute;
    z-index:3;
    right:-2.5vw;
    bottom:-2.5vh;
    height:min(89vh,950px);
    max-width:61vw;
    object-fit:contain;
    object-position:right bottom;
    pointer-events:none;
    filter:drop-shadow(-30px 25px 38px rgba(0,0,0,.55));
}
.hero-inner{
    width:min(1400px,100%);
    z-index:2;
    min-height:calc(100svh - var(--header));
    margin:0 auto;
    position:relative;
    display:flex;
    align-items:center;
    padding:0 clamp(28px,7.6vw,135px);
}
.hero-content{
    position:relative;
    z-index:5;
    width:min(360px,35vw);
    margin-top:-27vh;
    margin-left:-6.5vw;
}
.hero-title{
    margin:0 0 0 -54px;
    width:min(305px,28vw);
    line-height:0;
}
.hero-wordmark{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:left center;
    filter:drop-shadow(0 5px 14px rgba(0,0,0,.45));
}
.hero-subtitle{
    margin:-4px 0 0 3px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(14px,1.05vw,19px);
    line-height:1;
    letter-spacing:.29em;
    color:#c7d0d6;
}
.hero-tags{
    margin-top:8px;
    color:#7d93a2;
    font-size:7.5px;
    font-weight:700;
    letter-spacing:.095em;
    line-height:1.1;
    white-space:nowrap;
}
.hero-actions{
    display:flex;
    gap:7px;
    margin-top:11px;
}
.hero-button{
    position:relative;
    min-width:112px;
    height:34px;
    padding:0 16px;

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

    overflow:hidden;
    text-decoration:none;

    border:1px solid rgba(102,164,194,.34);
    background:
        linear-gradient(180deg,rgba(15,37,52,.58) 0%,rgba(5,20,31,.54) 55%,rgba(2,12,20,.66) 100%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -1px 0 rgba(0,0,0,.32),
        0 2px 6px rgba(0,0,0,.18);

    color:#e8eef2;
    font-size:8px;
    font-weight:700;
    letter-spacing:.12em;
    text-shadow:0 1px 1px rgba(0,0,0,.42);

    transition:.2s ease;
}
.hero-button::before,
.hero-button::after{
    display:none;
}
.hero-button:hover{
    transform:translateY(-1px);
    border-color:rgba(0,197,255,.52);
    background:
        linear-gradient(180deg,rgba(19,47,66,.66) 0%,rgba(7,27,41,.62) 58%,rgba(3,15,25,.72) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -1px 0 rgba(0,0,0,.34),
        0 3px 8px rgba(0,0,0,.22),
        0 0 9px rgba(0,190,255,.045);
}
.hero-stats{
    display:flex;
    align-items:stretch;
    margin-top:10px;
    width:max-content;
    max-width:100%;

    border:1px solid rgba(72,132,163,.13);
    background:
        linear-gradient(180deg,rgba(4,16,25,.33),rgba(2,10,16,.45));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.012),
        0 8px 24px rgba(0,0,0,.08);
}
.hero-stat{
    min-width:70px;
    padding:7px 11px 6px;
    margin:0;
    text-align:center;
    position:relative;
}
.hero-stat + .hero-stat{
    border-left:1px solid rgba(72,128,158,.10);
}
.hero-stat-label{
    display:block;
    margin-bottom:3px;
    color:#4f6d7f;
    font-size:5.8px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.hero-stat-value{
    display:block;
    color:#dbe5ea;
    font-family:Georgia,serif;
    font-size:11.5px;
    font-weight:600;
    line-height:1;
}
.hero-stat-value.online{
    color:#7ef2d3;
    text-shadow:0 0 10px rgba(126,242,211,.15);
}

/* GENERIC CONTENT */
.content-shell{
    width:min(900px,92vw);
    max-height:calc(100svh - var(--header) - 54px);
    overflow:hidden;
    scrollbar-width:none;

    position:relative;
    isolation:isolate;

    padding:22px 26px 24px;

    background:
        linear-gradient(180deg,rgba(4,14,23,.78),rgba(1,7,13,.84)),
        url("/images/ui/web/paal_web_panel_fill_seamless.png") center / 420px 420px repeat;

    /* Real frame on the element itself:
       visible both inside and outside, like the side panels. */
    border:24px solid transparent;
    border-image-source:url("/images/ui/web/paal_web_center_frame.png");
    border-image-slice:92 92 92 92;
    border-image-width:24px;
    border-image-outset:7px;
    border-image-repeat:round;

    background-origin:border-box;
    background-clip:border-box;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.026),
        inset 0 0 0 1px rgba(59,119,151,.12),
        inset 0 -16px 30px rgba(0,0,0,.22),
        0 26px 64px rgba(0,0,0,.24);

    backdrop-filter:blur(9px);
}


.content-shell::after{
    content:"";
    position:absolute;
    z-index:0;
    left:5%;
    right:5%;
    top:10px;
    height:22px;
    pointer-events:none;

    background:
        url("/images/ui/web/paal_web_separator.png")
        center / contain no-repeat;

    opacity:.18;
    filter:saturate(.68) brightness(.90);
}

.content-shell > *{
    position:relative;
    z-index:2;
}

/* central frame depth is handled by the actual border-image */

.content-shell.narrow{width:min(570px,92vw)}
.section-kicker{
    color:#69c9ed;
    font-size:8px;
    font-weight:700;
    letter-spacing:.28em;
    text-transform:uppercase;
    margin:2px 0 8px;
    text-shadow:0 0 12px rgba(0,174,235,.12);
}
.section-title{
    margin:0;
    font-family:"Austerlane",Georgia,serif;
    font-size:clamp(30px,3.3vw,46px);
    font-weight:400;
    letter-spacing:.055em;
    color:#eef2f4;
    text-shadow:0 2px 14px rgba(0,0,0,.42);
}
.section-copy{
    margin:6px 0 18px;
    max-width:660px;
    color:#8196a5;
    font-size:12px;
    line-height:1.65;
}

.section-copy::after{
    content:"";
    display:block;
    width:min(520px,100%);
    height:22px;
    margin:13px 0 -4px;
    background:url("/images/ui/web/paal_web_separator.png") left center / contain no-repeat;
    opacity:.26;
    filter:saturate(.7) brightness(.9);
}
.thin-divider{
    height:1px;
    margin:20px 0 24px;
    background:linear-gradient(90deg,transparent,rgba(0,190,255,.34),transparent);
}

/* FORMS */
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 12px;
}
.field.full{grid-column:1/-1}
.field label{
    display:block;
    margin:0 0 6px 2px;
    color:#6f8ca0;
    font-size:7px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.field input{
    width:100%;
    height:36px;
    border:1px solid rgba(88,153,187,.28);
    background:rgba(1,10,17,.55);
    color:#e9eef1;
    outline:none;
    padding:0 13px;
    transition:.2s ease;
}
.field input:focus{
    border-color:rgba(0,199,255,.65);
    box-shadow:0 0 0 1px rgba(0,199,255,.07),0 0 16px rgba(0,180,255,.05);
}
.field-hint{
    margin:5px 2px 0;
    color:#526b7c;
    font-size:8px;
    line-height:1.4;
}
.action-btn{
    height:39px;
    padding:0 20px;
    border:1px solid rgba(58,151,196,.42);
    background:rgba(2,19,30,.58);
    color:#eef5f7;
    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
}
.form-actions{margin-top:18px}
.message{
    display:none;
    margin-top:14px;
    padding:10px 12px;
    border:1px solid rgba(83,146,177,.18);
    background:rgba(1,10,16,.42);
    color:#9bb1bf;
    font-size:11px;
}
.message.show{display:block}
.message.ok{color:#8fffdc;border-color:rgba(65,230,178,.22)}
.message.error{color:#ff9f9f;border-color:rgba(255,94,94,.24)}

/* DOWNLOAD / SYSTEMS */
.download-row{
    display:grid;
    grid-template-columns:72px 1fr auto;
    gap:20px;
    align-items:center;
    padding:20px 0;
    border-top:1px solid rgba(80,137,168,.15);
    border-bottom:1px solid rgba(80,137,168,.15);
}
.download-icon{
    width:58px;height:58px;
    border-radius:50%;
    border:1px solid rgba(0,192,255,.35);
    display:grid;place-items:center;
    color:#58d3ff;
    font-size:27px;
}
.download-name{
    margin:0 0 5px;
    font-family:Georgia,serif;
    font-size:20px;
    font-weight:400;
}
.download-copy{margin:0;color:#718b9d;font-size:11px;line-height:1.6}

.system-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}
.system-card{
    padding:14px;
    min-height:96px;
    background:rgba(2,11,18,.40);
    border:1px solid rgba(82,143,176,.16);
}
.system-card .num{color:#45caff;font-size:7px;letter-spacing:.2em}
.system-card h3{margin:12px 0 7px;font-family:Georgia,serif;font-size:18px}
.system-card p{margin:0;color:#7890a0;font-size:10px;line-height:1.55}

/* RANKING */
.ranking-wrap{
    min-height:360px;
}
#rankingContent{width:100%}
#rankingContent table{
    width:100%;
    border-collapse:collapse;
    font-size:11px;
}
#rankingContent th{
    padding:11px 12px;
    text-align:left;
    color:#63a8d0;
    font-size:7px;
    letter-spacing:.14em;
    text-transform:uppercase;
    background:rgba(10,33,50,.55);
}
#rankingContent td{
    padding:12px;
    border-bottom:1px solid rgba(74,126,155,.12);
    color:#dce6ec;
}
#rankingContent button{
    border:1px solid rgba(65,144,181,.35);
    background:rgba(3,17,28,.55);
    color:#dfeaf0;
}

/* ACCOUNT */
.account-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:18px;
}
.summary-cell{
    padding:12px;
    border:1px solid rgba(75,135,166,.15);
    background:rgba(1,11,18,.38);
}
.summary-cell span{display:block;color:#58788c;font-size:7px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:5px}
.summary-cell strong{font-size:11px;color:#edf2f5}
.account-tools{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.character-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.character-card{
    position:relative;
    padding:14px;
    min-height:170px;
    border:1px solid rgba(69,148,185,.22);
    background:
        linear-gradient(135deg,rgba(8,30,46,.60),rgba(2,10,17,.67));
    overflow:hidden;
}
.character-card::after{
    content:"";
    position:absolute;
    width:7px;height:7px;
    right:10px;bottom:10px;
    transform:rotate(45deg);
    background:#48d5ff;
    box-shadow:0 0 10px #48d5ff;
}
.char-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}
.char-avatar{
    width:48px;height:48px;
    border-radius:50%;
    border:1px solid rgba(0,190,255,.36);
    background:rgba(0,70,105,.18);
    display:grid;place-items:center;
    font-family:"Austerlane",Georgia,serif;
    font-size:25px;
}
.char-name{font-family:Georgia,serif;font-size:17px}
.char-meta{margin-top:3px;color:#63a7ce;font-size:7px;letter-spacing:.10em;text-transform:uppercase}
.char-level{
    margin-left:auto;
    border:1px solid rgba(82,166,206,.3);
    border-radius:20px;
    padding:6px 9px;
    font-size:9px;
    font-weight:700;
}
.char-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}
.char-stat{
    min-width:0;
    padding:8px 9px;
    border:1px solid rgba(68,124,154,.14);
    border-radius:8px;
    background:rgba(1,9,15,.30);
}
.char-stat span{
    display:block;
    color:#4f7f9b;
    font-size:6px;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:3px;
}
.char-stat strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#e6eef2;
    font-size:9px;
}

/* SIDE DOT NAV */
.section-dots{
    position:fixed;
    z-index:900;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:12px;
}
.section-dots a{
    width:5px;height:5px;
    border-radius:50%;
    background:#385367;
    box-shadow:0 0 0 0 transparent;
}
.section-dots a.active{
    background:#dcebf3;
    box-shadow:0 0 10px rgba(0,200,255,.8);
}

/* MOBILE */
@media(max-width:900px){
    :root{--header:116px}
    .site-header{
        height:var(--header);
        grid-template-columns:1fr auto;
        grid-template-rows:64px 52px;
        padding:0 16px;
    }
    .brand{grid-column:1;grid-row:1}
    .header-actions{grid-column:2;grid-row:1}
    .header-btn{display:none}
    .server-pill{height:32px;padding:0 10px;font-size:7px}
    .top-nav{
        grid-column:1/-1;
        grid-row:2;
        justify-content:flex-start;
        overflow-x:auto;
        scrollbar-width:none;
        border-top:1px solid rgba(65,115,143,.11);
    }
    .top-nav::-webkit-scrollbar{display:none}
    .top-nav a{padding:0 16px;flex:0 0 auto;font-size:8px}

    /* Responsive hero: anchored instead of using viewport-dependent margins */
    .hero-inner{
        min-height:calc(100svh - var(--header));
        align-items:initial;
        padding:0;
    }
    .hero-content{
        position:absolute;
        left:clamp(10px,3.2vw,28px);
        top:clamp(112px,16vh,155px);
        width:min(330px,66vw);
        margin:0;
    }
    .hero-title{
        width:min(255px,52vw);
        margin-left:clamp(-46px,-8vw,-30px);
    }
    .hero-subtitle{
        margin-top:-3px;
        font-size:clamp(12px,2.5vw,15px);
    }
    .hero-tags{
        margin-top:7px;
        font-size:clamp(6px,1.35vw,7px);
        white-space:nowrap;
        max-width:none;
        line-height:1.15;
    }
    .hero-actions{
        margin-top:10px;
        gap:6px;
        flex-direction:row;
    }
    .hero-button{
        min-width:100px;
        width:auto;
        height:31px;
        padding:0 13px;
        font-size:7px;
    }

    .hero-stats{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        width:min(292px,61vw);
        margin-top:9px;
        flex-wrap:nowrap;
    }
    .hero-stat{
        min-width:0;
        padding:7px 6px 6px;
        margin:0;
    }
    .hero-stat + .hero-stat{
        padding-left:6px;
    }
    .hero-stat-label{
        font-size:5px;
        letter-spacing:.08em;
    }
    .hero-stat-value{
        font-size:10px;
    }

    .hero-character{
        height:min(65vh,650px);
        max-width:76vw;
        right:-16vw;
        bottom:-1vh;
        opacity:.94;
    }

    .content-shell{
        padding:30px 22px 30px;
        max-height:calc(100svh - var(--header) - 28px);
    }

    .content-shell::before{
        inset:-10px;
        border-width:20px;
        border-image-width:20px;
    }

    .content-shell::after{
        display:none;
    }
    .form-grid,.system-grid,.character-grid,.account-summary{grid-template-columns:1fr}
    .download-row{grid-template-columns:58px 1fr}
    .download-row .action-btn{grid-column:1/-1;width:100%}
    .section-dots{display:none}
}
@media(max-width:560px){
    .brand-wordmark{width:84px}
    .brand-sub{display:none}

    /* Keep exactly the same left alignment and proportions on narrow screens */
    .hero-content{
        left:9px;
        top:clamp(105px,15vh,140px);
        width:min(300px,72vw);
    }
    .hero-title{
        width:min(220px,51vw);
        margin-left:clamp(-40px,-8vw,-28px);
    }
    .hero-subtitle{
        margin-left:1px;
        margin-top:-3px;
        font-size:12px;
        letter-spacing:.27em;
    }
    .hero-tags{
        font-size:5.8px;
        letter-spacing:.075em;
    }
    .hero-actions{
        flex-direction:row;
        gap:5px;
    }
    .hero-button{
        min-width:94px;
        width:auto;
        height:30px;
        padding:0 11px;
        font-size:6.5px;
    }
    .hero-stats{
        width:min(276px,68vw);
        grid-template-columns:repeat(4,1fr);
    }
    .hero-stat{
        min-width:0;
        padding:6px 4px 5px;
        margin:0;
    }
    .hero-stat + .hero-stat{padding-left:4px}
    .hero-stat-label{
        font-size:4.5px;
        letter-spacing:.06em;
    }
    .hero-stat-value{font-size:9.5px}

    .hero-character{
        height:min(58vh,560px);
        max-width:82vw;
        right:-19vw;
        bottom:-1vh;
    }
}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition:none!important}
}

/* =========================================================
   COMPACT / NO-SCROLL INNER PAGES
========================================================= */
body.inner-page .content-shell{
    overflow:hidden !important;
    scrollbar-width:none !important;
}

body.inner-page .content-shell::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
}

#ranking .content-shell{
    padding-top:24px;
    padding-bottom:24px;
}

#ranking .section-copy{
    margin-bottom:12px;
}

#rankingContent{
    min-height:0;
}

#rankingContent table{
    font-size:10px;
}

#rankingContent th{
    padding:8px 10px;
}

#rankingContent td{
    padding:8px 10px;
}

#rankingContent tr:nth-child(n+7){
    display:none;
}

#rankingContent button{
    min-height:34px;
    padding:0 18px;
    font-size:9px;
}

#rankingContent > *{
    max-width:100%;
}

#ranking .ranking-wrap{
    min-height:0;
}

#rankingContent h1,
#rankingContent h2,
#rankingContent h3{
    margin-top:8px;
    margin-bottom:8px;
}

#rankingContent .ranking-tabs,
#rankingContent .tabs,
#rankingContent [class*="tab"]{
    margin-bottom:12px;
}

@media(max-height:820px) and (min-width:901px){
    body.inner-page .content-shell{
        transform:scale(.92);
        transform-origin:center center;
        width:min(900px,calc(100vw - 610px));
        max-height:none;
    }

    #ranking .content-shell{
        transform:scale(.88);
    }
}

@media(max-height:720px) and (min-width:901px){
    body.inner-page .content-shell{
        transform:scale(.86);
    }

    #ranking .content-shell{
        transform:scale(.82);
    }
}


@media(max-width:900px){
    body.inner-page .content-shell{
        overflow-y:auto !important;
        scrollbar-width:none !important;
    }
    body.inner-page .content-shell::-webkit-scrollbar{
        display:none !important;
    }
    #rankingContent tr:nth-child(n+7){
        display:none;
    }
}


@media(max-width:1420px){
    body.inner-page .page-section:not(#intro){
        align-items:center;
        padding-top:var(--header);
    }
}


body.inner-page .site-header::before,
body.inner-page .site-header::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    height:1px;
    pointer-events:none;
}

body.inner-page .site-header::before{
    top:4px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(167,205,224,.22) 16%,
        rgba(76,157,196,.28) 50%,
        rgba(167,205,224,.22) 84%,
        transparent
    );
}

body.inner-page .site-header::after{
    bottom:3px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,174,232,.10) 15%,
        rgba(0,196,255,.24) 50%,
        rgba(0,174,232,.10) 85%,
        transparent
    );
}


@media(max-width:1420px){
    body.inner-page .content-shell{
        width:min(790px,92vw) !important;
        max-width:92vw;
    }
}


/* Softer integration of inner page content with the PAAL frame */
body.inner-page .content-shell{
    border-radius:0;
}

body.inner-page .download-row,
body.inner-page .system-card,
body.inner-page .summary-cell,
body.inner-page .character-card{
    box-shadow:none;
}


/* =========================================================
   V14 — TRUE FRAME / PANEL INTEGRATION
   Same construction as the side rails:
   panel fill reaches the edge; frame floats over it.
========================================================= */

@media(min-width:1421px){

    body.inner-page .content-shell{
        /* Remove the layout border that was creating the visible empty band. */
        border:1px solid rgba(86,151,184,.10) !important;
        border-image:none !important;

        /* The fill now reaches the real outer edge of the panel. */
        background:
            linear-gradient(180deg,rgba(5,18,29,.76),rgba(1,8,14,.78)),
            url("/images/ui/web/paal_web_panel_fill_seamless.png") 0 0 / 420px 420px repeat !important;
        background-origin:border-box !important;
        background-clip:border-box !important;

        /* Important: the frame is allowed to sit outside the panel,
           exactly like the side panels. */
        overflow:visible !important;

        padding:28px 32px 30px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.018),
            inset 0 -16px 28px rgba(0,0,0,.18),
            0 26px 64px rgba(0,0,0,.24) !important;
    }

    body.inner-page .content-shell::before{
        content:"" !important;
        position:absolute;
        z-index:4;
        inset:-13px;
        pointer-events:none;

        border:24px solid transparent;
        border-image-source:url("/images/ui/web/paal_web_center_frame.png");
        border-image-slice:92 92 92 92;
        border-image-width:24px;
        border-image-repeat:round;

        opacity:.92;
    }

    body.inner-page .content-shell::after{
        z-index:1;
    }

    body.inner-page .content-shell > *{
        position:relative;
        z-index:2;
    }
}

/* On smaller screens keep the safe compact panel without an outside frame. */
@media(max-width:1420px){
    body.inner-page .content-shell{
        border-image:none !important;
        overflow:visible !important;
        width:min(860px,90vw) !important;
        max-width:90vw;
    }

    /* Keep the PAAL frame visible when the side rails disappear. */
    body.inner-page .content-shell::before{
        display:block !important;
        content:"" !important;
        position:absolute;
        z-index:4;
        inset:-11px;
        pointer-events:none;

        border:20px solid transparent;
        border-image-source:url("/images/ui/web/paal_web_center_frame.png");
        border-image-slice:92 92 92 92;
        border-image-width:20px;
        border-image-repeat:round;

        opacity:.90;
    }
}


@media(max-width:900px){
    body.inner-page .content-shell{
        overflow:hidden !important;
        width:min(92vw,760px) !important;
        max-width:92vw !important;
    }

    body.inner-page .content-shell::before{
        display:none !important;
    }
}


/* PAAL Silver Minimal: one frame, one navigation surface. */
@media(min-width:901px){
    body.inner-page .site-header{
        top:28px;
        left:50%;
        right:auto;
        transform:translateX(-50%);
        width:min(1100px,calc(100vw - 64px));
        height:44px;
        grid-template-columns:128px minmax(0,1fr) auto;
        gap:8px;
        padding:0 28px 0 40px;
        border:0;
        border-radius:0;
        overflow:visible;
        /* Clip the source's dark margins to the actual silver rails. */
        background:url("/images/ui/web/paal_header_center_v2.png") center -15px / 100% 74px no-repeat;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        box-shadow:none;
        isolation:isolate;
    }
    body.inner-page .site-header::before,
    body.inner-page .site-header::after{
        content:"";
        position:absolute;
        top:-15px;
        bottom:auto;
        width:107px;
        height:74px;
        z-index:0;
        pointer-events:none;
        opacity:1;
        background-size:100% 100%;
        background-repeat:no-repeat;
    }
    body.inner-page .site-header::before{
        left:-30px;
        right:auto;
        background-image:url("/images/ui/web/paal_header_left_v2.png");
        -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
        mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
    }
    body.inner-page .site-header::after{
        left:auto;
        right:-30px;
        background-image:url("/images/ui/web/paal_header_right_v2.png");
        -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 52%,transparent 100%);
        mask-image:linear-gradient(270deg,#000 0%,#000 52%,transparent 100%);
    }
    body.inner-page .site-header > *{position:relative;z-index:1;min-width:0}
    body.inner-page .brand{justify-self:center;gap:1px}
    body.inner-page .brand-wordmark{width:76px}
    body.inner-page .brand-sub{font-size:6px;letter-spacing:.34em;margin-top:0;color:#8ea7b9}
    body.inner-page .top-nav{background:none;justify-content:center;height:100%}
    body.inner-page .top-nav a{
        justify-content:center;
        flex:1 0 auto;
        padding:0 9px;
        height:100%;
        font-size:8px;
        letter-spacing:.10em;
        color:#a3b5c1;
        background:none;
        white-space:nowrap;
    }
    body.inner-page .top-nav a:hover,
    body.inner-page .top-nav a.active{color:#f0f5f7;background:none}
    body.inner-page .top-nav a.active::after{
        left:23%;right:23%;bottom:5px;height:1px;
        background:linear-gradient(90deg,transparent,#8acde6,transparent);
        box-shadow:0 0 5px rgba(98,196,232,.2);
    }
    body.inner-page .top-nav a.active::before{display:none}
    body.inner-page .header-actions{gap:7px}
    body.inner-page .header-btn,
    body.inner-page .server-pill{
        position:relative;
        height:30px;
        padding:0 12px;
        font-size:7px;
        letter-spacing:.10em;
        border:0;
        box-shadow:none;
        background-position:center;
        background-repeat:no-repeat;
        background-size:100% 100%;
    }
    body.inner-page .header-btn{
        width:94px;
        color:#e1eaf0;
        background-image:url("/images/ui/web/paal_header_login_panel_v2.png");
    }
    body.inner-page .server-pill{
        width:124px;
        padding-left:27px;
        color:#bcebdc;
        background-image:url("/images/ui/web/paal_header_status_panel_v2.png");
    }
    body.inner-page .server-pill::before{
        position:absolute;left:16px;top:50%;transform:translateY(-50%);
        width:5px;height:5px;margin:0;
        background:#76e5c8;box-shadow:0 0 6px rgba(118,229,200,.35);
    }
    body.inner-page .header-btn:hover{filter:brightness(1.15)}
    body.inner-page .site-header a:focus-visible{outline:1px solid #a5d5e9;outline-offset:-4px}
}
@media(min-width:901px) and (max-width:1100px){
    body.inner-page .site-header{grid-template-columns:94px minmax(0,1fr) auto;gap:4px;padding-left:30px;padding-right:18px;top:22px}
    body.inner-page .top-nav a{padding:0 4px;font-size:7.5px;letter-spacing:.04em}
    body.inner-page .header-actions{gap:4px}
    body.inner-page .header-btn{width:70px}
    body.inner-page .server-pill{width:112px}
}
@media(max-width:900px){
    body.inner-page .site-header{
        top:0;left:0;right:0;width:100%;transform:none;
        height:var(--header);
        grid-template-columns:1fr auto;
        grid-template-rows:64px 52px;
        padding:0 16px;
        border:0;
        border-bottom:1px solid rgba(86,145,177,.18);
        background:linear-gradient(180deg,#06121d,#020910);
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        box-shadow:none;
    }
    body.inner-page .site-header::before,
    body.inner-page .site-header::after{display:none}
    body.inner-page .site-header .brand-wordmark{width:84px}
    body.inner-page .top-nav a{flex:0 0 auto;padding:0 16px;font-size:8px}
}


/* A numeric online count alone does not prove game service health. */
.server-pill[data-state="unknown"]::before{background:#8297a6!important;box-shadow:none!important}
.server-pill[data-state="offline"]::before{background:#cc8790!important;box-shadow:none!important}
.server-pill[data-state="maintenance"]::before{background:#d0b476!important;box-shadow:none!important}
.server-pill[data-state="unknown"],.server-pill[data-state="offline"],.server-pill[data-state="maintenance"]{color:#afc0cc!important}