/* =========================================================
   Lin2Web — "Aden Ultra" design layer
   Core tokens, surfaces, controls, header, footer and home.
   Loaded LAST by every layout (public / auth / dashboard).
   Surfaces follow the classic L2 UI sprite sheet:
   near-black plate, 1px black outline, bronze bevel,
   inner hairline frame, bronze-gold title bar.
   ========================================================= */

:root {
    /* palette */
    --u-void: #070605;
    --u-ink: #0b0a08;
    --u-ink-2: #12100d;
    --u-plate: #161411;
    --u-plate-2: #1d1a16;
    --u-plate-hi: #26221c;
    --u-bronze: #5e4b2e;
    --u-bronze-hi: #8a6f45;
    --u-gold: #d8b16a;
    --u-gold-hi: #f5dca2;
    --u-gold-glow: rgba(232, 190, 110, .45);
    --u-blood: #b3261e;
    --u-ember: #e8582a;
    --u-ember-glow: rgba(232, 88, 42, .45);
    --u-mana: #6fb5ff;
    --u-life: #7fdc8f;
    --u-text: #ece3d1;
    --u-text-2: #c9bda7;
    --u-muted: #8f8471;
    --u-hair: rgba(216, 177, 106, .16);
    --u-hair-2: rgba(216, 177, 106, .32);

    /* geometry */
    --u-gutter: clamp(16px, 3.2vw, 72px);
    --u-max: 1680px;
    --u-r: 2px;
    --u-ease: cubic-bezier(.2, .7, .2, 1);

    /* surface recipes */
    --u-plate-bg: linear-gradient(180deg, rgba(29, 26, 22, .96), rgba(16, 14, 12, .97));
    --u-plate-shadow:
        0 0 0 1px #000,
        inset 0 0 0 1px rgba(138, 111, 69, .55),
        inset 0 0 0 5px rgba(10, 9, 8, .9),
        inset 0 0 0 6px rgba(216, 177, 106, .1),
        0 24px 60px -12px rgba(0, 0, 0, .7);
    --u-plate-shadow-hover:
        0 0 0 1px #000,
        inset 0 0 0 1px rgba(216, 177, 106, .75),
        inset 0 0 0 5px rgba(10, 9, 8, .9),
        inset 0 0 0 6px rgba(216, 177, 106, .2),
        0 30px 70px -12px rgba(0, 0, 0, .8),
        0 0 40px -6px rgba(232, 190, 110, .18);
    --u-well-bg: linear-gradient(180deg, #0a0908, #11100d);
    --u-well-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9), inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(138, 111, 69, .35);
    --u-titlebar: linear-gradient(180deg, rgba(94, 75, 46, .55), rgba(40, 32, 22, .35) 60%, rgba(22, 19, 15, 0));

    /* legacy theme tokens remapped onto the new palette */
    --gold: var(--u-gold);
    --gold-soft: #b9955a;
    --gold-dim: rgba(216, 177, 106, .35);
    --gold-bright: var(--u-gold-hi);
    --ink: var(--u-ink);
    --ink-2: var(--u-ink-2);
    --panel: rgba(22, 20, 17, .9);
    --panel-border: rgba(138, 111, 69, .5);
    --text: var(--u-text);
    --text-muted: var(--u-muted);
    --radius: var(--u-r);
    --ease: var(--u-ease);
    --line: var(--u-hair);
    --header-h: 78px;
    --shadow-deep: 0 30px 70px rgba(0, 0, 0, .65);
}

@media (min-width: 2200px) {
    :root { --u-max: 1960px; --header-h: 86px; }
}
@media (min-width: 3000px) {
    :root { --u-max: 2360px; }
}

/* ---------- Base ---------- */
html { background: var(--u-void); }
body {
    background: var(--u-ink);
    color: var(--u-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--u-gold); color: var(--u-void); }
.wrap {
    width: min(calc(100% - 2 * var(--u-gutter)), var(--u-max));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--u-bronze) var(--u-void); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--u-void); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #3a2f20, var(--u-bronze), #3a2f20); border: 2px solid var(--u-void); }
::-webkit-scrollbar-thumb:hover { background: var(--u-bronze-hi); }

/* public pages get a living backdrop that fills ultrawide gutters */
body:not(.auth-page) > .wrapper { position: relative; isolation: isolate; }
body:not(.auth-page) > .wrapper::before {
    content: "";
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(232, 150, 70, .08), transparent 70%),
        radial-gradient(60% 50% at 100% 100%, rgba(179, 38, 30, .1), transparent 70%),
        linear-gradient(180deg, rgba(11, 10, 8, .86), rgba(7, 6, 5, .97) 60%),
        url("../img/ultra/bg-town.webp") 50% 0 / cover no-repeat;
    pointer-events: none;
}

