/* ==========================================================================
   Rift2 — stilul site-ului
   Culorile vin din logo: auriul crăpat al literelor, violetul vortexului,
   vișiniul bannerelor și piatra întunecată din spate.
   ========================================================================== */

:root {
    --stone-950: #0e0a11;
    --stone-900: #151018;
    --stone-850: #1b151f;
    --stone-800: #231b28;
    --stone-700: #33283a;
    --stone-600: #4a3c50;

    --gold-200: #f1dca6;
    --gold-300: #e3c27e;
    --gold-400: #cfa45c;
    --gold-600: #9c7638;
    --gold-800: #5e4420;

    --violet-300: #c49bff;
    --violet-400: #a571f0;
    --violet-500: #8a4fd9;
    --violet-800: #3a1f5e;

    --blood-400: #c25168;
    --blood-600: #7c2337;
    --blood-800: #4a1420;

    --bone: #ede3d1;
    --ash: #a99d90;
    --jade: #7fcf9f;

    --font-display: "Grenze", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --font-body: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    --wrap: 1160px;
    --notch: 14px;
    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--bone);
    font: 400 1.0625rem/1.6 var(--font-body);
    background:
        var(--noise),
        radial-gradient(1200px 600px at 50% -10%, rgba(58, 31, 94, .45), transparent 70%),
        var(--stone-900);
    background-attachment: fixed;
}

main { flex: 1; position: relative; isolation: isolate; }

/* banda cu imaginea de fundal din partea de sus a paginilor interioare */
.backdrop {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    height: 460px;
    background:
        linear-gradient(180deg, rgba(21, 16, 24, .45), rgba(21, 16, 24, .82) 60%, var(--stone-900)),
        url("../img/page-bg.webp") center 18% / cover no-repeat;
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
    mask-image: linear-gradient(#000 55%, transparent);
    pointer-events: none;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    color: var(--gold-200);
    margin: 0 0 .5em;
    letter-spacing: .005em;
}
h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

a { color: var(--gold-300); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-200); }

:focus-visible { outline: 2px solid var(--violet-300); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ash); }
.hint { color: var(--ash); font-size: .92rem; margin-top: .75rem; }
.empty { color: var(--ash); padding: 1.5rem 0; }

.skip {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: var(--gold-300); color: var(--stone-950); padding: .5rem 1rem;
}
.skip:focus { top: 1rem; }

/* --------------------------------------------------------------- gem
   Rombul violet din logo, folosit ca indicator de stare și monedă. */
.gem {
    display: inline-block;
    width: .55em; height: .55em;
    margin-right: .55em;
    transform: rotate(45deg) translateY(-.08em);
    background: linear-gradient(135deg, var(--violet-300), var(--violet-500));
    box-shadow: 0 0 .6em rgba(165, 113, 240, .8);
    flex: none;
}

/* --------------------------------------------------------------- butoane
   Formă de piatră șlefuită, cu vârfuri ca pietrele din logo. */
.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 3rem;
    padding: .7em 2.1em;
    border: 0;
    background: none;
    font: 600 1.1rem/1 var(--font-display);
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s ease;
}
.btn::before, .btn::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 50%);
}
.btn::before { inset: 0; }
.btn::after { inset: 1.5px; }

