/*
Theme Name: Last War Customizer Theme
Author: ChatGPT
Version: 6.0
*/

html,body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    background:#030814;
    font-family:Arial,sans-serif;
    color:#fff;
}

*{box-sizing:border-box}

.lw-bg{
    position:fixed;
    inset:0;
    z-index:0;
}

.lw-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:url('assets/img/lastwar-bg.png') center center/cover no-repeat;
    filter:brightness(.82) saturate(1.08);
    transform:scale(1.03);
}

.lw-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(2,8,20,.25), rgba(2,8,20,.82)),
        radial-gradient(circle at center, transparent 20%, rgba(0,0,0,.45) 100%);
}

.lw-page{
    position:relative;
    z-index:2;
    width:min(1700px,100%);
    margin:auto;
    padding:24px;
}

.lw-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 24px;
    background:rgba(5,14,28,.38);
    backdrop-filter:blur(10px);
    border:1px solid rgba(38,217,255,.12);
}

.lw-logo{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:22px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
}

.lw-logo-icon{
    width:54px;
    height:54px;
    background:linear-gradient(135deg,#26d9ff,#0b63ff,#ff295f);
    clip-path:polygon(50% 0,100% 28%,84% 100%,16% 100%,0 28%);
}

.lw-nav{
    display:flex;
    gap:12px;
}

.lw-nav a{
    color:#fff;
    text-decoration:none;
    padding:12px 18px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:800;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.lw-hero{
    min-height:82vh;
    display:flex;
    align-items:center;
}

.lw-panel{
    width:760px;
    padding:54px;
    background:rgba(4,12,25,.34);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.06);
}

.lw-kicker{
    color:#ffb84d;
    font-size:13px;
    font-weight:900;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.lw-panel h1{
    margin:0;
    line-height:.86;
    text-transform:uppercase;
    font-size:clamp(72px,10vw,165px);
}

.lw-panel .white{
    color:#eefcff;
}

.lw-panel .survival{
    background:linear-gradient(90deg,#26d9ff 0%, #0b63ff 40%, #ff295f 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:
        drop-shadow(0 0 14px rgba(38,217,255,.55))
        drop-shadow(0 0 24px rgba(255,41,95,.24));
}

.lw-panel p{
    margin-top:24px;
    max-width:700px;
    font-size:21px;
    line-height:1.7;
    color:#d8e4ef;
}

.lw-buttons{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    margin-top:34px;
}

.lw-btn{
    text-decoration:none;
    color:#fff;
    background:rgba(5,15,30,.58);
    border:1px solid rgba(38,217,255,.22);
    min-height:92px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.lw-btn strong{
    font-size:18px;
    text-transform:uppercase;
}

.lw-btn small{
    margin-top:4px;
    color:#8ee8ff;
    font-size:11px;
    text-transform:uppercase;
}

@media(max-width:1200px){
    .lw-buttons{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:760px){
    .lw-buttons{
        grid-template-columns:1fr;
    }

    .lw-panel{
        padding:32px 20px;
    }

    .lw-panel h1{
        font-size:64px;
    }
}


/* SOLDIER STYLE BUTTONS */

.lw-buttons{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    margin-top:38px;
}

.lw-btn{
    position:relative;
    overflow:hidden;
    min-height:118px;
    padding:18px 18px 18px 92px;
    align-items:flex-start;
    text-align:left;
    background:linear-gradient(135deg, rgba(8,24,42,.92), rgba(5,14,28,.78));
    border:1px solid rgba(38,217,255,.28);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 0 22px rgba(38,217,255,.14),
        0 0 34px rgba(11,99,255,.08);
    transition:.25s ease;
}

.lw-btn:hover{
    transform:translateY(-4px) scale(1.02);
    border-color:rgba(255,41,95,.42);
    box-shadow:
        0 0 28px rgba(38,217,255,.28),
        0 0 44px rgba(255,41,95,.16);
}

.lw-btn::before{
    content:"";
    position:absolute;
    left:14px;
    top:50%;
    width:62px;
    height:62px;
    transform:translateY(-50%);
    border-radius:16px;
    background:
        linear-gradient(135deg,#28e0ff,#0b63ff);
    box-shadow:
        0 0 18px rgba(38,217,255,.55),
        0 0 28px rgba(11,99,255,.25);
}

/* Soldier silhouette */
.lw-btn::after{
    content:"";
    position:absolute;
    left:30px;
    top:50%;
    width:30px;
    height:38px;
    transform:translateY(-50%);
    background:#e9fbff;
    clip-path:polygon(
        50% 0%,
        72% 12%,
        82% 36%,
        100% 52%,
        78% 58%,
        76% 100%,
        24% 100%,
        22% 58%,
        0% 52%,
        18% 36%,
        28% 12%
    );
    box-shadow:0 0 12px rgba(255,255,255,.45);
}

.lw-btn.tank::after{
    left:24px;
    width:40px;
    height:24px;
    clip-path:polygon(
        0 60%,
        10% 34%,
        58% 34%,
        72% 16%,
        100% 16%,
        100% 38%,
        78% 38%,
        78% 60%,
        100% 60%,
        100% 84%,
        0 84%
    );
}

.lw-btn strong{
    position:relative;
    z-index:2;
    font-size:18px;
    letter-spacing:1px;
}

.lw-btn small{
    position:relative;
    z-index:2;
    margin-top:6px;
    color:#8ee8ff;
    font-size:11px;
    letter-spacing:1.1px;
}



/* FIXED LAYOUT */

.lw-hero{
    min-height:auto !important;
    padding-top:40px;
    padding-bottom:60px;
}

.lw-panel{
    width:min(920px,100%) !important;
    max-width:100% !important;
    padding:48px !important;
}

.lw-panel h1{
    font-size:clamp(64px,8vw,128px) !important;
    line-height:.92 !important;
    word-break:normal !important;
}

.lw-panel p{
    max-width:100% !important;
    font-size:18px !important;
}

.lw-buttons{
    grid-template-columns:repeat(5,minmax(110px,1fr)) !important;
    width:100% !important;
}

.lw-btn{
    min-height:96px !important;
    padding:14px 10px 14px 74px !important;
}

.lw-btn strong{
    font-size:14px !important;
}

.lw-btn small{
    font-size:9px !important;
}

@media(max-width:1400px){

    .lw-panel h1{
        font-size:92px !important;
    }

    .lw-buttons{
        grid-template-columns:repeat(3,1fr) !important;
    }
}

@media(max-width:900px){

    .lw-panel{
        padding:30px 20px !important;
    }

    .lw-panel h1{
        font-size:64px !important;
    }

    .lw-buttons{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media(max-width:640px){

    .lw-buttons{
        grid-template-columns:1fr !important;
    }

    .lw-panel h1{
        font-size:48px !important;
    }
}


/* MODERN GAME CARDS */

.lw-buttons{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(140px,1fr)) !important;
    gap:18px !important;
    margin-top:38px !important;
}

.lw-btn{
    position:relative !important;
    min-height:108px !important;
    padding:18px 18px 18px 88px !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:
        linear-gradient(135deg,
        rgba(12,28,48,.95),
        rgba(4,12,26,.88)) !important;

    border:1px solid rgba(40,220,255,.24) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 0 20px rgba(38,217,255,.12),
        0 0 36px rgba(11,99,255,.08) !important;

    transition:.25s ease !important;

    align-items:flex-start !important;
    justify-content:center !important;
    text-align:left !important;
}

.lw-btn:hover{
    transform:translateY(-4px) scale(1.02) !important;

    border-color:rgba(255,41,95,.42) !important;

    box-shadow:
        0 0 28px rgba(38,217,255,.24),
        0 0 40px rgba(255,41,95,.14) !important;
}

.lw-btn::before{
    content:"" !important;
    position:absolute !important;
    left:18px !important;
    top:50% !important;
    width:52px !important;
    height:52px !important;
    transform:translateY(-50%) !important;
    border-radius:14px !important;

    background:
        linear-gradient(135deg,#26d9ff,#0b63ff,#ff295f) !important;

    box-shadow:
        0 0 18px rgba(38,217,255,.45),
        0 0 26px rgba(255,41,95,.18) !important;
}

.lw-btn::after{
    content:"➜" !important;
    position:absolute !important;
    right:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    color:#7eeaff !important;
    font-size:18px !important;
    opacity:.8 !important;
}

.lw-btn strong{
    font-size:16px !important;
    letter-spacing:1px !important;
    text-transform:uppercase !important;
    color:#f4fbff !important;
}

.lw-btn small{
    margin-top:6px !important;
    color:#7bdfff !important;
    font-size:10px !important;
    text-transform:uppercase !important;
    letter-spacing:1.2px !important;
}

@media(max-width:1200px){
    .lw-buttons{
        grid-template-columns:repeat(3,1fr) !important;
    }
}

@media(max-width:760px){
    .lw-buttons{
        grid-template-columns:1fr !important;
    }
}


/* SPACING FIX */

.lw-buttons{
    gap:22px !important;
    margin-top:44px !important;
}

.lw-btn{
    min-height:128px !important;
    padding:20px 20px 20px 96px !important;
}

.lw-btn::before{
    width:58px !important;
    height:58px !important;
    left:20px !important;
}

.lw-btn strong{
    font-size:15px !important;
    line-height:1.3 !important;
    max-width:100% !important;
}

.lw-btn small{
    margin-top:8px !important;
    font-size:10px !important;
    line-height:1.4 !important;
    max-width:100% !important;
    white-space:normal !important;
}

@media(max-width:1400px){

    .lw-buttons{
        grid-template-columns:repeat(3,1fr) !important;
    }

    .lw-btn{
        min-height:118px !important;
    }
}

@media(max-width:900px){

    .lw-buttons{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media(max-width:640px){

    .lw-buttons{
        grid-template-columns:1fr !important;
    }
}


/* CLEAN BUTTON LAYOUT */

.lw-buttons{
    grid-template-columns:repeat(2,minmax(240px,320px)) !important;
    justify-content:flex-start !important;
    gap:22px !important;
}

.lw-btn{
    min-height:92px !important;
    padding:20px 24px 20px 92px !important;
}

.lw-btn strong{
    font-size:20px !important;
}

.lw-btn small{
    font-size:11px !important;
}

@media(max-width:760px){
    .lw-buttons{
        grid-template-columns:1fr !important;
    }
}


/* CUSTOMIZER SUPPORT */
.lw-bg::before{
    background-image:var(--lw-bg-image, url('assets/img/lastwar-bg.png')) !important;
    background-position:var(--lw-bg-position, center center) !important;
    filter:
        brightness(var(--lw-bg-brightness, .82))
        saturate(var(--lw-bg-saturation, 1.08))
        contrast(var(--lw-bg-contrast, 1)) !important;
}

.lw-bg::after{
    opacity:var(--lw-bg-overlay, 1);
}

.lw-panel{
    background:rgba(4,12,25,var(--lw-panel-opacity, .34)) !important;
}


/* ALLIANCE PAGE */

.alliance-hero{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:40px;
    align-items:center;
    min-height:75vh;
}

.alliance-left{
    padding:55px;
    background:rgba(4,12,25,.38);
    backdrop-filter:blur(10px);
    border:1px solid rgba(38,217,255,.12);
    box-shadow:
        0 0 30px rgba(38,217,255,.12),
        0 0 40px rgba(255,41,95,.08);
}

.alliance-kicker{
    color:#ffb84d;
    font-size:13px;
    font-weight:900;
    letter-spacing:4px;
    margin-bottom:18px;
}

.alliance-title{
    margin:0;
    line-height:.88;
    font-size:clamp(72px,10vw,150px);
    background:linear-gradient(90deg,#ffffff,#29d8ff,#0b63ff,#ff2f91);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.alliance-text{
    margin-top:24px;
    font-size:22px;
    line-height:1.7;
    color:#d7e4f0;
    max-width:760px;
}

.alliance-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:40px;
}

.alliance-stat{
    padding:24px;
    background:rgba(6,18,32,.65);
    border:1px solid rgba(38,217,255,.14);
}

.alliance-stat span{
    display:block;
    color:#87e7ff;
    font-size:12px;
    letter-spacing:2px;
    margin-bottom:10px;
}

.alliance-stat strong{
    font-size:42px;
}

.alliance-right{
    display:grid;
    gap:22px;
}

.alliance-card{
    padding:34px;
    background:rgba(4,12,25,.42);
    backdrop-filter:blur(10px);
    border:1px solid rgba(38,217,255,.14);
}

.alliance-card h3{
    margin:0 0 16px;
    font-size:24px;
    color:#fff;
}

.alliance-card p{
    margin:0;
    color:#d6e3ef;
    line-height:1.7;
}

.alliance-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    margin-top:50px;
}

.alliance-grid-card{
    padding:32px;
    min-height:220px;
    background:rgba(4,12,25,.42);
    border:1px solid rgba(38,217,255,.14);
    backdrop-filter:blur(10px);
}

.alliance-grid-card h3{
    margin:0 0 16px;
    font-size:28px;
}

.alliance-grid-card p{
    color:#d6e3ef;
    line-height:1.7;
}

@media(max-width:1200px){
    .alliance-hero{
        grid-template-columns:1fr;
    }

    .alliance-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:760px){

    .alliance-left{
        padding:30px 22px;
    }

    .alliance-title{
        font-size:58px;
    }

    .alliance-grid{
        grid-template-columns:1fr;
    }

    .alliance-stats{
        grid-template-columns:1fr;
    }
}