/* ---------- Typography helpers ---------- */
.hero h1, .page-hero__title {
    background: linear-gradient(180deg, #fffaf0 0%, #f5dca2 45%, #c8964f 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .9)) drop-shadow(0 10px 30px rgba(0, 0, 0, .75));
}
.section-head h2, .cta h2 {
    font-size: clamp(26px, 2.2vw, 44px);
    letter-spacing: .1em;
    color: var(--u-gold-hi);
    text-shadow: 0 2px 0 #000, 0 0 30px rgba(232, 190, 110, .18);
}
.section-eyebrow, .hero-eyebrow {
    color: var(--u-gold);
    letter-spacing: .32em;
}
.hero-eyebrow {
    padding: 7px 16px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(94, 75, 46, .55) 20%, rgba(94, 75, 46, .55) 80%, transparent);
    box-shadow: none;
    text-shadow: 0 1px 0 #000;
}

/* ornament: diamond + bronze rails */
.ornament::before, .ornament::after {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--u-bronze-hi) 40%, var(--u-gold));
}
.ornament span {
    width: 10px; height: 10px;
    background: linear-gradient(135deg, var(--u-gold-hi), var(--u-bronze));
    border: 1px solid #000;
    box-shadow: 0 0 0 1px var(--u-bronze-hi), 0 0 14px var(--u-gold-glow);
}