.btn--gold { color: #26180a; text-shadow: 0 1px 0 rgba(255, 240, 200, .45); }
.btn--gold::before { background: linear-gradient(180deg, #fff1c8, var(--gold-800)); }
.btn--gold::after { background: linear-gradient(180deg, #f6e4b2 0%, var(--gold-400) 52%, #94702f 100%); }
.btn--gold:hover { color: #26180a; filter: brightness(1.08) saturate(1.05); }

.btn--ghost { color: var(--gold-200); }
.btn--ghost::before { background: linear-gradient(180deg, var(--gold-300), var(--gold-800)); }
.btn--ghost::after { background: rgba(21, 16, 24, .92); transition: background .15s ease; }
.btn--ghost:hover { color: var(--gold-200); }
.btn--ghost:hover::after { background: rgba(58, 31, 94, .9); }

.btn--danger { color: #ffe3e8; }
.btn--danger::before { background: linear-gradient(180deg, #e98a9b, var(--blood-800)); }
.btn--danger::after { background: linear-gradient(180deg, var(--blood-400), var(--blood-600)); }
.btn--danger:hover { color: #fff; filter: brightness(1.1); }

.btn--sm { --notch: 10px; min-height: 2.4rem; padding: .5em 1.5em; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled] { filter: grayscale(.8) brightness(.7); cursor: not-allowed; }

/* buton care arată ca un link */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-300); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.linkbtn:hover { color: var(--gold-200); }
.linkbtn--danger { color: #f29aab; }

/* --------------------------------------------------------------- anunț + bara de sus */
.announce {
    background: linear-gradient(90deg, var(--violet-800), #4a2370, var(--violet-800));
    color: var(--bone);
    text-align: center;
    font-size: .95rem;
    padding: .45rem 1rem;
}
.announce a { color: var(--gold-200); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(18, 13, 21, .88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.topbar::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-600) 20%, var(--gold-300) 50%, var(--gold-600) 80%, transparent);
    opacity: .7;
}
.topbar__inner {
    max-width: calc(var(--wrap) + 120px);
    margin: 0 auto;
    padding: .4rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 4.25rem;
}
.brand { display: block; flex: none; line-height: 0; }
.brand img { width: auto; height: 52px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }

.nav { display: flex; align-items: center; gap: 1.6rem; flex: 1; }
.nav a:not(.btn) { color: var(--bone); text-decoration: none; font-weight: 500; position: relative; padding: .4rem 0; }
.nav a:not(.btn):hover { color: var(--gold-200); }
.nav > a[aria-current="page"], .nav__account > a[aria-current="page"] { color: var(--gold-300); }
.nav > a[aria-current="page"]::after {
    content: "";
    position: absolute; left: 50%; bottom: -.35rem;
    width: 6px; height: 6px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--violet-400);
    box-shadow: 0 0 8px var(--violet-500);
}
.nav__account { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }

.coins {
    display: inline-flex; align-items: center;
    padding: .3rem .85rem !important;
    border: 1px solid var(--gold-800);
    background: var(--stone-850);
    color: var(--gold-200) !important;
    font-variant-numeric: tabular-nums;
}

.nav-toggle { display: none; }

@media (max-width: 960px) {
    .topbar__inner { gap: 1rem; }
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        margin-left: auto;
        width: 2.75rem; height: 2.75rem;
        background: none; border: 1px solid var(--stone-600); color: var(--gold-200); cursor: pointer;
    }
    .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
        display: block; width: 18px; height: 2px; background: currentColor; position: relative;
    }
    .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
    .nav-toggle__bars::before { top: -6px; }
    .nav-toggle__bars::after { top: 6px; }
    .nav {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--stone-900);
        border-bottom: 1px solid var(--gold-800);
        padding: .5rem 1.25rem 1.25rem;
    }
    .nav.is-open { display: flex; }
    .nav > a:not(.btn) { padding: .8rem 0; border-bottom: 1px solid var(--stone-700); }
    .nav > a[aria-current="page"]::after { left: auto; right: .5rem; bottom: 50%; transform: translateY(50%) rotate(45deg); }
    .nav__account { margin: 1rem 0 0; flex-wrap: wrap; }
}

/* --------------------------------------------------------------- mesaje */
.flashes { padding-top: 1.25rem; }
.flash {
    margin: 0 0 .75rem;
    padding: .8rem 1rem;
    background: var(--stone-850);
    border-left: 3px solid var(--violet-400);
}
.flash--success { border-color: var(--jade); }
.flash--error { border-color: var(--blood-400); }
.flash--info { border-color: var(--violet-400); }

/* ==========================================================================
   HOMEPAGE — logo-ul ca piesă centrală, cu lumina Riftului ieșind din vortex
   ========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: min(92vh, 1000px);
    overflow: hidden;
    background: var(--stone-950);
}

/* ---- fundalul: imaginea + efectele (vortex care se rotește, scântei, parallax) */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
}
/* „scena” păstrează proporția imaginii, ca efectele să rămână fix pe vortex la orice ecran */
.hero__scene {
    --fx: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    translate: calc(-1 * var(--fx) + var(--mx, 0px)) calc(-50% + var(--py, 0px) + var(--my, 0px));
    animation: kenburns 46s ease-in-out infinite alternate;
    will-change: transform;
}
@supports (width: 1cqh) {
    .hero__scene { width: max(100cqw, 177.78cqh); height: auto; aspect-ratio: 1792 / 1008; }
}
.hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: bg-in 1.6s ease-out both;
}
/* copia vortexului, rotită încet și luminată peste original */
.hero__vortex {
    position: absolute;
    left: 68.192%;
    top: .198%;
    width: 13.951%;
    height: 24.802%;
    /* masca e img/vortex-mask.png, inclusă direct aici ca să meargă și de pe CDN */
    --vortex-mask: url("data:image/png;base64,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");
    -webkit-mask: var(--vortex-mask) center / 100% 100% no-repeat;
    mask: var(--vortex-mask) center / 100% 100% no-repeat;
    mix-blend-mode: screen;
    opacity: .6;
}
.hero__vortex img {
    display: block;
    width: 100%;
    height: 100%;
    filter: brightness(1.2) saturate(1.15);
    animation: vortex-spin 80s linear infinite;
}
.hero__vortex-glow {
    position: absolute;
    left: 75.17%;
    top: 12.6%;
    width: 17%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(214, 180, 255, .6), rgba(138, 79, 217, .28) 45%, transparent 75%);
    mix-blend-mode: screen;
    animation: vortex-pulse 5.5s ease-in-out infinite;
}
.hero__embers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
}
/* umbrire: lumină violet în spatele logo-ului, text lizibil, vignetă, trecere spre bara vișinie */
.hero__shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46% 40% at 50% 44%, rgba(138, 79, 217, .2), transparent 70%),
        radial-gradient(58% 32% at 50% 79%, rgba(14, 10, 17, .78), transparent 75%),
        radial-gradient(130% 95% at 50% 40%, transparent 42%, rgba(10, 7, 12, .78) 100%),
        linear-gradient(180deg, rgba(14, 10, 17, .6) 0%, rgba(14, 10, 17, .15) 20%, rgba(14, 10, 17, .25) 62%, rgba(21, 16, 24, .95) 100%);
}

