/*
 * NroVip 2026 visual refresh
 * Loaded after awn-modern.css so the existing PHP/data flows stay intact.
 */

:root {
    --awn-bg: #060812;
    --awn-bg-soft: #0b0f1d;
    --awn-panel: #101625;
    --awn-panel-2: #151d2f;
    --awn-panel-3: #1b263b;
    --awn-gold: #ffc95a;
    --awn-gold-bright: #ffe19a;
    --awn-gold-dark: #d58918;
    --awn-cyan: #62e8ff;
    --awn-cyan-soft: rgba(98, 232, 255, .13);
    --awn-text: #f8f9ff;
    --awn-muted: #a9b1c4;
    --awn-border: rgba(255, 205, 102, .17);
    --awn-border-strong: rgba(255, 205, 102, .46);
    --awn-success: #53e39b;
    --awn-danger: #ff717b;
    --awn-info: #69a9ff;
    --awn-shell: 1280px;
    --awn-radius: 20px;
    --awn-radius-sm: 13px;
    --awn-shadow: 0 26px 80px rgba(0, 0, 0, .35);
    --awn-shadow-soft: 0 16px 50px rgba(0, 0, 0, .22);
}

html { background: var(--awn-bg); }

body {
    color: var(--awn-text);
    background:
        radial-gradient(circle at 8% 5%, rgba(55, 107, 180, .11), transparent 32rem),
        radial-gradient(circle at 92% 22%, rgba(255, 177, 51, .08), transparent 34rem),
        linear-gradient(180deg, #060812 0%, #080b15 45%, #050710 100%);
    font-family: "Be Vietnam Pro", Inter, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: -.01em;
}

body::before {
    opacity: .3;
    background-image:
        linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 10%, #000 0, transparent 72%);
}

h1, h2, h3, h4, h5,
.section-title,
.hero h1,
.page-hero h1,
.cta-panel h2 {
    font-family: "Barlow Condensed", "Arial Narrow", "Be Vietnam Pro", sans-serif;
    letter-spacing: -.025em;
}

a { transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease; }

.site-shell,
.page-shell { width: min(calc(100% - 48px), var(--awn-shell)); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(6, 8, 18, .82);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 14px 50px rgba(0, 0, 0, .22);
    backdrop-filter: blur(22px) saturate(135%);
}

.site-topline {
    color: #cad1df;
    background: linear-gradient(90deg, rgba(255, 194, 68, .08), rgba(8, 11, 22, .88) 34%, rgba(98, 232, 255, .06));
    border-bottom-color: rgba(255, 255, 255, .055);
}

.site-topline .site-shell { min-height: 32px; }

.topline-notice i,
.topline-status i { color: var(--awn-gold); filter: drop-shadow(0 0 9px rgba(255, 201, 90, .45)); }

.brand-bar { background: transparent; }

.brand-layout {
    grid-template-columns: 190px minmax(0, 1fr) auto;
    min-height: 76px;
    gap: 24px;
}

.brand-link {
    width: auto;
    height: 58px;
    gap: 11px;
    color: var(--awn-text);
}

.brand-link:hover { color: var(--awn-text); transform: translateY(-1px); }
.brand-link img { width: 112px; height: 58px; filter: drop-shadow(0 9px 18px rgba(0, 0, 0, .55)); }

.brand-signature {
    display: grid;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    line-height: 1.05;
}

.brand-signature strong {
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 19px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.brand-signature small {
    margin-top: 4px;
    color: var(--awn-gold);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.primary-nav { gap: 5px; }

.primary-nav a {
    min-height: 42px;
    padding: 0 12px;
    gap: 7px;
    color: #c1c7d4;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .025em;
}

.primary-nav a i { color: #737e94; font-size: 13px; transition: color .2s ease, transform .2s ease; }
.primary-nav a::after { display: none; }

.primary-nav a:hover,
.primary-nav a.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 209, 112, .14), rgba(255, 191, 62, .06));
    border-color: rgba(255, 205, 105, .25);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 8px 28px rgba(0, 0, 0, .18);
}

.primary-nav a:hover i,
.primary-nav a.active i { color: var(--awn-gold); transform: translateY(-1px); }

.header-actions { gap: 9px; }

.button,
button.awn-button,
input[type="submit"].awn-button {
    min-height: 45px;
    padding: 11px 19px;
    border-radius: 12px;
    letter-spacing: -.01em;
    box-shadow: none;
}

.button-primary,
.awn-button-primary {
    color: #211503 !important;
    background: linear-gradient(135deg, #ffe497 0%, #ffc44d 48%, #e99a1c 100%);
    border-color: rgba(255, 228, 151, .78);
    box-shadow: 0 12px 32px rgba(226, 149, 26, .22), inset 0 1px rgba(255, 255, 255, .68);
}

.button-primary:hover,
.awn-button-primary:hover {
    background: linear-gradient(135deg, #fff0bd, #ffd46b 52%, #eea72d);
    box-shadow: 0 15px 38px rgba(226, 149, 26, .32), inset 0 1px rgba(255, 255, 255, .75);
    transform: translateY(-2px);
}

.button-secondary,
.awn-button-secondary {
    color: #edf0f8 !important;
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.button-secondary:hover,
.awn-button-secondary:hover {
    color: #fff !important;
    background: rgba(255, 202, 91, .09);
    border-color: rgba(255, 205, 106, .36);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    transform: translateY(-2px);
}

.theme-toggle {
    width: 32px;
    height: 32px;
    color: var(--awn-gold);
    background: rgba(255, 201, 90, .07);
    border-color: rgba(255, 201, 90, .2);
}

.header-account {
    min-width: 174px;
    padding: 7px 11px;
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .11);
    border-radius: 14px;
}

.header-account img { width: 36px; height: 36px; border-color: rgba(255, 205, 102, .24); }

.account-toolbar { background: rgba(5, 7, 15, .82); }
.toolbar-links { min-height: 38px; }
.toolbar-links a { border-radius: 8px; }

.announcement-bar {
    color: #dfe3ec;
    background: linear-gradient(90deg, rgba(255, 193, 60, .09), rgba(14, 17, 29, .9) 45%, rgba(98, 232, 255, .055));
    border-bottom-color: rgba(255, 202, 91, .12);
}

.announcement-bar .site-shell { min-height: 40px; }
.announcement-bar strong { letter-spacing: .08em; }

.site-main { position: relative; min-height: calc(100vh - 320px); }

.hero {
    min-height: 650px;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(5, 8, 17, .98) 0%, rgba(5, 8, 17, .91) 38%, rgba(5, 8, 17, .42) 70%, rgba(5, 8, 17, .72) 100%),
        var(--hero-image, url('/images/banner_2.png')) center/cover no-repeat;
    border-bottom-color: rgba(255, 205, 102, .15);
}

.hero::before {
    inset: auto 0 0;
    height: 64%;
    z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(6, 8, 18, .6) 48%, var(--awn-bg));
}

.hero::after {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: "";
    background:
        radial-gradient(circle at 77% 42%, rgba(255, 202, 85, .16), transparent 22rem),
        radial-gradient(circle at 68% 50%, rgba(77, 204, 255, .12), transparent 30rem);
    mix-blend-mode: screen;
}

.hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    gap: 32px;
    min-height: 650px;
    padding-block: 56px 112px;
}