/* ---------- Surfaces ---------- */
.panel,
.realm-card.server_item {
    background: var(--u-plate-bg);
    border: 0;
    border-radius: var(--u-r);
    box-shadow: var(--u-plate-shadow);
}
.panel:hover { border-color: transparent; }
.feature:hover, .news-card:hover, .home-social:hover, .realm-card.server_item:hover {
    box-shadow: var(--u-plate-shadow-hover);
}
.panel h3 { color: var(--u-gold-hi); text-shadow: 0 1px 0 #000; }

/* ---------- Buttons: UI_Btn textures stay, glow + motion upgraded ---------- */
.ui-btn, .btn-main, .btn-primary, .login_button button, .login_button input[type=submit] {
    color: #f7ecd2;
    letter-spacing: .1em;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
.ui-btn:hover, .btn-main:hover, .btn-primary:hover, .login_button button:hover {
    color: #fff;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(232, 190, 110, .35)) brightness(1.06);
}
.ui-btn--lg { min-height: 60px; padding: 10px 42px; font-size: 15px; letter-spacing: .16em; }

/* primary call-to-action: ember variant (dragon-archer red) */
.ui-btn--lg:not(.ui-btn--ghost) {
    border-image: none;
    border: 0;
    background:
        linear-gradient(180deg, rgba(255, 220, 160, .35), rgba(255, 220, 160, 0) 45%),
        linear-gradient(180deg, #c8562c, #8e2416 60%, #5c140c);
    box-shadow:
        0 0 0 1px #000,
        inset 0 0 0 1px rgba(255, 196, 140, .55),
        inset 0 -3px 0 rgba(0, 0, 0, .35),
        0 0 0 3px rgba(94, 75, 46, .9),
        0 0 0 4px #000,
        0 10px 30px -6px var(--u-ember-glow);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
    padding-left: 48px; padding-right: 48px;
}
.ui-btn--lg:not(.ui-btn--ghost):hover {
    background:
        linear-gradient(180deg, rgba(255, 230, 180, .45), rgba(255, 220, 160, 0) 50%),
        linear-gradient(180deg, #e06a35, #a72d1a 60%, #6c180e);
    filter: drop-shadow(0 0 18px var(--u-ember-glow));
}
.ui-btn--lg:not(.ui-btn--ghost):active { transform: translateY(1px); filter: brightness(.92); }

/* ---------- Form controls (shared) ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
input[type=tel], input[type=url], select, textarea, .form-control {
    background: var(--u-well-bg);
    border: 0;
    border-radius: var(--u-r);
    box-shadow: var(--u-well-shadow);
    color: var(--u-text);
    caret-color: var(--u-gold);
    transition: box-shadow .2s var(--u-ease);
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus,
input[type=search]:focus, input[type=tel]:focus, input[type=url]:focus, select:focus, textarea:focus, .form-control:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9), inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 0 1px var(--u-gold), 0 0 16px -2px var(--u-gold-glow);
}
input::placeholder, textarea::placeholder { color: #6f6656; }

/* ---------- Dropdowns ---------- */
.ui-dropdown, .nav__langs-stroke, .server-switcher__list, .dropdown-menu, .nav-dropdown-menu {
    background: var(--u-plate-bg);
    border: 0;
    border-radius: var(--u-r);
    box-shadow: var(--u-plate-shadow);
}

/* ---------- Tables ---------- */
table.rating th {
    color: var(--u-gold);
    background: linear-gradient(180deg, rgba(94, 75, 46, .35), rgba(94, 75, 46, .1));
    border-bottom: 1px solid var(--u-bronze);
}
table.rating tbody tr:hover { background: linear-gradient(90deg, rgba(216, 177, 106, .12), rgba(216, 177, 106, .02)); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
    background: linear-gradient(180deg, rgba(7, 6, 5, .92), rgba(11, 10, 8, .78));
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 #000, 0 16px 40px rgba(0, 0, 0, .45);
}
.site-header::after {
    height: 2px;
    background:
        linear-gradient(90deg, transparent, var(--u-bronze) 12%, var(--u-gold) 50%, var(--u-bronze) 88%, transparent) 0 0 / 100% 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(0, 0, 0, .9) 20%, rgba(0, 0, 0, .9) 80%, transparent) 0 1px / 100% 1px no-repeat;
    opacity: 1;
}
.site-header::before {
    width: 11px; height: 11px; bottom: -6px;
    background: linear-gradient(135deg, var(--u-gold-hi), var(--u-bronze));
    border: 1px solid #000;
    box-shadow: 0 0 0 1px var(--u-bronze-hi), 0 0 16px var(--u-gold-glow);
}
.site-header .header-logo img { height: 48px; }
.site-header .top_menu { gap: 4px; }
.site-header .top_menu .nav-link {
    padding: 0 clamp(14px, 1.2vw, 26px);
    color: var(--u-text-2);
    font-size: clamp(13px, .72vw, 15px);
    letter-spacing: .16em;
}
.site-header .top_menu .nav-link::after {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--u-ember) 20%, var(--u-gold-hi) 50%, var(--u-ember) 80%, transparent);
    box-shadow: 0 0 12px var(--u-ember-glow);
}
.site-header .top_menu .nav-link:hover { color: var(--u-gold-hi); text-shadow: 0 0 14px var(--u-gold-glow); }
.site-header .top_menu .active > .nav-link {
    color: var(--u-gold-hi);
    background: radial-gradient(70% 100% at 50% 100%, rgba(232, 88, 42, .22), rgba(216, 177, 106, .06) 55%, transparent 80%);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
    background:
        radial-gradient(50% 120% at 50% 0%, rgba(232, 150, 70, .08), transparent 60%),
        linear-gradient(180deg, rgba(10, 9, 7, .97), #050403);
    border-top: 0;
    box-shadow: 0 -1px 0 #000, inset 0 1px 0 rgba(138, 111, 69, .5);
}
.site-footer h3 { color: var(--u-gold); letter-spacing: .24em; }
.site-footer .menu-footer a { color: var(--u-text-2); }
.site-footer .menu-footer a:hover { color: var(--u-gold-hi); }
.site-footer__grid { gap: clamp(28px, 4vw, 96px); }

/* =========================================================
   Home
   ========================================================= */

/* --- hero: full-bleed town, two champions flanking the title --- */
.home-hero#main.hero {
    min-height: clamp(720px, 100vh, 1240px);
    padding: calc(var(--header-h) + 40px) 0 140px;
    background: var(--u-void);
}
.home-hero__bg {
    inset: 0;
    background:
        url("../img/ultra/hero-elf.webp") left max(0px, calc(50% - 980px)) bottom -2% / auto 94% no-repeat,
        url("../img/ultra/hero-archer.webp") right max(0px, calc(50% - 1000px)) bottom -2% / auto 96% no-repeat,
        url("../img/ultra/bg-town.webp") 50% 35% / cover no-repeat;
    animation: none;
}
.home-hero::before {
    background:
        radial-gradient(38% 55% at 50% 52%, rgba(7, 6, 5, .72), rgba(7, 6, 5, .35) 70%, transparent),
        linear-gradient(180deg, rgba(7, 6, 5, .85) 0%, rgba(7, 6, 5, .25) 18%, rgba(7, 6, 5, .2) 55%, rgba(7, 6, 5, .9) 88%, var(--u-ink) 100%),
        linear-gradient(90deg, rgba(7, 6, 5, .65), transparent 22%, transparent 78%, rgba(7, 6, 5, .65)),
        radial-gradient(60% 40% at 50% 110%, rgba(232, 88, 42, .3), transparent 70%);
}
/* sky grading layer sits between town and champions */
.home-hero__embers::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(40, 18, 8, .35), rgba(20, 10, 6, .1) 50%, transparent);
    mix-blend-mode: multiply;
}
.home-hero__embers i {
    background: radial-gradient(circle, #ffd59a, var(--u-ember) 60%, transparent 70%);
    box-shadow: 0 0 10px var(--u-ember), 0 0 22px rgba(232, 88, 42, .6);
}
.home-hero .wrap { width: min(calc(100% - 2 * var(--u-gutter)), 1100px); }
.home-hero .main-text {
    max-width: none;
    margin: 0 auto;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.home-hero .hero-logo img { max-height: clamp(84px, 8vw, 140px); filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .85)) drop-shadow(0 0 30px rgba(232, 190, 110, .2)); }