@keyframes kenburns { from { scale: 1.06; } to { scale: 1.13; } }
@keyframes bg-in { from { opacity: 0; filter: brightness(.4); } }
@keyframes vortex-spin { to { rotate: -360deg; } }
@keyframes vortex-pulse {
    0%, 100% { opacity: .35; scale: .92; }
    50% { opacity: .85; scale: 1.06; }
}
.hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.25rem 3.5rem;
}
.hero__logo {
    position: relative;
    width: min(760px, 92vw);
    margin: 0 0 .5rem;
    line-height: 0;
}
.hero__logo img {
    position: relative;
    z-index: 1;
    width: 100%;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .65));
    animation: logo-in 1.1s .25s cubic-bezier(.2, .7, .2, 1) both;
}
/* lumina din vortex (vortexul e la ~50% / 66% din logo) */
.hero__logo::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 66%;
    width: 125%;
    aspect-ratio: 1.6;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(196, 155, 255, .7), rgba(138, 79, 217, .4) 35%, rgba(58, 31, 94, .16) 65%, transparent);
    filter: blur(6px);
    animation: rift-open 1.4s cubic-bezier(.2, .7, .2, 1) both, rift-breathe 7s 1.4s ease-in-out infinite;
}
.hero__tagline {
    position: relative;
    z-index: 1;
    margin: 0 0 .6rem;
    font: 600 clamp(1.6rem, 3.4vw, 2.5rem)/1.1 var(--font-display);
    color: var(--gold-200);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .9);
    animation: rise .8s .9s ease-out both;
}
.hero__lede {
    position: relative;
    z-index: 1;
    max-width: 46ch;
    color: #d6cbbb;
    font-size: 1.2rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
    animation: rise .8s 1.05s ease-out both;
}
.hero__cta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    animation: rise .8s 1.2s ease-out both;
}