.hero-copy { max-width: 720px; }

.hero-eyebrow {
    padding: 8px 13px;
    color: #ffe5a8;
    background: rgba(9, 12, 23, .64);
    border-color: rgba(255, 205, 102, .27);
    backdrop-filter: blur(10px);
    letter-spacing: .08em;
}

.hero h1 {
    display: grid;
    margin: 20px 0 15px;
    font-size: clamp(64px, 7vw, 94px);
    line-height: .82;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.hero-title-main {
    color: #fff;
    text-shadow: 0 14px 45px rgba(0, 0, 0, .66);
}

.hero-title-accent {
    margin-top: 10px;
    color: transparent;
    background: linear-gradient(90deg, #ffe9ad 0%, #ffc557 45%, #f09222 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: .62em;
    letter-spacing: -.025em;
    filter: drop-shadow(0 10px 28px rgba(229, 148, 27, .22));
}

.hero-copy > p { max-width: 620px; color: #cbd1dd; font-size: 17px; line-height: 1.75; }

.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: #d7ddea;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.hero-pill i { color: var(--awn-gold); }
.hero-actions { margin-top: 27px; }

.hero-metrics {
    gap: 0;
    margin-top: 36px;
    padding: 15px 18px;
    width: fit-content;
    background: rgba(8, 11, 22, .55);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
}

.hero-metric {
    min-width: 110px;
    padding: 0 18px;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.hero-metric:first-child { padding-left: 0; }
.hero-metric:last-child { padding-right: 0; border-right: 0; }
.hero-metric strong { font-family: "Barlow Condensed", sans-serif; font-size: 28px; line-height: 1; }
.hero-metric span { margin-top: 5px; color: #828da3; letter-spacing: .065em; }

.hero-art { min-height: 440px; isolation: isolate; }

.hero-art::before {
    display: block;
    position: absolute;
    width: min(38vw, 470px);
    aspect-ratio: 1;
    content: "";
    background:
        radial-gradient(circle, rgba(255, 211, 113, .22), rgba(255, 172, 32, .055) 47%, transparent 68%);
    border: 1px solid rgba(255, 222, 146, .13);
    border-radius: 50%;
    box-shadow: inset 0 0 60px rgba(255, 190, 52, .07), 0 0 90px rgba(255, 163, 28, .08);
}

.hero-orbit,
.hero-orbit::before,
.hero-orbit::after {
    position: absolute;
    width: min(40vw, 500px);
    aspect-ratio: 1;
    content: "";
    border: 1px solid rgba(255, 221, 141, .13);
    border-radius: 50%;
}

.hero-orbit { animation: awn-orbit 22s linear infinite; }
.hero-orbit::before { inset: 9%; width: 82%; border-style: dashed; border-color: rgba(98, 232, 255, .16); }
.hero-orbit::after { inset: 19%; width: 62%; border-color: rgba(255, 201, 90, .2); }

.hero-art img {
    z-index: 2;
    width: min(100%, 560px);
    filter: drop-shadow(0 32px 46px rgba(0, 0, 0, .8)) drop-shadow(0 0 26px rgba(255, 182, 45, .17));
    animation: awn-float 5s ease-in-out infinite;
}

.hero-art-caption {
    position: absolute;
    right: 4%;
    bottom: 11%;
    z-index: 3;
    display: grid;
    min-width: 176px;
    padding: 12px 15px;
    background: rgba(8, 11, 22, .72);
    border: 1px solid rgba(255, 205, 102, .23);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
    backdrop-filter: blur(14px);
}

.hero-art-caption small { color: var(--awn-gold); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hero-art-caption strong { margin-top: 2px; color: #fff; font-size: 13px; }

@keyframes awn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes awn-orbit { to { transform: rotate(360deg); } }

.quick-grid {
    gap: 14px;
    margin-top: -66px;
}

.quick-card {
    min-height: 116px;
    padding: 18px;
    color: #e4e8f1;
    background: linear-gradient(145deg, rgba(22, 29, 46, .94), rgba(10, 14, 26, .94));
    border-color: rgba(255, 255, 255, .09);
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .045);
    backdrop-filter: blur(16px);
}

.quick-card::after {
    margin-left: auto;
    color: #566074;
    content: "\F135";
    font-family: bootstrap-icons;
    font-size: 16px;
    transition: transform .2s ease, color .2s ease;
}

.quick-card:hover {
    background: linear-gradient(145deg, rgba(30, 39, 60, .98), rgba(14, 19, 33, .98));
    border-color: rgba(255, 204, 100, .34);
    box-shadow: 0 28px 68px rgba(0, 0, 0, .38), 0 0 34px rgba(255, 174, 34, .06);
    transform: translateY(-5px);
}

.quick-card:hover::after { color: var(--awn-gold); transform: translateX(3px); }

.quick-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    background: linear-gradient(145deg, #ffe5a0, #ffbc3e 58%, #d98116);
    border-radius: 15px;
    box-shadow: 0 10px 26px rgba(222, 143, 22, .22), inset 0 1px rgba(255, 255, 255, .72);
}

.quick-card strong { font-size: 15px; }
.quick-card small { margin-top: 2px; }

.page-section { padding: 94px 0; }
.page-section.compact { padding: 58px 0; }
.page-section.alt { background: linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(255, 255, 255, .008)); border-color: rgba(255, 255, 255, .055); }

.section-heading { margin-bottom: 34px; }
.section-kicker { margin-bottom: 10px; color: var(--awn-gold); letter-spacing: .1em; }
.section-kicker::before { width: 34px; background: linear-gradient(90deg, var(--awn-gold), transparent); }
.section-title { font-size: clamp(38px, 4.4vw, 58px); line-height: .98; }
.section-description { margin-top: 13px; color: var(--awn-muted); line-height: 1.75; }

.panel {
    background: linear-gradient(150deg, rgba(20, 27, 43, .96), rgba(9, 13, 24, .97));
    border-color: rgba(255, 255, 255, .08);
    border-radius: var(--awn-radius);
    box-shadow: var(--awn-shadow-soft), inset 0 1px rgba(255, 255, 255, .035);
}

.panel-header { padding: 20px 22px; border-color: rgba(255, 255, 255, .07); }
.panel-header h2, .panel-header h3 { font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; }
.panel-header h2 i, .panel-header h3 i { color: var(--awn-gold); }

.home-content-grid { grid-template-columns: minmax(0, 1.6fr) minmax(320px, .72fr); gap: 20px; }
.news-grid { gap: 18px; }

.news-card {
    grid-template-rows: 220px 1fr;
    background: linear-gradient(155deg, rgba(19, 26, 42, .98), rgba(10, 14, 25, .98));
    border-color: rgba(255, 255, 255, .085);
    border-radius: var(--awn-radius);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .19);
}

.news-card:hover { border-color: rgba(255, 205, 102, .38); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); transform: translateY(-6px); }
.news-cover::after { background: linear-gradient(180deg, transparent 45%, rgba(7, 10, 19, .78)); }
.news-card:hover .news-cover img { transform: scale(1.065); }
.news-content { gap: 10px; padding: 21px; }
.news-meta { color: #7f899d; }
.news-tag { padding: 4px 8px; color: #2a1a00; background: var(--awn-gold); border-radius: 999px; font-size: 9px; }
.news-content h3 { font-family: "Be Vietnam Pro", sans-serif; font-size: 17px; }

.ranking-list { padding-block: 10px; }
.rank-row { grid-template-columns: 34px 42px minmax(0, 1fr) auto; padding: 13px 8px; border-color: rgba(255, 255, 255, .065); }
.rank-row:hover { background: rgba(255, 201, 90, .045); border-radius: 11px; }
.rank-avatar { width: 42px; height: 42px; background: linear-gradient(145deg, #151d2e, #080b14); border-color: rgba(255, 255, 255, .1); }
.rank-power { color: #ffd675; }

.showcase-section { padding-top: 20px; }

.game-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(300px, .62fr);
    gap: 18px;
}

.showcase-frame {
    position: relative;
    min-height: 245px;
    margin: 0;
    overflow: hidden;
    background: #101522;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px;
    box-shadow: var(--awn-shadow-soft);
}

.showcase-frame.main { min-height: 510px; }
.showcase-stack { display: grid; gap: 18px; }
.showcase-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.showcase-frame:hover img { transform: scale(1.035); }

.showcase-frame::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, transparent 42%, rgba(5, 8, 16, .92));
}

.showcase-caption {
    position: absolute;
    right: 22px;
    bottom: 20px;
    left: 22px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.showcase-caption span { display: grid; gap: 3px; }
.showcase-caption small { color: var(--awn-gold); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.showcase-caption strong { color: #fff; font-size: 16px; }
.showcase-frame.main .showcase-caption strong { font-family: "Barlow Condensed", sans-serif; font-size: 29px; }
.showcase-caption i { display: grid; place-items: center; width: 40px; height: 40px; color: #241700; background: var(--awn-gold); border-radius: 50%; }

.experience-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.experience-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 17px;
    color: #cdd3df;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 15px;
}

.experience-chip i { color: var(--awn-gold); font-size: 18px; }
.experience-chip strong { color: #fff; font-size: 12px; }

.faction-grid { gap: 20px; }

.faction-card {
    min-height: 280px;
    padding: 31px;
    background:
        radial-gradient(circle at 100% 100%, var(--faction-glow), transparent 47%),
        linear-gradient(145deg, rgba(23, 31, 49, .98), rgba(9, 13, 24, .98));
    border-color: rgba(255, 255, 255, .085);
    border-radius: 22px;
    box-shadow: 0 20px 54px rgba(0, 0, 0, .2);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.faction-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 215, 126, .62), transparent);
    opacity: .65;
}

.faction-card:hover { transform: translateY(-6px); border-color: rgba(255, 205, 102, .28); box-shadow: 0 28px 68px rgba(0, 0, 0, .31); }
.faction-card h3 { font-size: 31px; }
.faction-card img { right: 28px; bottom: 23px; width: 92px; transform: scale(2.35); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .62)); }
.faction-card .faction-label { padding: 6px 9px; background: rgba(255, 201, 90, .08); border: 1px solid rgba(255, 201, 90, .15); border-radius: 999px; }

.cta-panel {
    position: relative;
    padding: 50px;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 197, 76, .19), transparent 22rem),
        radial-gradient(circle at 65% 110%, rgba(98, 232, 255, .1), transparent 28rem),
        linear-gradient(135deg, #171f32, #090d1b 72%);
    border-color: rgba(255, 205, 102, .3);
    border-radius: 25px;
    box-shadow: 0 30px 85px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .055);
}

.cta-panel::after {
    position: absolute;
    right: -70px;
    bottom: -100px;
    z-index: -1;
    width: 310px;
    height: 310px;
    content: "";
    border: 1px solid rgba(255, 223, 151, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255, 223, 151, .025), 0 0 0 110px rgba(255, 223, 151, .018);
}

.cta-panel h2 { font-size: clamp(40px, 4.2vw, 58px); line-height: .98; }
.cta-panel p { margin-top: 13px; }

.page-hero {
    padding: 86px 0 72px;
    isolation: isolate;
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 193, 68, .14), transparent 26rem),
        radial-gradient(circle at 65% 100%, rgba(78, 191, 255, .09), transparent 35rem),
        linear-gradient(135deg, #12192a, #070a14 72%);
    border-bottom-color: rgba(255, 205, 102, .14);
}

.page-hero::after {
    display: block;
    position: absolute;
    right: 4%;
    bottom: -46%;
    z-index: -1;
    width: 440px;
    height: 440px;
    content: "";
    border: 1px solid rgba(255, 216, 130, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 72px rgba(255, 216, 130, .025), 0 0 0 144px rgba(255, 216, 130, .018);
}

.page-hero h1 { max-width: 850px; margin: 12px 0 15px; font-size: clamp(48px, 6vw, 72px); line-height: .97; }
.page-hero p { max-width: 760px; color: #aeb7ca; line-height: 1.75; }
.breadcrumb { margin-bottom: 19px; }

.download-grid { gap: 20px; }

.download-card {
    min-height: 390px;
    padding: 30px;
    background:
        radial-gradient(circle at 100% 0, var(--platform-glow, rgba(255, 201, 90, .12)), transparent 18rem),
        linear-gradient(150deg, rgba(23, 31, 49, .98), rgba(9, 13, 24, .98));
    border-color: rgba(255, 255, 255, .09);
    border-radius: 23px;
    box-shadow: 0 20px 56px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .04);
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.download-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--platform-accent, var(--awn-gold)), transparent);
    opacity: .72;
}

.download-card::after { display: block; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; content: ""; border: 1px solid rgba(255, 255, 255, .07); border-radius: 50%; }
.download-card:hover { transform: translateY(-7px); border-color: rgba(255, 205, 102, .34); box-shadow: 0 30px 72px rgba(0, 0, 0, .34); }
.download-card.disabled { opacity: .68; filter: saturate(.72); }
.download-card.platform-pc { --platform-accent: #75b9ff; --platform-glow: rgba(80, 161, 255, .16); }
.download-card.platform-android { --platform-accent: #68e59c; --platform-glow: rgba(73, 220, 132, .16); }
.download-card.platform-ios { --platform-accent: #d5d9e4; --platform-glow: rgba(218, 224, 239, .11); }
.download-card.featured { border-color: rgba(255, 205, 102, .28); }

.download-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.download-card-status { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #a9b3c5; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.download-card-status.available { color: #9df2c4; background: rgba(83, 227, 155, .08); border-color: rgba(83, 227, 155, .2); }
.download-card-status i { font-size: 8px; }

.download-platform-icon {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    color: #201500;
    background: linear-gradient(145deg, #fff0bf, #ffc557 58%, #e4921d);
    border-radius: 19px;
    box-shadow: 0 14px 32px rgba(226, 148, 27, .22), inset 0 1px rgba(255, 255, 255, .72);
}

.download-card h2 { margin-top: 26px; font-size: 35px; }
.download-card .version { display: inline-flex; margin-top: 2px; color: var(--platform-accent, var(--awn-gold)); }
.download-card p { min-height: 66px; line-height: 1.7; }

.download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 32px;
    margin: 17px 0 20px;
}

.download-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; color: #9fa9bb; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .075); border-radius: 8px; font-size: 10px; }
.download-meta i { color: var(--platform-accent, var(--awn-gold)); }
.download-card .button { width: 100%; }

.step-card {
    min-height: 240px;
    padding: 28px;
    background: linear-gradient(145deg, rgba(20, 27, 43, .95), rgba(9, 13, 24, .96));
    border-color: rgba(255, 255, 255, .08);
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .18);
}

.step-number { width: 48px; height: 48px; color: #251700; background: var(--awn-gold); border-radius: 15px; box-shadow: 0 10px 26px rgba(226, 148, 27, .2); }
.step-card h3 { font-family: "Be Vietnam Pro", sans-serif; }

.content-layout { gap: 24px; }
.article-row { border-radius: 18px; background: linear-gradient(145deg, rgba(19, 26, 42, .97), rgba(10, 14, 25, .98)); }
.article-row:hover { transform: translateY(-4px); box-shadow: 0 20px 52px rgba(0, 0, 0, .24); }
.community-card, .support-card, .auth-card { border-radius: 20px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="datetime-local"], select, textarea {
    min-height: 46px;
    background: rgba(6, 9, 18, .74);
    border-color: rgba(255, 255, 255, .12);
    border-radius: 11px;
}

.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 5% 0, rgba(255, 192, 65, .075), transparent 24rem),
        linear-gradient(180deg, #080b15, #04060d);
    border-top-color: rgba(255, 205, 102, .15);
}

.site-footer::before { position: absolute; top: 0; right: 12%; left: 12%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 210, 114, .5), transparent); }
.footer-main { gap: 54px; padding-block: 66px 48px; }
.footer-brand img { width: 220px; filter: drop-shadow(0 13px 26px rgba(0, 0, 0, .5)); }
.footer-brand p { color: #8f98aa; line-height: 1.75; }
.footer-column h3 { color: var(--awn-gold); letter-spacing: .08em; }
.footer-column nav { gap: 10px; }
.footer-column a { color: #a6aebe; }
.footer-social a { border-radius: 12px; }
.footer-bottom { min-height: 70px; color: #717b8f; }

.footer-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.footer-trust span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #9ca6b8; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); border-radius: 999px; font-size: 10px; }
.footer-trust i { color: var(--awn-gold); }

.back-to-top { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 16px 38px rgba(0, 0, 0, .38); }

[data-reveal] { opacity: 1; transform: none; }
[data-reveal].is-visible { animation: awn-reveal .65s cubic-bezier(.22, .8, .3, 1) both; }

@keyframes awn-reveal {
    from { opacity: .01; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

/* Warm light mode uses the same premium hierarchy without losing contrast. */
html[data-theme="light"] {
    --awn-bg: #f5f0e7;
    --awn-bg-soft: #ede6da;
    --awn-panel: #fffcf6;
    --awn-panel-2: #f4ecdf;
    --awn-panel-3: #e9dece;
    --awn-text: #201d1a;
    --awn-muted: #716b64;
    --awn-border: rgba(142, 91, 17, .17);
    --awn-border-strong: rgba(170, 106, 13, .42);
    --awn-shadow: 0 24px 65px rgba(76, 53, 25, .13);
    --awn-shadow-soft: 0 15px 42px rgba(76, 53, 25, .1);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 5% 5%, rgba(208, 143, 39, .1), transparent 31rem),
        radial-gradient(circle at 92% 25%, rgba(75, 155, 199, .08), transparent 36rem),
        linear-gradient(180deg, #f8f4ed, #f1eadf 56%, #f8f4ed);
}

html[data-theme="light"] .site-header { color: #27221c; background: rgba(252, 248, 241, .87); border-color: rgba(105, 75, 34, .11); box-shadow: 0 12px 40px rgba(82, 58, 27, .1); }
html[data-theme="light"] .site-topline { color: #e8e3dc; background: linear-gradient(90deg, #1c1711, #100e0b 60%, #171c22); }
html[data-theme="light"] .brand-signature { border-color: rgba(78, 56, 27, .14); }
html[data-theme="light"] .brand-signature strong { color: #2a241d; }
html[data-theme="light"] .primary-nav a { color: #554d43; }
html[data-theme="light"] .primary-nav a i { color: #8e8476; }
html[data-theme="light"] .primary-nav a:hover,
html[data-theme="light"] .primary-nav a.active { color: #402a08; background: linear-gradient(180deg, rgba(224, 151, 39, .14), rgba(224, 151, 39, .06)); border-color: rgba(161, 100, 15, .2); }
html[data-theme="light"] .button-secondary,
html[data-theme="light"] .awn-button-secondary { color: #3e372f !important; background: rgba(255, 253, 248, .78); border-color: rgba(99, 69, 30, .18); box-shadow: 0 9px 24px rgba(76, 53, 25, .06); }
html[data-theme="light"] .button-secondary:hover,
html[data-theme="light"] .awn-button-secondary:hover { color: #4c2e03 !important; background: #fffaf0; border-color: rgba(170, 106, 13, .36); }
html[data-theme="light"] .announcement-bar { color: #554c41; background: linear-gradient(90deg, #eee3d1, #fbf7ef 48%, #e9eee9); }
html[data-theme="light"] .page-hero .hero-pill { color: #554d43; background: rgba(255, 253, 248, .58); border-color: rgba(104, 73, 32, .12); }
html[data-theme="light"] .quick-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .news-card,
html[data-theme="light"] .faction-card,
html[data-theme="light"] .download-card,
html[data-theme="light"] .step-card,
html[data-theme="light"] .article-row { color: #2e2923; background: linear-gradient(145deg, rgba(255, 253, 248, .98), rgba(242, 234, 222, .98)); border-color: rgba(112, 78, 32, .13); box-shadow: var(--awn-shadow-soft); }
html[data-theme="light"] .quick-card:hover { color: #201b15; background: #fffdf8; border-color: rgba(169, 105, 15, .31); }
html[data-theme="light"] .quick-card::after { color: #a89d8d; }
html[data-theme="light"] .quick-card strong,
html[data-theme="light"] .news-content h3,
html[data-theme="light"] .rank-player strong,
html[data-theme="light"] .faction-card h3,
html[data-theme="light"] .download-card h2,
html[data-theme="light"] .step-card h3 { color: #211d18; }
html[data-theme="light"] .page-section.alt { background: rgba(98, 70, 33, .025); border-color: rgba(98, 70, 33, .09); }
html[data-theme="light"] .showcase-frame { border-color: rgba(106, 76, 34, .15); box-shadow: var(--awn-shadow-soft); }
html[data-theme="light"] .experience-chip { color: #5e574e; background: rgba(255, 253, 248, .72); border-color: rgba(105, 74, 32, .13); }
html[data-theme="light"] .experience-chip strong { color: #211d18; }
html[data-theme="light"] .rank-row { border-color: rgba(96, 68, 31, .1); }
html[data-theme="light"] .rank-row:hover { background: rgba(199, 130, 25, .07); }
html[data-theme="light"] .rank-avatar { background: #f1e8db; border-color: rgba(99, 69, 31, .1); }
html[data-theme="light"] .cta-panel { background: radial-gradient(circle at 88% 18%, rgba(235, 161, 44, .15), transparent 22rem), linear-gradient(135deg, #fffaf0, #ece2d4); border-color: rgba(164, 103, 18, .27); }
html[data-theme="light"] .page-hero { background: radial-gradient(circle at 88% 20%, rgba(224, 148, 31, .12), transparent 26rem), linear-gradient(135deg, #f6eddf, #e9dfd0); }
html[data-theme="light"] .page-hero p { color: #6f675e; }
html[data-theme="light"] .download-card-status { color: #6b6359; background: rgba(255, 255, 255, .45); border-color: rgba(92, 64, 27, .12); }
html[data-theme="light"] .download-card-status.available { color: #27754d; background: rgba(40, 168, 102, .08); border-color: rgba(40, 168, 102, .18); }
html[data-theme="light"] .download-meta span { color: #675f56; background: rgba(255, 255, 255, .5); border-color: rgba(95, 66, 29, .11); }
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] select,
html[data-theme="light"] textarea { color: #261f18; background: rgba(255, 254, 250, .94); border-color: rgba(94, 65, 27, .2); }
html[data-theme="light"] .site-footer { background: radial-gradient(circle at 5% 0, rgba(195, 126, 23, .06), transparent 24rem), linear-gradient(180deg, #e9dfd1, #ded2c2); }
html[data-theme="light"] .footer-column h3 { color: #86520d; }
html[data-theme="light"] .footer-column a { color: #625a50; }
html[data-theme="light"] .footer-trust span { color: #625b51; background: rgba(255, 255, 255, .34); border-color: rgba(98, 68, 30, .11); }

@media (max-width: 1180px) {
    .brand-layout { grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; }
    .brand-signature { display: none; }
    .primary-nav a { padding-inline: 9px; font-size: 10px; }
    .primary-nav a i { display: none; }
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr); }
}

@media (max-width: 1040px) {
    .site-header { position: relative; }
    .brand-layout { min-height: 72px; }
    .brand-link img { width: 118px; }
    .primary-nav {
        top: calc(100% + 8px);
        right: 18px;
        left: 18px;
        padding: 10px;
        background: rgba(9, 13, 24, .98);
        border-radius: 17px;
        backdrop-filter: blur(18px);
    }
    .primary-nav a { min-height: 46px; font-size: 11px; }
    .primary-nav a i { display: inline-block; }
    .hero-grid { grid-template-columns: 1fr; min-height: 590px; }
    .hero-art { display: none; }
    .home-content-grid { grid-template-columns: 1fr; }
    .download-grid,
    .step-grid,
    .faction-grid { grid-template-columns: 1fr; }
    .game-showcase { grid-template-columns: 1fr; }
    .showcase-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase-frame.main { min-height: 460px; }
    .experience-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .site-shell,
    .page-shell,
    .site-main > .body,
    .site-main > .box_list_chuyenmuc { width: min(calc(100% - 24px), var(--awn-shell)); }
    .brand-layout { min-height: 66px; gap: 8px; }
    .brand-link { flex: 0 0 96px; width: 96px; }
    .brand-link img { width: 96px; height: 48px; }
    .mobile-menu-toggle { width: 43px; height: 43px; border-radius: 13px; }
    .header-actions { flex: 0 1 174px; min-width: 0; }
    .header-account { width: 100%; min-width: 0; max-width: 174px; padding: 5px 8px; gap: 8px; }
    .header-account img { flex: 0 0 32px; width: 32px; height: 32px; }
    .header-account span { display: grid; min-width: 0; }
    .header-account strong { font-size: 11px; line-height: 1.2; }
    .header-account small { font-size: 9px; line-height: 1.2; }
    .hero { min-height: 560px; }
    .hero-grid { min-height: 560px; padding-block: 50px 100px; }
    .hero h1 { font-size: clamp(52px, 18vw, 72px); }
    .hero-title-accent { font-size: .52em; line-height: .95; }
    .hero-pills { gap: 6px; }
    .hero-pill { font-size: 10px; }
    .hero-metrics { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; gap: 15px 0; }
    .hero-metric { min-width: 0; padding: 0 14px; }
    .hero-metric:nth-child(2) { border-right: 0; }
    .hero-metric:nth-child(3) { padding-left: 0; }
    .quick-grid { margin-top: -50px; }
    .quick-card { min-height: 92px; border-radius: 16px; }
    .quick-icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 13px; }
    .page-section { padding: 66px 0; }
    .page-section.compact { padding: 42px 0; }
    .section-title { font-size: 39px; }
    .news-card { grid-template-rows: 195px 1fr; }
    .showcase-frame.main { min-height: 340px; }
    .showcase-stack { grid-template-columns: 1fr; }
    .showcase-frame { min-height: 230px; }
    .experience-strip { grid-template-columns: 1fr; }
    .faction-card { min-height: 240px; padding: 25px; }
    .faction-card img { right: 22px; transform: scale(2); }
    .cta-panel { padding: 34px 25px; border-radius: 21px; }
    .page-hero { padding: 62px 0 52px; }
    .page-hero h1 { font-size: 48px; }
    .download-card { min-height: 365px; padding: 25px; }
    .footer-main { padding-block: 52px 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-art img,
    .hero-orbit { animation: none !important; }
    [data-reveal] { opacity: 1; transform: none; }
}