.home-hero h1 {
    margin-top: 18px;
    font-size: clamp(42px, 4.4vw, 96px);
    line-height: 1.02;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.home-hero .ornament { width: min(420px, 70%); margin: 26px auto; }
.home-hero .ornament::before { flex: 1; }
.home-hero .main-text p {
    max-width: 640px;
    font-size: clamp(16px, .95vw, 20px);
    color: #efe5d2;
    text-shadow: 0 2px 4px #000, 0 2px 20px rgba(0, 0, 0, .9);
}
.home-hero .btn-wrapper { justify-content: center; gap: 22px; margin-top: 40px; }
.home-hero .btn-wrapper .ui-btn { min-width: 230px; }

/* --- sections --- */
.home .classic-section { padding: clamp(80px, 6vw, 140px) 0; }
.home .classic-section + .classic-section { padding-top: clamp(24px, 2vw, 48px); }
.home .section-head { margin-bottom: clamp(36px, 3vw, 64px); }

/* realms: crest cards scale with width */
.realm-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(20px, 1.6vw, 36px); }
.realm-card.server_item {
    padding: clamp(26px, 2vw, 40px);
    background:
        radial-gradient(80% 90% at 0% 0%, rgba(232, 88, 42, .12), transparent 55%),
        var(--u-plate-bg);
}
.realm-card.server_item::before {
    left: 6px; right: 6px; top: 6px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--u-ember), var(--u-gold-hi), var(--u-ember), transparent);
    opacity: .8;
}
.realm-card .server_name { font-size: clamp(28px, 1.8vw, 40px); color: var(--u-gold-hi); }
.realm-card .server_online b { color: var(--u-life); text-shadow: 0 0 14px rgba(127, 220, 143, .35); }

/* rankings board: framed like an in-game window */
.home-board.panel {
    padding: 0 0 clamp(18px, 1.4vw, 28px);
    background: var(--u-plate-bg);
    overflow: hidden;
}
.home-board .tabs {
    margin: 0;
    padding: 16px 20px 0;
    background: var(--u-titlebar);
    box-shadow: inset 0 -1px 0 var(--u-bronze);
}
.home-board .rating_block { padding: 6px clamp(14px, 1.6vw, 32px) 0; }
.home-board__corner { border-color: var(--u-gold); width: 18px; height: 18px; }
.home-board table.rating { font-size: clamp(14px, .78vw, 16px); }

/* news & community */
.home-news-card.panel { overflow: hidden; }
.home-news-card__media { border-bottom: 1px solid var(--u-bronze); }
.home-community__grid { gap: clamp(16px, 1.4vw, 32px); }

/* CTA: champion leans into the banner */
.home-cta__panel.panel.cta {
    position: relative;
    overflow: hidden;
    min-height: clamp(260px, 18vw, 380px);
    padding: clamp(36px, 3vw, 64px) clamp(28px, 4vw, 80px);
    background:
        linear-gradient(90deg, rgba(11, 10, 8, .96) 0%, rgba(11, 10, 8, .85) 45%, rgba(11, 10, 8, .3) 75%, rgba(11, 10, 8, .6)),
        url("../img/ultra/bg-town.webp") 50% 60% / cover no-repeat;
}
.home-cta__panel::after {
    content: "";
    position: absolute; left: auto; right: clamp(-40px, 2vw, 60px); top: -6%; bottom: auto;
    width: clamp(300px, 26vw, 560px); height: 150%;
    background: url("../img/ultra/hero-orc.webp") 50% 0 / contain no-repeat;
    filter: drop-shadow(-20px 0 40px rgba(0, 0, 0, .8));
    pointer-events: none;
    z-index: 0;
}
.home-cta__text, .home-cta .cta__actions { position: relative; z-index: 1; }
.home-cta .cta__actions { margin-right: clamp(200px, 26vw, 560px); }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
    .home-hero__bg {
        background:
            url("../img/ultra/hero-archer.webp") right -18% bottom -2% / auto 74% no-repeat,
            url("../img/ultra/bg-town.webp") 50% 35% / cover no-repeat;
    }
}
@media (max-width: 960px) {
    .home-hero__bg {
        background: url("../img/ultra/bg-town.webp") 50% 35% / cover no-repeat;
    }
    .home-cta__panel::after { display: none; }
    .home-cta .cta__actions { margin-right: 0; }
    .ui-btn--lg:not(.ui-btn--ghost) { padding-left: 32px; padding-right: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-btn, .panel { transition: none; }
}