@keyframes logo-in { from { opacity: 0; transform: scale(.965) translateY(8px); } }
@keyframes rift-open { from { opacity: 0; transform: translate(-50%, -50%) scale(.15); } }
@keyframes rift-breathe { 50% { opacity: .72; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* bara vișinie — bannerul din logo */
.band {
    position: relative;
    z-index: 2;
    background:
        var(--noise),
        linear-gradient(180deg, #5a1828, var(--blood-800) 60%, #33101a);
    border-block: 1px solid var(--gold-600);
    box-shadow: 0 -24px 48px rgba(0, 0, 0, .45);
}
.band::before {
    content: "";
    position: absolute;
    inset: 5px 0;
    border-block: 1px solid rgba(207, 164, 92, .28);
    pointer-events: none;
}
.band__inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.2fr;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 1.3rem 1.25rem;
}
.band__item { padding: .2rem 1.75rem; border-left: 1px solid rgba(207, 164, 92, .25); }
.band__item:first-child { border-left: 0; padding-left: 0; }
.band dt { color: #dcb9a3; font-size: .95rem; margin-bottom: .2rem; }
.band dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.band__big {
    font: 600 2rem/1.1 var(--font-display);
    color: var(--gold-200);
    font-variant-numeric: tabular-nums;
}

.state { display: inline-flex; align-items: center; font: 600 1.6rem/1.1 var(--font-display); color: var(--gold-200); }
.state--up .gem { background: linear-gradient(135deg, #c8f5d8, var(--jade)); box-shadow: 0 0 .7em rgba(127, 207, 159, .8); }
.state--partial .gem { background: linear-gradient(135deg, var(--gold-200), var(--gold-400)); box-shadow: 0 0 .7em rgba(227, 194, 126, .7); }
.state--down .gem { background: var(--blood-400); box-shadow: none; }

.channels { display: inline-flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .9rem; color: #dcb9a3; }
.channel { display: inline-flex; align-items: center; gap: .4rem; }
.channel::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--jade); }
.channel.is-down { color: rgba(220, 185, 163, .55); text-decoration: line-through; }
.channel.is-down::before { background: var(--blood-400); }

/* fapte pe scurt */
.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 3.5rem;
}
.fact { padding: .25rem 1.5rem; border-left: 1px solid var(--stone-700); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact strong { display: block; font: 600 1.35rem/1.2 var(--font-display); color: var(--gold-200); margin-bottom: .2rem; }
.fact span { color: var(--ash); }

.section-head { margin-bottom: 1.75rem; }
.section-head p { max-width: 62ch; color: #cfc4b4; font-size: 1.1rem; }
.section-head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-head--row h2 { margin: 0; }
.more { white-space: nowrap; }

/* Rifturile — trepte care coboară tot mai adânc */
.rifts { margin-top: 5.5rem; }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ladder__step {
    --depth: 0;
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-left: calc(var(--depth) * 2.75rem);
    padding: 1.25rem 1.75rem;
    background: linear-gradient(90deg, rgba(138, 79, 217, calc(.06 + var(--depth) * .07)), rgba(58, 31, 94, calc(var(--depth) * .1)) 70%, transparent);
    border-left: 2px solid rgba(165, 113, 240, calc(.35 + var(--depth) * .2));
}
.ladder__step:nth-child(2) { --depth: 1; }
.ladder__step:nth-child(3) { --depth: 2; }
.ladder__step:nth-child(4) { --depth: 3; }
.ladder__step h3 { margin: 0 0 .25rem; }
.ladder__step p { margin: 0; color: #cfc4b4; }
.ladder__gate { font: 600 2.4rem/1 var(--font-display); color: var(--gold-200); }
.ladder__gate small { display: block; font: 500 1.05rem/1.4 var(--font-body); color: var(--ash); margin-top: .2rem; }
.ladder__step--boss {
    background: linear-gradient(90deg, rgba(124, 35, 55, .55), rgba(58, 31, 94, .5) 60%, transparent);
    border-left-color: var(--violet-300);
    box-shadow: -10px 0 30px -12px rgba(165, 113, 240, .8);
}
.ladder__step--boss .ladder__gate { font-size: 1.9rem; }
.rifts__note { margin-top: 1.5rem; max-width: 70ch; color: var(--ash); }

/* știri + clasament */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 3.5rem;
    margin-top: 5.5rem;
    align-items: start;
}
.split__side {
    background: var(--stone-850);
    border: 1px solid var(--stone-700);
    border-top: 2px solid var(--gold-600);
    padding: 1.5rem 1.5rem 1rem;
}
.split__side h2 { font-size: 1.8rem; }
.side-sub { margin-top: 1.5rem; font-size: 1.25rem; color: var(--gold-300); }

.newslist { display: grid; }
.news-item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--stone-700);
}
.news-item:first-child { padding-top: 0; }
.news-item__date { display: flex; flex-direction: column; align-items: center; color: var(--ash); font-size: .95rem; line-height: 1.2; }
.news-item__day { font: 600 2.3rem/1 var(--font-display); color: var(--gold-300); }
.news-item h3 { margin: .25rem 0 .35rem; font-size: 1.4rem; }
.news-item h3 a { color: var(--bone); text-decoration: none; }
.news-item h3 a:hover { color: var(--gold-200); }
.news-item p { margin: 0; color: var(--ash); }

.tag {
    display: inline-block;
    padding: .05rem .5rem;
    font-size: .85rem;
    font-weight: 500;
    border: 1px solid var(--gold-800);
    color: var(--gold-300);
    background: rgba(94, 68, 32, .2);
}
.tag--update { border-color: var(--violet-800); color: var(--violet-300); background: rgba(58, 31, 94, .35); }
.tag--eveniment { border-color: var(--blood-600); color: #f0a3b2; background: rgba(74, 20, 32, .5); }
.tag--mentenanta { border-color: var(--stone-600); color: var(--ash); background: var(--stone-800); }

.mini-rank { list-style: none; margin: 0; padding: 0; }
.mini-rank li {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--stone-700);
}
.mini-rank li:last-child { border-bottom: 0; }
.mini-rank__name { display: flex; flex-wrap: wrap; align-items: center; column-gap: .1rem; font-weight: 500; }
.mini-rank__name small { width: 100%; color: var(--ash); font-weight: 400; font-size: .88rem; padding-left: 0; }
.mini-rank__lvl { color: var(--gold-300); font-variant-numeric: tabular-nums; }

.rank { font: 600 1.1rem/1 var(--font-display); color: var(--ash); font-variant-numeric: tabular-nums; }
.rank--1 { color: var(--gold-200); font-size: 1.4rem; text-shadow: 0 0 12px rgba(227, 194, 126, .5); }
.rank--2 { color: #d4d6de; font-size: 1.25rem; }
.rank--3 { color: #cf9563; font-size: 1.2rem; }

.empire {
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: .55rem;
    transform: rotate(45deg) translateY(-1px);
    background: var(--stone-600);
}
.empire--1 { background: #d6474f; }
.empire--2 { background: #e2b94b; }
.empire--3 { background: #4f88db; }

/* ce urmează */
.roadmap { margin-top: 5.5rem; }
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 7px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-600), var(--stone-600) 70%, transparent);
}
.timeline li { position: relative; padding-top: 2rem; }
.timeline li::before {
    content: "";
    position: absolute; left: 0; top: 0;
    width: 14px; height: 14px;
    transform: rotate(45deg);
    background: var(--stone-900);
    border: 1px solid var(--stone-600);
}
.timeline li.is-done::before { background: var(--gold-400); border-color: var(--gold-200); }
.timeline li.is-current::before {
    background: var(--violet-400);
    border-color: var(--violet-300);
    box-shadow: 0 0 14px rgba(165, 113, 240, .9);
}
.timeline li.is-current h3::after {
    content: "acum";
    margin-left: .6rem;
    padding: .05rem .45rem;
    vertical-align: .2em;
    border: 1px solid var(--violet-400);
    color: var(--violet-300);
    font: 500 .85rem/1.3 var(--font-body);
}
.timeline h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.timeline p { color: var(--ash); margin: 0; }

/* îndemn final */
.closer {
    margin-top: 6rem;
    padding: 5rem 0 5.5rem;
    text-align: center;
    background:
        radial-gradient(50% 80% at 50% 100%, rgba(138, 79, 217, .3), transparent 70%),
        linear-gradient(180deg, transparent, rgba(74, 20, 32, .35));
    border-top: 1px solid var(--stone-700);
}
.closer h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.closer p { color: #cfc4b4; font-size: 1.15rem; }

/* --------------------------------------------------------------- subsol */
.footer { margin-top: 0; border-top: 1px solid var(--stone-700); background: var(--stone-950); }
.footer__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem 3rem;
    padding-block: 2.5rem;
    align-items: center;
}
.footer__brand { display: flex; align-items: center; gap: 1.25rem; }
.footer__brand img { width: 120px; }
.footer__brand p { margin: 0; font-family: var(--font-display); color: var(--gold-300); font-size: 1.1rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: flex-end; }
.footer__links a { color: var(--ash); text-decoration: none; }
.footer__links a:hover { color: var(--gold-200); }
.footer__legal { grid-column: 1 / -1; margin: 0; color: #7d7268; font-size: .9rem; }

/* ==========================================================================
   PAGINA DE INTRO — login / înregistrare înainte de site, cu X pentru a sări
   ========================================================================== */
.page-intro { background: var(--stone-950); }
.intro {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
}
.hero__shade--intro {
    background:
        radial-gradient(38% 70% at 74% 52%, rgba(14, 10, 17, .62), transparent 75%),
        radial-gradient(42% 46% at 31% 46%, rgba(138, 79, 217, .18), transparent 70%),
        radial-gradient(130% 100% at 50% 45%, transparent 40%, rgba(10, 7, 12, .82) 100%),
        linear-gradient(180deg, rgba(14, 10, 17, .5), rgba(14, 10, 17, .18) 30%, rgba(14, 10, 17, .55));
}
.intro__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    padding: 5rem 1.5rem 3rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26.5rem);
    align-items: center;
    gap: 2.5rem 4.5rem;
}
.intro__brand { text-align: center; }
.intro .intro__logo { width: 100%; max-width: 600px; margin: 0 auto .75rem; }
.intro__status {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem 1.75rem;
    margin: 1rem 0 0;
    color: #dcb9a3;
    animation: rise .8s 1.05s ease-out both;
}
.intro__status .state { font-size: 1.2rem; }

.intro__panel {
    background: rgba(21, 16, 24, .86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--stone-700);
    border-top: 2px solid var(--gold-600);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4);
    padding: 1.5rem 2rem 1.75rem;
    animation: rise .9s .7s ease-out both;
}
.intro__panel .panel__lede { margin-bottom: 1.1rem; }
.intro__panel .form .field { margin-bottom: .9rem; }
.intro__tabs { display: flex; border-bottom: 1px solid var(--stone-700); margin-bottom: 1.1rem; }
.intro__tabs a {
    flex: 1;
    text-align: center;
    padding: .4rem 0 .7rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font: 600 1.35rem/1.1 var(--font-display);
    color: var(--ash);
    text-decoration: none;
}
.intro__tabs a:hover { color: var(--bone); }
.intro__tabs a[aria-selected="true"] { color: var(--gold-200); border-bottom-color: var(--gold-400); }

/* butonul X: o piatră în formă de romb, ca pietrele din logo */
.intro__close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #dcb9a3;
    text-decoration: none;
    animation: rise .8s 1.2s ease-out both;
}
.intro__close:hover { color: var(--gold-200); }
.intro__x { position: relative; display: grid; place-items: center; width: 48px; height: 48px; }
.intro__x::before {
    content: "";
    position: absolute;
    inset: 8px;
    transform: rotate(45deg);
    border: 1px solid var(--gold-400);
    background: rgba(21, 16, 24, .75);
    box-shadow: 0 0 16px rgba(138, 79, 217, .55), inset 0 0 0 3px rgba(21, 16, 24, .75), inset 0 0 0 4px rgba(207, 164, 92, .35);
    transition: background .15s ease, box-shadow .15s ease;
}
.intro__x::after {
    content: "";
    position: relative;
    width: 14px;
    height: 14px;
    background:
        linear-gradient(45deg, transparent 44%, var(--gold-200) 44%, var(--gold-200) 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, var(--gold-200) 44%, var(--gold-200) 56%, transparent 56%);
}
.intro__close:hover .intro__x::before { background: rgba(58, 31, 94, .95); box-shadow: 0 0 22px rgba(165, 113, 240, .85), inset 0 0 0 3px rgba(58, 31, 94, .95), inset 0 0 0 4px rgba(227, 194, 126, .5); }

@media (max-width: 960px) {
    .intro__inner { grid-template-columns: minmax(0, 32rem); justify-content: center; padding-top: 4.5rem; gap: 1.75rem; }
    .intro .intro__logo { max-width: 420px; }
}
@media (max-width: 640px) {
    .intro__inner { padding: 4rem 1rem 2rem; }
    .intro .intro__logo { max-width: 300px; margin-bottom: .25rem; }
    .intro .hero__tagline { font-size: 1.45rem; }
    .intro__panel { padding: 1.25rem 1.25rem 1.5rem; }
    .intro__close { top: .75rem; right: .75rem; }
    .intro__close-label { display: none; }
}

/* ==========================================================================
   PAGINI INTERIOARE
   ========================================================================== */
.page { padding-block: 3rem 4.5rem; }
.page-head { margin-bottom: 2rem; }
.page-head > p { max-width: 64ch; color: #cfc4b4; font-size: 1.1rem; }
.crumbs { margin: 0 0 .5rem; font-size: .95rem; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; color: var(--ash); font-size: .95rem; }

.tabs { display: flex; gap: 1.75rem; border-bottom: 1px solid var(--stone-700); margin-top: 1rem; }
.tabs a { padding: .6rem 0; color: var(--ash); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--bone); }
.tabs a[aria-current="page"] { color: var(--gold-200); border-bottom-color: var(--gold-400); }

/* formulare */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="url"], input[type="datetime-local"], select, textarea {
    width: 100%;
    padding: .7rem .85rem;
    font: inherit;
    color: var(--bone);
    background: var(--stone-950);
    border: 1px solid var(--stone-600);
    border-radius: 2px;
}
textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, var(--gold-300) 50%), linear-gradient(135deg, var(--gold-300) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 52%, calc(100% - .8rem) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 3px rgba(138, 79, 217, .3); }
input[aria-invalid="true"] { border-color: var(--blood-400); }

.form .field { display: grid; align-content: start; gap: .35rem; margin-bottom: 1.1rem; }
.field > span { font-weight: 500; }
.field small { color: var(--ash); font-size: .88rem; }
.field__error { color: #f29aab; font-size: .92rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field--captcha input { max-width: 8rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; margin: .25rem 0 1.25rem; }
.check input { margin-top: .35rem; accent-color: var(--violet-500); width: 1.05rem; height: 1.05rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.authpage { display: grid; place-items: start center; }
.panel {
    background: var(--stone-850);
    border: 1px solid var(--stone-700);
    border-top: 2px solid var(--gold-600);
    padding: 2rem;
}
.panel--form { width: 100%; max-width: 30rem; padding: 2.25rem 2.25rem 1.75rem; }
.panel--form h1 { font-size: 2.3rem; margin-bottom: .2rem; }
.panel__lede { color: var(--ash); margin-bottom: 1.5rem; }
.panel__foot { margin: 1.25rem 0 0; color: var(--ash); text-align: center; }

.filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; align-items: center; }
.filters select { width: auto; min-width: 11rem; }
.filters__search { flex: 1; min-width: 12rem; max-width: 22rem; }

/* tabele */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th {
    text-align: left;
    font-weight: 500;
    font-size: .9rem;
    color: var(--ash);
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--gold-800);
    white-space: nowrap;
}
.table td { padding: .7rem .85rem; border-bottom: 1px solid var(--stone-700); vertical-align: middle; }
.table tbody tr:hover { background: rgba(138, 79, 217, .06); }
.table .num { text-align: right; white-space: nowrap; }
.table .strong { font-weight: 700; color: var(--bone); }
.table--rank td:first-child { width: 3.5rem; }

.pager { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.75rem; }
.pager a, .pager span {
    min-width: 2.4rem; padding: .4rem .7rem; text-align: center;
    border: 1px solid var(--stone-700); color: var(--bone); text-decoration: none;
}
.pager a:hover { border-color: var(--gold-600); color: var(--gold-200); }
.pager [aria-current="page"] { border-color: var(--gold-400); color: var(--gold-200); background: rgba(94, 68, 32, .25); }

/* articole */
.article { max-width: 52rem; }
.article__cover { width: 100%; max-height: 26rem; object-fit: cover; border: 1px solid var(--stone-700); margin-bottom: 2rem; display: block; }
.prose { font-size: 1.12rem; max-width: 68ch; }
.prose h2 { font-size: 1.8rem; margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1em; }
.prose li { margin-bottom: .35rem; }
.prose ul li::marker { color: var(--violet-400); }
.prose blockquote { margin: 1.5rem 0; padding: .5rem 0 .5rem 1.25rem; border-left: 2px solid var(--violet-400); color: #d6cbbb; }
.prose hr { border: 0; height: 1px; background: var(--stone-700); margin: 2rem 0; }
.prose img { display: block; margin: 1.5rem 0; border: 1px solid var(--stone-700); }
.article__more { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--stone-700); }
.article__more h2 { font-size: 1.5rem; }
.article__more ul { list-style: none; padding: 0; margin: 0; }
.article__more li { padding: .4rem 0; display: flex; justify-content: space-between; gap: 1rem; }
.article__more li span { color: var(--ash); font-size: .92rem; white-space: nowrap; }

/* descărcare */
.downloads { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; gap: .75rem; }
.download {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--stone-850);
    border: 1px solid var(--stone-700);
}
.download h2 { font-size: 1.4rem; margin: 0; }
.download p { margin: .2rem 0 0; color: var(--ash); }
.download__size { color: var(--ash); font-variant-numeric: tabular-nums; }
.reqs h2 { font-size: 1.6rem; }
.reqs dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0; }
.reqs dt { color: var(--ash); font-size: .92rem; }
.reqs dd { margin: .15rem 0 0; font-weight: 500; }

/* erori */
.errorpage { text-align: center; max-width: 36rem; }
.errorpage__code {
    margin: 0;
    font: 700 7rem/1 var(--font-display);
    color: var(--gold-300);
    text-shadow: 0 0 40px rgba(165, 113, 240, .7);
}

/* ==========================================================================
   ITEM SHOP
   ========================================================================== */
.shop { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.shop__cats { position: sticky; top: 6rem; }
.shop__cats ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--stone-700); }
.shop__cats a {
    display: block;
    padding: .55rem 1rem;
    color: var(--ash);
    text-decoration: none;
    margin-left: -1px;
    border-left: 2px solid transparent;
}
.shop__cats a:hover { color: var(--bone); }
.shop__cats a[aria-current="page"] { color: var(--gold-200); border-left-color: var(--violet-400); background: linear-gradient(90deg, rgba(138, 79, 217, .14), transparent); }
.shop__wallet {
    margin-bottom: 1.5rem;
    padding: 1rem 1.1rem;
    background: var(--stone-850);
    border: 1px solid var(--gold-800);
}
.shop__wallet span { display: block; color: var(--ash); font-size: .9rem; }
.shop__wallet strong { display: flex; align-items: center; font: 600 1.6rem/1.2 var(--font-display); color: var(--gold-200); }

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.item {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--stone-800), var(--stone-850));
    border: 1px solid var(--stone-700);
    padding: 1.25rem;
    position: relative;
}
.item--featured { border-color: var(--gold-800); box-shadow: inset 0 1px 0 rgba(241, 220, 166, .12); }
.item__icon {
    width: 4.5rem; height: 4.5rem;
    display: grid; place-items: center;
    margin-bottom: .9rem;
    background: radial-gradient(circle, rgba(138, 79, 217, .3), rgba(14, 10, 17, .9) 70%);
    border: 1px solid var(--stone-600);
}
.item__icon img { max-width: 64px; max-height: 64px; image-rendering: pixelated; }
.item__icon .gem { width: 1.2rem; height: 1.2rem; margin: 0; }
.item h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.item__count { color: var(--ash); font-weight: 400; font-family: var(--font-body); font-size: 1rem; }
.item p { color: var(--ash); font-size: .98rem; flex: 1; }
.item__badge { position: absolute; top: 1rem; right: 1rem; }
.item__price { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .9rem; }
.item__price strong { font: 600 1.45rem/1 var(--font-display); color: var(--gold-200); }
.item__price s { color: var(--ash); }
.item form { display: flex; gap: .5rem; align-items: center; }
.item form select { width: 4.5rem; padding: .5rem 1.75rem .5rem .6rem; }
.item form .btn { flex: 1; }

/* ==========================================================================
   PANOU DE CONT
   ========================================================================== */
.account { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
.account__side { display: grid; gap: 1.25rem; }
.account .panel h2 { font-size: 1.5rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; margin: 0; }
.kv dt { color: var(--ash); }
.kv dd { margin: 0; font-weight: 500; }
.secret { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .12em; color: var(--gold-200); }
.chars { display: grid; gap: .75rem; }
.char {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--stone-850);
    border: 1px solid var(--stone-700);
}
.char h3 { margin: 0; font-size: 1.3rem; }
.char p { margin: 0; color: var(--ash); grid-column: 1; }
.char form { grid-column: 2; grid-row: 1 / span 2; }
.notice { padding: 1.25rem 1.4rem; border: 1px solid var(--gold-600); background: rgba(94, 68, 32, .2); margin-bottom: 1.5rem; }
.notice p:last-child { margin: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
    .band__inner { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
    .band__item:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
    .facts { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; }
    .fact:nth-child(3) { border-left: 0; padding-left: 0; }
    .split, .account { grid-template-columns: 1fr; }
    .timeline { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
    .timeline::before { display: none; }
    .shop { grid-template-columns: 1fr; }
    .shop__cats { position: static; }
    .shop__cats ul { display: flex; flex-wrap: wrap; border: 0; gap: .4rem; }
    .shop__cats a { border: 1px solid var(--stone-700); margin: 0; }
    .shop__cats a[aria-current="page"] { border-color: var(--violet-400); }
    .reqs dl { grid-template-columns: 1fr 1fr; }
    .footer__inner { grid-template-columns: 1fr; }
    .footer__links { justify-content: flex-start; }
}

@media (max-width: 640px) {
    body { font-size: 1rem; }
    .hero__scene { --fx: 66%; }
    .hero__shade { background-color: rgba(14, 10, 17, .42); }
    .hero__lede { text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 18px rgba(0, 0, 0, .9); }
    .backdrop { height: 340px; }
    .brand img { height: 42px; }
    .hero { min-height: auto; }
    .hero__inner { padding-top: 1.5rem; }
    .hero__lede { font-size: 1.05rem; }
    .band__inner { grid-template-columns: 1fr; }
    .band__item { border-left: 0; padding: 0; }
    .band__big { font-size: 1.6rem; }
    .facts { grid-template-columns: 1fr; }
    .fact { border-left: 0; padding: 0; }
    .ladder__step { grid-template-columns: 1fr; gap: .5rem; margin-left: calc(var(--depth) * .75rem); padding: 1rem 1.1rem; }
    .ladder__gate { font-size: 2rem; }
    .ladder__gate small { display: inline; margin-left: .5rem; }
    .timeline { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .panel--form { padding: 1.5rem; }
    .download { grid-template-columns: 1fr; gap: .75rem; }
    .hide-sm { display: none; }
    .news-item { grid-template-columns: 3.25rem 1fr; gap: .9rem; }
    .news-item__day { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}